uniapp的H5端之微信JsSdk的开放标签以及Api使用心得

前言：项目是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 即可让外部样式充当此标签样式)