uniapp 公众号网页跳转小程序
程序员文章站
2022-07-02 19:19:56
一、导言今天上头领导安排了个任务,公众号跳转小程序,没多想以为很简单,就开始干结果意外发现没有做过,又get到一个新技能,现在分享给大家,期间遇到签名(错误码:63002)的问题花了一些时间,那么废话不多说,直接上代码:1.引微信js-sdknpm install jweixin-module --save 2.在需要调用的页面中引入import jweixin from 'jweixin-module'3.js调用jssdk_configs() {let url = encodeU...
一、导言
今天上头领导安排了个任务,公众号跳转小程序,没多想以为很简单,就开始干结果意外发现没有做过,又get到一个新技能,现在分享给大家,期间遇到签名(错误码:63002)的问题花了一些时间,那么废话不多说,直接上代码:
1.引微信js-sdk
npm install jweixin-module --save
2.在需要调用的页面中引入
import jweixin from 'jweixin-module'
3.js调用
jssdk_configs() {
let url = encodeURIComponent(window.location.href.split('#')[0]); // 很重要
let obj = {
url: url
}
jssdk_config(obj).then(response => {
let res = response.data
if (res.code === 1) {
let info = {
debug: false, // 调试,发布的时候改为false
appId: res.data.appId,
nonceStr: res.data.nonceStr,
timestamp: res.data.timestamp,
signature: res.data.signature,
jsApiList: res.data.jsApiList,
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app']
};
jweixin.config(info);
jweixin.error(err => {
console.log('config fail:', err);
});
jweixin.ready(res => {
if (callback) callback(jweixin);
});
}
}).catch(error => {
console.log(error)
})
},
这里报错,要注意看appid和url,看看是否写错
4.视图层调用
<wx-open-launch-weapp
id="launch-btn"
username="gh_******", // 小程序的原始id, 下面会教如何获取
path="****" // 需要跳转的小程序页面地址
>
<script type="text/wxtag-template">
<style>
.btn-open-weapp{
width: 226px;
height: 52px;
background: linear-gradient(0deg, rgba(255, 179, 16, 0.99), rgba(255, 227, 2, 0.99));
border-radius: 26px;
border: none;
margin-top: 18px;
font-size: 16px;
color: #B0240A;
font-weight: bold;
}
.btn-open-weapp::after {
border: none;
}
.btn-open-weapp::before {
border: none;
}
</style>
<button class="btn-open-weapp">点击领取红包领餐</button>
</script>
</wx-open-launch-weapp>
- 结果展示
6.教下如何查看小程序的appid和原始id(会的人可以不用往下看),这里拿饿了么小程序为例:
1.首先点开饿了么小程序
2.弹出框后,点击头像那块
3.点击更多资料
4.打工告成
本文地址:https://blog.csdn.net/weixin_44097578/article/details/112554656