微信小程序
一窟社、創(chuàng)建項(xiàng)目
1筛圆、準(zhǔn)備工作
微信公眾平臺(tái)注冊(cè)開發(fā)者賬號(hào)：https://mp.weixin.qq.com/
下載小程序開發(fā)工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2窃判、認(rèn)識(shí)項(xiàng)目目錄
1.pages目錄：用于存放所有的頁(yè)面警没。
2.utils目錄：用于存放工具類文件。
3.app.js：是入口文件部翘，程序在運(yùn)行時(shí)搂根，首先要執(zhí)行該文件珍促。
4.app.json：是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）剩愧。
5.app.wxss：是全局樣式文件猪叙。全局樣式文件里面定義的選擇器，在所有的頁(yè)面中生效仁卷。
6.project.config.json：是項(xiàng)目配置文件穴翩。
7.sitemap.json：是SEO配置文件，方便用戶搜索到該小程序锦积。
（1）pages配置項(xiàng)
pages里面注冊(cè)的是視圖芒帕。用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑（含文件名）信息丰介。
??"pages":[
????"pages/index/index"
??]
(創(chuàng)造包含.js .json .wxml .wxss后綴的文件的同名文件夾
（2）window配置項(xiàng)
window 是全局窗口配置背蟆。
1.backgroundTextStyle 設(shè)置文本樣式（下拉loading的樣式），僅支持 dark / light哮幢。
2.navigationBarBackgroundColor 設(shè)置導(dǎo)航欄背景带膀。
3.navigationBarTitleText 設(shè)置導(dǎo)航欄文本。
4.navigationBarTextStyle 設(shè)置導(dǎo)航欄標(biāo)題顏色橙垢，僅支持 black / white垛叨。
寫法:
"window":{
????"backgroundTextStyle":"light",
????"navigationBarBackgroundColor":?"#369",
????"navigationBarTitleText":?"KW43-APP",
????"navigationBarTextStyle":"white"
??}
（3）style
style 設(shè)置樣式級(jí)別，默認(rèn)是v2柜某。
"style":?"v2"
（4）sitemapLocation
sitemapLocation 指明sitemap.json 的位置嗽元；默認(rèn)為 'sitemap.json' 即在 app.json 同級(jí)目錄下名字的 sitemap.json 文件敛纲。
??"sitemapLocation":?"sitemap.json"
3、頁(yè)面組成
每一個(gè)頁(yè)面由四個(gè)文件組成：xxx.wxml文件还棱、xxx.wxss文件载慈、 xxx.js文件和xxx.json文件惭等。
（1）xxx.wxml文件
xxx.wxml文件珍手，就相當(dāng)于一個(gè)html文件。在wxml文件中辞做，不能寫傳統(tǒng)的html標(biāo)簽琳要，只能寫微信提供的組件。
① view組件
相當(dāng)于div標(biāo)簽秤茅。
② text組件
相當(dāng)于span標(biāo)簽稚补。
③ swiper
swiper是滑塊視圖容器，它里面只能放swiper-item組件框喳。
swiper組件的常用屬性：
circular是銜接滑動(dòng)
autoplay是自動(dòng)切換
interval是自動(dòng)切換時(shí)間間隔
indicator-dots是否顯示面板指示點(diǎn)
indicator-color指示點(diǎn)顏色
indicator-active-color當(dāng)前選中的指示點(diǎn)顏色
<swiper?class="swiper"?circular?autoplay?interval="3000"?indicator-dots?indicator-color='#eee'?indicator-active-color='#369'>
</swiper>
④ image
image是圖片組件课幕，最好全部采用網(wǎng)絡(luò)圖片，因?yàn)樾〕绦虻目傮w積不允許超過(guò)2MB五垮。
（2）xxx.wxss文件
xxx.wxss文件乍惊，就相當(dāng)于一個(gè)css文件。在wxss文件中放仗，最好不要寫標(biāo)簽選擇器和id選擇器润绎，統(tǒng)一寫類選擇器。
為了讓小程序里面的內(nèi)容在各種設(shè)備上能夠自適應(yīng)顯示诞挨，微信推出了響應(yīng)式單位：rpx莉撇。在iphone6中，2rpx=1px惶傻。
width:?60rpx;?????/*?相當(dāng)于width:?30px;?*/
（3）xxx.js文件
xxx.js文件棍郎，是交互文件（核心文件）。
Page()函數(shù)银室，返回頁(yè)面對(duì)象坝撑，該函數(shù)需要傳一個(gè)配置參數(shù)，這個(gè)配置參數(shù)是一個(gè)對(duì)象粮揉。在這個(gè)配置對(duì)象中巡李，定義當(dāng)前頁(yè)面的所有內(nèi)容。
① data
定義頁(yè)面的數(shù)據(jù)扶认。
Page({
data:?{
?????name:?"熱門歌曲",
?????songs:?[{id:?1001},?{id:?1002}]
??}
})
② 自定義函數(shù)
開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object 參數(shù)中侨拦，在頁(yè)面的函數(shù)中用this可以訪問。
Page({
????//?定義函數(shù)
????delSong()?{
????????this.data.songs.splice(0,?1)
????????this.setData({
????????????songs:?this.data.songs
????????})
????}
})
（4）xxx.json文件
xxx.json文件辐宾，是頁(yè)面的配置文件（它里面配置的是當(dāng)前頁(yè)面信息）狱从。
5膨蛮、插值表達(dá)式 {{}}
WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data。
（1）獲取data中數(shù)據(jù)
通過(guò)插值表達(dá)式{{}}季研，可以顯示js里面定義的data里面的數(shù)據(jù)敞葛。
<text>歌曲分類：{{name}}</text>
（2）組件屬性(需要在雙引號(hào)之內(nèi))
??<view?id="item-{{id}}">?</view>
（3）運(yùn)算
可以在{{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算。
① 三元運(yùn)算
<view?class="item?{{index%2===0???'bg'?:?''}}">?</view>
② 邏輯判斷
??<view?wx:if="{{length?>?5}}">?</view>
6与涡、bindtap
bindtap是觸屏事件惹谐，其實(shí)就是相當(dāng)于網(wǎng)頁(yè)中的點(diǎn)擊事件。
<view?class="btn"?bindtap="delSong">刪除</view>
7驼卖、data-xxx 自定義屬性
小程序中bindtap綁定方法時(shí)不能傳參數(shù)氨肌。所以組件通過(guò)data-xxx傳遞數(shù)據(jù)。
<view?class="btn"?data-index="{{index}}"?bindtap="del1">刪除</view>
注意：自定義屬性的命名用駝峰或者大寫命名酌畜，小程序內(nèi)部會(huì)自動(dòng)轉(zhuǎn)成小寫怎囚。
del(e){
????//解構(gòu)出自定義的index屬性
????let?{currentTarget:{dataset:{index}}}?=?e
?}
8、setData()方法
setData()方法桥胞，更新頁(yè)面中數(shù)據(jù)恳守。頁(yè)面數(shù)據(jù)更新后，調(diào)用setData()方法重新渲染到頁(yè)面贩虾。
???this.setData({
??????typeId:typeid,
??????name:typename
????})
[if !supportLists]二催烘、[endif]列表渲染
1、wx:for
wx:for指令用于循環(huán)數(shù)組數(shù)據(jù)整胃，生成組件颗圣。
循環(huán)出來(lái)的每一項(xiàng)通過(guò)item返回，每一項(xiàng)對(duì)應(yīng)的索引屁使，通過(guò)index返回在岂。
????<view?wx:for="{{songs}}"?wx:key="index"?class="items">
???????<text>{{index}}--{{item.id}}--{{item.name}}</text>
????</view>
2、wx:key
wx:key=""蛮寂，設(shè)置每一項(xiàng)唯一的標(biāo)識(shí)蔽午。循環(huán)列表時(shí)，添加wx:key的好處是酬蹋，將來(lái)列表發(fā)生變化時(shí)重新渲染列表的損耗為更低及老。
三、條件渲染
條件渲染可以使用wx:if或hidden范抓。
一般來(lái)說(shuō)骄恶，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此匕垫，如果需要頻繁切換的情景下僧鲁，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。
1寞秃、wx:if
wx:if用于條件渲染：條件為真生成里面的內(nèi)容斟叼，條件為假不會(huì)生成里面的內(nèi)容。（每次重新生成內(nèi)容）
也可以用wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊春寿。
??<view?wx:if="{{typeID?==?1}}">?1?</view>
??<view?wx:elif="{{typeID?==?2}}">?2?</view>
??<view?wx:else>?3?</view>
2朗涩、hidden
hidden用于條件渲染：條件為真隱藏里面的內(nèi)容，條件為假顯示里面的內(nèi)容绑改。（每次切換樣式）
??<view?hidden="{{typeID!=?2}}">?1?</view>
四谢床、tabBar&頁(yè)面跳轉(zhuǎn)
1、tabBar
在app.json文件中添加tabBar節(jié)點(diǎn)绢淀。tabBar是小程序客戶端底部或頂部tab欄的實(shí)現(xiàn)萤悴。
（1）tabBar相關(guān)屬性
color：tab上的文字默認(rèn)顏色瘾腰，僅支持十六進(jìn)制顏色皆的。
selectedColor：tab上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色蹋盆。
backgroundColor：tab的背景色费薄，僅支持十六進(jìn)制顏色。
borderStyle：tabbar上邊框的顏色栖雾， 僅支持 black / white楞抡。
position：tabBar的位置，默認(rèn)值是: bottom析藕，僅支持 bottom / top召廷。當(dāng) position 為 top 時(shí)，不顯示 icon账胧。
custom：自定義tabBar竞慢。
"tabBar":?{
????"color":?"#000000",
????"selectedColor":?"#336699",
????"backgroundColor":?"#ffffff",
????"borderStyle":?"black",
????"position":?"bottom"
??}
（2）list
list：tab的列表。
list 接受一個(gè)數(shù)組治泥，只能配置最少 2 個(gè)筹煮、最多 5 個(gè) tab。
pagePath：頁(yè)面路徑居夹，必須在pages 中先定義败潦。
text：tab 上按鈕文字。
iconPath：圖片路徑准脂，icon 大小限制為 40kb劫扒，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片狸膏。selectedIconPath：選中時(shí)的圖片路徑沟饥，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片闷板。
????"list":?[
??????{
????????"text":?"首頁(yè)",
????????"pagePath":?"pages/index/index",
????????"iconPath":?"assets/icon/home.png",
????????"selectedIconPath":?"assets/icon/home2.png"
??????},
??????{
????????"text":?"列表",
????????"pagePath":?"pages/list/list",
????????"iconPath":?"assets/icon/list.png",
????????"selectedIconPath":?"assets/icon/list2.png"
??????}
]
2澎灸、頁(yè)面跳轉(zhuǎn)
（1）跳轉(zhuǎn)普通頁(yè)面
方法① navigator組件
?<!--?跳轉(zhuǎn)到普通頁(yè)，可以通過(guò)返回按鈕返回?-->
?<navigator?url="../detail/detail">到詳情頁(yè)</navigator>
方法② navigateTo()方法
navigateTo()方法遮晚，用于跳轉(zhuǎn)普通頁(yè)面性昭。
<view?bindtap="gotoDetail">到詳情頁(yè)</view>
gotoDetail(){
????//使用全局api跳轉(zhuǎn)，navigateTo()方法县遣，用于跳轉(zhuǎn)普通頁(yè)面
????wx.navigateTo({
??????url:?'../detail/detail',
????})
???}
（2）跳轉(zhuǎn)tabBar頁(yè)面
方法① navigator組件
如果要使用navigator組件跳轉(zhuǎn)tabBar頁(yè)面糜颠，需要設(shè)置open-type="switchTab"。
?<!--?跳轉(zhuǎn)到tabBar頁(yè)面萧求，不可以通過(guò)返回按鈕返回其兴。因?yàn)樘D(zhuǎn)到指定的tabBar頁(yè)面后，會(huì)關(guān)閉其他所有頁(yè)面?-->
<navigator?url="../list/list"?open-type="switchTab">到列表頁(yè)</navigator>??????????????????????????????????????????????????????????????????????????????????????
方法② switchTab()方法
switchTab()方法夸政，用于跳轉(zhuǎn)tabBar頁(yè)面元旬。
??<view?bindtap="gotoList">到列表頁(yè)</view>
??gotoList(){
????wx.switchTab({
??????url:?'../list/list',
????})
??}
五、確認(rèn)框和消息框
1守问、wx.showModal() 確認(rèn)框
title：提示的標(biāo)題
content：提示的內(nèi)容
success：接口調(diào)用成功的回調(diào)函數(shù)匀归。回調(diào)函數(shù)中的confirm屬性返回true耗帕，表示點(diǎn)擊的是確定按鈕穆端，否則是取消按鈕。
?wx.showModal({
??????content:'是否確定刪除',
??????success:({confirm})=>{
????????//confirm返回true仿便，表示點(diǎn)擊的是確定按鈕体啰，否則是取消按鈕
????????if(confirm){
??????}
????})?
2、wx.showToast() 顯示消息提示框
title：提示的內(nèi)容
icon：圖標(biāo)
duration：消息提示框的顯示時(shí)間
mask：是否顯示透明蒙層嗽仪，防止觸摸穿透
六荒勇、封裝方法
模塊化語(yǔ)法有兩種：① commonjs規(guī)范，② es6規(guī)范钦幔。
nodejs環(huán)境采用的就是commonjs規(guī)范枕屉。采用exports 或 module.exports 導(dǎo)出成員，采用require() 導(dǎo)入成員鲤氢。
微信小程序支持commonjs規(guī)范搀擂，同時(shí)還支持官方的ES6規(guī)范。ES6規(guī)范采用export 導(dǎo)出成員卷玉，采用import 導(dǎo)入成員哨颂。
[if !supportLists]1、[endif]封裝方法并導(dǎo)出
將封裝的方法放到util目錄下的js文件中相种⊥眨可以新建js文件，也可以寫在直接util.js文件中。
（1）確認(rèn)框方法
//?定義確認(rèn)框方法箫措，并導(dǎo)出
export?let?$confirm?=?(content)=>{
??return?new?Promise((resolve)=>{
????wx.showModal({
??????content,
??????success:({confirm})=>{
????????if(confirm){
??????????resolve()
????????}
??????}
????})
??})
}
（2）消息框方法
//?定義消息框方法腹备，并導(dǎo)出
export?let?$msg?=?(title,icon='success',duration=1500)=>{
??wx.showToast({
????title,
????icon,
????duration,
????mask:true
??})
}
（3）獲取事件參數(shù)的方法
export?let?$key?=?(e)=>{
??return?e.currentTarget.dataset
}
[if !supportLists]2、[endif]導(dǎo)入方法
import是ES6的導(dǎo)入語(yǔ)句斤蔓。
//?導(dǎo)入msg模塊中的指定成員
import?{$msg,$confirm}?from?'../../utils/msg'
[if !supportLists]3植酥、[endif]將方法注冊(cè)給全局對(duì)象wx
wx對(duì)象是微信小程序的全局對(duì)象，在任何地方都可以使用弦牡。
[if !supportLists]（1）[endif]注冊(cè)語(yǔ)句
wx.$msg?=?$msg
wx.$confirm?=?$confirm
[if !supportLists]（2）[endif]在app.js入口文件中導(dǎo)入
注意：注冊(cè)給wx對(duì)象的方法友驮，需要在app.js文件中導(dǎo)入，才可使用驾锰。
//?導(dǎo)入初始化文件
import?'./utils/index'
[if !supportLists]（3）[endif]調(diào)用方法
wx.方法名(參數(shù))
wx.$msg('刪除成功')
[if !supportLists]七卸留、[endif]scroll-view
可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)椭豫，需要給scroll-view一個(gè)固定高度耻瑟，通過(guò) WXSS 設(shè)置 height。組件屬性的長(zhǎng)度單位默認(rèn)為px捻悯，2.4.0起支持傳入單位(rpx/px)匆赃。
scroll-x：允許橫向滾動(dòng)淤毛。
scroll-y：允許縱向滾動(dòng)今缚。
?<scroll-view?class="left"?scroll-y>??</scroll-view>
[if !supportLists]八、[endif]wx對(duì)象發(fā)送ajax請(qǐng)求
[if !supportLists]1低淡、[endif]wx.request() 發(fā)送請(qǐng)求
注意：小程序?qū)嶋H使用中姓言，請(qǐng)求的接口必須都是已經(jīng)配置過(guò)的接口。開發(fā)階段蔗蹋，可以直接設(shè)置“不校驗(yàn)合法域名”何荚，暫不配置。
?wx.request({
??????//?請(qǐng)求接口地址
??????url: 'https://www.bingjs.com:8002/Section/GetSections',
??????//?請(qǐng)求參數(shù)
??????data:{},
??????//?請(qǐng)求方式GET/POST
??????method:"GET",
??????//?請(qǐng)求成功后的回調(diào)
??????success:({data})=>{
????????resolve(data)
??????},
??????//?請(qǐng)求完成后的回調(diào)
??????complete:()=>{
?????????console.log('請(qǐng)求完成');
??????}
????})
[if !supportLists]2猪杭、[endif]封裝ajax請(qǐng)求方法
（1）定義請(qǐng)求方法
export?let?$request?=?(url,data={},method='GET')=>{
??return?new?Promise((resolve)=>{
????wx.request({
??????url,
??????data,
??????method,
??????success:({data})=>{
????????resolve(data)
??????},
????})
??})
}
（2）定義get請(qǐng)求方法
export?let?$get?=?(url,data={})=>{
??return?$request(url,data,'GET')
}
（3）定義post請(qǐng)求方法
export?let?$post?=?(url,data={})=>{
??return?$request(url,data,'POST')
}
[if !supportLists]九餐塘、[endif]格式化時(shí)間
[if !supportLists]1、[endif]在后臺(tái)對(duì)數(shù)據(jù)里的時(shí)間戳進(jìn)行處理
let?data=?await?wx.$get('Subject/GetSubjects',{section_id:id})
data?=?data.map(r=>{
?return?{
??Title:?r.Title,
??Section:?r.Section,
Createtime:?wx.$formatTime(new?Date(parseInt(r.Createtime)))
}
})
[if !supportLists]2皂吮、[endif]WXS
WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言戒傻，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)蜂筹。
在wxml頁(yè)面中需纳，只能在插值{{ }}中寫簡(jiǎn)單的js表達(dá)式，而不能調(diào)用方法艺挪。wxs就是為了能在頁(yè)面中使用js而存在的不翩。
[if !supportLists]（1）[endif]語(yǔ)法
① 變量必須使用var聲明，不支持const或者let。
② 不支持箭頭函數(shù)口蝠。
③ 不可以使用模板字符串器钟，字符串連接用+ 。
④ 每一個(gè) .wxs 文件和 <wxs> 標(biāo)簽都是一個(gè)單獨(dú)的模塊妙蔗。每個(gè)模塊都有自己獨(dú)立的作用域俱箱。
通過(guò)module.exports導(dǎo)出內(nèi)部的私有變量與函數(shù)。
⑤ <wxs> 標(biāo)簽中灭必，module屬性值定義標(biāo)簽的模塊名狞谱；src屬性值引入.wxs文件的相對(duì)路徑。
⑥ 生成date對(duì)象使用 getDate()禁漓，返回一個(gè)當(dāng)前時(shí)間的對(duì)象跟衅。不使用new Date()。
（2）編寫在wxml文件中的 標(biāo)簽內(nèi)
<wxs?module="tools">
?var?formatTime?=?function(date)?{
????date?=?getDate(parseInt(date))
????var?year?=?date.getFullYear()
????var?month?=?date.getMonth()?+?1
????var?day?=?date.getDate()
????var?hour?=?date.getHours()
????var?minute?=?date.getMinutes()
????var?second?=?date.getSeconds()
????return?[year,?month,?day].map(formatNumber).join('/')?+?'?'?+?[hour,?minute,?second].map(formatNumber).join(':')
}
var?formatNumber?=function(n)?{
???n?=?n.toString()
???return?n[1]???n?:?'0'?+?n
}
module.exports?=?{
???formatTime:formatTime??
}
</wxs>?
<!--?在模板中播歼，對(duì)時(shí)間數(shù)據(jù)進(jìn)行處理?-->
<view>{{tools.formatTime(item.Createtime)}}</view>
（3）編寫在wxs文件中伶跷，再導(dǎo)入wxml文件
<!--?導(dǎo)入wxs文件?-->
<wxs?module="tools"?src="../../wxs/filter.wxs"></wxs>
<!--?在模板中，對(duì)時(shí)間數(shù)據(jù)進(jìn)行處理?-->
<view>{{tools.formatTime(item.Createtime)}}</view>
十秘狞、生命周期函數(shù)
1叭莫、onLoad 監(jiān)聽頁(yè)面加載
onLoad函數(shù)對(duì)頁(yè)面狀態(tài)數(shù)據(jù)的初始化，是生命周期回調(diào)—監(jiān)聽頁(yè)面加載烁试。一 個(gè)頁(yè)面只會(huì)調(diào)用一次雇初。onLoad函數(shù)的參數(shù)可以接收打開當(dāng)前頁(yè)面所調(diào)用的 query參數(shù)。
當(dāng)前頁(yè)面跳轉(zhuǎn)detail頁(yè)面后减响，調(diào)用query參數(shù)id靖诗。
<navigator?url="../detail/detail?id={{item.Id}}"?class="item"?wx:for="{{subjects}}"?wx:key="index">
</navigator>
detail頁(yè)面中onLoad函數(shù)可以獲取傳遞的query參數(shù)id。
??onLoad:?function?(options)?{
????//獲取題目的id
????let?{id}?=?options
??}
2支示、onReachBottom 上拉觸底
????onReachBottom:function(){
????????this.data.pageIndex++
????????this.getSubjects()
????}
[if !supportLists]3刊橘、[endif]onPullDownRefresh 下拉刷新
下拉刷新默認(rèn)是關(guān)閉狀態(tài)，所以需要先在.json文件中設(shè)置允許下拉刷新颂鸿。
enablePullDownRefresh設(shè)置是否開啟當(dāng)前頁(yè)面下拉刷新促绵。
backgroundColor設(shè)置窗口的背景色。
{
??"enablePullDownRefresh":?true,
??"backgroundColor":?"#d1c2d3"
}
下拉刷新動(dòng)效有默認(rèn)時(shí)間嘴纺。如果想改變默認(rèn)的下拉時(shí)間败晴，可以用定時(shí)器。
wx.stopPullDownRefresh()設(shè)置刷新完成后停止下拉刷新動(dòng)效颖医。
????onPullDownRefresh:function(){
???????setTimeout(()?=>?{
???????????wx.stopPullDownRefresh()
???????},?1000);
????}
十一位衩、簡(jiǎn)易雙向綁定
1、普通屬性綁定
在WXML 中熔萧，普通的屬性的綁定是單向的糖驴。如果用戶修改了輸入框里的值僚祷，不會(huì)同時(shí)改變 this.data.value。
????<input?class="txt"?value="{{title}}"?/>
2贮缕、簡(jiǎn)易雙向綁定
如果需要在用戶輸入的同時(shí)改變this.data.value 辙谜，需要借助簡(jiǎn)易雙向綁定機(jī)制。
通過(guò)model:value的方式感昼，將表單里面的數(shù)據(jù)跟js里面的數(shù)據(jù)進(jìn)行了雙向綁定装哆。
雙向綁定指的是：一處被修改，另一處也一起修改定嗓。
???<input?class="txt"?model:value="{{value}}"?/>
3蜕琴、雙向綁定的表達(dá)式限制
只能是一個(gè)單一字段的綁定；目前宵溅，尚不能data 路徑凌简。
以下寫法都是錯(cuò)誤的：
???<input?model:value="值為{{value}}"?/>
???<input?model:value="{{?a?+?b?}}"?/>
???<input?model:value="{{?a.b?}}"?/>
十二、表單組件
1恃逻、picker 選擇器組件
range：指定一個(gè)數(shù)組(指定一份展示的數(shù)據(jù))雏搂。
range-key：如果range數(shù)組是一個(gè)對(duì)象數(shù)組，需要添加range-key屬性寇损，指定選擇器中顯示的內(nèi)容(從對(duì)象身上指定一個(gè)屬性)凸郑。
bindchange：value 改變時(shí)觸發(fā) change 事件，event.detail = {value}矛市。
<picker?class="txt"?bindchange="bindPickerChange"?range-key="Name"?range="{{sections}}">
?????<view>
????????<!--?根據(jù)選擇器選中的索引芙沥，顯示對(duì)應(yīng)的名稱?-->
????????{{sections[sectionsActiveIndex].Name}}
?????</view>
??</picker>
通過(guò)e.detail.value獲取當(dāng)前列表value的索引。
???bindPickerChange:?function(e)?{
console.log(e.detail.value) ?//獲取下標(biāo)
???}
2尘盼、input 輸入框
placeholder：輸入框?yàn)榭諘r(shí)占位符憨愉。
<input?value=""?placeholder="請(qǐng)輸入搜索關(guān)鍵字"?/>
3、textarea 多行文本框
maxlength：最大輸入長(zhǎng)度卿捎。設(shè)置為 -1 的時(shí)候不限制最大長(zhǎng)度。
<textarea?maxlength="-1"?value=""?/>
[if !supportLists]六径密、[endif]js數(shù)據(jù)更新方法
（1）直接賦值
該方法只更新js中的數(shù)據(jù)午阵，不會(huì)重新渲染到頁(yè)面。
???this.data.section_id?=?this.data.sections[index].Id
（2）setData()方法
該方法更新數(shù)據(jù)后享扔，重新渲染頁(yè)面底桂。
???this.setData({
???????activeIndex:?index
???})
