uniapp开发微信公众号网页-微信JSSDK使用

JS-SDK说明文档-微信开放文档

一. 安装jweixin-module

使用 npm 安装微信 jssdk
npm install jweixin-module --save

二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例

1. 在js公共文件夹下创建wechat.js

var jweixin = require('jweixin-module');

//是否是微信浏览器
const isWechat = () => {
	var ua = window.navigator.userAgent.toLowerCase()
	if (ua.match(/micromessenger/i) == 'micromessenger') {
		return true;
	} else {
		return false;
	}
}

//需要使用的JS接口列表
let jsApiList = [
	'checkJsApi',
	'getLocation',
	'wx-open-launch-weapp'
]

export default {
	isWechat,
	//配置信息
	initJssdk: () => {
		//获取界面url
		let url = window.location.href
		uni.getSystemInfo({
			success: function(res) {
				// ios 平团不可以传 # 号，否则需要刷新页面才可以注入成功
				if (res.errMsg === 'getSystemInfo:ok' && res.platform.toLowerCase() === 'ios') {
					url = url.split("#")[0]
				}
			}
		});
		// 请求后台，获取jsssdk配置
		uni.request({
			// 仅为示例，并非真实接口地址
			url: 'https://www.example.com/wechat/index/getJssdk/appid/wxf05aa982712fs421',
			data: {
				// 页面 url，后台需要的数据
				url
			},
			success: result => {
				// 注入配置信息，同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用
				jweixin.config({
					debug: false,
					appId: result.appId,
					timestamp: result.timestamp,
					nonceStr: result.nonceStr,
					signature: result.signature,
					jsApiList,
					// 跳转小程序时必填
					openTagList: ['wx-open-launch-weapp']
				});

				jweixin.ready(function(res) {

				});


				jweixin.error(function(res) {

				});
			}
		});
	},
	// 检查权限,  这里是使用回调,  _option里面有success和fail参数, 当checkJsApi调用成功是 调用_option.success, 反之_option.fail
	checkJsApi: function(_option = {}) {
		jweixin.checkJsApi({
			jsApiList,
			success: res => {
				console.log(JSON.stringify(res))
			},
			fail: res => {
				console.log(JSON.stringify(res))
			},
		})
	},
	// 获取位置信息
	getLocation: function() {
		jweixin.getLocation({
			type: 'wgs84',
			success: res => {
				console.log(JSON.stringify(res))
			}
		});
	}

}

2. 在 main.js 引入 wechat.js

import wechat from './wechat.js'
Vue.prototype.$wechat = wechat;

3. 使用微信 jssdk 接口

<template>
	<view>
		<button @click="initJssdk"> 手动 initJssdk </button>
		<buttn @click="getLocation"> getLocation </buttn>
	</view>
</template>

<script>
	export default {
		onReady() {
			// #ifdef
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.initJssdk()
			}
			// #endif

		},
		methods: {
			initJssdk() {
				this.$wechat.initJssdk()
			},
			getLocation() {
				this.$wechat.getLocation()
			}
		}
	}
</script>

4. 其他

1. 微信 jssdk 的 config 信息验证后会执行 ready 方法，在 ready 执行通讯事件，外部获取到此通讯事件后再使用微信的接口。

jweixin.ready(function(res) {
	uni.$emit('jweixinReady', res)
});

2. 使用Promise或回调形式封装自定义接口，处理接口结果。
   封装:

// 获取位置信息
getLocation: function(_option={}) {
	
	let option = Object.assign({
		success: null,
		fail: null
	}, _option)
	
	jweixin.getLocation({
		type: 'wgs84',
		success: res => {
			option.success && option.success(res)
		},
		fail: option.fail
	});
}

使用:

this.$wechat.getLocation({
	success:res=>{
		this.latitude = res.latitude
	},
	fail:res=>{}
})

我是文章的搬运工, 写一遍加深影响. 出自: uniapp开发微信公众号网页-微信JSSDK使用