`
qw232144
  • 浏览: 35596 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

微信JS接口汇总及使用详解

 
阅读更多

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

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

 

2.注入配置config接口
所有需要使用JSSDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用)。

wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId: '', // 必填,公众号的唯一标识
 timestamp: , // 必填,生成签名的时间戳
 nonceStr: '', // 必填,生成签名的随机串
 signature: '',// 必填,签名,见附录1
 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

 3.验证通过ready接口

wx.ready(function(){

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

 

4.验证失败error接口

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

 

5.接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

success:接口调用成功时执行的回调函数。
fail:接口调用失败时执行的回调函数。
complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

调用成功时:"xxx:ok" ,其中xxx为调用的接口名
用户取消时:"xxx:cancel",其中xxx为调用的接口名
调用失败时:其值为具体错误信息

基础接口
判断当前客户端版本是否支持指定JS接口

 

wx.checkJsApi({
jsApiList: ['chooseImage'] // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

});

 

6.分享接口

(1)获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () { 
// 用户确认分享后执行的回调函数
},
cancel: function () { 
// 用户取消分享后执行的回调函数
}
});

 

(2)获取“分享给朋友”按钮点击状态及自定义分享内容接口

 

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () { 
// 用户确认分享后执行的回调函数
},
cancel: function () { 
// 用户取消分享后执行的回调函数
}
});

 

(3)获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '' // 分享图标
success: function () { 
// 用户确认分享后执行的回调函数
},
cancel: function () { 
// 用户取消分享后执行的回调函数
}
});

 

7. 获取网络状态接口

wx.getNetworkType({
    success: function (res) {
        var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi
    }
});

 
8.界面操作

//隐藏右上角菜单接口
wx.hideOptionMenu();
//显示右上角菜单接口
wx.showOptionMenu();
//关闭当前网页窗口接口
wx.closeWindow();
//批量隐藏功能按钮接口
wx.hideMenuItems({
    menuList: [] // 要隐藏的菜单项,所有menu项见附录3
});
批量显示功能按钮接口
wx.showMenuItems({
    menuList: [] // 要显示的菜单项,所有menu项见附录3
});
隐藏所有非基础按钮接口
wx.hideAllNonBaseMenuItem();
显示所有功能按钮接口
wx.showAllNonBaseMenuItem();
微信扫一扫
调起微信扫一扫接口
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function () {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
});

 

9.发起一个微信支付请求

wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳
noncestr: '', // 支付签名随机串
package: '', // 订单详情扩展字符串,详见附录5
paySign: '', // 支付签名,详见附录5
});

 

分享到:
评论

相关推荐

    微信小程序问题汇总及详解《四》图片上传和地图

    获取日期时间可以用小程序里自带的js文件,var util = require('../../utils/util.js') 引入文件   var date = new Date(); //有需要改的参数可以自己定义也可以去源文件找到然后更改 //传后台用这个参数 var ...

    微信云之道知识付费小程序+pc+h5 3个版本同步-测试可用.rar.zip

    背后可能涉及到的技术包括前端框架(如React、Vue)、后端服务器(如Node.js、Java)、数据库(如MySQL、MongoDB)、以及微信开放平台的API接口。 8. **安全与隐私**:由于涉及到交易和用户数据,微信云之道必须...

    基于ssm+vue的毕业生就业信息统计系统.zip

    此外,标签中提到了“微信小程序”,这表明该系统可能还整合了微信平台的功能,利用微信小程序进行数据的获取和展示,拓宽了系统的使用场景。微信小程序的特性在于无需安装、即扫即用,对于校园内的用户来说,能够...

    基于ssm疫情期间学生信息管理平台.zip

    1. 用户认证:利用微信小程序的登录接口,实现用户身份验证。 2. 数据同步:将小程序端输入的学生信息实时同步到服务器。 3. 界面展示:设计简洁易用的界面,方便学生查看和更新个人状态。 4. 通知推送:通过微信小...

    基于springboot电子招投标系统.zip

    - **微信小程序接入**:通过微信小程序接口,用户可以方便地在移动端查看招标信息、提交投标、接收通知等,拓宽了服务渠道。 3. **技术实现** - **前后端分离**:使用Ajax和RESTful API实现前后端交互,提高用户...

    基于ssm+vue公司员工工作日志办公系统.zip

    《基于SSM+Vue的公司员工工作日志办公系统详解》 在当今信息化时代,企业对内部管理的需求日益增强,员工工作日志办公系统成为提升工作效率、优化工作流程的重要工具。本文将深入探讨一个基于SSM(Spring、...

    基于ssm+vue+web的在线教学质量评价系统.zip

    微信小程序的标签表明,此系统可能还集成了微信小程序接口,以实现移动端的访问和评价功能,拓宽了评价途径,增强了系统的普及性和便捷性。通过微信小程序,用户可以随时随地进行教学评价,进一步提升了教学评价的...

    leanengine-node-sdk:LeanEngine Node.js SDK

    云引擎命令行工具使用详解: API 参考文档: 项目示例 项目模板: Node.js Demo 汇总: 微信公众平台: 微博 OAuth 授权验证: 历史版本 见 npm install leanengine@2 --save 升级说明见 npm install leanengine@1 -...

    毕业设计电费管理系统(java).zip

    3. 前端界面:采用HTML5、CSS3和JavaScript,使用Bootstrap或Vue.js等前端框架构建响应式用户界面。 4. 安全性:集成Spring Security进行权限控制,防止非法访问,同时使用HTTPS协议保证数据传输安全。 四、具体...

    基于Vue.js的跨平台多端应用前端框架uni-app一站式开发资源汇总

    【标题】基于Vue.js的跨平台多端应用前端框架uni-app一站式开发资源汇总 【描述】uni-app是一款由DCloud(即成都动软卓越科技有限公司)推出的强大的前端框架,它充分利用了Vue.js的特性,实现了跨平台的多端开发。...

    帆软认证报表工程师(FCRA)考试(试卷二).docx

    【知识点详解】 1. 帆软报表工程师(FCRA)认证涉及的帆软报表工具:帆软报表(FineReport)是一款基于Java语言开发的报表工具,它提供了丰富的图表类型,如饼图、仪表图、地图、雷达图、甘特图等,并且支持自定义...

    jsp_java_ssm大学生综合素质评分平台毕业论文.docx

    - **Vue.js**:一种用于构建用户界面的渐进式JavaScript框架,以其简洁、易用和灵活性著称。 - **微信小程序**:一种无需下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用。 - **Android App开发**:指为...

    基于Asp.net网上商城

    【Asp.net网上商城开发详解】 Asp.net技术是由微软公司推出的一种强大的Web应用程序开发框架,它为构建高效、安全且可伸缩的网站提供了全面的支持。基于Asp.net开发网上商城,是利用该框架的强大功能来实现一个完整...

    完美解决浏览器跨域的几种方法(汇总)

    当尝试通过JavaScript进行跨域请求时,浏览器会阻止这种行为,如使用Ajax请求时会遇到"Access-Control-Allow-Origin"头部缺失导致的错误。 【解决跨域的几种方法】 1. JSONP(JSON with Padding):这是一种较早的...

    泛目录聚合版MIP泛目录视频导航泛目录

    **MIP技术详解** MIP主要由三部分组成:MIP HTML、MIP CSS和MIP JS。MIP HTML是基于HTML的轻量级语法,它遵循特定的规则以确保快速渲染。MIP CSS是为了减少样式计算时间而定制的,不允许使用某些CSS属性。MIP JS则...

    基于web的构件化学生信息管理系统开题报告.docx

    - **后端**:推荐使用SpringBoot或Node.js搭建后端服务,支持RESTful API接口。 - **数据库**:MySQL或MongoDB,根据具体需求选择合适的数据库。 2. **技术选型**: - 本系统采用前后端分离的设计模式,前端负责...

    WILLPOS-开源

    3. **服务器端技术**:虽然未明确指出,但考虑到系统的功能,可能使用了如Python的Flask或Django框架,或者Node.js的Express等,它们可以轻松地处理HTTP请求并与GDBM数据库进行交互。 4. **前端框架**:为了实现...

Global site tag (gtag.js) - Google Analytics