uniapp 中使用jssdk正确姿勢

這是基于企業項目實戰分享

 pm方式使用下方進行安裝

npm install jweixin-module --save  

 安裝在項目中的效果如圖：

 接下自己定義個js, 引入我們用npm引入的子產品：

jwx 代碼：

let jweixin = require('jweixin-module');
import {
	jsdkSignature
} from '../request/api.js'
export default {
	//判斷是否在微信中    
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
			return true;
		} else {
			alert('不是微信用戶端,請在微信用戶端操作在,謝謝');
			return false;
		}
	},
	initJssdk: function(callback) {
		//擷取目前url然後傳遞給背景擷取授權和簽名資訊  
		let url = location.href;
		jsdkSignature({
			data: {
				url: url
			},
			success(res) {
				// console.log('背景傳回簽名')
				// alert(JSON.stringify(res))
				//傳回需要的參數appId,timestamp,noncestr,signature等  
				//注入config權限配置  
				jweixin.config({
					debug: false,
					appId: res.data.appId,
					timestamp: res.data.timestamp,
					nonceStr: res.data.nonceStr,
					signature: res.data.signature,
					jsApiList: [ //這裡是需要用到的接口名稱  
						'checkJsApi', //判斷目前用戶端版本是否支援指定JS接口  
						'onMenuShareAppMessage', //分享接口  
						'getLocation', //擷取位置  
						'openLocation', //打開位置  
						'scanQRCode', //掃一掃接口  
						'chooseWXPay', //微信支付  
						'chooseImage', //拍照或從手機相冊中選圖接口  
						'previewImage', //預覽圖檔接口  
						'uploadImage' //上傳圖檔  
					]
				});
				if (callback) {
					callback(res.data);
				}
			}
		});
	},
	//在需要定位頁面調用  
	getlocation: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信用戶端')  
			return;
		}
		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)
				},
				// complete:function(res){  
				//     console.log(res)  
				// }  
			});
		});
	},
	//打開位置
	openlocation: function(data) {
		if (!this.isWechat()) {
			//console.log('不是微信用戶端')  
			return;
		}
		jweixin.ready(function() {
			jweixin.openLocation({
				latitude: data.latitude,
				longitude: data.longitude,
				name: data.name,
				address: data.address,
				scale: 14,
			});
		});
	},
	//選擇圖檔
	chooseImage: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信用戶端')  
			return;
		}
		//console.log(data);  
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(rs) {
						callback(rs)
					}
				})
			});
		});
	},
	//微信支付  
	wxpay: function(data, callback) {
		if (!this.isWechat()) {
			//console.log('不是微信用戶端')  
			return;
		}
		jweixin.ready(function() {
			jweixin.chooseWXPay({
				timestamp: data.timestamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付背景生成簽名使用的timeStamp字段名需大寫其中的S字元  
				nonceStr: data.nonceStr, // 支付簽名随機串，不長于 32 位  
				package: data.package, // 統一支付接口傳回的prepay_id參數值，送出格式如：prepay_id=\*\*\*）  
				signType: data.signType, // 簽名方式，預設為'SHA1'，使用新版支付需傳入'MD5'  
				paySign: data.paysign, // 支付簽名  
				success: function(res) {
					// console.log(res);  
					callback(res)
				},
				fail: function(res) {
					callback(res)
				},
				// complete:function(res){  
				//     console.log(res)  
				// }  
			});
		});
	}
}
           

 說明：jwx 中請求了背景擷取簽名, url 為目前路徑 location.href;

我這裡是用java實作url簽名：

 用的是第三方的sdk （wxjava），如果是用maven，可以使用下面方式引入，版本自行更改

<!--微信相關-->
<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-miniapp</artifactId>
    <version>${weixin-java.version}</version>
</dependency>
<weixin-java.version>3.9.0</weixin-java.version>      

之後将自己擷取APPID 和 秘鑰配置好可以了。

因為我們自定義了js, 要想在全局中使用，就必須挂載

添加到 main.js中

import jwx from 'utils/common/jwx.js'

Vue.prototype.$jwx = jwx

 之後我們可以在頁面中使用，但是我們init（初始化）配置隻要一次就行，是以我們可以在App.vue 中配置好。

 jssdk 是基于微信浏覽器，那就要判斷是否在微信的環境中

接下來就是最重要的，如何在頁面中使用：

 可以直接用this調用，this.$jwx.(方法)