请选择 进入手机版 | 继续访问电脑版

微信h5跳转小程序

[复制链接]
钟启航 发表于 2021-1-1 18:30:50 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
微信h5跳转小步伐

要求:

微信开放标签有最低的微信版本要求,以及最低的系统版本要求。
微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。
详细实施:

       参考链接 微信官方文档 公众号
一 绑定域名

      先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(h5网页的域名)
二 引入JS文件

     在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
     如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
     备注:支持使用 AMD/CMD 尺度模块加载方法加载
三 通过config接口注入权限验证设置

  这是微信给出的
  1. wx.config({  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  appId: '', // 必填,公众号的唯一标识  timestamp: , // 必填,生成签名的时间戳  nonceStr: '', // 必填,生成签名的随机串  signature: '',// 必填,签名  jsApiList: [] // 必填,需要使用的JS接口列表});
复制代码
这里是我的项目实际实现
  1. setWxConfig() {//方法名      let that = this;      let url = window.location.href; // 注意这里,我的项目中路由模式用的是history模式      let postData = {        url: url,      };      that.$post(that.$getSignPackage, postData).then((res) => {        //这里请求获取wx.config设置        if (res.status_code === 0) {          let data = res.data.signPackage;          wx.config({            debug: false, // 开启调试模式,            appId: "公众号id", // 必填,企业号的唯一标识,此处填写企业号corpid            timestamp: data.timestamp, // 必填,生成签名的时间戳            nonceStr: data.nonceStr, // 必填,生成签名的随机串            signature: data.signature, // 必填,签名,见附录1            jsApiList: [              "checkJsApi",              "openLocation",              "getLocation",              "closeWindow",              "scanQRCode",              "chooseWXPay",              "chooseImage",              "uploadImage",              "previewImage",              "getLocalImgData",            ], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2            openTagList: ["wx-open-launch-weapp"], // 这里要设置一下          });          wx.error(function (res) {            // ios情况下第一次获取授权失败,重新加载页面            window.location.reload();          });        } else {          this.$toast({            message: res.message,            position: "top",            duration: 1500,          });        }      });    },
复制代码
 注意:在ios设备上首次获取微信授权失败,微信开辟者工具上模仿不出来,只有真机的时候才会袒露出来问题,安卓设备不会有这样的问题

四 页面设置

  1.          
复制代码
 

来源:https://blog.csdn.net/wxfdpp/article/details/112016168
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )