uniapph5打开⼩程序
⾸先贴代码将⼏个需要注意的点:
1、当获取不到⼩程序APPID和⼩程序APPSECRET时只能在浏览器打开⼩程序
2、此代码只要是在环境打开⼩程序
3、需要在线上域名调试,本地看不到效果,可将本地host反向代理到线上域名进⾏调试
4、wx-open-launch-weapp标签内样式只⽀持px,要⾃适应需再将rpx转px
5、需要服务端的接⼝⽣成签名和的⼀些数据给前端
6、前端安装模块 npm install jweixin-module --save
7、main.js 添加⼀⾏代码 fig.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>
网页app.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 mode="aspectFit" src="sysadm.cditv/Uploads/Picture/ 2022-03-09/622855ef457ad.png"></image>
<view class="item-menu-name-normal">跳转⼩程序</view>
</script>
</wx-open-launch-weapp>
9、js
// 引⼊jssdk
var jweixin =require('jweixin-module')
onLoad(){
// 在环境才去进⾏⼩程序标签配置
if(this.$util.isWeixin()){
}
},
methods:{
// 判断是否是浏览器
isWeixin(){
const ua = LowerCase();
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.$APIData('www.doker/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))
// 关键代码
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']
});
console.log(e,'成功验证')
})
<((e)=>{
_this.$util.showToast(e ||'验证失败');
console.log(e,'失败信息')
})
},function(){
<('接⼝请求失败');
});
},
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论