- 我對(duì)小程序的理解
- 小程序基本語法介紹
- 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的小程序
1.我對(duì)小程序的理解
- 小程序是有別于傳統(tǒng)web儡循、h5、app以及微信公眾號(hào)的新的一種應(yīng)用形式，由微信團(tuán)隊(duì)于今年開發(fā)，用張小龍自己的話來說：
小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想型酥，用戶掃一掃或者搜一下即可打開應(yīng)用山憨。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題弥喉。應(yīng)用將無處不在郁竟，隨時(shí)可用，但又無需安裝卸載由境。
- 與其它類型應(yīng)用的區(qū)別
- 和web相比棚亩，首先入口不同，web使用url或者搜索引擎搜索虏杰，另外web回訪可能通過收藏和搜索引擎
- 和H5相比讥蟆，和web類似
- 和APP相比 ，首先學(xué)習(xí)纺阔、和開發(fā)成本比較小瘸彤，只需要一些css、js技能就能快速開發(fā)笛钝。另外需要下載和安裝质况，不想用了還需要卸載，小程序就沒有這方面的問題婆翔，掃碼即可使用
- 和微信公眾號(hào)相比 入口不同拯杠，需要關(guān)注以及分享的文章
- 優(yōu)缺點(diǎn)
- 優(yōu)點(diǎn)：開發(fā)成本低掏婶，簡(jiǎn)單的編碼就可以實(shí)現(xiàn)原生的用戶體驗(yàn)
- 缺點(diǎn)：比較封閉的系統(tǒng)啃奴，導(dǎo)流能力較弱
- 預(yù)計(jì)2017年1月9日上線
- 我的一個(gè)疑問：“提高用戶效率的工具、用完即走”的理念雄妥，h5就能解決最蕾，小程序能實(shí)現(xiàn)的、不能實(shí)現(xiàn)的老厌，h5都能實(shí)現(xiàn)瘟则，甚至還更輕量、開發(fā)效率還更快枝秤，這種情況下開發(fā)小程序有什么好處呢醋拧？
2.小程序的基本語法你介紹
小程序的語法非常簡(jiǎn)單，只要有一點(diǎn)前端知識(shí)就可以快速學(xué)會(huì)淀弹。另外 丹壕，小程序語法和vue又相當(dāng)類似，但是又比vue精簡(jiǎn)一些
- 數(shù)據(jù)綁定
模板：
<view>{{ message }}</view>
js：
Page({
data: {
message: 'Hello MINA!'
}
})
- 條件渲染
模板：
<view>
<view wx:if="{{show}}">
{{message}}
</view>
<view wx:else>
不顯示內(nèi)容
</view>
</view>
js：
Page({
data: {
show:true,
message: 'Hello MINA!'
}
})
- 列表渲染
模板：
<view>
<view wx:for="{list}" wx:key="key">
{{ item }}
</view>
</view>
js：
Page({
data: {
list:[
'hellow world','maybe next time','hover your wings'
],
show:true,
message: 'Hello MINA!'
}
})
- 與用戶交互
- 點(diǎn)擊事件
- 點(diǎn)擊事件
模板
<view>
<text> you have clicked {{ times }} times</text>
<button bindtap='handle'>click me</button>
</view>
js:
Page({
data: {
times:0
},
handle(){
this.setData({
times:this.data.times+1
})
}
})
```
- 輸入框事件
模板
<view>
<text> hello {{ content }}</text>
<button bindinput='handle'>click me</button>
</view>
js:
Page({
data: {
content:''
},
handle(e){
this.setData({
content:e.detail.value
})
}
})
```
