大家好,欢迎来到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