目录

一、注意事项

二、使用步骤

三、调整样式


一、注意事项

  • 微信版本要求为:7.0.12及以上
  • 系统版本要求为:iOS 10.3及以上、Android 5.0及以上
  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
  • 对于有 CSP 要求的页面,需要添加白名单frame-src https://*.qq.com webcompt:
  • 引入的版本是1.6.0,如(http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)或者http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)或者下载的版本”weixin-js-sdk”: “^1.6.0”
  • 标签中的内容在浏览器及开发工具中都无法显示,需要真机调试才有效

二、使用步骤

1、下载或者引入插件

因为我用的是uniapp编写的h5,我是直接npm下载了插件weixin-js-sdk

npm iweixin-js-sdk(一定要下载1.6.0版本)

uniapp需要在main.js中引入:Vue.config.ignoredElements.push(‘wx-open-launch-weapp’)

2、引入请求

uniapp 在 script 标签里引入 import wx from ‘weixin-js-sdk’

3、请求wx.config

此处是后端返回给我的签名认证,appID填写自己的公众号的appID

wx.config({// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '填写自己的的公众号ID', // 必填,企业号的唯一标识,此处填写企业号corpidtimestamp: res.timestamp, // 必填,生成签名的时间戳nonceStr: res.noncestr, // 必填,生成签名的随机串signature: res.signature, // 必填,签名jsApiList: ['wx-open-launch-weapp'], // 必填,需要使用的JS接口列表openTagList: ['wx-open-launch-weapp']}),wx.ready(() => {console.log('成功')});wx.error(function(res1) {console.log('出错', res1, res1.errMsg)});

注意:签名一定要返回ok,如果签名报错是不会成功的

4、在页面中使用

如果是使用vue框架,如uniapp,为避免冲突wx-open-launch-weapp标签内用script(需要真机调试才有效

普通的直接用template即可

.btn { padding: 12px }

到这里页面中就会显示出打开小程序的按钮啦,点击就可以跳转了

三、调整样式

相信很多小伙伴需要其他的样式或者图片,这时候我们可以将wx-open-launch-weapp标签跟样式定位,设置透明

外面的盒子和里面自己的样式可以定义class

到这里就结束啦

如果对样式还是有疑问的话,可以看这篇文章https://www.jianshu.com/p/262658b8d19c

对于一些细节也可以查看官方文档
微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html