项目记录 — 微信h5跳转小程序

实际项目中，咱们期盼微信内置的h5网页可以拉起微信小程序，终于在2020年3月份，微信推出了开放标签，可以让咱们在微信端调起小程序；

微信配置

1.测试公众号

很是重要：必须是已经认证成功的服务帐号；我的测试帐号是不能够的；

图1 微信认证的服务号

上面标注必须是已认证

2.配置微信接口

微信jsSdk的版本 1.6.0
获取已经认证的服务帐号的appid等信息，进行配置；

wx.config({
   debug: false,
     appId: data.data.appid,
     timestamp: data.data.timestamp,
     nonceStr: data.data.noncestr,
     signature: data.data.signature,
     jsApiList: jsApiList, //微信配置
     openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
})
复制代码

此时咱们已经得到了微信给咱们的开放的标签；wx-open-launch-weapp;

3.配置标签

在vue的框架中进行配置

<div class="button-wrapper" >
          <wx-open-launch-weapp id="to-webapp small" :username="webappConfig.username" :path="webappConfig.path" @launch="launch" @ready="ready" @error="error" > <script type="text/wxtag-template"> <style> .to-lead{ width: 140px; height: 190px; } </style> <div class="to-lead"></div> </script> </wx-open-launch-weapp>
        </div>
复制代码

• username 是所需跳转的小程序原始id，即小程序对应的以gh_开头的id
• path 所需跳转的小程序内页面路径及参数
• 文档中的template 在框架中须要改为script标签的形式；
• wx-open-launch-weapp内的内容为插槽格式，所以须要给标签自定义上样式
• 样式中的px在移动端可能存在适配的问题，所以能够进行简单的适配

4.兼容性

微信的开放标签是在2020年才支持的，由于对于微信的老版本而言可能存在适配的问题，因此须要进行版本的适配；

获取微信的版本

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
复制代码

图2 获取微信版本信息

比较版本

// comVersion(wechatInfo[1], "7.0.12")
 function comVersion(version1, version2) {
      version1 = version1.split(".");
      version2 = version2.split(".");
      for (var i = 0; i < version1.length; i++) {
        if (version1[i] > version2[i]) {
          return true;
        }
      }
      return false;
    }
复制代码

5.配置成功

本身进行回调便可，微信的标签中 提供了几个方法，

图3 微信配置成功调起小程序

问题坑点记录

1.微信开发工具中不显示按钮

目前微信开放标签只支持微信真机中的内容查看，不支持微信开发工具

2.微信真机中标签不显示

2.1.查看微信配置是否正确 此时涉及到微信公众号的相关配置

• 配置失败

图4 微信进行配置时候失败

当微信配置失败时候，缘由有不少，可自行查找微信对应api进行排除；

• 配置成功

图5 微信配置成功

2.2 配置成功 查看当前公众号权限

当全部的内容均配置成功了，可是仍是没有调起小程序----

• 微信服务号 必需要认证成功
• 微信公众号中的开发者配置，里面的获取js的权限域名添加，须要加上当前的域名
• 可申请一个线上的服务号用于测试呀～

3.微信小程序样式坑点

在微信端的wx-open-launch-weapp的标签须要在script中写内容，所以对于复杂的样式，是很是难调试的，好比按钮的宽度，按钮中文字居中的样式，所以在标签内部的样式能够采用图片的格式进行固定，不过任何都是有风险的，因此仍是须要一步一步的进行调试和整合；

参考文档

微信开放标签配置