微信小程序调查报告（三）实战

我们要开发小程序了，大体需要用到这些东西，一个ide、熟悉微信的api、配置自己的服务器、发布等待微信审核。

 

第一步，下载微信小程序的ide开发工具

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1482383514

目前最新版本是 0.11.122100 （2016-12-21）

进入后张下面这个样子，还不错，简洁明了，代码自动补全功能也有，代码补全还有进步的空间，比如 输入空格即可提示属性等，目前还没有。

这里有几个最基本的问文件

app.js javasript文件

app.json 配置文件，里面配置着页面目录等

app.wxss 全局的样式

 

*.js 就是咱们的JavaScript，*.wxss就是样式css文件，还有一个类似html的，*.wxml。微信小程序重新定义了html属性，从官方提供的文档中就能看到目前支持的属性都有哪些。

 

第二步，我们就要熟悉微信支持的html组件和调用api

基础组件有七大类：

视图容器：view，scroll-view，swiper

基础内容：icon，text，progress

表单：button，form，input，checkbox，radio，picker，picker-view，slider，switch，label

导航：navigator

多媒体：audio，image，video（后面我们也举一个利用video的小例子）

地图：map

画布：canvas

客服会话：contact-button

所提供的API，都是微信原生的api，可以方便的调用微信的一些信息，比如用户信息，支付，本地存储。另外还有网络api，媒体api，数据api，位置api，设备api，界面api，开放接口api。这里就不一一列举了，可以参考https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161222微信官网地址。

 

第三步，我们开始做一个视频播放的小例子

video.wxml文件

 

<view class="container log-list">

<View>1.播放网络视频</View>

<video src="http://200051905.vod.myqcloud.com/200051905_e5195702c78911e6bc811bda67685817.f20.mp4" binderror="videoErrorCallback"></video>

<View>2.播放本地视频</View>

<view style="display: flex;flex-direction: column;">

<video style="width: 100%;height=400px;margin:1px;" src="{{src}}"></video>

<view class="btn-area">

<button bindtap="bindButtonTap">打开本地视频</button>

</view>

</view>

</view>

 

video.js文件

Page({

data: {

logs: []

},

videoErrorCallback: function (e) {

console.log('视频错误信息:'+e.detail.errMsg);

},

data: {

src: ''

},

/**

* 打开本地视频

*/

bindButtonTap: function() {

var that = this

//拍摄视频或从手机相册中选视频

wx.chooseVideo({

//album 从相册选视频，camera 使用相机拍摄，默认为：[‘album‘, ‘camera‘]

sourceType: ['album', 'camera'],

//拍摄视频最长拍摄时间，单位秒。最长支持60秒

maxDuration: 60,

//前置或者后置摄像头，默认为前后都有，即：[‘front‘, ‘back‘]

camera: ['front','back'],

//接口调用成功，返回视频文件的临时文件路径，详见返回参数说明

success: function(res) {

console.log(res.tempFilePaths[0])

that.setData({

src: res.tempFilePaths[0]

})

}

})

},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(function (log) {

return util.formatTime(new Date(log))

})

})

}

})

运行之后，如下图

 

可以在项目那个位置点击下预览，需要通过扫码，就可以在手机里面预览了

 

 

这里<video>标签，只能播放直接的视频流，比如优酷上面的视频连接是不支持的。有一个方法，就是通过腾讯云上面的视频转换功能可以拿到这样的地址，比如上面例子中的那个url，就是把视频上传到腾讯云上面去了。

 

其它第三方微信小程序开发资源

https://github.com/justjavac/awesome-wechat-weapp

https://github.com/CFETeam/weapp-demo-video（怀疑是微信官方放的 ^_^）