前言:项目是uni写的微网页,前期功能还算正常,但是随着项目进程,发现某些地方不得不使用微信sdk了,比如跳转app导航和从微信浏览器跳转到微信小程序,于是开始研究微信sdk的使用方式,中间还是遇到不少坑,特此记录一下,以便后期回忆,也方便涉及该功能开发的小伙伴查阅,希望大家在此功能上少走弯路。
一、引入jsSdk包(util/jsSdk.js)
这里我是通过npm的方式
npm install weixin-js-sdk --sava
二、封装方法
该方法我借鉴了(说明一下)UNI-APP使用微信SDK(微信H5)_WeirdoPrincess的博客-CSDN博客_jweixin sdk
import jWeixin from 'weixin-js-sdk'
import $http from '@/common/http/requestConfig';
export default {
/* 判断是否在微信中 */
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
//console.log('是微信客户端')
return true;
} else {
//console.log('不是微信客户端')
//以下是我项目中所需要的操作其他,可以自定义
uni.showModal({
title: '提示',
content: '请在微信浏览器中打开',
showCancel: false,
success: function(res) {
if (res.confirm) {
// console.log('用户点击确定');
} else if (res.cancel) {
// console.log('用户点击取消');
}
}
});
return false;
}
},
/* 获取sdk初始化配置 */
initJssdk(callback) {
let that = this
let url = window.location.href
$http.request({
url: `******/JSSDKSignature?url=${window.location.href.split('#')[0]}`,
method: "GET"
}).then((res) => {
if (res.code != 200) {
uni.showToast({
title: res.msg,
duration: 3000,
icon: 'error'
});
return
} else { //请求成功,开始登陆
jWeixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
beta: true,
appId: 'wxb1983************7b', // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: ['openLocation'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 非必填,
});
/* wx.hideAllNonBaseMenuItem(); */
jWeixin.checkJsApi({
jsApiList: ['openLocation'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
openTagList: ['wx-open-launch-weapp'] // 需要检测的微信公众号开放标签,
});
// jWeixin.ready(function(res2) {
// // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
// });
// jWeixin.error(function(res2) {
// // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
// });
if (callback) {
callback(res.data);
}
}
}).catch((res) => {
console.log(res.data)
})
},
//在需要定位页面调用
getlocation: function(callback) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res) {
jWeixin.ready(function() {
jWeixin.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function(res) {
// console.log(res);
callback(res)
},
fail: function(res) {
console.log(res)
},
});
});
});
},
//打开位置
openlocation: function(data) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res) {
jWeixin.ready(function() {
jWeixin.openLocation({ //根据传入的坐标打开地图
latitude: data.latitude,
longitude: data.longitude,
name: data.name, // 位置名
address: data.address, // 地址详情说明
scale: data.scale // 地图缩放级别,整型值,范围从1~28。默认为最大
});
});
});
},
}
把方法挂到全局:
import wxJsSdk from '@/util/jsSdk.js'
Vue.prototype.$wxJsSdk = wxJsSdk;
三、微信开放标签的使用和微信SDK的api使用区分
1、微信开放标签
使用微信开放标签只需要调用封装方法上的initJssdk方法,也就是app.vue接入,然后全局可以使用:
onLaunch: function() {
this.$wxJsSdk.initJssdk()
},
使用方式辨别(这里以<wx-open-launch-weapp>来说明,用以网页跳转小程序):
①、单个<wx-open-launch-weapp>的使用,很简单,只要app.vue里调用到initJssdk()方法,那么可以直接在页面使用该标签,该标签使用方式,微信开放文档有,可以自行查看,这里不赘述(还是贴一段把)
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
②、动态生成多个能够跳转小程序的“button”
直接说答案:动态标签插入,使用v-html,类似于原生的innerHtml += ‘’ 的方式来动态插入节点的方式,以下是实现方式:
template:
<view class="" v-html="createMyNode(item)"></view>
script:
createMyNode(item) {
let script = document.createElement('script')
script.type = 'text/wxtag-template'
let html = ''
script.text = '<div style="width:80px;height:80px;"></div>'
html =
`<wx-open-launch-weapp style="width:100%;height:100%;" username="${item.isWechatApp}"path="${item.outUrl}">${script.outerHTML}</wx-open-launch-weapp>`
return html
},
2、微信jsSDK的jsApi
jsApi需要调用到封装方法里面的函数,我这里是打开某个坐标,用微信来唤醒app导航:
handleAppNav() {
let data = {
latitude: this.popUpMarket.latitude, // 纬度,浮点数,范围为90 ~ -90
longitude: this.popUpMarket.longitude, // 经度,浮点数,范围为180 ~ -180。
name: this.popUpMarket.title, // 位置名
address: this.popUpMarket.pointInfo.loc, // 地址详情说明
scale: 10, // 地图缩放级别,整型值,范围从1~28。默认为最大
}
this.$wxJsSdk.openlocation(data)
},
注意api要在jWexin.ready里面调用:
//打开位置
openlocation: function(data) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res) {
jWeixin.ready(function() {
jWeixin.openLocation({ //根据传入的坐标打开地图
latitude: data.latitude,
longitude: data.longitude,
name: data.name, // 位置名
address: data.address, // 地址详情说明
scale: data.scale // 地图缩放级别,整型值,范围从1~28。默认为最大
});
});
});
},
3、总结(踩坑):该方式也是借鉴了他人的博客,但是具体忘记是哪一篇了,结合自己的业务需求做了一些更改,并且这个部分也踩了些坑:
1、在开放标签<wx-open-launch-weapp>体内不要放太多标签,切记不要把项目的ui组件扔里面,直接无效无法渲染,其次是不要给体内标签设置百分比的高度,直接不识别,必须要固定的也就是px的高才行。
2、我们跳转的唯一途径,是去点击<wx-open-launch-weapp>这一标签,所以将这个标签覆盖在之前位置即可,样式也是写在父级盒子上面就行,<wx-open-launch-weapp>体内建议不写样式(每次调试都需要部署代码到域名上才能调试,很麻烦,所以不要在体内设置样式,直接在外部写,写完覆盖,设置opacity为0 即可让外部样式充当此标签样式)