微信公众号weixin-js-sdk使用方法总结

目录

• 1、安装weixin-js-sdk
• 2、封装wechat.js
• 3、main.js
• 4、页面调用方式
• 5、如果你需要用到其他功能，在这里按照这种方式接着定义新的方法：
• 总结

• JS-SDK说明文档
• 网页授权说明文档
• 微信公众号授权登录参考方案
• http接口请求封装参考方案

记录微信公众号开发过程中遇到的问题以及解决方案：

1、安装weixin-js-sdk

npm install weixin-js-sdk

2、封装wechat.js

import wx from 'weixin-js-sdk' // 引入微信js-sdk
import http from '@/utils/axios.js'; //接口请求封装

class AuthWechat {

	signLink() {
		if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
			window.entryUrl = document.location.href
		}
		return /(Android)/i.test(navigator.userAgent) ? document.location.href : window.entryUrl;
	}

	// 当前是否是微信环境
	isWeixin() {
		return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
	}

	/**
	 * 初始化wechat(分享配置)
	 */
	wechat() {
		return new Promise((resolve, reject) => {
			let url = this.signLink()
			http.post('Users/shareSign', {
				url: url
			}).then(res => {
				if (res.code == 200) {
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: [
							'updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
							'updateTimelineShareData', // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
							'scanQRCode', // 扫一扫
							'getLocation', // 获取地理位置
							'openLocation', // 使用微信内置地图查看位置接口
							'chooseImage', //拍照或从手机相册中选图接口
							'closeWindow', //关闭当前网页窗口接口
						]
					})
					wx.ready(res => {
						// 微信SDK准备就绪后执行的回调。
						resolve(wx, res)
					})
					wx.error(err => {
						reject(wx, err)
					})
				}
			})
		})
	}

	// 微信分享
	wxShare(shareObj) {
		this.wechat().then((wx, res) => {
			wx.ready(() => {
				wx.updateAppMessageShareData({
					title: shareObj.title, // 分享标题
					link: shareObj.link, // 分享链接
					desc: shareObj.desc, // 分享描述
					imgUrl: shareObj.imgUrl,
					success: function() {},
					cancel: function() {}
				});
				wx.updateTimelineShareData({
					title: shareObj.title, // 分享标题
					link: shareObj.link, // 分享链接
					desc: shareObj.desc, // 分享描述
					imgUrl: shareObj.imgUrl,
					success: function() {},
					cancel: function() {}
				});
			})
		})
	}

	// 扫一扫
	scanQRCode() {
		return new Promise((resolve, reject) => {
			this.wechat().then((wx, res) => {
				this.toPromise(wx.scanQRCode, {
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			})
		})
	}

	// 获取地理位置接口
	getLocation() {
		return new Promise((resolve, reject) => {
			this.wechat().then((wx, res) => {
				this.toPromise(wx.getLocation, {
					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			})
		})
	}

	// 使用微信内置地图查看位置接口
	openLocation(data) {
		return new Promise((resolve, reject) => {
			this.wechat().then((wx, res) => {
				this.toPromise(wx.openLocation, {
					latitude: data.latitude, // 纬度，浮点数，范围为90 ~ -90
					longitude: data.longitude, // 经度，浮点数，范围为180 ~ -180。
					name: '', // 位置名
					address: '', // 地址详情说明
					scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
					infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			})
		})
	}

	// 拍照或从手机相册中选图接口
	chooseImage() {
		return new Promise((resolve, reject) => {
			this.wechat().then((wx, res) => {
				this.toPromise(wx.chooseImage, {
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			})
		})
	}

	// 关闭当前网页窗口接口
	closeWindow() {
		this.wechat().then((wx, res) => {
			wx.ready(() => {
				wx.closeWindow();
			})
		})
	}

	toPromise(fn, config = {}) {
		return new Promise((resolve, reject) => {
			fn({
				...config,
				success(res) {
					resolve(res);
				},
				fail(err) {
					reject(err);
				},
				complete(err) {
					reject(err);
				},
				cancel(err) {
					reject(err);
				}
			});
		});
	}
	// 如果你需要添加新的方法，请查下步骤5
}

export default new AuthWechat();

3、main.js

import wechat from '@/utils/wechat.js'
Object.assign(Vue.prototype, {
	'$wechat':wechat
})

4、页面调用方式

<template>
	<view class="message">
		<u-button type="primary" @click="scanQRCode">扫一扫</u-button>
		<u-button type="primary" @click="getLocation">获取地理位置</u-button>
		<u-button type="primary" @click="openLocation">使用微信内置地图查看位置</u-button>
		<u-button type="primary" @click="chooseImage">拍照或从手机相册中选图</u-button>
		<u-button type="primary" @click="closeWindow">关闭当前网页窗口</u-button>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				latitude: '',
				longitude: '',
			}
		},
		onShow() {
			if(this.$wechat.isWeixin()){
				let shareObj = {
					title: '测试2', // 分享标题
					link: 'https://mpm.yoronglife.com/pages/mall/goodsDetail?id=1', // 分享链接
					desc: '描述2', // 分享描述
					imgUrl: 'https://mpweb.yoronglife.com/uploads/default/logo.png',
				}
				this.$wechat.wxShare(shareObj)
			}
		},
		methods: {
			scanQRCode(){
				this.$wechat.scanQRCode().then(res=>{
					alert(JSON.stringify(res))
				})
			},
			getLocation(){
				this.$wechat.getLocation().then(res=>{
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					alert(JSON.stringify(res))
				})
			},
			openLocation(){
				let data = {
					'latitude' : this.latitude,
					'longitude' : this.longitude,
				}
				this.$wechat.openLocation(data).then(res=>{
					alert(JSON.stringify(res))
				})
			},
			chooseImage(){
				this.$wechat.chooseImage().then(res=>{
					alert(JSON.stringify(res.localIds))// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
				})
			},
			closeWindow(){
				this.$wechat.closeWindow()
			},
		},
	}
</script>

上边内容仅记录了一部分API的使用方式。如果你需要其他功能，如预览图片，可直接用下面这种方式复制到

5、如果你需要用到其他功能，在这里按照这种方式接着定义新的方法：

示例预览图片：this.toPromis(wx.方法名，参数)

记得在config中添加jsApiList:[‘previewImage’]

previewImage(images) {
	// 1.如果需要有返回值，就封装一层Promise，
	return new Promise((resolve, reject) => {
		this.wechat().then((wx, res) => {
			this.toPromise(wx.previewImage, {
				current: '', // 当前显示图片的http链接
				urls: [] // 需要预览的图片http链接列表
			}).then(res => {
				resolve(res);
			}).catch(err => {
				reject(err);
			});
		})
	})

	// 2.如果不需要返回值，这里直接在wx.ready中实现具体的功能
	this.wechat().then((wx, res) => {
		wx.ready(() => {
			wx.previewImage(images);
		})
	})
}

页面中调用预览图片
let images = {
	current:'http://****',
	urls:[
		:'http://****',
		:'http://****'
	]
}
this.$wechat.previewImage(images)

以上内容及代码均经过测试，可直接复用！！！

总结

到此这篇关于微信公众号weixin-js-sdk使用方法的文章就介绍到这了,更多相关微信公众号weixin-js-sdk使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！