微信小程序高级基础
微信小程序的注册和服务器配置:
小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用,也体现了龙哥"用完即走"的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,而且又不用安装卸载。
微信小程序其实是微信提高了自身对于HTML5特性支持的能力，开发了很多的系统调用。之前h5的存在有很多因素失去了绝大部分的核心产品市场份额，h5面临着不能一次开发多次运行，还有不同浏览器的兼容性问题，所以才有了微信小程序，小程序更好的兼容了微信平台。
微信小程序：
重要:
app.jsapp.jsonapp.wxss复制代码
// app.jsonLaunch:function(){ // 当程序初始化的时候回执行onLaunch显示的内容 } // 定义了一个全局的方法 getUserInfo:function(){ } // 全局的属性 globalData: { userInfo: null }// app.json全局配置// app.wxss全局的样式复制代码 // pagesindex.jsindex.wxmlindex.wxss复制代码
上传图片案例:
wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照复制代码
示例代码:
wx.chooseImage({ count: 1, // 默认为9 sizeType: ['original','compressed'], // 可以指定是原图还是压缩图,默认两者都有 sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认两者都有 success: function(res){ // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths }})复制代码 // index.xml复制代码
data:{ imgSrc: ""},uploadImg: function(){ var that = this; wx.chooseImage({ count: 1, // 默认为9 sizeType: ['original','compressed'], // 可以指定是原图还是压缩图,默认两者都有 sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认两者都有 success: function(res){ // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths that.setData({ imgSrc: tempFilePaths[0] }) console.log(tempFilePaths); } })}复制代码 wx.previewImage(OBJECT)预览图片复制代码
上传wx.uploadFile(OBJECT)
将本地资源上传到开发者服务器,如页面通过wx.chooseImage等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器,客户端发起一个HTTPS POST请求,其中content-type为multipart/form-data.
参数说明:
| 参数 | 类型 | 说明 |
|---|---|---|
url | String | 开发者服务器url |
filePath | String | 要上传文件资源的路径 |
name | String | 文件对应的key,开发者在服务器端通过这个key可以获取文件二进制内容 |
header | Object | HTPP请求Header, header中不能设置 Referer |
加个name属性如表单,filePath为tempFilePaths,name对应的key要进行文件二进制的处理.
返回成功的参数:
success:data: 开发者服务器返回的数据statusCode:HTTP状态码复制代码
上传文件的示例代码:
wx.chooseImage({ success.function(res){ var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: "http://example.weixin.qq.com/upload", filePath: tempFilePaths[0], name: 'file', // 可以传其他的数据进去 forData: { 'user': 'test' }, success: function(res){ var data = res.data } }) }})复制代码 uploadImg: function(){ var that = this; wx.chooseImage({ count: 1, // 默认为9 sizeType: ['original','compressed'], // 可以指定是原图还是压缩图,默认两者都有 sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认两者都有 success: function(res){ // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths // 上传图片 wx.uploadFile({ url:"", filePath: tempFilePaths[0], name: 'fileup', success: function(res){ var data = res.data; console.log(data); }, fail: function(){ console.log("fail"); } }); } })}复制代码 下载文件:
wx.downloadFile({ url: "http://example.com/audio/123", success: function(res){ }})复制代码 登录
api获取openid
wx.login(OBJECT)复制代码
调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid)以及本次登录的会话密钥(session_key),用户数据的加解密通讯需要依赖会话密钥完成.
success 成功fail 失败complete 结束复制代码
用户信息
wx.getUserInfo(OBJECT)复制代码
获取用户信息,需要调用wx.login接口.
wx.getUserInfo({ success: function(res){ var userInfo = res.userInfo var nickName = userInfo.nickName var gender = userInfo.gender var province = userInfo.province var city = userInfo.city var country = userInfo.country }})复制代码 登录
wx.login// successerrMsg:调用结果code: 用户允许登录后,回调内容会带上code,有效五分钟,开发者需要将code发送到开发者服务器后台,使用code换取session_key api,将code换为openid和session_key复制代码
// app.jsApp({ onLaunch: function(){ wx.login({ success: function(res){ if(res.code){ // 发起网络请求 wx.request({ url: "", data: { code: res.code } }) }else{ console.log("获取用户登录失败"+res.errMsg); } } }) }})复制代码 利用code换取session_key
这是一个HTTPS接口,开发者服务器使用登录凭证code获取session_key和openid,其中session_key是对用户数据进行加密签名的密钥,为了安全,session_key不应用在网络上传输.
接口地址:
请求参数:
| 参数 | 说明 |
|---|---|
appid | 小程序唯一标识 |
secret | 小程序的appsecret |
js_code | 登录时获取的code |
grant_type | 值为authorization_code |
返回:
| 参数 | 说明 |
|---|---|
openid | 用户的唯一标识 |
session_key | 会话密钥 |
登录:
// index.wxml复制代码
login: function(){ wx.login({ success:function(res){ console.log(res.code); wx.request({ url: "", data: { code: res.code }, success: function(res){ console.log(res); } }) } });}// code secret js_code api复制代码 发送请求:(示例代码)
wx.request({ url: "test.php", data: { x: '', y: '', }, header: { 'content-type': 'application/json' }, success: function(res){ console.log(res.data) }}) 复制代码 客服会话
contact-button复制代码
客服会话按钮,用于页面上显示一个客服会话按钮,用户点击按钮后进入客服会话.
| 属性名 | 类型 | 说明 |
|---|---|---|
size | Number | 会话按钮的大小,有效18-27,单位:px |
type | String | 会话按钮的样式类型,有效值为default-dark,default-light |
session-from | String | 用户从该按钮进入会话,开发者将收到带上本参数的事件推送,本参数可以用于区分用户进入客服会话的来源 |
复制代码
客服会话:
// index.wxml复制代码
小程序后台消息推送:
模板消息
form表单,将组件内的用户输入的提交当点击
| 属性名 | 类型 | 说明 |
|---|---|---|
report-submit | Boolean | 是否返回formId用于发送模板消息 |
bindsubmit | EventHandle | event.detail={} |
bindreset | EventHandle | 表单重置 |
小程序后台模板消息,模板库
// index.jsconst app = getApp()// 填写微信小程序appidvar appid = '';// 填写微信小程序secret var secret = '';Page({ // 页面数据 data: { access_token: '', openid: '', }, // 表单请求 formRequst: function (e) { var that = this; // 登录 wx.login({ success: res => { // 调用接口获取登录凭证（code） console.log("获取code 成功", res.code); var code = res.code; // 获取openId wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&grant_type=authorization_code&js_code=' + code, header: { 'content-type': 'application/json' //默认值 }, success: function (res) { console.log("获取openid 成功", res.data.openid); var openid = res.data.openid; that.setData({ openid: openid }) // wx.setStorageSync("openid", openid) // 获取 access_token wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret, method: 'GET', header: { 'content-type': 'application/json' //默认值 }, // 成功 success: function (res) { console.log("获取小程序 access_token 成功", res.data.access_token); that.setData({ access_token: res.data.access_token }) // 上上一步 }, // 失败 fail: function (err) { console.log("获取小程序 access_token 失败", err); } }) // 上一步 }, fail: function (err) { console.log("获取openid 失败", err); } }) } }) }, // 提交表单 formSubmit: function (e) { console.log('form发生了submit事件，携带数据为：', e.detail.value); console.log('form发生了submit事件，携带数据为：', e.detail.formId); var that = this; // 发送模板消息 wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token, data: { // openid "touser": wx.getStorageSync("openid"), // 模板消息的id "template_id": "", // "form_id": "FORMID", "form_id": e.detail.formId, data: { "keyword1": { "value": "2018.10.10" }, "keyword2": { "value": "小红" } }, "emphasis_keyword": "keyword1.DATA" }, method: 'POST', // 成功 success: function (res) { var data = res.data; console.log("sendTemplateMessage 成功", data); wx.showToast({ title: '发送成功', icon: 'success' }) }, // 失败 fail: function (err) { console.log("sendTemplateMessage 失败", err); } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // this.formSubmit(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { this.formRequst(); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})复制代码
WebSocket(双向的)
wx.connetSocket(OBJECT)复制代码
创建一个WebSocket连接,一个微笑小程序同时只能有一个WebSocket连接,如果当前已存在一个WebSocket连接,会自动关闭该连接,并重新创建一个WebSocket连接.
onLoad: function(){ wx.connectSocket({ url: api, data: {}, header: { 'content-type': 'application/json' }, method: 'GET', success: function(){ console.log("客户端连接成功"); } })}复制代码
wx.sendSocketMessage(OBJECT)
通过WebSocket连接发送数据,需要先wx.connectSocket,并在wx.onSocketOpen回调之后才能发送.
wx.onSocketOpen
监听WebSocket连接打开事件
wx.connectSocket({})wx.onSocketOpen(function(res){})复制代码 微信支付
小程序后台微信支付申请
小程序api微信支付
wx.requestPayment 发起微信支付
// index.wxml复制代码
appId,nonceStr,package,paySign,signType,timeStamp.复制代码
发起支付的请求:
wx.requestPayment({ 'timeStamp': '', 'nonceStr': '', 'pachage': '', 'signType': 'MD5', 'paySign': '', success:function(res){}})复制代码 达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞