小程序开发教程（微信小程序开发入门与实践）

小程序的API开发

1.wx.request使用：

a.概念：发起HTTPS网络请求

b.参数如下表所示：

c.示例代码如下：

wx.request({

url: 'test.php', //仅为示例，并非真实的接口地址

data: {

x: '',

y: ''

},

header: {

'content-type': 'application/json' // 默认值

},

success (res) {

console.log(res.data)

}

})

2.图片选择与微信拍照：

a.wx.chooseImage选择图片

概念： 从本地相册选择图片或使用相机拍照。

参数如下表：

示例代码如下：

wx.chooseImage({

count: 1,

sizeType: ['original', 'compressed'], //图片类型，原图和压缩图

sourceType: ['album', 'camera'], //图片来源，从相册选择还是拍照

success (res) {

// tempFilePath可以作为img标签的src属性显示图片

const tempFilePaths = res.tempFilePaths //返回选择的图片路径

}

})

3.文件的上传与下载：

a.文件上传wx.uploadFile：

概念：将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

参数：

示例代码：

wx.chooseImage({ //选择一张图片

success (res) {

const tempFilePaths = res.tempFilePaths //选择图片成功后的图片路径

wx.uploadFile({

url: 'https://example.weixin.qq.com/upload', //上传的服务器地址

filePath: tempFilePaths[0], //上传的文件为之前选择的图片

name: 'file', //文件名

formData: {

'user': 'test'

},

success (res){

const data = res.data //上传成功后做的操作

//do something

}

})

}

})

b.文件下载wx.downloadFile：

概念：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。

参数：

示例代码：

wx.downloadFile({

url: 'https://example.com/audio/123', //仅为示例，并非真实的资源

success (res) {

// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容

if (res.statusCode === 200) {

wx.playVoice({

filePath: res.tempFilePath

})

}

}

})

4.WebSocket：

a.什么是WebSocket

连接服务器，与服务器进行信息交互的API

b.使用WebSocket

1.连接服务器wx.connectSocket

示例代码：

wx.connectSocket({

url: 'wss://example.qq.com', //服务器地址，只有这个必填

data:{

x: '',

y: ''

},

header:{

'content-type': 'application/json'

},

protocols: ['protocol1'],

method:"GET"

})

2.向服务器发送信息wx.sendSocketMessage

示例代码：

wx.sendSocketMessage({

data:msg

})

3.关闭连接wx.closeSocket

示例代码：

wx.closeSocket()

c.监听WebSocket

1.wx.onSocketMessage监听WebSocket接收到服务器消息的事件

2.wx.onSocketOpen监听WebSocket 连接打开事件

5.音乐的播放和控制：

a.wx.getBackgroundAudioManager() 获取全局唯一的背景音频管理器。

b.BackgroundAudioManager实例：

backgroundAudioManager.title = '此时此刻' //音频标题（必填）

backgroundAudioManager.epname = '此时此刻' //专辑名

backgroundAudioManager.singer = '许巍' //歌手名

backgroundAudioManager.coverImgUrl = '...url' //封面图URL

backgroundAudioManager.src = '....url' //音乐URL

6.缓存数据：

a.wx.setStorage：将数据存储在本地缓存中指定的 key 中。数据存储上限为10MB

示例：

wx.setStorage({ //异步方式

key:"key",

data:"value"

})

try {

wx.setStorageSync('key', 'value') //同步方式

} catch (e) { }

b.wx.removeStorage：从本地缓存中移除指定Key

示例：

wx.removeStorage({ //异步方式

key: 'key',

})

try {

wx.removeStorageSync('key') //同步方式

} catch (e) {

// Do something when catch error

}

c.wx.getStorage：从本地缓存中异步获取指定 key 的内容

wx.getStorageSync：同步版本

d.wx.getStorageInfo：异步获取当前storage的相关信息

wx.getStorageInfoSync：同步版本

e.wx.clearStorage：清理本地数据缓存

wx.clearStorageSync：同步版本

7.获取当前位置：

a.wx.openLocation：使用微信内置地图查看位置

b.wx.getLocation：获取当前的地理位置

c.wx.chooseLocation：打开地图选择位置

d.综合应用代码：

wx.getLocation({

type: 'gcj02', //返回可以用于wx.openLocation的经纬度

success (res) {

const latitude = res.latitude //获取经纬度

const longitude = res.longitude

wx.openLocation({ //根据获取的经纬度查看位置

latitude,

longitude,

scale: 28 //缩放比例

})

}

})

8.交互：

a.wx.showToast：显示消息提示框

示例：

wx.showToast({

title: '成功', //提示内容

icon: 'success', //图标，有success和loading两种

duration: 2000 //提示的延迟时间

})

注意：wx.showLoading 和 wx.showToast 同时只能显示一个

wx.showToast 应与 wx.hideToast 配对使用

b.wx.showModal：显示模态对话框

示例：

wx.showModal({

title: '提示', //提示的标题

content: '这是一个模态弹窗', //提示的内容

success (res) {

if (res.confirm) {

console.log('用户点击确定')

} else if (res.cancel) {

console.log('用户点击取消')

}

}

})

c.wx.showActionSheet：显示操作菜单

示例：

wx.showActionSheet({

itemList: ['A', 'B', 'C'], //按钮的文字数组

success (res) {

console.log(res.tapIndex) //返回用户点击的按钮序号

},

fail (res) {

console.log(res.errMsg)

}

})

9.导航栏：

a.wx.setNavigationBarTitle：动态设置当前页面的标题

示例：

wx.setNavigationBarTitle({

title: '当前页面'

})

b.wx.showNavigationBarLoading：在当前页面显示导航条加载动画

c.wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画

d.wx.setNavigationBarColor：设置页面导航条颜色

示例：

wx.setNavigationBarColor({

frontColor: '#ffffff', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

backgroundColor: '#ff0000', //背景颜色值，有效值为十六进制颜色

animation: { //动画效果

duration: 400, //动画变化时间

timingFunc: 'easeIn' //动画变化方式（以低速开始）

}

})

10.动画：

a.Animation wx.createAnimation(Object object)：创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

b.示例代码：

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

Page({

data: {

animationData: {}

},

onShow: function(){

var animation = wx.createAnimation({ //创建动画示例

duration: 1000, //动画持续时间

timingFunction: 'ease', //动画以低速开始，然后加快，在结束前变慢

})

this.animation = animation

animation.scale(2,2).rotate(45).step() //动画样式，缩放的同时旋转45度，step表示一组动画完成

this.setData({

animationData:animation.export()

})