h5跳转到微信小程序--wx-open-launch-weapp

说明： 记录的是我做过的项目，各位仅供参考。

参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

官方使用步骤：

1. 绑定域名，登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2. 引入j s文件：在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

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

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

4.通过ready接口处理成功验证

wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});

5.书写跳转。

我的项目是uniapp写的h5，所以第二步是通过npm 引入的，引入方式自行百度。

1. 第一步自行配置：
2. 下面代码是封装好的第2-4步：

let jweixin = require('jweixin-module');
async function configWeiXin(callback) {
    let res = 一个后台请求，返回的是appid,签名，时间戳等等；
    let resConfig = res.data;
    if (resConfig) {
        let apiList = [ // 可能需要用到的能力
            'chooseImage',
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'scanQRCode',
            'onMenuShareAppMessage',
            'previewImage',
            'uploadImage',
            'getLocalImgData'
        ];
        let info = {
            debug: false, // 调试，发布的时候改为false
            appId: resConfig.appId,
            nonceStr: resConfig.nonceStr,
            timestamp: resConfig.timestamp,
            signature: resConfig.signature,
            jsApiList: apiList,
            openTagList: ['wx-open-launch-weapp']
        };
        console.log(info)
        jweixin.config(info);
        jweixin.error(err => {
            // console.log('config fail:', err);
        });

        jweixin.ready(() => {
          // console.log('ready')
            if (callback) callback(jweixin); // 配置成功
        });
    }
}
export default {
  configWeiXin
}

下面是第5步书写跳转：

• 在需要跳转的页面，引入上面的j s；假设为（import wx from "/conwx";）
• 在onload里面执行一下：

  wx.configWeiXin((_)=>{})

  相当于调用了config和ready

• 我的项目里面需要点击用户的头像，跳转到小程序对应的详情页，所以不能用官方文档的简单方式。我的处理方式如下：

  
  
  
  renderDom (item) {
          let script = document.createElement('script')
          script.type = 'text/wxtag-template'
          let image = item.avatar;
          script.text = ``
          let html = `${script.outerHTML}`
          // console.log(html)
          return html
        },
  

  在本地运行可能看不出来效果，需要发布线上到线上，要用微信打开看。如果出现图片出不来的情况，检查一下wx.config和wx.ready是否执行？是否在页面渲染之前执行？
  上面的代码宽高度直接写死了，目前不知道怎么做自适应，有方法的小伙伴欢迎交流，感谢。