目录
1. 新建项目
1.1 项目结构说明
1.2 程序运行程序流程
2. 基础组件
3. 常用API
申请账号
邮箱（账号不能是 微信开放平台 或 微信公众平台）
密码
查看AppID 和 AppSercet
设置|开发设置
打开工具 | 填写AppID创建项目
| 点击编译（在左侧模拟器看效果）
| 点击预览（生成二维码 用微信扫描）
1. 新建项目
新建项目
1.1 项目结构说明
.wxml : 页面显示文件
.js : 脚本文件
.wxss : 样式文件
.json : 配置文件
json
app.json 做全局的配置
页面.json 做单独页面的配置
app.json
全局页面配置（小程序的所有页面路径、界面表现、网络超时时间、底部 tab）
{
"pages":[ 所有页面路径
"pages/index/index", 第一个即首页
"pages/logs/logs"
],
"window":{ 所有页面的顶部窗口 文本样式、背景色、标题、标题样式
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
project.config.json
开发工具个人喜好配置
{
"description": "项目配置文件。",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "1.9.91",
"appid": "wx8ed79e757ebebea1",
"projectname": "Test",
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
page.json
单个页面配置
{
"navigationBarTitleText": "hello"
}
WXML
类似于HTML的角色（显示控件）
wxml：(控件)
<text>{{ssbb}}</text>
js:（内容）
const app = getApp()
Page({
data: {
ssbb: 'Hello World',
}
})
页面.wxml
<!--页面.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
WXSS
类似于css的角色（修饰控件）
app.wxss
全局样式
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
页面.wxss
单独页面样式
/**页面.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
JS
脚本文件（处理交互）
wxml：(控件)
<text>{{ssbb}}</text>
<button bindtap="clickMe">点击我</button>
js:（内容）
const app = getApp()
Page({
data: {
ssbb: 'Hello World',
},
clickMe: function() {
this.setData({ ssbb: "Hello World !!!" })
}
})
app.js
处理全局页面
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
页面.js
处理单独页面
// 页面.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
1.2 程序运行程序流程
App({
// 程序启动后调用
onLaunch: function () {
}
})
Page({
data: { // 初始数据
},
// 页面加载完毕后调用（显示完初始数据后）
onLoad: function () {
}
})
2. 基础组件
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
所有组件与属性都是小写，以连字符-连接
所有组件都有的属性
| id | String | 组件的唯一标识（唯一）
| class | String | 组件的样式类 （对应的 WXSS文件 中定义的样式类）
| style | String | 组件的内联样式
| hidden | Boolean | 组件是否显示（默认显示）
| data-* | Any | 自定义属性（组件上触发的事件时，会发送给事件处理函数）
| bind* / catch* | EventHandler | 组件的事件
属性类型
| Boolean | 布尔值 有该属性则永为true
| Number | 数字 1, 2.5
| String | 字符串 "string"
| Array | 数组 [ 1, "string" ]
| Object | 对象 { key: value }
| EventHandler | 事件处理函数名
| Any | 任意属性
2.1 视图容器
view视图
<view class="hello">
</view>
属性
| hover-class | String 默认：none （按下去时的样式class）
| hover-stop-propagation | Boolean 默认：false （是否阻止本节点的祖先节点出现点击状态）
| hover-start-time | Number 默认：50 （按住后多久出现点击状态，单位ms）
| hover-stay-time | Number 默认：400 （手指松开后点击状态保留时间，单位ms）
scroll-view滚动视图
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
</scroll-view>
属性
scroll-x Boolean 默认：false 是否允许横向滚动
scroll-y Boolean 默认：false 是否允许纵向滚动
upper-threshold Number 默认：50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 默认：50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 滚动到某元素，值为某子元素id（id不能以数字开头）。
scroll-with-animation Boolean 默认：false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean 默认：false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部（只支持竖向）
bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
注意：
1. 不能在 scroll-view 中使用 textarea、map、canvas、video 组件
2. scroll-into-view 的优先级高于 scroll-top
3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'red',
scrollTop: 100
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
canvas画布
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback">
</canvas>
canvas.js
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
})
注意：
1.canvas 标签默认宽度300px、高度225px。
2.同一页面中的 canvas-id 不可重复，否则不可见。
3.canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级
4.不能在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件
5.css 动画对 canvas 组件无效
6.避免设置过大的宽高，在安卓下会有crash的问题
属性
canvas-id String 唯一标识符
disable-scroll Boolean 默认：false当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle 手指触摸开始时调用
bindtouchmove EventHandle 手指触摸后移动后调用
bindtouchend EventHandle 手指触摸动作结束后调用
bindtouchcancel EventHandle 手指触摸动作被打断时调用（如来电提醒，弹窗）
bindlongtap EventHandle 手指长按 500ms 之后调用（触发了长按事件后进行移动不会触发屏幕的滚动）
binderror EventHandle 当发生错误时触发 error 事件后调用，detail = {errMsg: 'something wrong'}
map 地图
处理点击事件、经度、纬度
<map bindmarkertap="markertap" longitude="经度" latitude="纬度"></map>
属性
| longitude | Number 中心点经度
| latitude | Number 中心点纬度
| scale | Number 默认：16 缩放级别（5-18）
| markers | Array 标记点
| polyline | Array 路线
| circles | Array 圆
| controls | Array 控件
| include-points | Array 缩放视野以包含所有给定的坐标点
| show-location | Boolean 显示带有方向的当前定位点
| bindmarkertap | EventHandle 点击标记点时调用
| bindcallouttap | EventHandle 点击标记点对应的气泡时调用
| bindcontroltap | EventHandle 点击控件时调用
| bindregionchange | EventHandle 视野发生变化时调用
| bindtap | EventHandle 点击地图时调用
| bindupdated | EventHandle 在地图渲染更新完成时调用
markers 属性
| id | 标记点id Numbermarker 点击事件回调会返回此id （非必填，建议填）
| latitude | 纬度 Number 浮点数（-90 ~ 90）（必填）
| longitude | 经度 Number 浮点数（-180 ~ 180）（必填）
| title | 标注点名 String（非必填）
| iconPath | 显示的图标 String 支持相对路径、根目录（必填）
| rotate | 旋转角度 Number 顺时针旋转的角度，默认为 0（ 0 ~ 360）（非必填）
| alpha | 标注的透明度 Number 默认1，无透明
| width | 标注图标宽度 Number 默认为图片实际宽度（非必填）
| height | 标注图标高度 Number 默认为图片实际高度（非必填）
| callout | 自定义标记点上方的气泡窗口 Object（非必填）
| label | 为标记点旁边增加标签 Object （非必填）
| anchor | 经纬度在标注图标的锚点，默认底边中点 Object {x, y}，x表示横向(0-1)，y表示竖向(0-1)（非必填）
气泡 callout 属性
| content | 文本 String
| color | 文本颜色 String
| fontSize | 文字大小 Number
| borderRadius| callout边框圆角 Number
| bgColor | 背景色 String
| padding | 文本边缘留白 Number
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 String
| textAlign | 文本对齐方式 String （有效值: left, right, center）
marker 上的气泡 label
| content | 文本 | String
| color | 文本颜色 | String
| fontSize | 文字大小 | Number
| x | label的坐标，原点是 marker 对应的经纬度 | Number
| y | label的坐标，原点是 marker 对应的经纬度 | Number
| borderWidth | 边框宽度 | Number
| borderColor | 边框颜色 | String
| borderRadius| 边框圆角 | Number
| bgColor | 背景色 | String
| padding | 文本边缘留白 | Number
| textAlign | 文本对齐方式。（有效值: left, right, center）String
polyline坐标点 属性
| points | 经纬度数组 | Array （必填） [{latitude: 0, longitude: 0}]
| color | 线的颜色 | String （非必填） 8位十六进制表示，后两位表示alpha值，如：#000000AA
| width | 线的宽度 | Number（非必填）
| dottedLine | 是否虚线 | Boolean（非必填） 默认：false
| arrowLine | 带箭头的线 | Boolean（非必填）| 默认：false，开发者工具暂不支持该属性
| arrowIconPath | 更换箭头图标 | String（非必填） | 在arrowLine为true时生效
| borderColor | 线的边框颜色 | String（非必填）
| borderWidth | 线的厚度 | Number（非必填）
circles 圆覆盖物 属性
latitude 纬度 Number（必填） 浮点数，范围 -90 ~ 90
longitude 经度 Number（必填） 浮点数，范围 -180 ~ 180
color 边框色 String（非必填） 8位十六进制表示，后两位表示alpha值，如：#000000AA
fillColor 填充色 String（非必填） 8位十六进制表示，后两位表示alpha值，如：#000000AA
radius 半径 Number（必填）
strokeWidth 边框宽 Number（非必填）
controls控件（不随着地图移动）
id 控件id Number（非必填）在控件点击事件回调会返回此id
position 控件在地图的位置 Object（必填） 控件相对地图位置
iconPath 显示的图标 String（必填）支持相对路径、绝对路径
clickable 是否可点击 Boolean（非必填）默认不可点击
position 属性
left 距离地图的左边界多远 Number（非必填）默认为0
top 距离地图的上边界多远 Number（非必填）默认为0
width 控件宽度 Number（非必填）默认为图片宽度
height 控件高度 Number（非必填）默认为图片高度
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
Page({
data: {
markers: [{
iconPath: "/resources/others.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/resources/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
audio音频
属性
id String 唯一标识符
src String 音频地址
loop Boolean 是否循环播放（默认：false）
controls Boolean 是否显示默认控件（默认：false）
poster String 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name String 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author String 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay EventHandle 当开始/继续播放时触发play事件
bindpause EventHandle 当暂停播放时触发 pause 事件
bindtimeupdate EventHandle 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended EventHandle 当播放到末尾时触发 ended 事件
MediaError.code
1 获取资源被用户禁止
2 网络错误
3 解码错误
4 不合适资源
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0)
}
})
image图片
属性
| src | String 图片地址
| mode | String 'scaleToFill' | 图片裁剪、缩放的模式
| lazy-load | Boolean （默认：false） | 图片懒加载。只针对page与scroll-view下的image有效 | [1.5.0]
| binderror | HandleEvent 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
| bindload | HandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
注意：
1.image组件默认宽度300px、高度225px
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
缩放 scaleToFill 不按比例缩放填满
缩放 aspectFit 按比例缩放（不裁剪）
缩放 aspectFill 按比例缩放（可能裁剪）
缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
裁剪 top 不缩放图片 距上
裁剪 bottom 不缩放图片 距下
裁剪 center 不缩放图片 距中
裁剪 left 不缩放图片 距左
裁剪 right 不缩放图片 距右
裁剪 top left 不缩放图片 距左上
裁剪 top right 不缩放图片 距右上
裁剪 bottom left 不缩放图片 距左下
裁剪 bottom right 不缩放图片 距右下
<view class="page">
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
</view>
</view>
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top：不缩放图片，只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom：不缩放图片，只显示图片的底部区域'
}, {
mode: 'center',
text: 'center：不缩放图片，只显示图片的中间区域'
}, {
mode: 'left',
text: 'left：不缩放图片，只显示图片的左边区域'
}, {
mode: 'right',
text: 'right：不缩放图片，只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left：不缩放图片，只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right：不缩放图片，只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
}],
src: '../../resources/cat.jpg'
},
imageError: function(e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
}
})
视频
属性
| src | String 视频地址
| initial-time | Number 初始播放位置 [1.6.0]
| duration | Number 指定视频时长 [1.1.0]
| controls | Boolean （默认：true） 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
| danmu-list | Object Array 弹幕列表
| danmu-btn | Boolean（默认： false ）是否显示弹幕按钮，只在初始化时有效，不能动态变更
| enable-danmu | Boolean（默认： false ）是否展示弹幕，只在初始化时有效，不能动态变更
| autoplay | Boolean（默认： false ）是否自动播放
| loop | Boolean（默认： false ）是否循环播放[1.4.0]
| muted | Boolean（默认： false ）是否静音播放[1.4.0]
| page-gesture | Boolean（默认： false ）在非全屏模式下，是否开启亮度与音量调节手势 [1.6.0]
| direction | Number 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） [1.7.0]
| show-progress | Boolean（默认： true）若不设置，宽度大于240时才会显示 [1.9.0]
| show-fullscreen-btn | Boolean（默认： true）是否显示全屏按钮 [1.9.0]
| show-play-btn | Boolean（默认： true）是否显示视频底部控制栏的播放按钮 [1.9.0]
| show-center-play-btn | Boolean（默认： true）是否显示视频中间的播放按钮 [1.9.0]
| enable-progress-gesture | Boolean（默认： true）是否开启控制进度的手势 | [1.9.0]
| objectFit | String | contain | 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
| poster | String | | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
| bindplay | EventHandle | | 当开始/继续播放时触发play事件
| bindpause | EventHandle | | 当暂停播放时触发 pause 事件
| bindended | EventHandle | | 当播放到末尾时触发 ended 事件
| bindtimeupdate | EventHandle | | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
| bindfullscreenchange | EventHandle | | 当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal | [1.4.0]
| bindwaiting | EventHandle | | 视频出现缓冲时触发[1.7.0]
| binderror | EventHandle | | 视频播放出错时触发
<view class="section tc">
<video src="{{src}}" controls ></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
</view>
<view class="section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
function getRandomColor () {
let rgb = []
for (let i = 0 ; i < 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
bindButtonTap: function() {
var that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front','back'],
success: function(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})
注意：
1.video 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 video 组件。
3. css 动画对 video 组件无效。
相机
需要[用户授权] scope.camera
属性
device-position String back 前置或后置，值为front, back
flash String auto 闪光灯，值为auto, on, off
bindstop EventHandle 摄像头在非正常终止时触发，如退出后台等情况
binderror EventHandle 用户不允许使用摄像头时触发
注意：
1.camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面。
2.同一页面只能插入一个 camera 组件。
3.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
Page({
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
live-player实时音视频播放
暂只针对如下类目开放，需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限
社交 直播
教育 在线教育
医疗 互联网医院，公立医院
政务民生 所有二级类目
金融 基金、信托、保险、银行、证券/期货、非金融机 构自营小额贷款、征信业务、消费金融
属性
src String 音视频地址（目前仅支持 flv, rtmp）
mode String live live（直播），RTC（实时通话）
autoplay Boolean（默认false）是否自动播放
muted Boolean（默认false）是否静音
orientation String （默认vertical）画面方向（可选值有 vertical，horizontal）
object-fit String（默认contain）填充模式（可选值有 contain，fillCrop）
background-mute Boolean （默认false）进入后台时是否静音
min-cache Number（默认1）最小缓冲区，单位s
max-cache Number（默认3）最大缓冲区，单位s
bindstatechange EventHandle 播放状态变化事件，detail = {code}
bindfullscreenchange EventHandle 全屏变化事件，detail = {direction, fullScreen}
bindnetstatus EventHandle 网络状态通知，detail = {info}
注意：
1. <live-player /> 默认宽度300px、高度225px，可通过wxss设置宽高。
2. 开发者工具上暂不支持
3.live-player 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面。
4.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 live-player 组件。
5.css 动画对 live-player 组件无效。
状态码
2001 已经连接服务器
2002 已经连接服务器,开始拉流
2003 网络接收到首个视频数据包(IDR)
2004 视频播放开始
2005 视频播放进度
2006 视频播放结束
2007 视频播放Loading
2008 解码器启动
2009 视频分辨率改变
-2301 网络断连，且经多次重连抢救无效，更多重试请自行重启播放
-2302 获取加速拉流地址失败
2101 当前视频帧解码失败
2102 当前音频帧解码失败
2103 网络断连, 已启动自动重连
2104 网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀
2105 当前视频播放出现卡顿
2106 硬解启动失败，采用软解
2107 当前视频帧不连续，可能丢帧
2108 当前流硬解第一个I帧失败，SDK自动切软解
3001 RTMP -DNS解析失败
3002 RTMP服务器连接失败
3003 RTMP服务器握手失败
3005 RTMP 读/写失败
网络状态数据
videoBitrate 当前视频编/码器输出的比特率，单位 kbps
audioBitrate 当前音频编/码器输出的比特率，单位 kbps
videoFPS 当前视频帧率
videoGOP 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed 当前的发送/接收速度
netJitter 网络抖动情况，抖动越大，网络越不稳定
videoWidth 视频画面的宽度
videoHeight 视频画面的高度
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
live-pusher实时音频录制
需要[用户授权]scope.camera、scope.record
暂只支持同上
属性
url String 推流地址（目前仅支持 flv, rtmp 格式）
mode String RTC SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话）
autopush Boolean false 自动推流
muted Boolean false 是否静音
enable-camera Boolean true 开启摄像头
auto-focus Boolean true 自动聚集
orientation String vertical vertical，horizontal
beauty Number 0 美颜
whiteness Number 0 美白
aspect String 9:16 宽高比，可选值有 3:4, 9:16
min-bitrate Number 200 最小码率
max-bitrate Number 1000 最大码率
waiting-image String 进入后台时推流的等待画面
waiting-image-md5 String 等待画面资源的MD5值
background-mute Boolean（默认false）进入后台时是否静音
bindstatechange EventHandle 状态变化事件，detail = {code}
bindnetstatus EventHandle 网络状态通知，detail = {info}
状态码
1001 已经连接推流服务器
1002 已经与服务器握手完毕,开始推流
1003 打开摄像头成功
1004 录屏启动成功
1005 推流动态调整分辨率
1006 推流动态调整码率
1007 首帧画面采集完成
1008 编码器启动
-1301 打开摄像头失败
-1302 打开麦克风失败
-1303 视频编码失败
-1304 音频编码失败
-1305 不支持的视频分辨率
-1306 不支持的音频采样率
-1307 网络断连，且经多次重连抢救无效，更多重试请自行重启推流
-1308 开始录屏失败，可能是被用户拒绝
-1309 录屏失败，不支持的Android系统版本，需要5.0以上的系统
-1310 录屏被其他应用打断了
-1311 Android Mic打开成功，但是录不到音频数据
-1312 录屏动态切横竖屏失败
1101 网络状况不佳：上行带宽太小，上传数据受阻
1102 网络断连, 已启动自动重连
1103 硬编码启动失败,采用软编码
1104 视频编码失败
1105 新美颜软编码启动失败，采用老的软编码
1106 新美颜软编码启动失败，采用老的软编码
3001 RTMP -DNS解析失败
3002 RTMP服务器连接失败
3003 RTMP服务器握手失败
3004 RTMP服务器主动断开，请检查推流地址的合法性或防盗链有效期
3005 RTMP 读/写失败
网络状态数据
videoBitrate 当前视频编/码器输出的比特率，单位 kbps
audioBitrate 当前音频编/码器输出的比特率，单位 kbps
videoFPS 当前视频帧率
videoGOP 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed 当前的发送/接收速度
netJitter 网络抖动情况，抖动越大，网络越不稳定
videoWidth 视频画面的宽度
videoHeight 视频画面的高度
<live-pusher url="https://domain/push_stream" mode="RTC" autopush bindstatechange="statechange" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-pusher code:', e.detail.code)
}
})
注意：
1.<live-player /> 默认宽度为100%、无默认高度，请通过wxss设置宽高。
2.开发者工具上暂不支持。
3.live-pusher 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面。
4.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 live-pusher 组件。
5.css 动画对 live-pusher 组件无效。
3. 常用API
js中使用
获取用户经纬度
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 经度
var longitude = res.longitude // 纬度
}
})
扫一扫
wx.scanCode({
success: (res) => {
console.log(res)
}
})
网友评论