小程序调查报告(三)实战
⼩程序调查报告（三）实战
我们要开发⼩程序了，⼤体需要⽤到这些东西，⼀个ide、熟悉的api、配置⾃⼰的服务器、发布等待审核。
第⼀步，下载⼩程序的ide开发⼯具
⽬前最新版本是 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
第三步，我们开始做⼀个视频播放的⼩例⼦
video.wxml⽂件
<view class="container log-list">
<View>1.播放⽹络视频</View>
<video src="qcloud/200051905_e5195702c78911e6bc811bda67685817.f20.mp4" binderror="videoErrorCallback"></video>
<View>2.播放本地视频</View>
<view >
<video src="{{src}}"></video>
<view class="btn-area">
<button bindtap="bindButtonTap">打开本地视频</button>
</view>
</view>
</view>
video.js⽂件
Page({
data: {
logs: []
},
videoErrorCallback: function (e) {
console.log('视频错误信息:'+Msg);
},
data: {
src: ''
},
小视频app开发
/**
* 打开本地视频
*/
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.pFilePaths[0])
that.setData({
src: pFilePaths[0]
})
}
})
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
运⾏之后，如下图
可以在项⽬那个位置点击下预览，需要通过扫码，就可以在⼿机⾥⾯预览了
这⾥<video>标签，只能播放直接的视频流，⽐如优酷上⾯的视频连接是不⽀持的。有⼀个⽅法，就是通过腾讯云上⾯的视频转换功能可以拿到这样的地址，⽐如上⾯例⼦中的那个url，就是把视频上传到腾讯云上⾯去了。
其它第三⽅⼩程序开发资源

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。