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 ...
背后可能涉及到的技术包括前端框架(如React、Vue)、后端服务器(如Node.js、Java)、数据库(如MySQL、MongoDB)、以及微信开放平台的API接口。 8. **安全与隐私**:由于涉及到交易和用户数据,微信云之道必须...
此外,标签中提到了“微信小程序”,这表明该系统可能还整合了微信平台的功能,利用微信小程序进行数据的获取和展示,拓宽了系统的使用场景。微信小程序的特性在于无需安装、即扫即用,对于校园内的用户来说,能够...
1. 用户认证:利用微信小程序的登录接口,实现用户身份验证。 2. 数据同步:将小程序端输入的学生信息实时同步到服务器。 3. 界面展示:设计简洁易用的界面,方便学生查看和更新个人状态。 4. 通知推送:通过微信小...
- **微信小程序接入**:通过微信小程序接口,用户可以方便地在移动端查看招标信息、提交投标、接收通知等,拓宽了服务渠道。 3. **技术实现** - **前后端分离**:使用Ajax和RESTful API实现前后端交互,提高用户...
《基于SSM+Vue的公司员工工作日志办公系统详解》 在当今信息化时代,企业对内部管理的需求日益增强,员工工作日志办公系统成为提升工作效率、优化工作流程的重要工具。本文将深入探讨一个基于SSM(Spring、...
微信小程序的标签表明,此系统可能还集成了微信小程序接口,以实现移动端的访问和评价功能,拓宽了评价途径,增强了系统的普及性和便捷性。通过微信小程序,用户可以随时随地进行教学评价,进一步提升了教学评价的...
云引擎命令行工具使用详解: API 参考文档: 项目示例 项目模板: Node.js Demo 汇总: 微信公众平台: 微博 OAuth 授权验证: 历史版本 见 npm install leanengine@2 --save 升级说明见 npm install leanengine@1 -...
3. 前端界面:采用HTML5、CSS3和JavaScript,使用Bootstrap或Vue.js等前端框架构建响应式用户界面。 4. 安全性:集成Spring Security进行权限控制,防止非法访问,同时使用HTTPS协议保证数据传输安全。 四、具体...
【标题】基于Vue.js的跨平台多端应用前端框架uni-app一站式开发资源汇总 【描述】uni-app是一款由DCloud(即成都动软卓越科技有限公司)推出的强大的前端框架,它充分利用了Vue.js的特性,实现了跨平台的多端开发。...
【知识点详解】 1. 帆软报表工程师(FCRA)认证涉及的帆软报表工具:帆软报表(FineReport)是一款基于Java语言开发的报表工具,它提供了丰富的图表类型,如饼图、仪表图、地图、雷达图、甘特图等,并且支持自定义...
- **Vue.js**:一种用于构建用户界面的渐进式JavaScript框架,以其简洁、易用和灵活性著称。 - **微信小程序**:一种无需下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用。 - **Android App开发**:指为...
【Asp.net网上商城开发详解】 Asp.net技术是由微软公司推出的一种强大的Web应用程序开发框架,它为构建高效、安全且可伸缩的网站提供了全面的支持。基于Asp.net开发网上商城,是利用该框架的强大功能来实现一个完整...
当尝试通过JavaScript进行跨域请求时,浏览器会阻止这种行为,如使用Ajax请求时会遇到"Access-Control-Allow-Origin"头部缺失导致的错误。 【解决跨域的几种方法】 1. JSONP(JSON with Padding):这是一种较早的...
**MIP技术详解** MIP主要由三部分组成:MIP HTML、MIP CSS和MIP JS。MIP HTML是基于HTML的轻量级语法,它遵循特定的规则以确保快速渲染。MIP CSS是为了减少样式计算时间而定制的,不允许使用某些CSS属性。MIP JS则...
- **后端**:推荐使用SpringBoot或Node.js搭建后端服务,支持RESTful API接口。 - **数据库**:MySQL或MongoDB,根据具体需求选择合适的数据库。 2. **技术选型**: - 本系统采用前后端分离的设计模式,前端负责...
3. **服务器端技术**:虽然未明确指出,但考虑到系统的功能,可能使用了如Python的Flask或Django框架,或者Node.js的Express等,它们可以轻松地处理HTTP请求并与GDBM数据库进行交互。 4. **前端框架**:为了实现...