H5打開跳轉小程序的心路(lù)曆程

發表時間：2021-3-26

發布人：葵宇科技

浏覽次數：41

前言：公司的短(duǎn)信營銷，想要發送短(duǎn)信給用戶，用戶打開短(duǎn)信中(zhōng)的網址後，進入我們公司自己的小程序項目。

首先呢(ne)在小程序的 “拓展插件” 裡面有一個(gè) “營銷工具” ，可(kě)以通(tōng)過配置， 無需開發 便能實現我的需求，還有我們不想用騰訊的短(duǎn)信服務（我們專一，哈哈，忠于自己的短(duǎn)信平台

~~哈哈哈哈其實是不想花(huā)錢~~

），所以借用了一下(xià)網址而已，用我們自己的平台發。

營銷活動(dòng)目前僅支持

1.境内非個(gè)人主體注冊的小程序開通(tōng)使用；

2.雲開發模式下(xià)可(kě)免鑒權下(xià)發支持跳轉到相應小程序的短(duǎn)信；

3.短(duǎn)信内容包含支持在微信内或微信外打開鍊接，用戶點擊鍊接可(kě)一鍵跳轉至相應小程序。

鍊接的網頁在外部浏覽器(qì)是通(tōng)過 URL Scheme 的方式來拉起微信打開主體小程序。

教程

雲開發短(duǎn)信跳小程序教程（無代碼版）

雲開發短(duǎn)信跳小程序教程（自定義開發代碼版）

于是抱着省錢的心态，一直白票這個(gè)功能。沒有開發，達到效果，沒有比這更爽的啦~~~~

好日子(zǐ)沒過多久，因為是雲開發免鑒權模式，這個(gè)工具内部實現了一些雲函數的調用，以及托管功能，我們雲開發的免費額度用完了，提醒已欠費。。。欠費。。。費。。。。。

好吧，那還是自己開發吧，逃不過的（認命），我是在vue下(xià)開發的。跳轉分為兩種環境，手機浏覽器(qì)環境和(hé)微信環境。

在代碼裡面分别操作就行了。

手機浏覽器(qì)環境

鍊接的網頁在外部浏覽器(qì)是通(tōng)過 URL Scheme 的方式 來拉起微信打開主體小程序，小程序的 URL Scheme 如(rú)果借助于雲開發的話，是 免鑒權 ，直接調用就可(kě)以獲取的，在這不做過多的贅述，感興趣的小夥伴自己去查吧，我繼續。

那我怎麼手動(dòng)拿到我的小程序的 URL Scheme 呢(ne)，需要在微信公衆平台右上角“工具”—“生成URL Scheme”

裡面具體需要路(lù)徑以及參數，這樣就是可(kě)以打開的小程序的路(lù)徑及參數了。

把生成的URL Scheme存起來，直接放在按鈕的點擊事件裡。

openWeapp(){
        location.href = https://www.wxapp-union.com/'weixin://dl/business/?t=aaaaaa'
    }

微信環境

跳轉小程序的開放标簽 — <wx-open-launch-weapp>

在template部分使用,使用的方法為官方寫法代碼入下(xià)：

<wx-open-launch-weapp   
        id="launch-btn"     
        username="gh_xxxxxxxxxx"          
        path="/pages/pages/index.html"
        @launch="handleLaunchFn"
        @error="handleErrorFn"
    >
    <script type="text/wxtag-template">      
        <button class="open">跳轉小程序</button>      
    </script> 
    </wx-open-launch-weapp>

在對應文(wén)件引入對應的包。

import wx from 'jweixin-1.6.0';

在created/beforeCreated中(zhōng)調用獲取你(nǐ)們微信公衆号基本信息的參數，在回調用wx.config，我們項目中(zhōng)有微信的鑒權，所以這一步進入頁面的時候，就直接加載微信環境了。

如(rú)果按鈕不顯示的話，很有可(kě)能是調用 wx.config 時出了問(wèn)題。

如(rú)果想改按鈕的樣式的話需要在script裡面放style标簽實現，但是這個(gè)樣式很嚴格空格多一個(gè)都有可(kě)能出不來，也不能兼容一些樣式。比如(rú) position 就不可(kě)以。

<script type="text/wxtag-template">  
        <style>
            .open{ 
                background-color:#04BE02;
                color: #fff;
                width: 180px;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                border-width: 0px;}</style>      
        <button class="open">跳轉小程序</button>      
    </script>

如(rú)果你(nǐ)想讓按鈕浮動(dòng)起來，需要在最外側加一個(gè)div，去控制div的浮動(dòng)距離(lí)

position: fixed;bottom: .8rem;right: 28vw;

<div style="position: fixed;bottom: .8rem;right: 28vw;">
        <wx-open-launch-weapp>
            <script type="text/wxtag-template">       
                <button class="open">跳轉小程序</button>      
            </script> 
        </wx-open-launch-weapp>
    </div>