1、引入微信JSSDK

其实这一步我研究了半天，vue中可以实现导入外部cdn资源的办法，但是，在uniapp中，目前我不知道怎么去配置相关文件，按照vue的方法去配置貌似不行，还是说我没找对方法，知道的朋友可以留言告诉我一下。接下来我就说一下我的引入方法。
其实在uniapp的社区有这个：DCloud社区引入微信JSSDK。
如果你们的后端不知道该怎么来写接口配合你使用。你可以给他微信官方的Demo（csdn貌似不能不直接下载，建议拷贝一下网址打开就好了），让他研究一下。
具体该如何使用微信JSSDK的一些相关接口，大家请自行浏览微信官方文档，本文只是提供一种比较简便的封装方法。

两种方法

1、npm

直接在你的项目下打开cmd输入下面的代码引入模块即可

npm install jweixin-module --save

2、直接下载js文件，保存到本地使用

下载地址有好几个

https://unpkg.com/jweixin-module@1.6.0/lib/index.js
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
http://res.wx.qq.com/open/js/jweixin-1.6.0.js

其中第一个是dcloud的下载地址，与上面的npm相对应，后面两个是微信jssdk官方的地址
但是这几个下载都有点问题，这三个地址反正我都试过，下载下来的文件在使用的时候始终会报一些不可名状的错误，所以建议还是用第一种方法，比较稳定。

封装JSSDK方便我们使用

废话不多说，直接上我封装好的代码。
文中涉及到的工具函数以及接口，大家需要根据自己的实际情况进行修改：

import { randomString } from "@/myui/js/random";//随机字符串工具函数
import { getSignature } from "@/api/apiconfig";//你们后端写好的签名的获取接口var wxjssdk = require("jweixin-module"); //引入JSSDK
var nonceStr = randomString(32); // 生成签名的随机串,注意这个s是大写
var timestamp = parseInt(new Date().getTime() / 1000) + ""; // 生成签名的时间戳,到秒级
var url = location.href.split("#")[0]; // 获取当前页面的url中#前面那部分
var appId = "此处用你自己公众号的APPID"; // 公众号的唯一标识appid，注意大小写
var config = { nonceStr, timestamp, url }; //获取微信签名接口所需要的参数
var jsApiList = ["scanQRCode"]; //需要使用的微信JS接口列表
export default {async wxconfig() {let response = await getSignature(config); //获取签名接口，大家可以用uni.request()替代，此处是我自己封装的接口let wxconfig = {debug: false, //正式部署的时候记得把这个关掉// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId, // 必填，公众号的唯一标识timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串,注意这个s是大写signature: response.Data, // 必填，签名//每增加一个要是用的接口，就需要在这里添加相应的微信js接口与之对应jsApiList, // 必填，需要使用的JS接口列表};wxjssdk.config(wxconfig);},//封装微信JSSDK方法,采用闭包函数的原理将res值抛出到回调函数中scanQRcode({ success, fail, needResult = 1 }) {this.wxconfig();wxjssdk.ready(() => {wxjssdk.scanQRCode({needResult, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，// scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: res => {// {errMsg: "scanQRCode:ok", resultStr: ""} 当needResult 为 1 时，resultStr扫码返回的结果// {errMsg: "scanQRCode:ok"}当needResult 为 0 时，会导致页面跳转//扫码成功，抛出扫码结果success(res);},});});wxjssdk.error(res => {console.log("config fail:", res);//config fail，抛出失败原因fail(res);});},
};

这里的接口调用(let response = await getSignature(config);)
大家使用uni.request()代替即可,不会的话，建议你先看一下uniapp文档。

在你需要使用到微信JSSDK的页面文件引入并调用
具体代码如下：

import wxjs from "@/utils/wxJSSDK";wxjs.scanQRcode({success: res => {uni.showToast({title: "扫码成功",icon: "none",});
},
});

其实，有心的朋友可以看到封装完后和uni.scanCode()用起来一样，这样以后就会更方便的使用，不用每调用一次接口，我们都要写一遍微信官方文档的那个流程。

到此我们就完成了微信JSSDK的引入和调用了，有什么问题，欢迎大家留言讨论，一起学习。

uniapp项目引入微信JSSDK并封装使用相关推荐

VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
uniapp微信js-sdk使用封装
uniapp微信js-sdk使用封装下载依赖包微信js-sdk 1.因为uni-app如果没有使用npm的方法,根目录就没有package.json,首先在项目根目录运行 npm init 如果已 ...
uni-app项目引入图标
uni-app项目引入图标普通图标引入 1.阿里巴巴矢量图官网创建图标项目 2.将搜索的图标添加进购物车,在购物车里面将图标添加进项目里面 3.下载该文件到本地,将该文件的css文件复制到项目里面 ...
对hash签名失败_vue项目中微信jssdk在ios签名失败
一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...
vue项目引入微信sdk报错记录
前言 vue项目引入微信sdk $ npm install weixin-js-sdk --save 运行报错如下: npm install weixin-js-sdk --save下载失败显示未配置 ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...
vue项目使用微信jssdk做分享
调用微信JSSDK做分享闲话公司有个需求要做微信分享,上头发话,就做呗.但是为了以后能方便点,就封装了一下,有需要的道友且拿去(我是菜鸡,如果有大佬觉得有问题,欢迎指点). 安装官方将j ...
uni-app 项目引入第三方js插件，单个js文件引入成功，调用该插件方法
通过"vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)"成功移到UNI-APP上方法一: 引用网址:https://www.cnblogs. ...
uni-app h5 使用微信JSSDK的方式
第一步:安装 npm install jweixin-module --save 或者直接下载 https://unpkg.com/jweixin-module@1.4.1/out/index.js ...

uniapp项目引入微信JSSDK并封装使用

uniapp项目引入微信JSSDK并封装使用

1、引入微信JSSDK

两种方法

1、npm

2、直接下载js文件，保存到本地使用

封装JSSDK方便我们使用

uniapp项目引入微信JSSDK并封装使用相关推荐

最新文章

热门文章