uniapp在开发微信H5使用微信js-sdk记录
本文介绍了如何在uni-app中使用jweixin-module插件实现微信功能。该插件支持微信支付、分享、获取用户信息、扫码等功能。首先通过npm安装插件,然后在项目中封装wx-jssdk.js文件,提供初始化、支付、分享等基础方法。使用时导入封装模块,创建实例后即可调用相关功能。文中给出了具体代码示例和调用方法,并提供了微信官方文档链接供参考。
·
在 uni-app 中,jweixin-module 插件主要用于实现与微信相关的功能,通常用于微信公众号或小程序开发中,帮助调用微信的 SDK 实现一些功能,如分享、支付、获取微信用户信息等等
使用场景
-
微信支付:可以集成微信支付功能,支持发起支付请求。
-
微信分享:可以实现分享到朋友圈、微信群、微信好友等。
-
获取微信用户信息:可以获取到用户的头像、昵称等信息。
-
调起微信扫一扫功能:实现扫码功能,用于二维码识别。
-
调起微信小程序:在 H5 页面中跳转到微信小程序。
-
支付回调与支付状态:处理支付的回调以及支付状态。
等等还有很多,可以查看官方的文档
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 使用说明 | 微信服务号文档
更多推荐
所有评论(0)