H5打開跳轉小程序的心路歷程

前言：公司的短信營銷，想要發送短信給用戶，用戶打開短信中的網址後，進入咱們公司本身的小程序項目。

首先呢在小程序的 「拓展插件」 裏面有一個 「營銷工具」 ，能夠經過配置，無需開發便能實現個人需求，還有咱們不想用騰訊的短信服務（咱們專注，哈哈，忠於本身的短信平臺 哈哈哈哈實際上是不想花錢），因此借用了一下網址而已，用咱們本身的平臺發。

營銷活動目前僅支持
1.境內非我的主體註冊的小程序開通使用；
2.雲開發模式下可免鑑權下發支持跳轉到相應小程序的短信；
3.短信內容包含支持在微信內或微信外打開連接，用戶點擊連接可一鍵跳轉至相應小程序。

連接的網頁在外部瀏覽器是經過 URL Scheme 的方式來拉起微信打開主體小程序。

教程

雲開發短信跳小程序教程（無代碼版）
雲開發短信跳小程序教程（自定義開發代碼版）

因而抱着省錢的心態，一直白票這個功能。沒有開發，達到效果，沒有比這更爽的啦~~~~

好日子沒過多久，由於是雲開發免鑑權模式，這個工具內部實現了一些雲函數的調用，以及託管功能，咱們雲開發的免費額度用完了，提醒已欠費。。。欠費。。。費。。。。。

---

好吧，那仍是本身開發吧，逃不過的（認命），我是在vue下開發的。跳轉分爲兩種環境，手機瀏覽器環境和微信環境。
在代碼裏面分別操做就好了。

手機瀏覽器環境

連接的網頁在外部瀏覽器是經過 URL Scheme 的方式來拉起微信打開主體小程序，小程序的 URL Scheme 若是藉助於雲開發的話，是免鑑權，直接調用就能夠獲取的，在這不作過多的贅述，感興趣的小夥伴本身去查吧，我繼續。

那我怎麼手動拿到個人小程序的URL Scheme呢，須要在微信公衆平臺右上角「工具」—「生成URL Scheme」

裏面具體須要路徑以及參數，這樣就是能夠打開的小程序的路徑及參數了。

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

openWeapp(){
        location.href = 'weixin://dl/business/?t=aaaaaa'
    }

微信環境

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

在template部分使用,使用的方法爲官方寫法代碼入下：

<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>

在對應文件引入對應的包。

import wx from 'jweixin-1.6.0';

在created/beforeCreated中調用獲取大家微信公衆號基本信息的參數，在回調用wx.config，咱們項目中有微信的鑑權，因此這一步進入頁面的時候，就直接加載微信環境了。
若是按鈕不顯示的話，頗有多是調用wx.config時出了問題。

若是想改按鈕的樣式的話須要在script裏面放style標籤實現，可是這個樣式很嚴格空格多一個都有可能出不來，也不能兼容一些樣式。好比position就不能夠。

<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>

若是你想讓按鈕浮動起來，須要在最外側加一個div，去控制div的浮動距離
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>

注意事項

• 使用該功能必須是非我的主體認證的小程序。
• 基於wxjssdk1.6.0+版本。
• 按量計費的雲開發環境才能夠開通靜態網站託管。
• vue下爲了不編譯錯誤，template標籤須要改爲script標籤。
• <wx-open-launch-weapp>使用的是username屬性(小程序的原始id)而不是appId。
• path屬性，所聲明的頁面路徑必須添加.html後綴，如pages/home/index.html。
• 目前靜態網站僅支持h5跳轉小程序開放標籤權限，其他jssdk接口暫不支持。

---

以上即是我開發調試的整個經歷，但願能夠幫到你。