微信小程序开发(六) 本文关键词：程序开发，微信小
微信小程序开发(六) 本文简介：微信小程序开发(六)第六章APIAPI框架总览(绘图API专列章学习,暂略)网络API媒体API数据API位置API窗口API绘图API开放API设备API1Wx.request2Wx.uploadFile3Wx.downloadFile4Wx.connectSocket7onSocketOpen|
微信小程序开发(六) 本文内容：
微信小程序开发(六)
第六章
API
API框架总览(绘图API专列章学习,暂略)
网络API
媒体API
数据API
位置API
窗口API
绘图API
开放API
设备API
1
Wx.request
2
Wx.uploadFile
3
Wx.downloadFile
4
Wx.connectSocket
7
onSocketOpen|onSocketError
5
Wx.sendSocketMessage
8
onSocketMessage
6
closeSocke
onSocketClose
1
Wx.closeImage
2
Wx.previewImage
3
Wx.startRecord
4
Wx.stopRecord
5
Wx.play[background][voice,audio]
10
onBackgroundAudioPlay
6
Wx.pause[background][voice,audio]
11
onBackgroundAudioPause
7
Wx.stop[background][voice,audio]
12
onBackgroundAudioStop
8
Wx.chooseVideo
9
Wx.saveFile
1
Wx.getStorage
2
Wx.setStorage
3
Wx.clearStoage
1
Wx.getLocation
2
Wx.openLocation
1
Wx.getNetWorkType
3
onAccelerometerChange
2
Wx.getSystemInfo
4
onCompassChange
1
Wx.login
2
Wx.getUserInfo
3
Wx.requestPayment
1
Wx.navigateTo
7
Wx.hideKeyBoard
2
Wx.navigateBack
8
Wx.stopPulldownFresh
3
Wx.directTo
9
Wx.setNavigationBarTitle
4
Wx.createAnimation
10
wx.showNavigationBarLoading
5
Wx.createContext
11
wx.hideNavigationBarLoading
6
Wx.drawCanvas
第1节
网络API
1.
发送请求:wx.request(object)
+数据请求
Wx.request({
url:url,data:{object},method:get|post,dataType:json,header:{content-type:application/json},success:function(res){var
data=res.data},fail:function(){},complate:function(){}
})
2.
上传下载:wx.upload(object)|wx.download(object)
+选取一个图片上传
Wx.chooseImage({
Success:function(res){
Var
tmp=res.tempFilePaths
Wx.uploadFile({
url:url,filePath:tmp[0],name:”file”,formData:{user:test}
})
}
})
+下载一段音乐播放
Wx.downloadFile({
url:url,type:audio,success:function(res){
wx.playVoice({filePath:res.tmpFilePath})
}
})
3.
嵌套字:
+连接
Wx.connectSocket({url:url,data:{data},header:{},method:get|post})
+打开
Wx.onSocketOpen(function(res){…})
+出错
Wx.onSocketError(function(res){…})
+发数据
Wx.sendSocketMessage({data:msg})
+发消息(回调)
Wx.onSocketMessage(function(res){…})
+关闭
Wx.closeSocket({url:url})
+关闭(回调)
Wx.onSocketClose(function(res){…})
第2节
媒体API
1.
图片:
+选图
Wx.chooseImage({count:1,sizetype:[],sourceType:[album,camera],success:function(res){…}})
+预览
Wx.previewImage({current:’’,urls:[]})
2.
录音:
+录音
Wx.startRecord({success:function(){},fail:function(){}})
+停止
Wx.stopRecord()
3.
音频控制:
+播放
Wx.playVoice({filePath:xxxx,comlete:function(){…}})
+暂停
Wx.pauseVoice()
+停止
Wx.stopVoice()
4.
音乐控制:
+获状态
Wx.getBackgroundAudioPlayState({success:function(res){res.status|dataUrl|currentPosition|duration}})
+播放
Wx.playBackgroundAudio({dataUrl:xx,title:xx,coverImgUrl:xx})
+暂停
Wx.pauseBackgroundAudio()
+定位
Wx.seekBackgroundAudio({position:60})
+停止
Wx.stopBackgroundAudion()
5.
视频:
+表现层
get
+逻辑层
Page({
Data:{src:xxx},getVideo:function(){
var
that=this;
wx.chooseVideo({
sourceType:[],success:function(res){
that.setData({
src:res.tempfilePath
})}})}})
6.
音频组件控制:
+创建上下文
Var
ctx=wx.createAudioContext(audioId)
+播放
Ctx.paly()
+暂停
Ctx.pause()
+进到
Ctx.seek(n)
+从头
Ctx.seek(0)
+停止
Ctx.stop()
7.
视频组件控制:
+创建上下文
Var
ctx=wx.createVedioContext(videoId)
+发送弹幕
Ctx.sendDanmu({text:xxxx,color:#xxxxxx})
8.
文件:
+保存文件
Wx.saveFile({tempFilePath:xxx,success:function(res){…}})
+获已保存文件列表
Wx.getSavedFileList({success:function(res){var
list=res.fileList}})
+获已保存文件信息
Wx.getSavedFileInfo({filePath:xxx,success:function(res){…}})
+移除已保存文件
Wx.removeSavedFile({filePath:xxx,complete:function(res){…}})
+打开文件
Wx.openDocument({filePath:xxx,success:function(res){…}})
第3节
数据API
+设置数据
Wx.setStorage({key:xxx,value:xxx})
+获取数据
Wx.getStorage({key:xxx,success:function(res){…}})
+清空数据
Wx.clearStorage()
+设;置数据(异步)
Wx.setStorageSync({key:xxx,value:xxx})
+获取数据(异步)
Wx.getStorageSync({key:xxx,success:function(res){…}})
+清空数据(异步)
Wx.clearStorageSync()
第4节
位置API
1.
位置:
+获取位置
Wx.getLocation({type:xxx,success:function(res){…}})
+打开位置
Wx.openLocation({latitude:xx,longItude:xx,scale:xx})
+选择位置
Wx.chooseLocation({success:function(res){…}})
2.
地图组件:
+创建上下文
Var
ctx=wx.createMapContext(mapId)
+中心打开
Ctx.openCenterLocation({success:function(res){…}})
+移动位置
Ctx.moveToLocation({success:function(res){…}})
第5节
设备API
1.
系统信息:
+同步获取信息
wx.getSystemInfo({
success:
function(res)
{
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})
+异步获取信息
wx.getSystemInfo({success:function(res){…}})
2.
网络类型:
+网络类型
wx.getNetworkType({
success:
function(res)
{
var
networkType
=
res.networkType
//
返回网络类型2g，3g，4g，wifi,none,unknown
}
})
3.
重力感应:
+重力感应
wx.onAccelerometerChange(function(res)
{
console.log(res.x)
console.log(res.y)
console.log(res.z)
})
4.
罗盘指南:
+罗盘指南
wx.onCompassChange(function
(res)
{
console.log(res.direction)
})
5.
拨打电话:
+拨打电话
wx.makePhoneCall({
phoneNumber:
15093843683
})
6.
扫码:
+扫码
wx.scanCode({
success:
function(res)
{
console.log(res)
}
})
7.
剪贴板:
+加入剪贴板
Wx.setClipboadData({data:xx,success:function(res){…}})
+读取剪贴板
Wx.getClipboardData({success:function(res){var
data=res.data}})
8.
篮牙:
+篮牙
wx.openBluetoothAdapter({
success:
function
(res)
{
console.log(res)}
})
第6节
窗口API
1.
互动操作:
+自消窗口
Wx.showToast({title:xx,icon:xx,duration:xx})
+对话框
Wx.showDialog({title:xx})
+对话框(模态)
Wx.showModal({title:xx,content:xx,success:function(res){…}})
+活动页签
Wx.showActionSheet({itemList:[],success:function(res){…}})
2.
导航设置:
+设标题
Wx.setNavigationBarTitle({title:xxx})
+显动画
Wx.showNavigationBarLoading()
+隐动画
Wx.hideVavigationBarLoading()
3.
导航操控:
+转到
Wx.vavigatorTo({url:xx,success:function(res){…}})
+重定向
Wx.redirectTo({url:xx;success:funtion(res){…}})
+重载
Wx.reLaunch({url:xx,success:function(res){…}})
+切页
Wx.switchTab({url:xxx})
+返回
Wx.navigatorBack({delta:xx})
4.
动画操作:
+创建动画
Var
ani=wx.createAnimation({
transformOrign:xx,duration:xx,timingFunction:xx
})
+具体方法(略)
第7节
绘图API
详述于第七章.
第8节
开放接口API
1.
小程序登录API
=登录微信:
+登录微信
Wx.login({success:function(){…}})
+检查会话
Wx.checkSession({success:function(){,,,},fail:function(){…}})
=签名验证|加密解密
为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。
签名校验算法涉及用户的session_key，通过
wx.login
登录流程获取用户session_key，并自行维护与应用自身登录态的对应关系。
通过调用接口（如
wx.getUserInfo）获取数据时，接口会同时返回
rawData、signature，其中
signature
=
sha1(
rawData
+
session_key
)
开发者将
signature、rawData
发送到开发者服务器进行校验。服务器利用用户对应的
session_key
使用相同的算法计算出签名
signature2
，比对
signature
与
signature2
即可校验数据的完整性。
2.
用户信息
wx.getUserInfo({
success:
function(res)
{
var
userInfo
=
res.userInfo
var
nickName
=
userInfo.nickName
var
avatarUrl
=
userInfo.avatarUrl
var
gender
=
userInfo.gender
//性别
0：未知、1：男、2：女
var
province
=
userInfo.province
var
city
=
userInfo.city
var
country
=
userInfo.country
}
})
3.
微信支付
wx.requestPayment({
“timeStamp“:
““,“nonceStr“:
““,“package“:
““,“signType“:
“MD5“,“paySign“:
““,“success“:function(res){
},“fail“:function(res){
}
})
4.
模板信息
不作讲解
5.
客服操作API
=接收消息和事件
-进入客服:
-客服消息转发
Client:request
Weichat:send
server:response
-消息类型:{文本,图片,事件}
-格式类型:{xml,json}
-公共字段:{ToUserName,FromUserName,CreateTime,MsgType,}
-专有字段:
文本:{Content,MsgId}
图片:{PicUrl,MsgId}
事件:{Event,SessionFrom}
=发送客服消息
http请求方式:
POST
https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=ACCESS_TOKEN
=临时素材接口
-新增临时素材
[email protected]
“https://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN
$timestamp
=
$_GET[“timestamp“];
$nonce
=
$_GET[“nonce“];
$token
=
TOKEN;
$tmpArr
=
array($token,$timestamp,$nonce);
sort($tmpArr,SORT_STRING);
$tmpStr
=
implode(
$tmpArr
);
$tmpStr
=
sha1(
$tmpStr
);
if(
$tmpStr
==
$signature
){
return
true;
}else{
return
false;
}
}
Step3:实现服务功能
6.
分享功能
+设定分享
Page({
onShareAppMessage:function(){
return:{
title:xx,path:xx,success:function(res){…}
}//end
return
}//end
function
})
+显示分享
Wx.showShareMenu()
+隐藏分享
Wx.hideShareMenu()
7.
二维码
通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面
接口地址：
https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN
8.
收货地址
wx.chooseAddress({
success:
function
(res)
{
console.log(res.userName)
console.log(res.postalCode)
console.log(res.provinceName)
console.log(res.cityName)
console.log(res.countyName)
console.log(res.detailInfo)
console.log(res.nationalCode)
console.log(res.telNumber)
}
})
9.
卡券
+加载卡券
Wx.addCard({cardList:[],success:function(res){…}})
+打开卡券
Wx.openCard({cardList:[],success:function(res){…}})
+card结构
{code:xx,openId:xx,timeStamp:xx,signature:xx}
10.
设置
+打开设置
Wx.openSetting({success:function(res){…}})
第9节
拓展接口API
数据转换
1．
数据缓冲转为BASE64：
Wx.arrayBufferToBase64(arrayBuffer)
2．
BASE64转为数据缓冲：
Wx.base64ToArrayBuffer(base64)
[说明]
此章中没有列举绘图API,在第七章中专门学习.