1、準(zhǔn)備

在正式開(kāi)發(fā)工作之前，請(qǐng)優(yōu)先熟讀并查看微信開(kāi)發(fā)文檔。

2、綁定域名 （在微信公眾平臺(tái)設(shè)置）

需提前登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”的“JS接口安全域名”、“業(yè)務(wù)域名”、“網(wǎng)頁(yè)授權(quán)域名”內(nèi)依次配置h5頁(yè)面的相關(guān)域名地址（例如：www.baidu.com）這里不包含協(xié)議名稱(chēng)和端口，同時(shí)可在根目錄上傳MP_verify_cZv0a41uGOH2UNym.txt文件，如圖：

3、IP白名單（在微信公眾平臺(tái)設(shè)置）

如圖：

4、將小程序和H5公眾號(hào)進(jìn)行關(guān)聯(lián) （在微信公眾平臺(tái)設(shè)置）

不會(huì)的可以參考教程：https://jingyan.baidu.com/article/7908e85c70685bee481ad2b1.html

5、引入JS文件

在需要調(diào)用JS接口的頁(yè)面（index.html）引入如下JS文件：
http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪(fǎng)問(wèn)時(shí)，可改訪(fǎng)問(wèn)：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如圖：

6、通過(guò)config接口注入權(quán)限驗(yàn)證配置并申請(qǐng)所需開(kāi)放標(biāo)簽

與使用JS-SDK配置方式相同，所有需要使用開(kāi)放標(biāo)簽的頁(yè)面必須先注入配置信息，并通過(guò)openTagList字段申請(qǐng)所需要的開(kāi)放標(biāo)簽，否則將無(wú)法使用（同一個(gè)url僅需調(diào)用一次）。開(kāi)放標(biāo)簽的申請(qǐng)和JS接口的申請(qǐng)相互獨(dú)立，因此是可以同時(shí)申請(qǐng)的。

wx.config({
  debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: ['showMenuItems'], // 必填，需要使用的JS接口列表，不能為空，為空的話(huà)安卓會(huì)有問(wèn)題
  openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開(kāi)放標(biāo)簽列表，例如['wx-open-launch-app']
});

記得在main.js頁(yè)面添加相關(guān)配置

Vue.config.ignoredElements = ['wx-open-launch-weapp']

7、傳參（VUE、小程序頁(yè)面）

如圖：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-487358.html

8、全部代碼

<template>
  <div class="app">
    <p class="test-text" v-if="isWxBtn">點(diǎn)擊打開(kāi)微信小程序</p>
    <wx-open-launch-weapp
      id="launch-btn"
      :username="wx_username"
      :path="wx_path"
      v-if="isWxBtn"
    >
      <script type="text/wxtag-template">
        <style>
          .test-btn {
            position:fixed;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            display: block;
            width: 80%;
            font-size: 18px;
            color: #2973ba !important;
            height: 48px;
            line-height: 48px;
            background-color: #fff;
            border-top: 1px solid #ddd;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            text-align: center;
          }
        </style>
        <div class="test-btn">確定</div>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username:'',
        password:''
      },

      isWxBtn:false,
      wx_username: 'gh_xxxxxxxxxxxx', // gh_ 開(kāi)頭的原始小程序ID
      wx_path: 'pages/index/index.html', // 一定要以 .html 結(jié)尾
      token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    }
  },
  created() {},
  methods:{
	getShopWxConfig() {
      let that = this;
      let url = window.location.href.split('#')[0];
      api.getWxConfig(url).then(res => {
        wx.config({
          debug: true, // 驗(yàn)證結(jié)果彈窗控制（成功或者失敗）
          appId: res.data.appId, // 公眾號(hào)唯一appid
          nonceStr: res.data.noncestr,
          timestamp: res.data.timestamp,
          signature: res.data.signature,
          jsApiList: [''], // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'],
        });
        wx.ready(function () {
          that.isWxBtn = true;
          console.log('111111'，success);
        });
        wx.error(function (err) {
          // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
          console.log('000000', error);
        });
      });
    },
  },
  mounted() {
    this.wx_path = this.wx_path + "?token=" + this.token;
	this.getShopWxConfig();
  }
</script>

<style lang="scss" scoped>
.app{
  background: url(../../assets/images/img.jpg) no-repeat center center;
  position: fixed;
  background-size:cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .test-text {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: -108px;
    bottom: 0;
    text-align: center;
    width: 80%;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #2b2b2b;
    z-index: 99999;
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  #launch-btn {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    line-height: 100vh;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    display: block;
  }
}
</style>

9、注意事項(xiàng) ( 按鈕不顯示、點(diǎn)擊按鈕沒(méi)反應(yīng)，請(qǐng)對(duì)照以下事項(xiàng)逐一排查 )

• username為小程序原始ID。
• path為跳轉(zhuǎn)至小程序的路徑，一定要加后綴.html。還能攜帶參數(shù)，在微信小程序中通過(guò) onLoad的 options接收。(代碼如下)
• <wx-open-launch-weapp>中必須用<template>標(biāo)簽包裹。
• config配置中一定要加入openTagList: ['wx-open-launch-weapp']。
• 微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上。
• 引入js至少是1.6以上版本。
• 若按鈕不顯示，多半是wx.config配置不正確。

到了這里，關(guān)于h5跳轉(zhuǎn)微信小程序方案及注意事項(xiàng)（vue方向）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！