Ø 简介
本文主要记录微信小程序的开发笔记（下），主要包括以下内容：
1. 多媒体组件
2. 其他组件
3. 网络API
4. 多媒体API
5. 数据存取
6. 位置API
7. 设备API
8. 界面API
9. WbUI
1) image
组件
image
组件用于展示图片，可以展示本地图片，也可以展示网络图片。
1. 属性
1) src:
用于设置本地图片或网络图片的路径。
2) model:
用于设置图片裁剪的方式，参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
2. 事件
1) bindload
图片加载完成后触发的事件。
2) audio
audio
组件用于播放音频，可以播放本地音频，也可以播放网络音频。
用于设置本地音频或网络音频的路径。
2) controls:
Boolean 类型，是否显示控制面板，默认为false。
3) author:
设置音频的作者的名称。
4) name:
设置音频名称。
5) poster:
设置音频对应的封面图片地址。
1) bindplay:
播放时触发的事件。
2) bindpause:
暂停时触发的事件。
3. 控制音频
<audio
id="myAudio"
src="{{src}}"
controls/>
onReady: function() {
this.audioCtx
= wx.createAudioContext("myAudio");
this.audioCtx.setSrc('https://mini.mdingdang.com/SunshineGirl_moumoon.mp3');
this.audioCtx.play();
},
//播放
audioPlay: function(e) {
//暂停
audioPause: function(e) {
this.audioCtx.pause();
//设置当前播放事件为100秒
audio100: function(e) {
this.audioCtx.seek(100);
//回到开头
audioStart: function(e) {
this.audioCtx.seek(0);
}
3) video
video
组件用于播放视频，可以播放本地视频，也可以播放网络视频。可以使用内置API 选择本地的视频：wx.chooseVideo，参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
用于设置本地视频或网络视频的路径。
2) autoplay:
Boolean 类型，是否自动播放，默认为false。
1) binderror
加载视频文件错误时触发，比如路径不存在。
3. 打开和播放本地视频
打开本地视频使用
wx.chooseVideo() 方法，该方法主要参数如下：
1) sourceType:
设置选择视频的目标类型，album: 从相册中选择；camera:
使用相机摄像后获取。
2) camera:
设置摄像时使用是否使用前置摄像头或后置摄像头。
3) maxDuration: 摄像最长的时间，单位为秒。
4) success:
选择视频成功后调用的事件。
1. 应用示例
<button
style="margin-top:30px;"
bindtap="chooseVideo">选择视频</button>
<video
style="margin-top:10px;width:300px;height:300px;"
src="{{src}}"/>
chooseVideo: function(e) {
var
that = this;
wx.chooseVideo({
sourceType: ['album',
'camera'],
camera: ['front',
'back'],
maxDuration: 10,
seccess: function(res) {
that.setData({
src: res.tempFilePath
});
}
});
}
4. 控制视频组件播放、暂停、定位、发送弹幕
控制视频组件需要使用
VideoContext 对象，下面是获取该对象的方法：
this.videoContext
= wx.createVideoContext("myVideo");//在onReady
被调用
1) videoContext.play(): 播放视频。
2) videoContext.pause(): 暂停视频。
3) videoContext.seek(10): 定位视频。
4) videoContext.sendDanmu(): 发送弹幕，该方法主要参数如下：
1. text:
设置弹幕的文本。
2. color:
设置弹幕的颜色。
1) action-sheet 组件
action-sheet
组件用于在屏幕下端显示多个选项，它由三部分组成：action-sheet、action-sheet-item、action-sheet-cance。
1) hidden
表示是否隐藏action-sheet，默认为false。
1) bindchange
该事件为action-sheet 的事件，再点击Cancel 或ActionSheet 的外部区域会被触发。
2) bindtap
该事件为 action-sheet-item 的事件，当点击某一项时会被触发。
2) modal
modal
组件用于显示一个对话框，对话框的内容在标签之间设置，可以是文字或者图片等。
1) hidden:
表示是否隐藏对话框，默认为false。
2) title:
设置对话框的标题。
3) confirm-text: 设置对话框确定按钮的显示文本，未设置该属性时默认为“确定”。
4) cancel-text: 设置对话框取消按钮的显示文本，未设置该属性时默认为“取消”。
5) no-cancel:
设置是否显示取消按钮，该属性不需要设置任何值。
1) bindconfirm: 当点击确定按钮时将触发该事件。
2) bindcancel:
当点击取消按钮时将触发该事件。
3) canvas
canvas
组件是一个画布，可以在画布中进行基本图形绘制，比如直线、圆等，可使用这些基本的图形实现一个复杂的图形绘制。
下面列举绘制示例：
<canvas
canvas-id="mycanvas"
style="margin:20px;width:300px;height:200px;"/>
onReady: function(e) {
var context = wx.createContext();
context.setStrokeStyle("#0000ff");
context.setLineWidth(5);
context.rect(0,
0,
200,
200);
context.stroke();
context.setStrokeStyle("#ff00ff");
context.setLineWidth(2);
//绘制圆脸
context.moveTo(160,
100);
context.arc(100,
100,
60,
2
* Math.PI,
true);
//绘制嘴巴
context.moveTo(140,
40,
Math.PI,
false);
//绘制左眼
context.moveTo(85,
80);
context.arc(80,
80,
5,
//绘制对话框眼
context.moveTo(125,
context.arc(120,
wx.drawCanvas({
canvasId: "mycanvas",
actions:
context.getActions()
效果图：
4) 地图组件
map
组件用于显示地图（腾讯地图）。
1) longitude:
设置地图的经度。
2) latitude:
设置地图的维度。
3) scale:
设置缩放级别，取值范围为5~18，默认为16。该值表示值越小地图显示范围越大。
4) controls:
地图上放置的控件数组，相对于窗口，并不会随着地图移动而移动。
5) markers:
在地图上放置的标记点数组，相对于地图，会跟随地图移动而移动。
6) show-location: 显示带有方向的当前定位点。
7) polyline:
一个对象数组，用于在地图上绘制折线。
1) bindcontroltap: 点击控件时触发的事件。
2) bindmarkertap: 点击标记点时触发的事件。
3) bindregionschange: 视野发生变化时触发的事件。
5) 页面导航
页面导航使用
navigator 标签。
1) url:
设置导航页面的页面路径。
2) redirect:
设置是否在在当前页面打开新页面，该属性不需要设置任何值。
2. 使用示例：
<navigator
url="../page2/page2?title=在当前页面打开新页面&color=red"
redirect
style="margin-top:20px;">
<button>在当前页面打开新页面</button>
</navigator>
onLoad: function(options) {
console.log(options);
this.setData({
title: options.title,
color: options.color
3. 设置导航栏
页面中配置项在当前页面会覆盖app.json
的window 中相同的配置项。
{
"usingComponents": {},
"navigationBarTitleText": "我的",
"enablePullDownRefresh": true,
"navigationBarBackgroundColor":"#41D480" //设置导航栏、状态栏背景色
参考链接：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
6) TabBar
导航
TabTar
导航用于在页面底部显示菜单，最多可以显示5个菜单。
1) color:
设置菜单
未选中时的文本颜色。
2) selectedColor: 设置菜单
选中3) backgroundColor: 设置菜单的背景颜色。
4) position:
设置菜单显示样式，显示在下面或者上面。
5) list:
该属性为一个数组，用于设置页面显示多个菜单项，属性如下：
1. pagePath:
设置菜单指向的页面路径。
2. iconPath:
设置菜单未选中时的图标路径。
3. selectedIconPath: 设置菜单选中时的图标路径。
4. text:
设置菜单显示的文本。
"tabBar": {
"color":
"#dddddd",
"selectedColor":
"#3cc51f",
"backgroundColor":
"#ffffff",
"position":
"bottom",
"list": [
{
"pagePath":
"pages/TabBarNavigation/TabBarNavigation",
"iconPath":
"images/face1.png",
"selectedIconPath":
"images/face.png",
"text":
"首页"
},
"pages/page3/page3",
"images/wechat.png",
"images/wechatHL.png",
"页面3"
]
注意：显示的第一个页面必须为 list[0].pagePath。
在小程序中支持4种网络 API：request、文件上传、文件下载和 WebSocket。
由于小程序要求必须使用
https(Hyper Text Transfer
Protocol over Secure Socket Layer)和
wss(WebSocket Secure, 用于 WebSocket),所以在使用网络 API
之前，请确保要访问的服务器url 使用的是https
或wss。
1) 准备工作
1. 证书介绍
目前阿里云支持从三个证书服务商处购买证书，如果不差钱，可以购买 Symantec 证书，当然，CFCA 和 GeoTrust
也可以。如果证书只是用于小程序的访问，可以使用 Symantec 的免费 DV 证书，目前只有 Symantec 提供了免费的 DV 证书。
1) SSL
证书的作用：
1. 是https 的安全证书；
2. 它可以用于加密，比如上传下载加密（二进制的），并不是明文；
3. 另外用于网站标识，可以从标识中查看网站是否正规的、官方的。
2) SSL
证书分为三个类型：DV、OV 和 EV。
1. DV SSL
证书
DV
通常用于个人或企业网站的访问。证书服务商只验证域名的真伪，也就是说，只要这个域名有效，就可以申请
DV，几乎是立即就可以获得 DV SSL
证书（因为是自动审核的）。不过如果是用于网站的访问，并不建议使用 DV SLL，因为
DV SSL 除了对数据加密外，和普通http
几乎没有区别，有些系统和浏览器也把 DV SSL 标记为不安全，因为 DV
SSL 并不能表明网站的合法性。
2. OV SSL
对于一般的企业来说，建议申请 OV SSL。申请
OV，需要营业执照以及其他相关资质证明，通常需要一个星期左右的审核周期（人工审核）。
3. EV SSL
EV
SSL 证书通常用于银行、电子商务等有大笔现金流的金融机构。申请
EV SSL 很费劲，审核非常严格，而且价格非常昂贵。
不管是申请的
DV，还是 OV 或者 EV，都会得到相应的证书文件，然后在nginx 或apache
的配置文件中指定证书文件的路径即可。
2. 开通https，这里以“阿里云”服务器为例，参考“阿里云与IIS10
配置SSL 证书”。
3. 准备完支持https
的服务器之后，还需要在小程序管理页面进行配置。
1) 登录小程序管理页面，开发-> 开发设置-> 服务器域名，输入支持https
访问的域名，如图：
2) 在小程序中被访问的域名，必须满足以下三个条件，才能正常访问：
1. 支持https 访问；
2. 域名在
国内成功备案；
3. 必须在小程序后台进行与“服务器域名”设置。
2) 发起 HTTPS 请求
需要访问的
Web 地址。
2) data:
访问时传递的参数，可以是
Object 或 String
类型。
3) method:
请求方式，GET 或 POST 等。
4) header:
设置请求头，Object 类型。
5) datatype:
响应数据的类型，默认为json 类型。
6) success:
请求成功时调用的函数。
7) fail:
请求失败时调用的函数。
8) complete:
请求完成时调用的函数。
2. 应用示例
requstText: function(e) {
wx.request({
url: 'https://mini.mdingdang.com/menu.txt',
dataType: 'text/plain',
success: function(res) {
console.log(res.data);
fail: function(e) {
})
3) 上传文件
必选，上传文件的
URL 地址。
2) filePath:
必选，要上传的本地文件的路劲。
3) name:
必选，文件对应的key，服务端会通过这个key
获取文件的二进制内容。
可选，设置请求头，Object 类型。
5) formData:
Object 类型。
uploadFile: function(e) {
wx.chooseImage({
var tempFilePaths = res.tempFilePaths;
wx.uploadFile({
url: 'https://mini.mdingdang.com/download/test.text',
filePath:
tempFilePaths[0],
name: 'file',
formData: {
'user':
'Bill'
},
success: function(r) {
console.log(r.data);
fail: function(r) {
console.log(r);
}
4) 下载文件
必选，下载文件的
2) header:
3) success:
4) fail:
5) complete:
downloadFile: function(e) {
wx.downloadFile({
"url":
"https://mini.mdingdang.com/menu.txt",
console.log(res);
5) WebSocket
WebSocket
使用一种在单个
TCP 连接上进行
全双工通讯的协议。在 WebSocket API
中，浏览器和服务器只需要完成一次“握手”，两者之间就直接可以建立持久性的连接。
1. 方法
1) wx.connectSocket(): 连接服务器，参数如下：
1. url:
必选，用于指定服务端的
URL（wss协议）。
2. data:
可选，请求的数据，Object 类型。
3. header:
4. method:
请求方式，GET 或POST 等。
5. success、fail、complete.
2) wx.sendSocketMessage(): 向服务器发送数据，参数如下：
1. data:
需要发送的数据，String 或 ArrayBuffer
3) wx.closeSocket(): 关闭与服务器的连接。
1) wx.onSocketOpen: 成功与服务端建立连接后触发。
2) wx.onSocketError: 与服务端建立连接失败后触发。
3) wx.onSocketMessage: 服务端返回响应消息后触发。
4) wx.onSocketClose: 成功关闭 WebSocket
连接后触发。
注：应用示例可参考“H5 演示WebSocket.html”
1) 选择图像
选择图像使用wx.chooseImage() 方法，该方法的主要参数如下：
1. count:
最多允许选择图像的数量，超过的数量也不会被选择。
2. sizeType:
设置可选择的图片尺寸类型，original: 原始尺寸；compressed:
压缩尺寸。
3. sourceType:
设置选择图像的目标类型，album: 从相册中选择；camera:
相机拍照后获取。
4. success:
选择图像后回调的函数，使用该方法的
res.tempFilePaths 参数可以获取所有选择图像的路径数组。
2) 获取图像信息
获取图像信息使用wx.getImageInfo()
方法，该方法的主要参数如下：
1. src:
获取图像的物理路径。
2. success:
获取图像信息成功后的回调方法，包含如下参数：
1) res.width:
图像的宽度。
2) res.height:
图像的高度。
3) res.path:
图像的路径。
3) 录音
1. 开始录音调用 wx.startRecord()
方法，success 参数用于录制成功后调用， res.tempFilePath 参数用于获取录制音频产生的临时文件。
2. 停止录音调用 wx.stopRecord()
方法，success 参数用于成功停止录制后调用。
4) 播放、暂停、停止音频
1. 播放音频调用 wx.playVoice()
方法，filePath 参数用于指定播放音频文件的路径。
2. 暂停播放调用wx.pauseVoice()
方法，该方法不需要传递参数。
3. 停止播放调用wx.stopVoice()
5) 控制背景音乐
小程序中的背景音乐，从一个页面进入到另一个页面，背景音乐仍然会继续播放，当退出小程序时会停止背景音乐。
1. 相关方法
1) wx.playBackgroundAudio(): 播放背景音乐。
2) wx.pauseBackgroundAudio(): 暂停背景音乐。
3) wx.stopBackgroundAudio(): 停止背景音乐。
4) wx.seekBackgroundAudio(): 随机定位背景音乐。
1) 将临时文件保存为永久文件
保存永久文件使用wx.saveFile()
方法。
1. 运用示例
downloadPdf: function(e) {
url: 'https://mini.mdingdang.com/mini.pdf',
console.log('临时文件路径：' + res.tempFilePath);
//将临时文件保存为永久文件
wx.saveFile({
tempFilePath:
res.tempFilePath,
var savedFilePath = r.savedFilePath;
console.log('永久文件路径：' + savedFilePath);
that.setData({
downloadPath:
savedFilePath
});
})
2) 文件相关方法
1. wx.getSavedFileList(): 获取文件列表。
2. wx.getSavedFileInfo(): 获取文件信息。
3. wx.removeSavedFile(): 删除永久文件，示例如下：
wx.removeSavedFile({
filePath:
that.data.filePath,
complete: function(res) {
console.log(res);
});
4. wx.openDocument(): 打开文档，在小程序中支持直接打开doc、docx、xls、xlsx、ppt、pptx、pdf 等文档类型。示例如下：
wx.openDocument({
filePath: filePath,
success: function(res) {
console.log('打开文档成功');
})
1. 位置API
1) 获取经纬度
获取经纬度使用wx.getLocation()
方法，该方法主要参数如下：
type:
表示获取位置的类型，可选值如下：
1. wgs84:
表示返回
GPS 经纬度的坐标，默认值；
2. gcj02:
表示
wx.getLocation() 方法的返回值可用于wx.openLoacation() 方法。
n 注意：获取经纬度需要在app.json
中加入如下配置：
"permission": {
"scope.userLocation": {
"desc":
"你的位置信息将用于小程序位置接口的效果展示"
2) 在地图上选中位置
在地图上选中位置使用
wx.chooseLocation() 方法，该在使用success
回调函数返回如下参数：
name:
位置名称；
address:
详细地址；
longitude:
经度，浮点数，范围-180~180（负数表示西经，正数表示东经）；
latitude:
维度，浮点数，范围-90~90（负数表示南纬，正数表示北纬）。
3) 使用微信内置的地图显示位置
显示位置使用
wx.openLocation() 方法，该方法主要参数如下：
显示位置的经度；
显示位置的维度；
显示位置的名称；
显示位置的详细地址；
scale:
显示地图的缩放比例，范围5~18。
n 运用示例：
wx.getLocation({
type: "gcj02", //注意：需要指定为gcj02
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
name: '利川市',
address: '米兰酒店附件',
scale: 15
//放大缩小的比例值，范围5~18
})
4) 与map 组件绑定
1. 获取 Map 上下文对象
this.mapCtx
= wx.createMapContext("myMap");
2. 定位位置中心点
this.mapCtx.getCenterLocation({
console.log(res.longitude);
console.log(res.latitude);
3. 移动位置
this.mapCtx.moveToLocation();
2. 设备API
1) 获取系统信息
获取系统信息使用
wx.getSystemInfo() 方法，该方法的success
n model:
手机型号；
n pixelRatio:
设备像素比；
n windowWidth: 窗口宽度；
n windowHeight: 窗口高度；
n language:
微信设置的语言；
n version:
微信版本号；
n system:
操作系统版本；
n platform:
客户端平台；
2) 获取网络类型
获取网络类型使用
wx.getNetworkType() 方法，该方法的success
回调函数可能返回 networkType
参数，该参数可能是以下几种值：
2g:
表示当前为2G网络；
3g:
表示当前为3G网络；
4g:
表示当前为4G网络；
wifi:
表示当前为
WIFI 网络；
unknown:
安卓下可能返回的网络类型；
none:
表示当前无网络，比如“飞行模式”下的网络状态。
3) 获取重力感应数据
通过重力传感器，获取手机在X、Y
和 Z 轴上的运动状态，比如：微信中实现“摇一摇”的功能实现。
在小程序中使用wx.onAccelerometerChange
事件拦截重力传感器的数据，以
每秒5次的频率来检测 X/Y/Z
轴的向量值，也就是
每0.2秒调用一次该方法。
wx.onAccelerometerChange(function(res) {
console.log('X:'
+ res.x + ',
Y:'
+ res.y + ',
Z:' + res.z);
4) 获取罗盘方向
获取罗盘方向使用
wx.onCompassChange() 方法，该方法将以每0.2秒的频率调用一次。0表示正北方，例如：45度表示东北方向。
getDirection: function(e) {
wx.onCompassChange(function(res) {
that.setData({
direction: parseInt(res.direction)
});
5) 拨打电话
拨打电话使用
wx.makePhoneCall() 方法，该方法参数如下：
phoneNumber:
需要拨打的电话号码。
wx.makePhoneCall({
phoneNumber:
that.data.phoneNumber
6) 扫描二维码或条码
扫描二维码使用
wx.scanCode() 方法，该方法将返回如下参数：
result:
扫码的内容，例如：https://u.wechat.com/MDOe4kJwdk_I3-Dq6J3NEHU；
scanType:
扫码的类型，二维码或条码；
charset:
扫码的字符集，例如：UTF-8；
rawData:
未知。
wx.scanCode({
success: (res) => {
code: res.result,
scanType: res.scanType,
charSet: res.charSet
3. 界面API
1) 信息框（Toast、模态窗口和ActionSheet）
1. Toast
1) 显示Toast 使用wx.showToast()
方法，该方法包含如下参数：
title:
设置
Toast 的标题；
icon:
Toast 的图标，可选值：none、success、loading；
duration:
设置自动关闭的时间，单位为毫秒。
2) 隐藏 Toast 使用wx.hideToast()
2. 模态窗口
显示“模态窗口”使用wx.showModal()
设置模态窗口的标题；
content:
设置模态窗口的内容；
success:
点击模态窗口后回调的函数，例如：可以使用res.confirm 属性判断点击的具体按钮（确定/取消）。
3. ActionSheet
使用wx.showActionSheet() 方法同样可以打开 ActionSheet，该方法主要参数如下：
itemList:
设置显示项的列表数组；
选择某一项触发的回调函数，可以使用
res.tapIndex 属性获取选中项的索引，从零开始；
fail:
点击取消或其他区域时回调的函数。
wx.showActionSheet({
itemList: ['Item1',
'Item2',
'Item3'],
console.log(res.tapIndex);
fail: function(res) {
console.log(res.errMsg);
2) 设置导航条标题
设置导航条标题可以采用以下两种方式：
1. 静态设置方式，在*.json文件中加入"navigationBarTitleText"属性，例如：
"navigationBarTitleText":
"json设置的标题"
2. 动态设置方式，在*.js文件中调用 wx.setNavigationBarTitle() 方法，例如：
wx.setNavigationBarTitle({
title: '这是标题'
3) 显示和隐藏导航条加载动画
导航条加载动画，会在标题左侧显示“一个圆圈”并不停的转动，用于加载提示。
1. wx.showNavigationBarLoading(): 显示导航条加载动画；
2. wx.hideNavigationBarLoading(): 隐藏导航条加载动态。
4) 导航与返回页面
1. 导航到某一页面使用 wx.navigateTo()
方法，示例如下：
wx.navigateTo({
url: '../page1/page1?title=页面1'
page1页面接收参数，并设置页面标题：
//获取导航传递过来的参数值
wx.setNavigationBarTitle({
title: options.title +
'(page1)',
2. 返回页面使用 wx.navigateBack()
方法，该方法 delta 参数表示返回到第几层，1表示上一层，示例如下：
wx.navigateBack({
delta: that.data.value
4. WeUI
WeUI
是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。下载网址：https://github.com/Tencent/weui-wxss
主要是基于在原生组件基础之上添加了一些css 样式，另外扩展了一些“私有”的组件，比如：Badge（徽章）、Loadmore（加载更多）等组件。
首先导入样式，在
app.wxss 中头部添加： @import
'style/weui.wxss';
1. 把徽章样式开成模板
1) 定义模板
<template
name="NumBadge">
<view
style="position:relative;margin-top:1.17647059em;background-color:#FFFFFF;line-height:1.41176471;font-size:17px;">
<view
class="weui-cell">
<view
class="weui-cell__hd"
style="position: relative;margin-right:
10px;">
<image
src="{{imageSrc}}"
style="width:
50px; height: 50px; display: block"
/>
<view
class="weui-badge"
style="position:
absolute;top: -.4em;right: -.4em;">{{number}}</view>
</view>
class="weui-cell__bd"
style="visibility:{{showText}}">
<view>{{title}}</view>
style="font-size:
13px;color: #888888;">{{detail}}</view>
</view>
</view>
</template>
2) 定义模板数据
data: {
numBadge1: {
imageSrc: '../../images/p1.png',
number: 24,
showText: 'visible',
title: '产品名称',
detail: '产品详细信息'
numBadge2…N
3) 引用、使用模板
<import
src="badgeTemplate.wxml"/>
is="NumBadge"
data="{{...numBadge1}}"/>
data="{{...numBadge2}}"/>
待完成：上传文件、WebSocket
![微信小程序开发笔记（上）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)