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
}
复制代码