微信小程序开发- 4

工具

whistle
- 在上传和下载文件时，请求在network里面是看不到的，可以用whistle抓取到上传下载请求；

微信小程序原生API模块分类

网络
- 发起网络请求
媒体
- 音频视频
文件
- 上传下载文件
数据缓存
位置
- 操作当前位置信息
设备
- 当前系统设备信息和状态
界面
- 当前小程序页面的标题、颜色等
开放接口
- 微信支付、登录授权、客服消息、模板消息

规则

wx.on开头
Object参数
- 有三种回调函数success,fail,complete(无论失败与否)
wx.get/wx.set
- wx.get获取宿主环境的参数
- wx.set写入宿主环境的参数

调用函数的时候有两种方式：

直调函数
- 程序运行时直接执行被调函数
回调函数
- 程序运行之后，回过头来执行被调函数

状态码

10001 系统错误
10002 网络错误
10003 文件错误
10004 格式错误
-1 未知错误

网络请求

wx.request(Object)
参数
- url：
  - 需要绑定请求的域名
  - 在小程序管理后台的配置服务器信息里添加域名
  - https的域名，并且域名必须是合法，并且是经过ICP备案
  - 只能填入域名，不能填入ip和端口
http
- 小程序默认使用https接口；在开发阶段如果要用http来请求数据，可以通过开发者工具-项目设置-不校验合法域名、HTTPS证书
header: {referer: 'www.qq.com'}
- 小程序里面是不能设置header的referer值；设置了也不生效
method为post时
- content-type: 请求时文档的类型; 对应的类型位MIME类型；MIME是多用途互联网文件扩展类型
- content-type: application/json 转成json {key: value}发送给服务器
- content-type: application/x-www-form-urlencoded 会把请求的参数进行url编码操作；然后将参数转成key=value发送给服务器；和get请求方式的区别是请求地址没有带上queryString
dataType: 'Text'
- 当设置dataType: 'Text'时，服务器返回的数据没有进行json解析；"{key: value}"
multipart/form-data: 需要规定一个分隔符将我们请求中的

上传下载

wx.uploadFile
- 将本地资源上传到开发者服务器，客户端发起一个https post请求，其中content-type为mutipart/from-data
  - 会将表单提交的数据处理成一条消息；
  - 这个消息是通过标签来分隔的
  - boundary
- 如页面通过wx.chooseImage等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器；
- 可通过nodejs中的formidable来处理上传到的文件
wx.downloadFile
- 下载服务，客户端发起了get请求，将我们所要下载的文件下载到本地；

socket请求

http协议
- 是基于tcp/ip通信协议通过万维网服务器传输数据到本地浏览器的应用层协议；
- https是在http基础上，数据通过ssl加密的协议；
websocket协议
- 是有HTML5规范提出的一种在单个TCP连接上进行全双工通信的应用层协议；
- 在管理后台也需要配置wss域名；wss也是在ws基础上进行ssl加密的；
在1.7.0之前，一个小程序同时只能有一个websocket连接；在1.7.0之后，支持同时有多个；
wx.sendSocketMessage()
- 通过socket连接发送数据，需要首先wx.connectSocket(); 并在wx.onSocketOpen()回调之后才能发送；
wx.onSocketMessage(callback)
- 监听webSocket接收服务器的消息事件；
如果连接已关闭的状态，可以将消息存到消息队列里面，当连接为已连接状态，再将队列里面的信息发送出去

在开发阶段可以用http和ws协议，上线必须切换到安全协议https和wss；

// nodejs中的websocket服务端
var WebsocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function (request, response){
    console.log('received request for'+ request.url) 
    response.writeHead(404)
    response.end()
}) 

server.listen(3000, function(){
    console.log('server is listen on 3000')
})

wsServer = new WebSocketServer({
    httpServer: server,
    autoAccepetConnections: false
})

wsServer.on('request', function(){
// 监听到来自客户端请求的信息
    var connection = request.accept('echoe-protocol', request.origin);
    console.log('request connected');
    
    connection.on('message', function(message){
        if(message.type === 'utf8'){
            console.log('recevied message: ' + message.utf8Data)
            connection.sendUTF(message.utf8Data + ':: form server')
        }
        else if (message.type === 'binary') {
            console.log('recevied Binary message of' + message.binaryData.length)
            connection.sendBytes(message.binaryData + ':: from  server')
        
    })
    
    connection.on('close', function(resonCode, description){
        console.log(' Peer' + connection.remoteAddress + disconnected)
    })
})

媒体模块

图片应用

卸载页面后需要清除在页面内的定时器，因为小程序共用一套APPService进程
wx.chooseImage
- 从本地相册选择图片或手机拍照选择图片
wx.previewImage
wx.getImageInfo
wx.saveImageToPhotosAlbum

录音功能

wx.startRecord
wx.stopRecord

录音管理

wx.getRecorderManager

音频播放控制

wx.playVoice
wx.pauseVoice
wx.playVoice

音频组件控制

wx.createAudioCentext
- 1.6.0之后不再被使用
wx.createInnerAudioCentext
- 创建并返回audio上下文audioCentext对象；
- 在自定义组件下，第二个参数传入组件实例this，以操作组件内<audio />组件
- obeyMuteSwich 是否遵循系统静音开关，此参数为false时，即使用户打开了静音开关，也能继续发声，默认值true

视频

wx.chooseVideo
- 拍摄视频或从手机相册里面选取视频，返回视频的临时文件路径
wx.saveVideoToPhotosAlbum
- 保存视频到系统相册；需要授权

相机

wx.createCameraContext
- 创建并返回camera组件上下文cameraContext对象，cameraContext与页面的camera组件绑定，一个页面只能有一个camera，通过它可以操作对应的<camera/>组件。
- 在自定义组件下，第一个参数传入this，以操作组件内<camera/>组件；

实时音视频

版本要求
- wechat app ios: 6.5.21
- wechat app android: 6.5.19
- 小程序基础库最低版本要求：1.7.0
wx.createLivePlayerContext
- 操作对应的<live-player/>组件
wx.createLivePusherContext
- 创建并返回<live-pusher /> 上下文livePusherContext对象；livePusherContext对象与<live-puser/>组件绑定；一个页面只能有一个live-pusher

文件

wx.saveFile
- 保存文件到本地
- saveFile会把临时文件移动，因此调用成功后传入的tempFilePath将不可用
wx.getFileInfo
- 获取文件信息
wx.getSavedFileList
- 获取本地已保存文件列表
wx.getSavedFileInfo
- 获取本地文件的文件信息；
- 此接口只能用于获取已保存到本地的文件；
- 若需要获取本地文件信息，用wx.getFileInfo接口
wx.removeSavedFile
- 删除本地存储的文件；
wx.openDocument
- 新开页面打开文档；
- 支持格式：doc,xls,ppt,dpf,docs,xlsx,ppts

数据缓存

本地数据存储大小为10MB
- 当大小超出限制时，会删除掉之前没有使用的数据
wx.setStorage(Object)
- 这是一个异步接口
- 将数据存贮在本地缓存中指定的key中；
- 会覆盖掉原来的key对应的内容
wx.setStorageSync
- 同步接口
wx.getStorage
- 从本地缓存中异步获取指定key的数据
wx.getStorageSync
- 同步获取缓存中指定的key
wx.getStorageInfo
- 异步当前storage相关信息
- 返回值
  - keys 当前storage中所有key
  - currentSize 当前占用空间的大小，单位kb
  - limitSize 限制空间的大小，单位kb
wx.getStorageInfoSync
- 同步获取当前storage相关信息
wx.removeStorage(Object)
- 从本地缓存中异步移除指定的key
wx.removeStorageSync(key)
- 同步移除指定的key
wx.clearStorage()
- 异步清理掉本地缓存
wx.clearStorage()
- 同步清理掉本地缓存

地图控制

获取位置

wx.getLocation
wx.chooseLocation
wx.openLocation()
- 使用微信内置地图查看位置
- 需要用户授权 scope.userLoaction

地图组件控制

wx.createMapContext
- 创建并返回map上下文mapContext对象
- 在自定义组件下，第二个参数传入组件实例this，以操作组件内<map />组件
- mapContext
  - 通过mapId跟一个map组件绑定；可通过它操作对应的map组件

设备

系统信息

wx.getSystemInfo({})
- success回调
  - brand 匹配
  - model 型号
  - pixRatio 设备像素比
  - batteryLevel 电量
  - screenHeight 屏幕高度
  - screenWidth 屏幕宽度
  - windowHeight 可使用窗口高度
  - windowWidth 可使用窗口宽度
  - statusBarHeight 状态栏高度
  - language 微信设置的语言
  - version 微信版本号
  - system 操作系统版本
  - platform 客户端平台
  - fontSizeSetting 用户字体大小设置
    - 以“我-设置-通用-字体大小”中的设置为准，单位px
  - SDKVersion 客户端基础库版本
wx.getSystemInfoSync()
wx.canIUse()
- 判断小程序的API、回调、组件、参数等是否在当前版本可用
- ${API}.${method}.${param}.${options}
  - ${API}代表API名字
  - ${method}代表调用方式
    - return
    - success
    - object
    - callback
  - .${param} 代表参数或返回值
  - ${options} 代表参数可选值
- ${component}.${attribute}.${option}两种方式调用
  - ${component}代表组件名字
  - ${attribute} 代表组件属性
  - ${option} 代表组件属性或可选值

网络状态

getNetworkType
- 获取网络类型
  - wifi、2g、3g、4g

加速度计

wx.onAccelerometerChange(callback)
- 监听加速度数据，频率5次/秒，接口调用后会自动开始监听，可使用wx.stopAccelerometer停止监听
wx.startAccelerometer
- 开始监听加速度数据
wx.stopAccelerometer
- 停止监听

罗盘

wx.onCompassChange
- 监听罗盘数据，频率5次/秒，接口调用后会自动开始监听，可使用wx.stopCompass停止监听；
wx.startCompass
wx.stopCompass

拨打电话

wx.makePhoneCall

扫码

wx.scanCode
- 调起客户端扫码界面，扫码成功后返回对应的结果

剪切板

wx.setClipboardData
- 设置剪切板
wx.getClipboardData

屏幕亮度

wx.setScreenBrightness
- 设置屏幕亮度
wx.getScreeenBrightness
wx.setKeepScreenOn
- 设置屏幕是否保持屏幕常亮的状态
- 仅在当前小程序生效，离开小程序设置失效

用户截屏事件

wx.onUserCaptrueScreen
- 监听用户主动截屏事件，用户使用系统截屏按键截屏时触发此事件

振动

wx.vibrateLong
- 使手机发生较长时间的振动(400ms)
wx.vibrateShort
- 短时间振动（15ms）

手机联系人

wx.addPhoneContact
- 调用后，用户可以选择将该表单以新增联系人或添加到已有联系人的方式，写入手机系统通讯录，完成手机通讯录联系人和联系方式的增加；

界面相关设置

交互反馈

wx.showToast()
- 显示消息提示框
wx.hideToast()
wx.showLoading()
- 显示loading提示框
wx.hideLoading()
wx.showModal()
- 显示模态弹框
wx.showActionSheet()
- 从小程序底部弹出操作菜单

设置导航条

wx.setNavigationBarTitle()
- 动态设置当前页面的标题
wx.showNavigationBarLoading()
- 在当前页面显示导航条和加载动画
wx.hideNavigationBarLoading()
wx.setNavigationBarColor()
- 导航条背景色、前景色、动画、文字颜色

设置tabBar

wx.setTabBarBadge
- 为tabBar某一项的右上角添加文本
wx.removeTabBarBadge
- 移除tabBar某一项右上角的文本
wx.showTabBarRedDot
- 显示tabBar某一项的右上角的红点
wx.hideTabBarRedDot
- 隐藏tabBar某一项右上角的红点
wx.onTabItemTap
- 点击某一tab时触发
wx.setTabBarStyle
- 动态设置tabBar的整体样式
wx.setTabBarItem
- 动态设置tabBar某一项内容
wx.showTabBar
- 显示tabBar
wx.hideTabBar

设置置顶信息

wx.setTopBarText
- 动态设置置顶栏文字内容，只有当前小程序被设置成置顶时才能生效
- 如果当前小程序没有被置顶，也能调用成功，但不会立即生效，置顶后才能生效
- 调用成功后，需要间隔5s才能再次调用此接口
- 如果5s内再次调用此接口，会回调fail

路由控制

wx.navigateTo()
- 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack()可以返回到原页面
- url
- url 是需要跳转到应用内非tabBar的页面路径,路径后可以带参数；
- 参数与路径之间使用？分隔，参数键与值用=连接；
- 不同参数用&分隔
wx.navigateBack()
- 关闭当前页面，返回上一页面或多级页面。
- 可通过wx.getCurrentPages({}) 获取当前的页面栈，决定要返回几层
- delta
  - number,如果delta大于当前页面数，返回到首页
wx.redirectTo
- 关闭当前页面，跳转到应用内的某个页面
- url
- url 是需要跳转到应用内非tabBar的页面路径,路径后可以带参数；
- 参数与路径之间使用？分隔，参数键与值用=连接；
- 不同参数用&分隔
wx.switchTab()
- 跳转到tabBar页面，并关闭其他所有非tabBar页面
- url
  - 路径，需要跳转的tabBar页面路径
  - 需在app.json的tabBar定义的页面
  - 路径后不能带参数

操作动画

wx.createAnimation({})
- 创建一个动画实例animation。
- 调用实例的方法来描述动画。
- 最后通过动画实例的export方法导出动画数据传递给组件的animation属性；
- export 方法每次调用后会清除掉之前的动画
- 位移、旋转、倾斜、放大
step()
- 调用动画操作方法之后要调用step()来表示一组动画的完成；
- 可以在一组动画中调用任意多个动画方法，一组动画中所有动画会同时开始
- 一组动画完成后会进入下一组动画
- step() 可以传入一个跟wx.createAnimation()一样的配置参数用于指定当前组动画的配置

绘图

在canvas上绘图

所有在<canvas/>中的画图必须用js完成
我们接下来的例子中无特殊声明都会用这个wxml为模板

// wxml
<canvas canvas-id="myCanvas" style="border: 1px solid">

// js  （放在onLoad中）

// 第一步，创建一个canvas绘图上下文
const ctx = wx.createCanvasContent('myCanvas');
//  第二步，使用canvasCentext进行绘图描述
    ctx.setFillStyle = 'red'
    ctx.fillRect(10, 10, 150 ,75)
    ctx.draw()

创建绘图上下文

createCanvasContext
- 创建canvas绘图上下文
canvasToTempFilePath
- 可以将画布上的内容导出图片

context对象的方法列表

setFillStyle
- 设置填充样式
setStrokeStyle
- 设置线条样式
setShadow
- 设置阴影

渐变

createLinearGradient
- 创建一个线性渐变
createCircularGradient
- 创建一个圆形渐变
addColorStop
- 在渐变中的某一点添加一个颜色变化

线条样式

矩形

路径

文字

图片

混合

- 设置全局画笔透明度

其他

save 保存绘图上下文
restore 返回之前保存过的绘图上下文
draw 绘图

位置

wx.pageScrollTo
onPullDownRefresh
- 监听该页面用户下拉刷新事件；
- 需要在config的window选项中开启enablePullDownRefresh.
- 当处理完刷新数据后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
wx.startPullDownRefresh
- 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致；

来源：oschina

链接：https://my.oschina.net/u/3150996/blog/3168377

标签

微信小程序开发

微信开发

科技新闻