微信小程序高级基础
微信小程序的注册和服务器配置:
小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用,也体现了龙哥"用完即走"的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,而且又不用安装卸载。
微信小程序其实是微信提高了自身对于HTML5特性支持的能力，开发了很多的系统调用。之前h5的存在有很多因素失去了绝大部分的核心产品市场份额，h5面临着不能一次开发多次运行，还有不同浏览器的兼容性问题，所以才有了微信小程序，小程序更好的兼容了微信平台。
微信小程序：
重要:
app.js
app.json
app.wxss
// app.js
onLaunch:function(){
// 当程序初始化的时候回执行onLaunch显示的内容
}
// 定义了一个全局的方法
getUserInfo:function(){
}
// 全局的属性
globalData: {
userInfo: null
}
// app.json
全局配置
// app.wxss
全局的样式
// pages
index.js
index.wxml
index.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
<button bindtap="uploadImg">上传图片</button>
<image src="{{imgSrc}}"></image>
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
// success
errMsg:调用结果
code: 用户允许登录后,回调内容会带上code,有效五分钟,开发者需要将code发送到开发者服务器后台,使用code换取session_key api,将code换为openid和session_key
// app.js
App({
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
<button bindtap="login">登录</button>
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 |
用户从该按钮进入会话,开发者将收到带上本参数的事件推送,本参数可以用于区分用户进入客服会话的来源 |
<contact-button type="default-light" size="20" session-from="weapp"></contact-button>
客服会话:
// index.wxml
<contact-button type="default-light" size="20" session-from="weapp"></contact-button>
小程序后台消息推送:
模板消息
form
表单,将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>提交
当点击<form/>表单中formType为submit的<button/>组件时,会将表单组件中的value值进行提交,需要在表单组件中加上name来作为key.
| 属性名 | 类型 | 说明 |
|---|---|---|
report-submit |
Boolean |
是否返回formId用于发送模板消息 |
bindsubmit |
EventHandle |
event.detail={} |
bindreset |
EventHandle |
表单重置 |
小程序后台模板消息,模板库
// index.js
const app = getApp()
// 填写微信小程序appid
var 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
<button bindtap="wxpay">发起支付</button>
appId,nonceStr,package,paySign,signType,timeStamp.
发起支付的请求:
wx.requestPayment({
'timeStamp': '',
'nonceStr': '',
'pachage': '',
'signType': 'MD5',
'paySign': '',
success:function(res){}
})
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞