uniapp h5打开微信小程序
首先贴代码将几个需要注意的点:1、当获取不到微信小程序APPID和微信小程序APPSECRET时只能在微信浏览器打开小程序2、此代码只要是在微信环境打开小程序3、需要在线上域名调试,本地看不到效果,可将本地host反向代理到线上域名进行调试4、wx-open-launch-weapp标签内样式只支持px,要自适应需再将rpx转px5、需要服务端的接口生成签名和公众号的一些数据给前端6、前端安装模块
·
首先贴代码之前有几个需要注意的点:
1、当获取不到微信小程序APPSECRET时只能在微信浏览器打开小程序
2、此代码只能在微信环境打开小程序
3、需要在线上域名调试,本地看不到效果,可将本地host反向代理到线上域名进行调试
4、wx-open-launch-weapp标签内样式只支持px,要自适应需再将rpx转px
5、需要服务端的接口生成签名和公众号的一些数据给前端
6、前端安装模块 npm install jweixin-module --save
7、main.js 添加一行代码 Vue.config.ignoredElements.push(‘wx-open-launch-weapp’)
8、标签(username是以 gh_ 开头的公众号id)
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx">
<script type="text/wxtag-template">
<style>
.item-menu-name-normal {
font-weight: 400;
color: #393E46;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
webkit-line-clamp: 2;
webkit-box-orient: vertical;
}
</style>
<image style="display:block;width: {{getRealSize(122)}}px; height:{{getRealSize(122)}}px;" mode="aspectFit" src="https://sysadm.cditv.cn/Uploads/Picture/2022-03-09/622855ef457ad.png"></image>
<view style="width: {{getRealSize(122)}}px;font-size: {{getRealSize(24)}}px;margin-top: {{getRealSize(8)}}px;" class="item-menu-name-normal">跳转小程序</view>
</script>
</wx-open-launch-weapp>
9、js
// 引入微信jssdk
var jweixin = require('jweixin-module')
onLoad() {
// 在微信环境才去进行小程序标签配置
if (this.$util.isWeixin()){
this.getWxGlobal()
}
},
methods: {
// 判断是否是微信浏览器
isWeixin() {
const ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
},
// 标签内图片和文字大小自适应,rpx转px
// 如果375的设计稿,量出100px,即在uniapp中是200rpx,这里num就传200
getRealSize(num){
return uni.upx2px(num)
},
getWxGlobal(){
const _this = this;
// 此处请求接口获取签名以及基本信息,可省略不看,直接看拿到数据后的操作
_this.$util.getAPIData('https://www.doker.com.cn/api/wechat/getconfig', 'GET', {
account: 'gh_d08583fe3034',
url: window.location.href
}, function(res) {
const str = res.data;
const appId = str.substring(_this.findStr(str, '"', 2) + 1, _this.findStr(str,
'"', 3));
const timestamp = str.substring(_this.findStr(str, ':', 1) + 1, _this.findStr(
str, ',', 1));
let nonceStr = str.substring(_this.findStr(str, '"', 8) + 1, _this.findStr(str,
'"', 9))
let signature = str.substring(_this.findStr(str, '"', 12) + 1, _this.findStr(
str, '"', 13))
// 关键代码
jweixin.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['wx-open-launch-weapp'],
openTagList: ['wx-open-launch-weapp']
});
jweixin.ready((e) => {
console.log(e, '成功验证')
})
jweixin.error((e) => {
_this.$util.showToast(e || '验证失败');
console.log(e, '失败信息')
})
}, function() {
console.error('接口请求失败');
});
},
}
要在js安全域名上并且在真机上访问才有效果,如果没效果或者是有错误的弹窗出现说明wx.config配置不正确,这种方式只能在微信网页里才能用!!
是这篇文章给了我帮助,我在他的基础上自已摸索出了结果
https://ask.dcloud.net.cn/article/39135
更多推荐
已为社区贡献9条内容
所有评论(0)