目的：通過(guò)發(fā)送短信召回流失用戶。

官方文檔地址

• https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

步驟一

• 該API我們主要用到的配置如下：
• **jump_wxa：**跳轉(zhuǎn)到的目標(biāo)小程序信息。該對(duì)象內(nèi)包含兩個(gè)字段。
• path：通過(guò)scheme碼進(jìn)入的小程序頁(yè)面路徑，必須是已經(jīng)發(fā)布的小程序存在的頁(yè)面，不可攜帶query
• query：通過(guò)scheme碼進(jìn)入小程序時(shí)的query。

步驟二

• 需要注意的是，query必傳，然而如果我們需要跳轉(zhuǎn)的頁(yè)面不需要參數(shù)，也需要配置上query，默認(rèn)我們填寫的是from=sms, 用于統(tǒng)計(jì)是從瀏覽器渠道來(lái)的。

步驟三

• 與后端約定access_token 通過(guò)前端傳遞appKey進(jìn)行區(qū)分，傳哪個(gè)微信小程序的appKey 就生成對(duì)應(yīng)小程序的access_token。

步驟四

• 支持設(shè)置scheme的過(guò)期時(shí)間，默認(rèn)永久，我們的應(yīng)用場(chǎng)景很少，暫不詳說(shuō)。

步驟五

• 代碼里操作如下，由后端聚合參數(shù)信息。

let postData = {
  appKey: 'QTSHE_MINI_APP',
  path: 'pages/partdetails/partdetails',
  query: 'partJobId=123456' || 'a=1'
}
this.$axios.post('/qtsWeChat/wechat/qrCode/scheme/info', postData).then((res) => {
  if (res.success) {
    const url = res.data.openlink
    // 將scheme轉(zhuǎn)為我們平臺(tái)的短鏈接，否則在安卓手機(jī)上無(wú)法打開微信小程序，會(huì)默認(rèn)打開瀏覽器搜索。
    this.$axios.get(`/misc/shortLink/conversion`, {url}).then((res) => {
      if (res.success) {
        this.shortLink = res.data
      }
    })
  } else {
    this.$Message.error('獲取失敗，請(qǐng)稍后重試')
  }
}).catch((err) => {
  console.log(err)
})

注意點(diǎn)

• 該鏈接只支持在外部瀏覽器打開，微信內(nèi)部瀏覽器訪問是無(wú)法打開的，微信內(nèi)部瀏覽器打開需要使用微信的開放標(biāo)簽，下面詳說(shuō)。

微信內(nèi)部瀏覽器喚起小程序

官方文檔地址

• https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

步驟一

• 首先需要登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”，該域名我們配置的是https://m.qtshe.com, 所以導(dǎo)致我們調(diào)試的時(shí)候需要每次都發(fā)布到線上看效果（大坑）。

步驟二

• 在需要調(diào)用JS接口的頁(yè)面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js，1.6.0版本內(nèi)才增加了上述標(biāo)簽，低于該版本的都無(wú)法顯示。

步驟三

• 通過(guò)config接口注入權(quán)限驗(yàn)證配置并申請(qǐng)所需開放標(biāo)簽, 在wx.config里增加openTagList標(biāo)簽，內(nèi)置兩個(gè)開放標(biāo)簽 wx-open-launch-app 微信h5喚起本地已經(jīng)安裝的app，以及 wx-open-launch-weapp 微信h5喚起小程序，操作如下：

window.wx.config({
  debug: false,
  appId: window.g_info.wx_appid,
  timestamp: data.data.timestamp,
  nonceStr: data.data.nonceStr,
  signature: data.data.signature,
  jsApiList: [],
  openTagList: [
    'wx-open-launch-app',
    'wx-open-launch-weapp'
  ]
})

注意點(diǎn)

• 對(duì)于Vue等視圖框架，為了避免template標(biāo)簽沖突的問題，可使用<script type="text/wxtag-template"></script>進(jìn)行代替，來(lái)包裹插槽模版和樣式。
• 頁(yè)面中與布局和定位相關(guān)的樣式，如position: fixed; top -100;等，盡量不要寫在插槽模版的節(jié)點(diǎn)中，請(qǐng)聲明在標(biāo)簽或其父節(jié)點(diǎn)上；
• 對(duì)于有CSP要求的頁(yè)面，需要添加白名單frame-src https://*.qq.com webcompt:，才能在頁(yè)面中正常使用開放標(biāo)簽。
• Vue里操作代碼如下，如果需要寫樣式，最好是外部包一個(gè)div進(jìn)行樣式編寫，內(nèi)部的內(nèi)容寬高100%即可，調(diào)試樣式可使用微信開發(fā)者工具的網(wǎng)頁(yè)模式：

<style>
          img {
            width: 100%;
            display: block;
          }

<img src="

https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" />

擴(kuò)展

// 各個(gè)端口跳轉(zhuǎn)兼職詳情頁(yè)
jumpToPartJobDetail(partJobId) {
  util.isAliMiniApp().then((res) => {
    if (res) { // 如果是在支付寶小程序環(huán)境則打開小程序詳情頁(yè)
      my.navigateTo({
        url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
      })
    } else {
      // 如果是在客戶端app環(huán)境，則打開原生崗位詳情頁(yè)
      if (util.isAndroidApp() || util.isIosApp()) {
        jsBridge.evokeNormalPartJobDetailPage(partJobId)
      } else if (util.isMiniApp()) { // 微信小程序里則打開微信小程序崗位詳情
        wx.miniProgram.navigateTo({
          url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
        })
      } else if (util.isMobile()) {
        // 如果是在手機(jī)自帶瀏覽器或者除微信外的app瀏覽器，統(tǒng)一打開支付寶小程序
        let url = `alipays://platformapi/startapp?appId=2018082861168647&page=pages/partdetails/partdetails&query=partJobId%3D${partJobId}`
        window.location.href = `https://ds.alipay.com/?scheme=${encodeURIComponent(url)}`
      } else { // pc端打開h5的兼職詳情頁(yè)
        window.location.href = `/app/partdetails?partJobId=${partJobId}`
      }
    }
  })
}

4.11號(hào)新版本后的改版方案：

首先做一個(gè)落地頁(yè)：https://b.qtshe.com/1DF43E

代碼如下：

import toast from 'toast'
export default {
  created() {
    this.init()
  },
  methods: {
    // 獲取微信scheme地址，并且主動(dòng)跳轉(zhuǎn)一次
    init() {
      this.$axios.post(`https://xxx/你們的接口地址/user/device/scheme`, this.$route.query).then(res => {
        if (res.success) {
          window.location.href = res.data
        } else {
          toast(res.msg)
        }
      }).catch(() => {
        toast('服務(wù)器錯(cuò)誤，請(qǐng)稍后重試')
      })
    }
  }
}

原理：通過(guò)地址欄配置需要跳轉(zhuǎn)的參數(shù)，h5頁(yè)面拿到參數(shù)后通過(guò)接口轉(zhuǎn)換為weixin://xxxx 開頭的scheme協(xié)議地址，并且主動(dòng)location.href一次。這樣能保證用戶每次打開都是新的scheme地址，針對(duì)一天50w數(shù)量上限的問題，可嘗試同一個(gè)用戶在固定時(shí)間內(nèi)相同的參數(shù)，返回相同的scheme地址。

以上限制只存在于除微信外的外部瀏覽器，微信容器里沒有以上的限制。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-728584.html

到了這里，關(guān)于如何在微信內(nèi)外部瀏覽器喚起小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！