uniapp h5打开微信小程序

uniapp h5打开微信小程序首先贴代码将几个需要注意的点 1 当获取不到微信小程序 APPID 和微信小程序 APPSECRET 时只能在微信浏览器打开小程序 2 此代码只要是在微信环境打开小程序 3 需要在线上域名调试 本地看不到效果 可将本地 host 反

大家好,欢迎来到IT知识分享网。

首先贴代码之前有几个需要注意的点:
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/ef457ad.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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/157486.html

(0)
上一篇 2025-02-05 19:10
下一篇 2025-02-05 19:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信