View篇
1： swiper(切換欄)
屬性:
indicator-dots(是否顯示面板指示點)
autoplay(是否自動切換)
interval(自動切換時間間隔)
duration(滑動動畫時長)
vertical(滑動方向是否為縱向)
circular(是否采用銜接滑動)
示例代碼如下：
<swiper indicator-dots="true" autoplay="true" interval="1000" duration="500" vertical='true' circular='true'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
測試截圖
2：scroll-view(可滾動視圖區(qū)域)
屬性:
scroll-x(是否可以水平滑動)
scroll-y(是否可以垂直滑動)
示例代碼如下：
<scroll-view scroll-x="true" style="width:100%;">
<view style='flex-direction:row;width:150%;display: flex;'>//flex-direction:row屬性和display: flex屬性設(shè)置給view才能實現(xiàn)水平布局
<view style=' background-color: #aaa222;width: 200px;height: 100%;'>green</view>
<view style=' background-color: red;width: 200px;height: 100%;'>red</view>
<view style=' background-color: blue;width: 200px;height: 100%;'>blue</view>
</view>
</scroll-view>
<scroll-view scroll-y="true" style="height:100%;">
<view style='flex-direction:column;height:150%;display: flex;'>
<view style=' background-color: #aaa222;width: 100%;height: 200px;'>green</view>
<view style=' background-color: red;width: 100%;height:200px;'>red</view>
<view style=' background-color: blue;width: 100%;height: 200px;'>blue</view>
</view>
</scroll-view>
測試截圖
3：movable-view(可移動視圖區(qū)域)
屬性:
direction(屬性值有all、vertical、horizontal、none)
scale(是否支持雙指縮放，默認(rèn)縮放手勢生效區(qū)域是在movable-view內(nèi))
scale-min(定義縮放倍數(shù)最小值)
scale-max(定義縮放倍數(shù)最大值)
scale-value(定義縮放倍數(shù)，取值范圍為 0.5 - 10)
注意：
movable-area的有個屬性scale-area(當(dāng)里面的movable-view設(shè)置為支持雙指縮放時，設(shè)置此值可將縮放手勢生效區(qū)域修改為整個movable-area)
示例代碼如下：
movable-view區(qū)域小于movable-area
<movable-area style="height: 200px; width: 200px; background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" direction="all">
</movable-view>
</movable-area>
movable-view區(qū)域大于movable-area
<movable-area style="height: 100px; width: 100px; background: red;">
<movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
</movable-view>
</movable-area>
可放縮
<movable-area style="height: 200px; width: 200px; background: red;" scale-area="true">
<movable-view style="height: 50px; width: 50px; background: blue;" direction="all" scale="true" scale-min="0.5" scale-max="4" scale-value="2">
</movable-view>
</movable-area>
測試截圖
4：cover-view(覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button)；cover-image(覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view，支持嵌套在cover-view里)
示例代碼如下：
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
>
<cover-view>
<cover-view>
<cover-image style='height:20px;width:20px' src='../../image/swiper1.jpg' />
</cover-view>
<cover-view>
<cover-image style='height:20px;width:20px' src="../../image/swiper1.jpg" />
</cover-view>
<cover-view>00:00</cover-view>
</cover-view>
</video>
測試截圖
5：icon(圖標(biāo))
屬性:
type(icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear)
size(icon的大小，單位px)
color(icon的顏色，同css的color)
示例代碼如下：
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}" />
</block>
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40" />
</block>
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}" />
</block>
數(shù)據(jù)代碼如下：
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
}
測試截圖
6：text(文本)
示例代碼如下：
<text>我是文本</text>
7：rich-text(富文本)
示例代碼如下：
<rich-text>我是富文本</rich-text>
8：progress(進度條)
屬性:
percent(百分比0~100)
show-info(在進度條右側(cè)顯示百分比)
stroke-width(進度條線的寬度，單位px)
color(進度條顏色)
active(進度條從左往右的動畫)
示例代碼如下：
<progress percent="20" show-info="true" style='margin-bottom:20px'/>
<progress percent="40" stroke-width="12" style='margin-bottom:20px'/>
<progress percent="60" color="pink" style='margin-bottom:20px'/>
<progress percent="80" active="true" style='margin-bottom:20px'/>
測試截圖
9：button(按鈕)
屬性:
size(按鈕的大小，有默認(rèn)大小default和小尺寸mini)
type(按鈕的樣式類型，有綠色primary，白色default，紅色warn)
plain(按鈕是否鏤空，背景色透明)
disabled(是否禁用)
loading(名稱前是否帶 loading 圖標(biāo))
open-type(微信開放能力，有contact打開客服會話；share觸發(fā)用戶轉(zhuǎn)發(fā)；getUserInfo獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息；getPhoneNumber獲取用戶手機號，可以從bindgetphonenumber回調(diào)中獲取到用戶信息；launchApp打開APP，可以通過app-parameter屬性設(shè)定向APP傳的參數(shù)；openSetting打開授權(quán)設(shè)置頁；feedback打開“意見反饋”頁面，用戶可提交反饋內(nèi)容并上傳日志，開發(fā)者可以登錄小程序管理后臺后進入左側(cè)菜單“客服反饋”頁面獲取到反饋內(nèi)容)
lang(指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文)
bindgetuserinfo(用戶點擊該按鈕時，會返回獲取到的用戶信息，回調(diào)的detail數(shù)據(jù)與wx.getUserInfo返回的一致)
示例代碼如下：
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">點擊設(shè)置以上按鈕disabled屬性</button>
<button bindtap="setPlain">點擊設(shè)置以上按鈕plain屬性</button>
<button bindtap="setLoading">點擊設(shè)置以上按鈕loading屬性</button>
<button open-type="contact">進入客服會話</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">獲取用戶信息</button>
<button open-type="openSetting">打開授權(quán)設(shè)置頁</button>
數(shù)據(jù)代碼如下：
var types = ['default', 'primary', 'warn']
var pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
},
onGotUserInfo: function(e) {
console.log(e.detail.errMsg)
console.log(e.detail.userInfo)
console.log(e.detail.rawData)
},
}
for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
}
Page(pageObject)
測試截圖
10：checkbox-group和checkbox(多選項目)
checkbox-group的屬性:
bindchange(<checkbox-group/>中選中項發(fā)生改變是觸發(fā) change 事件，detail = {value:[選中的checkbox的value的數(shù)組]})
checkbox的屬性:
value(<checkbox/>標(biāo)識，選中時觸發(fā)<checkbox-group/>的 change 事件，并攜帶 <checkbox/> 的 value)
checked(當(dāng)前是否選中，可用來設(shè)置默認(rèn)選中)
color(checkbox的顏色)
示例代碼如下：
<checkbox-group bindchange="checkboxChange">
<checkbox color='red' wx:for="{{items}}" value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</checkbox-group>
數(shù)據(jù)代碼如下：
Page({
data: {
items: [
{ name: 'USA', value: '美國' },
{ name: 'CHN', value: '中國', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國' },
{ name: 'TUR', value: '法國' },
]
},
checkboxChange: function (e) {
console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
}
})
測試截圖
11：form(表單，將組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交)
屬性:
bindsubmit(攜帶 form 中的數(shù)據(jù)觸發(fā) submit 事件，event.detail = {value : {'name': 'value'} , formId: ''})
bindreset(表單重置時會觸發(fā) reset 事件)
示例代碼如下(注意表單中的其他組件必須得有name屬性才能將組件的值進行提交)：
<form bindsubmit="formSubmit" bindreset="formReset">
<switch name="switch">switch</switch>
<slider name="slider" show-value="true">slider</slider>
<input name="input" placeholder="please input here">input</input>
<radio-group name="radio-group">
radio-group
<radio value="radio1">radio1</radio>
<radio value="radio2">radio2</radio>
</radio-group>
<checkbox-group name="checkbox">
checkbox-group
<checkbox value="checkbox1">checkbox1</checkbox>
<checkbox value="checkbox2">checkbox2</checkbox>
</checkbox-group>
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</form>
數(shù)據(jù)代碼如下：
Page({
formSubmit: function (e) {
console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
},
formReset: function () {
console.log('form發(fā)生了reset事件')
}
})
測試截圖
12：input(輸入框)
屬性:
type(input 的類型)
password(是否是密碼類型)
placeholder(輸入框為空時占位符)
placeholder-style(指定 placeholder 的樣式)
focus(獲取焦點)
maxlength(最大輸入長度，設(shè)置為 -1 的時候不限制最大長度)
auto-focus((即將廢棄，請直接使用 focus )自動聚焦，拉起鍵盤)
示例代碼如下：
<input placeholder="這是一個可以自動聚焦的input" auto-focus/>
<input placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得輸入框獲取焦點</button>
<input maxlength="10" placeholder="最大輸入長度10" />
<view>你輸入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="輸入同步到view中" />
<input bindinput="bindReplaceInput" placeholder="連續(xù)的兩個1會變成2" />
<input password type="number" />
<input password type="text" />
<input type="digit" placeholder="帶小數(shù)點的數(shù)字鍵盤" />
<input type="idcard" placeholder="身份證輸入鍵盤" />
<input placeholder-style="color:red" placeholder="占位符字體是紅色的" />
數(shù)據(jù)代碼如下：
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap: function () {
this.setData({
focus: true
})
},
bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function (e) {
var value = e.detail.value
var pos = e.detail.cursor
if (pos != -1) {
//光標(biāo)在中間
var left = e.detail.value.slice(0, pos)
//計算光標(biāo)的位置
pos = left.replace(/11/g, '2').length
}
//直接返回對象，可以對輸入進行過濾處理，同時可以控制光標(biāo)的位置
return {
value: value.replace(/11/g, '2'),
cursor: pos
}
}
})
測試截圖
13：picker(從底部彈起的滾動選擇器，現(xiàn)支持五種選擇器，通過mode來區(qū)分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區(qū)選擇器，默認(rèn)是普通選擇器)
普通選擇器：mode = selector
屬性:
range(mode為 selector 或 multiSelector 時，range 有效)
value(value 的值表示選擇了 range 中的第幾個(下標(biāo)從 0 開始))
bindchange(value 改變時觸發(fā) change 事件，event.detail = {value: value})
多列選擇器：mode = multiSelector
屬性:
range(mode為 selector 或 multiSelector 時，range 有效。二維數(shù)組，長度表示多少列，數(shù)組的每項表示每列的數(shù)據(jù)，如[["a","b"], ["c","d"]])
value(value 每一項的值表示選擇了 range 對應(yīng)項中的第幾個（下標(biāo)從 0 開始）)
bindchange(value 改變時觸發(fā) change 事件，event.detail = {value: value})
bindcolumnchange(某一列的值改變時觸發(fā) columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標(biāo)從0開始），value 的值表示變更值的下標(biāo))
時間選擇器：mode = time
屬性:
value(表示選中的時間，格式為"hh:mm")
start(表示有效時間范圍的開始，字符串格式為"hh:mm")
end(表示有效時間范圍的結(jié)束，字符串格式為"hh:mm")
bindchange(value 改變時觸發(fā) change 事件，event.detail = {value: value} )
日期選擇器：mode = date
屬性:
value(表示選中的日期，格式為"YYYY-MM-DD")
start(表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD")
end(表示有效日期范圍的結(jié)束，字符串格式為"YYYY-MM-DD")
bindchange(value 改變時觸發(fā) change 事件，event.detail = {value: value})
省市區(qū)選擇器：mode = region
屬性:
value(表示選中的省市區(qū)，默認(rèn)選中每一列的第一個值)
custom-item(可為每一列的頂部添加一個自定義的項)
bindchange(value 改變時觸發(fā) change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是統(tǒng)計用區(qū)劃代碼，postcode是郵政編碼)
示例代碼如下：
普通選擇器
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
當(dāng)前選擇：{{array[index]}}
</picker>
多列選擇器
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</picker>
時間選擇器
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
當(dāng)前選擇: {{time}}
</picker>
日期選擇器
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
當(dāng)前選擇: {{date}}
</picker>
省市區(qū)選擇器
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
當(dāng)前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
</picker>
數(shù)據(jù)代碼如下：
Page({
data: {
array: ['美國', '中國', '巴西', '日本'],
objectArray: [{
id: 0,
name: '美國'
},
{
id: 1,
name: '中國'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [
['無脊柱動物', '脊柱動物'],
['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'],
['豬肉絳蟲', '吸血蟲']
],
objectMultiArray: [
[{
id: 0,
name: '無脊柱動物'
},
{
id: 1,
name: '脊柱動物'
}
],
[{
id: 0,
name: '扁性動物'
},
{
id: 1,
name: '線形動物'
},
{
id: 2,
name: '環(huán)節(jié)動物'
},
{
id: 3,
name: '軟體動物'
},
{
id: 3,
name: '節(jié)肢動物'
}
],
[{
id: 0,
name: '豬肉絳蟲'
},
{
id: 1,
name: '吸血蟲'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['廣東省', '廣州市', '海珠區(qū)'],
customItem: '全部'
},
bindPickerChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function(e) {
console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
break;
case 1:
data.multiArray[1] = ['魚', '兩棲動物', '爬行動物'];
data.multiArray[2] = ['鯽魚', '帶魚'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
break;
case 1:
data.multiArray[2] = ['蛔蟲'];
break;
case 2:
data.multiArray[2] = ['螞蟻', '螞蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆蟲', '甲殼動物', '蛛形動物', '多足動物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鯽魚', '帶魚'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃魚'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龜', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
測試截圖
14：picker-view(嵌入頁面的滾動選擇器)
屬性:
value(數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-column 選擇的第幾項（下標(biāo)從 0 開始），數(shù)字大于 picker-view-column 可選項長度時，選擇最后一項)
indicator-style(設(shè)置選擇器中間選中框的樣式)
bindchange(當(dāng)滾動選擇，value 改變時觸發(fā) change 事件，event.detail = {value: value}；value為數(shù)組，表示 picker-view 內(nèi)的 picker-view-column 當(dāng)前選擇的是第幾項（下標(biāo)從 0 開始）)
示例代碼如下：
{{year}}年{{month}}月{{day}}日
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
數(shù)據(jù)代碼如下：
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
value: [9999, 1, 1],
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
測試截圖
15：radio(單選項目)
屬性:
value(<radio/> 標(biāo)識。當(dāng)該<radio/> 選中時，<radio-group/> 的 change 事件會攜帶<radio/>的value)
checked(當(dāng)前是否選中)
color(radio的顏色)
示例代碼如下：
<radio-group bindchange="radioChange">
<block wx:for="{{items}}">
<radio color='red' value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
</block>
</radio-group>
數(shù)據(jù)代碼如下：
Page({
data: {
items: [
{ name: 'USA', value: '美國' },
{ name: 'CHN', value: '中國', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國' },
{ name: 'TUR', value: '法國' },
]
},
radioChange: function (e) {
console.log('radio發(fā)生change事件，攜帶value值為：', e.detail.value)
}
})
測試截圖
16：slider(滑動選擇器)
屬性:
min(最小值)
max(最大值)
step(步長，取值必須大于 0，并且可被(max - min)整除)
show-value(是否顯示當(dāng)前 value)
bindchange(完成一次拖動后觸發(fā)的事件，event.detail = {value: value} )
示例代碼如下：
設(shè)置step
<slider bindchange="slider2change" step="5" /> 顯示當(dāng)前value
<slider bindchange="slider3change" show-value/> 設(shè)置最小/最大值
<slider bindchange="slider4change" min="50" max="200" show-value/>
數(shù)據(jù)代碼如下：
var pageData = {}
for (var i = 1; i < 5; i++) {
(function (index) {
pageData['slider' + index + 'change'] = function (e) {
console.log('slider' + 'index' + '發(fā)生 change 事件，攜帶值為', e.detail.value)
}
})(i)
}
Page(pageData)
測試截圖
17：switch(開關(guān)選擇器)
屬性:
checked(是否選中)
bindchange(checked 改變時觸發(fā) change 事件，event.detail={ value:checked})
示例代碼如下：
<switch checked bindchange="switch1Change" />
<switch bindchange="switch2Change" />
數(shù)據(jù)代碼如下：
Page({
switch1Change: function (e) {
console.log('switch1 發(fā)生 change 事件，攜帶值為', e.detail.value)
},
switch2Change: function (e) {
console.log('switch2 發(fā)生 change 事件，攜帶值為', e.detail.value)
}
})
測試截圖
18：textarea(多行輸入框)
屬性:
placeholder(輸入框為空時占位符)
placeholder-style(指定 placeholder 的樣式)
auto-height(是否自動增高，設(shè)置auto-height時，style.height不生效)
focus(獲取焦點)
auto-focus(自動聚焦，拉起鍵盤)
bindblur(輸入框失去焦點時觸發(fā)，event.detail = {value, cursor})
示例代碼如下：
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自動變高" />
<textarea placeholder="placeholder顏色是紅色的" placeholder-style="color:red;" />
<textarea placeholder="這是一個可以自動聚焦的textarea" auto-focus />
<textarea placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得輸入框獲取焦點</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea" />
<button form-type="submit"> 提交 </button>
</form>
數(shù)據(jù)代碼如下：
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function () {
this.setData({
focus: true
})
},
bindTextAreaBlur: function (e) {
console.log(e.detail.value)
},
bindFormSubmit: function (e) {
console.log(e.detail.value.textarea)
}
})
測試截圖
19：navigator(頁面鏈接)
屬性:
url(當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接)
open-type(跳轉(zhuǎn)方式，默認(rèn)方式為navigate，它的值有navigate，對應(yīng) wx.navigateTo 或 wx.navigateToMiniProgram 的功能；redirect，對應(yīng) wx.redirectTo 的功能；switchTab，對應(yīng) wx.switchTab 的功能；reLaunch，對應(yīng) wx.reLaunch 的功能；navigateBack，對應(yīng) wx.navigateBack 的功能；exit，退出小程序，target="miniProgram"時生效)
示例代碼如下：
<navigator url="../../pages/ceshi/ceshi" open-type="redirect">跳轉(zhuǎn)方式一</navigator>
<navigator url="../../pages/ceshi/ceshi" open-type="navigate">跳轉(zhuǎn)方式二</navigator>
<navigator url="../../pages/ceshi/ceshi" open-type="exit" target="miniProgram">退出小程序</navigator>
20：audio(音頻)
屬性:
id(audio 組件的唯一標(biāo)識符)
src(要播放音頻的資源地址)
loop(是否循環(huán)播放)
controls(是否顯示默認(rèn)控件)
poster(默認(rèn)控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設(shè)置 poster 無效)
name(默認(rèn)控件上的音頻名字，如果 controls 屬性值為 false 則設(shè)置 name 無效)
author(默認(rèn)控件上的作者名字，如果 controls 屬性值為 false 則設(shè)置 author 無效)
示例代碼如下：
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop/>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>
數(shù)據(jù)代碼如下：
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)
}
})
測試截圖
21：image(圖片)
屬性:
src(圖片資源地址)
mode(圖片裁剪、縮放的模式)
lazy-load(圖片懶加載。只針對page與scroll-view下的image有效)
示例代碼如下：
<view wx:for="{{array}}">
<view>{{item.text}}</view>
<view>
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
數(shù)據(jù)代碼如下：
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應(yīng)'
}, {
mode: 'aspectFit',
text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來'
}, {
mode: 'aspectFill',
text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來'
}, {
mode: 'top',
text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域'
}, {
mode: 'bottom',
text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'
}, {
mode: 'center',
text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'
}, {
mode: 'left',
text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'
}, {
mode: 'right',
text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'
}, {
mode: 'top left',
text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域'
}, {
mode: 'top right',
text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'
}, {
mode: 'bottom left',
text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'
}, {
mode: 'bottom right',
text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'
}],
src: '../../image/swiper1.jpg'
},
imageError: function (e) {
console.log('image3發(fā)生error事件，攜帶值為', e.detail.errMsg)
}
})
測試截圖
22：video(視頻)
屬性:
src(要播放視頻的資源地址)
controls(是否顯示默認(rèn)播放控件（播放/暫停按鈕、播放進度、時間）)
danmu-list(彈幕列表)
danmu-btn(是否顯示彈幕按鈕，只在初始化時有效，不能動態(tài)變更)
enable-danmu(是否展示彈幕，只在初始化時有效，不能動態(tài)變更 )
示例代碼如下：
<video src="{{src}}" controls></video>
<button bindtap="bindButtonTap">獲取視頻</button>
<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>
<button bindtap="bindButtonTap">獲取視頻</button>
<input bindblur="bindInputBlur" />
<button bindtap="bindSendDanmu">發(fā)送彈幕</button>
數(shù)據(jù)代碼如下：
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 出現(xiàn)的彈幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出現(xiàn)的彈幕',
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()
})
}
})
測試截圖
23：camera(系統(tǒng)相機)
屬性:
device-position(前置或后置，值為front, back)
flash(閃光燈，值為auto, on, off)
binderror(用戶不允許使用攝像頭時觸發(fā))
示例代碼如下：
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>預(yù)覽</view>
<image mode="widthFix" src="{{src}}"></image>
數(shù)據(jù)代碼如下：
Page({
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
測試截圖
24：map(地圖)
屬性:
longitude(中心經(jīng)度)
latitude(中心緯度)
scale(縮放級別，取值范圍為5-18)
controls(控件)
markers(標(biāo)記點)
polyline(路線)
show-location(顯示帶有方向的當(dāng)前定位點)
bindmarkertap(點擊標(biāo)記點時觸發(fā)，會返回marker的id)
bindregionchange(視野發(fā)生變化時觸發(fā))
示例代碼如下：
<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>
數(shù)據(jù)代碼如下：
Page({
data: {
markers: [{
iconPath: "../../image/swiper1.jpg",
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: '../../image/swiper1.jpg',
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)
}
})
測試截圖
25：canvas(畫布)
屬性:
canvas-id(canvas 組件的唯一標(biāo)識符)
binderror(當(dāng)發(fā)生錯誤時觸發(fā) error 事件，detail = {errMsg: 'something wrong'})
示例代碼如下：
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 當(dāng)使用絕對定位時，文檔流后邊的 canvas 的顯示層級高于前邊的 canvas -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因為 canvas-id 與前一個 canvas 重復(fù)，該 canvas 不會顯示，并會發(fā)送一個錯誤事件到 AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
數(shù)據(jù)代碼如下：
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()
}
})
測試截圖
26：icon(圖標(biāo))
屬性:
type(開放數(shù)據(jù)類型，具體的值如下圖所示)
open-gid(當(dāng) type="groupName" 時生效, 群id)
lang(當(dāng) type="user*" 時生效，以哪種語言展示 userInfo，有效值有：en, zh_CN, zh_TW)
type具體的值如下圖所示：
示例代碼如下：
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
測試截圖
-------------------------------------------------------------------
用到的js語言語法的總結(jié)
1：數(shù)組
在js中數(shù)組具有的方法如下：
push(參數(shù)a)：向數(shù)組中放入元素a；
pop()：移除數(shù)組中的最后一個元素；
join(參數(shù)a)：將a插入都數(shù)組的各個元素之間，然后返回各個元素和a組合成的字符串；
length：返回數(shù)組中元素的個數(shù)；
