vue制作的H5跳转到小程序

ps:H5可以通过微信开放标签'wx-open-launch-weapp'跳转到小程序，不过会弹出是否跳转到小程序提示框；
如果是使用小程序云开发静态网站托管的小程序网页，不需要绑定安全域名，并且不会有跳转提示框；

小程序云开发静态网站托管的小程序网页参考网址：developers.weixin.qq.com/miniprogram…

下面是讲公众号身份的网页：

1.页面引入公众号JSSDK;

• 后台必须接认证的服务号,并在服务号中把H5域名设置成js安全域名；
  
• 在index.html引入https://res.wx.qq.com/open/js/jweixin-1.6.0.js;或者是install weixin-js-sdk安装;
• 通过config接口注入权限验证配置并申请所需开放标签（如果使用的是小程序云开发静态网站托管的域名的网页，可以免鉴权直接跳任意合法合规小程序，调用 wx.config 时 appId 需填入非个人主体的已认证小程序，不需计算签名，timestamp、nonceStr、signature 填入非空任意值即可）

config里面的值（appId/timestamp/nonceStr/signature）一般都是通过接口从后台获取；
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识 
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
复制代码

2.页面内容；

• html部分

<wx-open-launch-weapp
      id="launch-btn"
      username="gh__xxxxxxxx" //这个是小程序的原始ID
      :path='`pages/index/index.html?id=${id}`' //小程序的链接地址，?后面是参数，可以带多个参数，用&链接
      @launch="launchHandle" //成功之后的方法
      @error="errorHandle" //失败之后的方法
  >
      <script type="text/wxtag-template">
        <style>.btn {padding:24px;border:1px solid red;}</style>
        <button class="btn">确认参与</button>
      </script>
  </wx-open-launch-weapp>
复制代码

• JS部分(因为苹果第一次加载有时候会加载不出来，所以会判断是否是第一次进入，如果是就重新刷新一下页面)

export default {
  data() {
    return {
     id:'123456'
    }
  },
  mounted() {
    let _this = this; 
    const ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {
      // 记录进入app时的url
      console.log('苹果终端设备');
      if(localStorage.getItem("activityBlankFirst")) {
        _this.sdkConfig();
      }else {
        localStorage.setItem("activityBlankFirst", true)
        window.location.reload()
      }
    }else {
      _this.sdkConfig();
    }

  },
  methods:{
    launchHandle() {
       console.log('success');
    },
    errorHandle(e) {
       console.log('fail', e.detail);
    },
    sdkConfig() {
        let that = this;
      // ios每次传首次进入页面的url， android每次传当前页的url
      let url = location.href;
      this.$request.getWxAccessToken(this.$host.getWxAccessToken,{url}).then(res=>{ //这个是后台接口        
         wx.config({
            debug : false,
            appId : res.data.app_id,
            timestamp : res.data.timestamp,
            nonceStr : res.data.nonce_str,
            signature : res.data.signature,
            jsApiList : [],
            openTagList:['wx-open-launch-weapp'] //这里一定要添加
          });	
          localStorage.removeItem("activityBlankFirst")   
      });     
      wx.ready(function(){        
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
          //config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
         // 则须把相关接口放在ready函数中调用来确保正确执行。
         //对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
      
		},
  }
}
复制代码

3.小程序接收参数

直接在小程序页面onLoad里面接收

onLoad(option){  //多个参数都是在option里面
    let id = option.id 
    console.log(id) //值为123456 
}
复制代码