微信小程序开发(六).doc

微信小程序开发(六)
第六章 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})
+暂停
WxpauseBackgroundAudio()
+定位
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 = workType // 返回网络类型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 = resuserInfo
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

=临时素材接口
-新增临时素材
Curl -F media=@test.jpg "

-获取临时素材

=接入指导(消息服务器接入)
Step1:埴写服务器配置:

Step2:服务器验证(PHP)
private function checkSignature()
{
$signature = $_GET["signature"];
$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. 二维码
通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面
接口地址：

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,在第七章中专门学习.