概述:

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

JSSDK使用步骤:

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

备注:登录后可在“开发者中心”查看对应的接口权限。

 2.引入js文件(必须)

在需要调用JS接口的页面引入如下JS文件,http://res.wx.qq.com/open/js/jweixin-1.2.0.js (推荐使用: https://res.wx.qq.com/open/js/jweixin-1.0.0.js)

备注:支持使用 AMD/CMD 标准模块加载方法加载.

3.通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

  window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: sign.appId, // 必填,公众号的唯一标识
timestamp: sign.timestamp, // 必填,生成签名的时间戳
nonceStr: sign.nonceStr, // 必填,生成签名的随机串
signature: sign.signature, // 必填,签名,见附录1
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'hideMenuItems',
'showMenuItems',
'showAllNonBaseMenuItem',
'hideAllNonBaseMenuItem',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'uploadVoice',
'downloadVoice',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'openLocation',
'getLocation',
'chooseWXPay',
'onMenuShareQQ',
'scanQRCode',
], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

注: sign需要请求后台获取,jsApiList可根据实际需求增减。

4.通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口
获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载
时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
// 微信扫一扫属于用户触发行为,固不需要放在此处执行
});

注:不论config信息验证是否成功,最终都会执行ready方法

5.通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体
错误信息可以打开config的debug模式查看,也可以在返回的res参数中查
看,对于SPA可以在这里更新签名。
});

调用微信接口(以扫一扫为例)

wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
}); //如需对扫码结果进行处理,可在此方法外层包裹一层函数,传入回调,形如:
const scanQRCode = (fn) => {
wx.scanQRCode({
// 默认为0,扫描结果由微信处理,1则直接返回扫描结果
needResult: 1,
desc: 'scanQRCode desc',
success(res) {
fn(res.resultStr)
},
});
},

介绍就到这里了,如果想了解更多,请参考微信js-sdk说明文档

微信JS-SDK使用步骤(以微信扫一扫为例)的更多相关文章

  1. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  2. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  3. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  4. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  5. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  6. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  7. 微信JS SDK Demo 官方案例[转]

    摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

  8. 微信JS SDK Demo

    微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/ ...

  9. 微信JS SDK使用权限签名算法

    jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据.正常情况下,jsapi_ticket的有效期为7200秒, ...

  10. 微信JS SDK Demo 官方案例

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享 ...

随机推荐

  1. SQL---存储过程---sp_addextendedproperty表字段加描述

    相信很多朋友对利用SQL创建表已经很熟悉了,但我们发现在创建表的同时不能像添加默认值或者主键一样为列加上说明信息,所以我们经常是创建表后再到表的可视化设计器中为列加上说明,这样操作起来就相当麻烦了,本 ...

  2. 安卓Html标签,创意工具类

    之前开发项目中,遇到了在Textview中使用Html标签的情形,由于在代码中使用字符串,Android Studio上一堆的黄色警告,而且对于过时的Html.fromHtml,拿它一点办法也没有. ...

  3. 状态压缩- Brackets

    标签: ACM 题目: We give the following inductive definition of a "regular brackets" sequence: t ...

  4. 【Centos】解决设置JAVA_HOME不断失效问题

    问题还原: 我们都知道,要修改centos的全局配置,可以在/etc/profile这个文件里面修改,比如,我需要修改JAVA_HOME变量 ,那么一般来说我们只要在其中修改,source 一下就行了 ...

  5. lodash源码分析之chunk的尺与刀

    以不正义开始的事情,必须用罪恶使它巩固. --莎士比亚<麦克白> 最近很多事似乎印证了这句话,一句谎言最后要用一百句谎言来圆谎. 本文为读 lodash 源码的第二篇,后续文章会更新到这个 ...

  6. 实践作业2:黑盒测试实践——选择并下载测试工具 Day 2

    1.选择工具为Katalon Studio 基于 Selenium 和 Appium 框架,Katalon Studio隐藏幕后的所有技术复杂性,并提供友好的用户界面与手动模式(用户可以拖放,选择关键 ...

  7. hdu 1151 Air Raid DAG最小边覆盖 最大二分匹配

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1151 题目大意: 城镇之间互相有边,但都是单向的,并且不会构成环,现在派伞兵降落去遍历城镇,问最少最少 ...

  8. 学习python登录demo

    要求编写登录接口 : 1. 输入用户名和密码 2.认证成功后显示欢迎信息 3.用户名输错,提示用户不存在,重新输入(5次错误,提示尝试次数过多,退出程序) 4.用户名正确,密码错误,提示密码错误,重新 ...

  9. 洛谷 P3927 Factorial

    题目描述 SOL君很喜欢阶乘.而SOL菌很喜欢研究进制. 这一天,SOL君跟SOL菌炫技,随口算出了n的阶乘. SOL菌表示不服,立刻就要算这个数在k进制表示下末尾0的个数. 但是SOL菌太菜了于是请 ...

  10. Docker笔记三:基于LVS DR模式构建WEB服务集群

    安装ipvsadm 1. 先在宿主机上安装并以root来启动ipvsadm,每次要在容器中运行ipvs都需要先在宿主机上启动ipvs.如果直接进行2步操作将报出如下错误: Can't initiali ...