微信小程序开发六精编版.docx
《微信小程序开发六精编版.docx》由会员分享,可在线阅读,更多相关《微信小程序开发六精编版.docx(15页珍藏版)》请在冰豆网上搜索。
![微信小程序开发六精编版.docx](https://file1.bdocx.com/fileroot1/2023-8/15/280f2303-79b3-4307-8c4f-53e89f12c5ca/280f2303-79b3-4307-8c4f-53e89f12c5ca1.gif)
微信小程序开发六精编版
微信小程序开发(六)
第六章API
API框架总览(绘图API专列章学习,暂略)
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){vardata=res.data},
fail:
function(){},
complate:
function(){}
})
2.上传下载:
wx.upload(object)|wx.download(object)
+下载一段音乐播放
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.视频:
+逻辑层
Page({
Data:
{src:
xxx},
getVideo:
function(){
varthat=this;
wx.chooseVideo({
sourceType:
[],
success:
function(res){
that.setData({
src:
res.tempfilePath
})}})}})
6.音频组件控制:
+创建上下文
Varctx=wx.createAudioContext(audioId)
+播放
Ctx.paly()
+暂停
Ctx.pause()
+进到
Ctx.seek(n)
+从头
Ctx.seek(0)
+停止
Ctx.stop()
7.视频组件控制:
+创建上下文
Varctx=wx.createVedioContext(videoId)
+发送弹幕
Ctx.sendDanmu({text:
xxxx,color:
#xxxxxx})
8.文件:
+保存文件
Wx.saveFile({tempFilePath:
xxx,success:
function(res){…}})
+获已保存文件列表
Wx.getSavedFileList({success:
function(res){varlist=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.地图组件:
+创建上下文
Varctx=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){
varnetworkType=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){vardata=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.动画操作:
+创建动画
Varani=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){
varuserInfo=res.userInfo
varnickName=userInfo.nickName
varavatarUrl=userInfo.avatarUrl
vargender=userInfo.gender//性别0:
未知、1:
男、2:
女
varprovince=userInfo.province
varcity=userInfo.city
varcountry=userInfo.country
}
})
3.微信支付
wx.requestPayment({
"timeStamp":
"",
"nonceStr":
"",
"package":
"",
"signType":
"MD5",
"paySign":
"",
"success":
function(res){
},
"fail":
function(res){
}
})
4.模板信息
不作讲解
5.客服操作API
=接收消息和事件
-进入客服:
-客服消息转发
server:
response
-消息类型:
{文本,图片,事件}
-格式类型:
{xml,json}
-公共字段:
{ToUserName,FromUserName,CreateTime,MsgType,}
-专有字段:
文本:
{Content,MsgId}
图片:
{PicUrl,MsgId}
事件:
{Event,SessionFrom}
=发送客服消息
http请求方式:
POST
=临时素材接口
-新增临时素材
Curl-Fmedia=@test.jpg"
-获取临时素材
=接入指导(消息服务器接入)
Step1:
埴写服务器配置:
Step2:
服务器验证(PHP)
privatefunctioncheckSignature()
{
$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){
returntrue;
}else{
returnfalse;
}
}
Step3:
实现服务功能
6.分享功能
+设定分享
Page({
onShareAppMessage:
function(){
return:
{
title:
xx,path:
xx,
success:
function(res){…}
}//endreturn
}//endfunction
})
+显示分享
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,在第七章中专门学习.