微信公众号打开小程序

场景：天天学农小程序跳转到精勤农民公众号，再在精勤农民公众号工具栏打开识农小程序

                   

第一步：天天学农小程序跳转到精勤农民公众号

<web-view  src="https://uat-h5.ixuenong.com/wx/jqnm/index"></web-view>

第二步：精勤农民公众号工具栏打开识农小程序

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

ps：在识农公众号功能设置里添加https://uat-h5.ixuenong.com安全域名

2. 引入JS文件

vue项目：在index.html引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" async ></script>

3. 通过config接口注入权限验证配置并申请所需开放标签

function config (res) {
  wx.config({
    debug: false, // 开启调试模式,
    appId: '"wx6d411c178956bb06"', // 必填，公众号的唯一标识 通过接口拿
    timestamp: '1615885988709' // 必填，生成签名的时间戳 通过接口拿
    nonceStr: "ttxn", // 必填，生成签名的随机串
    signature: '"668a7895d3496e03d3a11b0b6f0a772cedfe1e60"', // 必填，签名，见附录1 通过接口拿
    jsApiList: [], // 需要使用的JS接口列表，所有JS接口列表见附录2,这里只做打开小程序所以可以不填
    openTagList: ['wx-open-launch-weapp'] //需要使用的开放标签列表，例如['wx-open-launch-app']
  });
}

4.

开放标签

 

跳转小程序：wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。

 <div
        @click="wxMiniProgram"
      >
<wx-open-launch-weapp
            id="launch-btn"
            username="gh_139d1be49bd0" //识农原始id
            path="pages/home/index" //识农路由
          >
            <script type="text/wxtag-template">
              <div>
                跳转小程序
              </div>
            </script>
          </wx-open-launch-weapp>
</div>

    wxMiniProgram(item) {
      wx.miniProgram.reLaunch({
          url:
            "/pagesUser/snTool/snTool?url='pages/home/index'&appId='wx23157cdd2ac3eb33'&title='拍照识病虫'&href=" +
            window.location.href,
          success: function () {},
          fail: function () {},
          complete: function () {},
        });
    },

5.在天天学农小程序开启一个中间页面

wx.navigateToMiniProgram({
      appId: that.data.appId,
      path: that.data.url,
      extraData: {
        foo: 'bar'
      },
      envVersion: 'release',
      success(res) {
        // 打开成功
      }
    })