| 微信JS | 您所在的位置：网站首页 › 微信js-sdk干什么 › 微信JS |
微信JS
|
微信JS-SDK调用文档
1 什么是微信JS-SDK
微信JS-SDK是微信公众平台①面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 ①微信公众平台:管理服务号、订阅号、小程序的后台管理平台 2 微信JS-SDK使用环境微信JS-SDK是基于微信浏览器使用，所以只能在微信内打开链接或者是小程序才可调用微信JS-SDK。下文将介绍在vue中如何引入微信JS-SDK，以公众号为例子。 3 开发环境准备 3.1 内网穿透工具在开发过程中，微信需要和调试页面有通讯，所以要求调试的网页通过外网也可访问，考虑到公司开发都在内网环境，所以需要内网穿透工具，将内网IP映射成对外可访问的域名。在这里推荐使用Ngrok工具。推荐理由:免费。 参考文档地址 3.2 公众号后台准备①登录微信公众平台，进入【设置与开发】-->【基本配置】，获取开发者ID。后续会用到。
②进入【设置与开发】-->【公众号设置】-->【功能设置】，配置JS接口安全域名。配置域名后，公众号开发者才可在该域名下调用微信开放的JS接口。需要注意的是每个月只有5次修改机会。
③进入【设置与开发】-->【开发者工具】-->【web开发者工具】绑定自己的微信账号。
微信开发者工具是为了方便开发者们在PC端调试页面的工具，简单点说可以是PC版的微信浏览器，也是开发调试必备工具。 ①工具下载地址 ②常用功能如下图
①npm安装jweixin-js npm install weixin-js-sdk②使用jweixin-js import wx from "weixin-js-sdk"; 5 调用扫一扫功能①所有使用JS-SDK的页面必须先注入配置信息wx.config()，这里可以参考JS-SDK说明文档的步骤三
②wx.config()需要以下几个参数 debug ：自己填写，测试环境中可以开启，生产环境中需要关闭 appId：本文3.2中有提及appid的获取途径 timestamp：制作签名时的时间戳 nonceStr：制作签名的随机串 signature：签名，微信提供了签名算法，点进附录1可见，拉到页面最底下有加密demo可供下载使用。简单来说签名由SHA1加密（url+timestamp+nonceStr+jsapi_ticket）组成。考虑到jsapi_ticket是会过期的，并且有使用次数，所以我们后端定时访问微信接口获取jsapi_ticket储存在redis中，再做一个接口，前端通过接口给后端传入url，由后端进行加密后返回给前端timestamp、nonceStr、signature jsApiList: []：页面需要用到的JS接口③考虑到将来可能很多页面都需要调用微信扫一扫，所以将微信的接口封装成js文件。页面使用时只需要调用封装好的接口就好了，代码如下。 import wx from "weixin-js-sdk"; import { apiGetWeiChatSign } from "@/api/common"; //后端做好的接口，访问这个接口可获取到相对应的签名、时间戳、随机串 //注入微信配置 export function getWxConfig(url, jsApiList, debug = false) { var tempAppId = "自己的AppId"; var tempUrl = { url: url }; apiGetWeiChatSign(tempUrl) .then(response => { wx.config({ debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: tempAppId, // 必填，公众号的唯一标识,可从公众号后台获取 timestamp: response.data.timestamp, // 必填，生成签名的时间戳 nonceStr: response.data.nonceStr, // 必填，生成签名的随机串 signature: response.data.signature, // 必填，签名 jsApiList: jsApiList // 必填，需要使用的JS接口列表 }); }) .catch(() => { alert("微信配置失败，请联系管理员!"); }); } //调用微信扫一扫 export function getWxSanQRCode(scanType, callback, needResult = 1) { wx.scanQRCode({ needResult: needResult, // 0：扫描结果由微信处理，1：直接返回扫描结果 scanType: scanType, // 一维码：barCode，二维码：qrCode。scanType:["qrCode","barCode"] success: callback, //调用接口成功时 fail: function() { alert("扫码启动失败，请联系管理员!"); } }); }④页面调用封装好的扫一扫功能 引入封装好的函数。
|
【本文地址】