uniapp APP与微信公众号跳转小程序

最近新增一个功能，APP与微信公众号跳转自己的小程序商城，一开始以为APP会很复杂，没想到公众号跳转遇到的坑更多一点。记录一下。

APP跳转小程序

plus.share.getServices((res) => {
  let sweixin = null;
  for (let i = 0; i < res.length; i++) {
    let t = res[i];
    if (t.id == 'weixin') {
      sweixin = t;
    }
  }
  if (sweixin) {
    sweixin.launchMiniProgram({
      id: '', //这里写你的小程序原始id（以gh开头）
      type: 0, //这里是不同的环境（默认0）
      path: '' //这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
    });
  }
},function(res) {
  console.log(JSON.stringify(res));
});

到这里APP跳转小程序就完成了。

公众号跳转小程序

公众号跳转小程序，标签在只能在真机上看见效果，因为页面上有图片与按钮，不加 z-index:999按钮处点击打开小程序不生效。

公众号先引入 jweixin-module@1.6.0

npm引入

npm install jweixin-module --save

在页面注册

import jwx from 'jweixin-module';

 configWeiXin(

configWeiXin(){
  this.$api.getWxjssdk({
	url: location.href.split('#')[0]
  }).then(res => {
     let config = res.data.data
     jwx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
       appId: config.appid, // 必填，公众号的唯一标识，填自己的！  
       timestamp: config.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据  
       nonceStr: config.nonceStr, // 必填，生成签名的随机串  
       signature: config.signature, // 必填，签名  
       jsApiList: ['wx-open-launch-weapp','chooseImage','previewImage'],
       openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填  
     });
     jwx.error(err => {
	   console.log('config fail:', err);
     });
     jwx.ready(res => {
	   console.log('ready:', res);
	 });
  })
}

 html

<view style="position: relative; width: 100%; height: 275rpx">
  <view class="">
     <image style="width:142rpx;height:142rpx" src="/static/xxx.png"></image>
     <button type="success" @click="getConfig">进入小程序</button>
  </view>
  <!-- #ifdef H5 -->
  <wx-open-launch-weapp id="launch-btn" appid="" username="" path="page/index/index.html" style="position: absolute; top: 0; left: 0;
     width: 100%; height: 100%;z-index:999" @launch="handleLaunchFn" @error="handleErrorFn">
     <script type="text/wxtag-template">
        <style>  
        </style>  
        <div class="" style="position: absolute; top: 0; left: 0; width: 100%;height: 100%;opacity: 0;z-index:999">
        </div>
     </script>
  </wx-open-launch-weapp>
  <!-- #endif -->
</view>

至此微信公众号打开微信小程序就完成了。