uniapp微信公众号跳转小程序+h5跳转小程序(vue项目)
uniapp微信公众号跳转小程序(vue项目)
·
one. 微信公众号跳转小程序
一、微信开放文档
二、步骤
1、引入微信js-sdk npm install wx-module --save
2、在调用的页面中引入import wx from 'jweixin-module'
3、页面报错找不到模板wx-open-launch-weapp时,main.js中Vue.config.ignoredElements = [ 'wx-open-launch-weapp']
4、引入微信开放标签,在main.js中配置Vue.config.ignoredElements = [‘wx-open-launch-weapp’]出现下面报错,则将配置改为Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']
5、获取wx.config注册信息
let url = window.location.href.split('#')[0];//要在公众号平台设置JS接口安全域名,ip白名单
uni.request({
url: "aaaaaaaaaaa',//调取后台接口拿到wx.config中的参数
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: data => {
wx.config({
debug: true, // 开启调试模式,返回值会在客户端alert出来。
appId: "", // 必填,公众号的唯一标识
imestamp: "", // 必填,生成签名的时间戳
nonceStr: "", // 必填,生成签名的随机串
signature: "", // 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: [ 'wx-open-launch-weapp'] // 可选,需要使用的开放标签列表
});
wx.ready(function() {
let btn = document.getElementById('launch-btn');//视图层对应的id名
btn.addEventListener('launch', e => {
console.log('success');
});
btn.addEventListener('error', e => {
console.log('fail', e.detail);
});
});
}
});
6、view视图层调用(需注意,html和css内容均为原生写法,不能用框架组件和框架内置样式)
<wx-open-launch-weapp
id="launch-btn"
username="gh_************" // 小程序的原始id
path="****" // 需要跳转的小程序页面地址,不填会跳首页,必须.html结尾
style="width:100%">
<script type="text/wxtag-template">
<style>
.box{width: 100%; display: flex;flex-direction: column;align-items: center;justify-content:center;}
.text{width: 100%;margin-top: 8px;font-size: 12px;color: #333333;display: inline-block;text-align: center;}
</style>
<div class="box">
<img src="xxxx.png" width="36px" height="36px"/>
<span class="text">智能门禁</span>
</div>
</script>
</wx-open-launch-weapp>
5、成功界面
two. h5页面跳转小程序
参考 微信官方文档
服务端获取小程序 scheme url,h5跳转即可:
window.open(“weixin://dl/business/?t=xxxxxxx”)
更多推荐
已为社区贡献12条内容
所有评论(0)