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

文章发布于2021年03月03日 18:47, 归类于: 前端

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

先查看微信开放文档,进入微信公众平台配置相关信息。

一、安装 jweixin-module

使用 npm 安装微信 jssdk

npm install jweixin-module --save  

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

1.在根目录创建 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) {

				});
			}
		});
	},
	// 检查权限
	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;

三、使用微信 jssdk 接口

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

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

四、其他

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使用》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1614768429.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:uniapp 微信公众号网页 打开小程序 下一篇:小程序分享到朋友圈时设置path的query参数,判断用户是否通过朋友圈进入小程序