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

首先呢在小程序的 “拓展插件” 里面有一個 “營銷工具” ，可以通過配置， 無需開發(fā) 便能實現(xiàn)我的需求，還有我們不想用騰訊的短信服務（我們專一，哈哈，忠于自己的短信平臺

），所以借用了一下網(wǎng)址而已，用我們自己的平臺發(fā)。

營銷活動目前僅支持

1.境內(nèi)非個人主體注冊的小程序開通使用；

2.云開發(fā)模式下可免鑒權(quán)下發(fā)支持跳轉(zhuǎn)到相應小程序的短信；

3.短信內(nèi)容包含支持在微信內(nèi)或微信外打開鏈接，用戶點擊鏈接可一鍵跳轉(zhuǎn)至相應小程序。

鏈接的網(wǎng)頁在外部瀏覽器是通過 URL Scheme 的方式來拉起微信打開主體小程序。

教程

于是抱著省錢的心態(tài)，一直白票這個功能。沒有開發(fā)，達到效果，沒有比這更爽的啦~~~~

好日子沒過多久，因為是云開發(fā)免鑒權(quán)模式，這個工具內(nèi)部實現(xiàn)了一些云函數(shù)的調(diào)用，以及托管功能，我們云開發(fā)的免費額度用完了，提醒已欠費。。。欠費。。。費。。。。。

好吧，那還是自己開發(fā)吧，逃不過的（認命），我是在vue下開發(fā)的。跳轉(zhuǎn)分為兩種環(huán)境，手機瀏覽器環(huán)境和微信環(huán)境。

在代碼里面分別操作就行了。

手機瀏覽器環(huán)境

鏈接的網(wǎng)頁在外部瀏覽器是通過 URL Scheme 的方式 來拉起微信打開主體小程序，小程序的 URL Scheme 如果借助于云開發(fā)的話，是 免鑒權(quán) ，直接調(diào)用就可以獲取的，在這不做過多的贅述，感興趣的小伙伴自己去查吧，我繼續(xù)。

那我怎么手動拿到我的小程序的 URL Scheme 呢，需要在 微信公眾平臺 右上角“工具”—“生成URL Scheme”

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

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

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

微信環(huán)境

跳轉(zhuǎn)小程序的開放標簽 — <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">跳轉(zhuǎn)小程序</button>      
    </script> 
    </wx-open-launch-weapp>

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

import wx from 'jweixin-1.6.0';

在created/beforeCreated中調(diào)用獲取你們微信公眾號基本信息的參數(shù)，在回調(diào)用wx.config，我們項目中有微信的鑒權(quán)，所以這一步進入頁面的時候，就直接加載微信環(huán)境了。

如果按鈕不顯示的話，很有可能是調(diào)用 wx.config 時出了問題。

如果想改按鈕的樣式的話需要在script里面放style標簽實現(xiàn)，但是這個樣式很嚴格空格多一個都有可能出不來，也不能兼容一些樣式。比如 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">跳轉(zhuǎn)小程序</button>      
    </script>

如果你想讓按鈕浮動起來，需要在最外側(cè)加一個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">跳轉(zhuǎn)小程序</button>      
            </script> 
        </wx-open-launch-weapp>
    </div>

注意事項

• 使用該功能必須是 非個人主體 認證的小程序。
• 基于wxjssdk1.6.0+版本。
• 按量計費的云開發(fā)環(huán)境才可以開通靜態(tài)網(wǎng)站托管。
• vue 下為了避免編譯錯誤， template標簽 需要改成 script標簽 。
• <wx-open-launch-weapp> 使用的是 username 屬性(小程序的原始id)而不是 appId 。
• path 屬性，所聲明的頁面路徑必須添加 .html 后綴，如 pages/home/index.html 。
• 目前靜態(tài)網(wǎng)站僅支持h5跳轉(zhuǎn)小程序開放標簽權(quán)限，其余 jssdk 接口暫不支持。

以上便是我開發(fā)調(diào)試的整個經(jīng)歷，希望可以幫到你。