uniapp微信js-sdk使用封装

下载依赖包 微信js-sdk

1、因为uni-app如果没有使用npm的方法，根目录就没有package.json，首先在项目根目录运行

npm init

如果已经有package.json，直接进入下一步

2、安装jweixin-module

npm i jweixin-module -S

此外，您也可以直接下载：https://unpkg.com/jweixin-module@1.4.1/out/index.js

使用

在您的js公共文件夹下创建wechat.js

import { params  as PARAMS,appurl as APPURL,appid as APPID
} from "./params.js"; // 公共域名 AppID
import {getConf
} from "@/common/http.api.js";
let jweixin = require('jweixin-module'); // 微信开放接口
let params = window.location.href;
export default {//判断是否在微信中isWechat: function() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/micromessenger/i) == 'micromessenger') {return true;} else {return false;}},//初始化sdk配置initJssdk: function(callback) {let url = window.location.href.split('#')[0];//服务端进行签名 ，可使用uni.request替换。 签名算法请看文档uni.$u.api.getConf({url: url,appid:APPID}).then(res=>{ if(res.flag ===  'Success'){jweixin.config({debug: false,appId: res.data.appId,nonceStr: res.data.nonceStr,timestamp: res.data.timestamp,signature: res.data.signature,url:res.data.url,jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData','scanQRCode']})if (callback) {callback(res.data);}}else{console.log('没进来');}}).catch((e) => {console.log('网络请求错误捕捉',e);});},//在需要定位页面调用getlocation: function(callback) {if (!this.isWechat()) {return;}this.initJssdk(function(res) {jweixin.ready(function() {jweixin.getLocation({type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function(res) {callback(res)},fail: function(res) {},});});});},//获取微信收货地址openAddress: function(callback) {if (!this.isWechat()) {return;}this.initJssdk(function(res) {jweixin.ready(function() {jweixin.openAddress({success: function(res) {callback(res)},fail: function(res) {},});});});},// 微信扫码scanQRCode: function(callback) {const that = this;if (!this.isWechat()) {return;}this.initJssdk(function(res) {console.log('扫码了',res);jweixin.ready(function() {jweixin.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function(res) {let durl=/https:\/\/([^\/]+)\//i;let domain;res.resultStr.replace(durl, (e)=>{domain = e});//判断是否扫码后获取的链接，为后台的链接if(domain != APPURL){alert('该码有误，无法识别！');return false;}callback(res)console.log('扫码',res);},fail: function(err) {console.log('失败',err);},});});});},// 微信分享share: function(data, callback) {if (!this.isWechat()) {return;}this.initJssdk(function(res) {jweixin.ready(function() {var shareData = {title: data.title,desc: data.desc,link: data.path,imgUrl: data.imageUrl,success: function(res) {callback(res)// 分享后的一些操作,比如分享统计等等},cancel: function(res) {}};console.info(shareData);jweixin.updateAppMessageShareData(shareData);jweixin.updateTimelineShareData(shareData);});});},// 微信定位openLocation: function(data, callback) { //打开位置if (!this.isWechat()) {return;}this.initJssdk(function(res) {jweixin.ready(function() {jweixin.openLocation({ //根据传入的坐标打开地图latitude: data.latitude,longitude: data.longitude});});});},// 选择图片chooseImage: function(callback) { //选择图片if (!this.isWechat()) {return;}this.initJssdk(function(res) {jweixin.ready(function() {jweixin.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album'],success: function(rs) {callback(rs)}})});});},//微信支付wxpay: function(data, callback) {let that = this;if (!this.isWechat()) {return;}this.initJssdk(function(res) {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) {callback(res)},fail: function(res) {callback(res)},cancel: function(res) {that.tools.toast('取消支付')},});});});},//微信支付 另一种方式wxpayRidge: function(data, callback) {if (!this.isWechat()) {return;}this.initJssdk(function(result) {console.log(result);jweixin.ready(function() {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": result.data.appId, //公众号ID，由商户传入     "timeStamp": `${result.data.timeStamp}`, //时间戳，自1970年以来的秒数     "nonceStr": result.data.nonceStr, //随机串"package": data.data.package,"signType":"MD5",  //微信签名方式：     "paySign": data.data.paySign //微信签名 },  function(res){callback(res)});})})}
}

main.js加载该文件，这样就可以全局使用wechat.js了

// #ifdef H5
import wechat from './static/js/wechat.js';
Vue.prototype.$wechat = wechat;
// #endif

页面中使用扫码功能

import _wxApi from '@/common/wechat.js'
var wx = require('jweixin-module')
export default {data() {return {};},methods:{btnbindDevice(){let that = this;_wxApi.scanQRCode((resultStr)=>{var id = resultStr.resultStr.split("=")[1];that.$u.api.user_bindDevice({deviceid:id}).then(rest=>{if (rest.flag == "Success") {that.$u.toast(rest.msg);th.list= [];th.page= 1;th.loaded= 1;th.getlist();}else{that.$u.toast('失败原因456789：'+rest.msg);}}).catch((e) => {that.$u.toast('失败原因456：'+e);})})},}

使用用全局的定位功能

// #ifdef H5
//获取定位经纬度
const that = this;
if (this.$wechat && this.$wechat.isWechat()) {this.$wechat.location(function (res) {that.latitude = res.latitude;  //纬度that.longitude = res.longitude; //经度});
}
// #endif

uniapp微信js-sdk使用封装相关推荐

微信-js sdk invalid signature签名错误问题解决
微信-js sdk invalid signature签名错误问题解决参考文章: (1)微信-js sdk invalid signature签名错误问题解决 (2)https://www.cn ...
微信js sdk 分享失败有时候好有时候坏
微信js sdk 分享失败有时候好有时候坏用了一个www开头的域名和一个xx.com的域名两个在解析上有问题. 实践是www.xx.com的比较稳定转载于:https://www.c ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
实战微信JS SDK开发：贺卡制作与播放（1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
uni-app微信小程序上传图片封装
概述 uni-app 微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示上传图标 c ...
微信JS SDK开发共享问题小结
首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应 ...
php转发朋友圈缩略图片,解释最全的，手把手教的微信JS sdk分享设置教程-微信分享插件PHP源码JS-SDK接口，分享到朋友圈转发好友带缩略图...
亲们,此文是我上传的有关微信分享插件PHP源码JS-SDK接口的.rar和.zip的说明使用文件许多朋友都面临自己编写的网站通过微信转发时,无论是分享微信好友或是微信朋友圈时,出现无缩略图显示的问题 ...
微信js sdk动态引用
一般情况下,微信的js-sdk只需要直接引用script即可 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js&qu ...

uniapp微信js-sdk使用封装

uniapp微信js-sdk使用封装

uniapp微信js-sdk使用封装相关推荐

最新文章

热门文章