uniapp 中使用jssdk正确姿势

这是基于企业项目实战分享

npm方式使用下方进行安装

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.(方法)

uniapp 中使用jssdk正确姿势相关推荐

[golang]time.After 在select中使用的正确姿势（解决超时逻辑未生效bug）
前言 select 的语法如下所示每个case都必须是一个通信所有channel表达式都会被求值所有被发送的表达式都会被求值如果任意某个通信可以进行,它就执行:其他被忽略. 如果有多个case ...
java map合并_详解Java8合并两个Map中元素的正确姿势
1. 介绍本入门教程将介绍Java8中如何合并两个map. 更具体说来,我们将研究不同的合并方案,包括Map含有重复元素的情况. 2. 初始化我们定义两个map实例 private static ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...
word流程图擦除_word画流程图 Word中绘制流程图的正确姿势，这招大多数人不知道...
如何在Word中绘制流程图?相信这个问题,许多人都知道,大多数人也都会.不过,还是有大多数人使用的方法却不是正确的方法.所以,今天小编就来为大家讲一下如何正确的绘制流程图.用正确的方法绘制流程图,事半 ...
正确姿势避坑 Python 中的6个典型错误
点击关注我哦一篇文章带你使用正确姿势避坑 Python 中的6个典型错误 Python是一种高级的动态脚本语言.它易于使用的特性使得它非常流行,并且在最近几年得到了扩展.易用性也从易滥用开始.我们列 ...
Nuxt 项目引入外部Js的正确姿势，问题描述：打包构建之后引入的外部 js失效，构建之后的 .nuxt 文件夹下的js文件中，引入 js 的script标签凭空消失！
首先先说我遇到的问题描述: 我是用vue + nuxt项目,项目中使用了阿里播放器,于是我在vue页面中直接引入了阿里播放器的 css和js文件,然后运行没有任何问题:如下图所示: 但是! ...
有一说一！这才是RabbitMQ实现分布式事务的正确姿势（项目实战）
分布式事务随着互联网快速发展,微服务,SOA 等服务架构模式正在被大规模的使用,现在分布式系统一般由多个独立的子系统组成,多个子系统通过网络通信互相协作配合完成各个功能. 有很多用例会跨多个子系统才 ...
Ubuntu创建新用户的正确姿势
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<Ubuntu 创建新用户的正确姿势>原文地址.更欢迎来我的小站看更多原创内容:godbmw.com,进行&q ...
互联网大厂内推求职的正确姿势？
作者 | 码农唐磊来源 | 程序猿石头(ID:tangleithu) 背景每个人的职业生涯基本上都离不开"投简历找工作"这件事(什么,你家里有矿?当我没说),那拿着简历找工作正 ...

uniapp 中使用jssdk正确姿势

uniapp 中使用jssdk正确姿势相关推荐

最新文章

热门文章