uni-app 中,jweixin-module 插件主要用于实现与微信相关的功能,通常用于微信公众号或小程序开发中,帮助调用微信的 SDK 实现一些功能,如分享、支付、获取微信用户信息等等

使用场景

  • 微信支付:可以集成微信支付功能,支持发起支付请求。

  • 微信分享:可以实现分享到朋友圈、微信群、微信好友等。

  • 获取微信用户信息:可以获取到用户的头像、昵称等信息。

  • 调起微信扫一扫功能:实现扫码功能,用于二维码识别。

  • 调起微信小程序:在 H5 页面中跳转到微信小程序。

  • 支付回调与支付状态:处理支付的回调以及支付状态。

    等等还有很多,可以查看官方的文档

官方文档:JS-SDK 使用说明 | 微信服务号文档

1. 安装 jweixin-module 插件

在项目根目录的终端执行

npm install jweixin-module --save

2. 在uniapp 中使用

2.1 封装wx-jssdk方法以便调用

在uniapp项目跟目录新建common文件夹,在common文件夹中新建js文件夹,在js文件夹中新建wx-jssdk.js文件

在这里插入图片描述

  • 简单的封装wx-jssdk.js 文件内容

    /**
     * 微信jssdk调用
     */
    let Weixin = function() {
    	var wx = require('jweixin-module');
    
    	// 调用前一些方法请先初始化 
    	this.init = function(params) {
    		wx.config({
    			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    			appId: params.appId, // 必填,公众号的唯一标识
    			timestamp: params.timestamp, // 必填,生成签名的时间戳
    			nonceStr: params.nonceStr, // 必填,生成签名的随机串
    			signature: params.signature, // 必填,签名
    			jsApiList: ['chooseWXPay', 'openAddress', 'updateAppMessageShareData', 'updateTimelineShareData', 'scanQRCode','getLocation','openLocation'] // 必填,需要使用的JS接口列表
    		});
    	}
    
    	/**
    	 * 发起支付
    	 * @param {Object} jsApiParame
    	 * @param {Object} callback
    	 */
    	this.pay = function(jsApiParame, callback) {
    		wx.ready(function() {
    			wx.chooseWXPay({
    				timestamp: jsApiParame.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    				nonceStr: jsApiParame.nonceStr, // 支付签名随机串,不长于 32 位
    				package: jsApiParame.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
    				signType: jsApiParame.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
    				paySign: jsApiParame.paySign, // 支付签名
    				success: function(res) {
    					typeof callback == 'function' && callback(res);
    				}
    			});
    		})
    	}
    
    	/**
    	 * 获取收货地址
    	 * @param {Object} callback
    	 */
    	this.openAddress = function(callback) {
    		wx.ready(function() {
    			wx.openAddress({
    				success: function(res) {
    					typeof callback == 'function' && callback(res);
    				},
    				fail: (res) => {
    					alert(JSON.stringify(res))
    				}
    			});
    		})
    	}
    
    
    	/**
    	 * 分享给好友
    	 * @param {Object} params
    	 * @param {Object} callback
    	 */
    	this.setShareData = function(params, callback) {
    		wx.ready(function() {
    			// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
    			wx.updateAppMessageShareData({
    				title: params.title || '', // 分享标题
    				desc: params.desc || '', // 分享描述
    				link: params.link || '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    				imgUrl: params.imgUrl || '', // 分享图标
    				success: function() {
    					typeof callback == 'function' && callback(res);
    				}
    			})
    			// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
    			wx.updateTimelineShareData({
    				title: params.title || '', // 分享标题
    				link: params.link || '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    				imgUrl: params.imgUrl || '', // 分享图标
    				success: function() {
    					typeof callback == 'function' && callback(res);
    				}
    			})
    		});
    	}
    
    	/**
    	 * 扫一扫
    	 * @param {Object} callback
    	 */
    	this.scanQRCode = function(callback) {
    		wx.ready(function() {
    			wx.scanQRCode({
    				needResult: 1,
    				scanType: ["qrCode"],
    				success: function(res) {
    					typeof callback == 'function' && callback(res);
    				}
    			});
    		})
    	},
    	/**
    	 * 跳转
    	 */
    	this.navigateTo = function(url){
    		wx.ready(function() {
    			wx.miniProgram.navigateTo({
    				url:url
    			})
    		})
    	},
    	/**
    	 * 打开 地图
    	 */
    	this.openMapSelect = function(callback){
    		console.log("获取位置")
    		// 使用微信地理位置接口
    		wx.ready(() => {
    			// 获取当前位置
    			wx.getLocation({
    				type: 'gcj02', // 火星坐标
    				success: (res) => {
    					// 打开微信内置地图
    					wx.chooseLocation({
    						latitude: res.latitude,
    						longitude: res.longitude,
    						name: '选择位置',
    						address: '',
    						scale: 14,
    						success: (ress) => {
    							// 用户选择了位置
    							typeof callback == 'function' && callback(ress.latitude,ress.longitude);
    						},
    						fail: (res) => {
    							alert(JSON.stringify(res))
    						}
    					})
    				},
    				fail: (res) => {
    					alert(JSON.stringify(res))
    				}
    			})
    		})
    	}
    	// 其他的方法请查看官方文档自行封装,官方文档https://developers.weixin.qq.com/doc/service/guide/h5/jssdk.html
    }
    
    export {
    	Weixin
    }
    
    

2.2 使用

在使用的的页面调用

  • 导入封装的模块
// 导入封装的wx-jssdk.js模块
	import { Weixin } from 'common/js/wx-jssdk.js';
  • 使用

    let wxJS = new Weixin()
    // sxJS.init('这里是wx.config所需要的参数,可看init方法说明') // 注意,有些方法必须初始化才能调用
    wxJS.navigateTo('/pages/index/index?orderid=1')
    
  • 示例:

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title" @click="toPage">跳转到小程序</text>
		</view>
	</view>
</template>

<script>
	// 导入封装的wx-jssdk.js模块
	import { Weixin } from 'common/js/wx-jssdk.js';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			// 点击跳转到小程序
			toPage(){
				let wxJS = new Weixin()
				// sxJS.init('这里是wx.config所需要的参数,可看init方法说明') // 注意,有些方法必须初始化才能调用
				wxJS.navigateTo('/pages/index/index?orderid=1')
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

</style>


至此,封装微信JS-SDK使用的方法结束,实在不明白的请看一遍官方文档:JS-SDK 使用说明 | 微信服务号文档

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐