1. 我對(duì)小程序的理解
2. 小程序基本語(yǔ)法介紹
3. 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的小程序

1.我對(duì)小程序的理解

• 小程序是有別于傳統(tǒng)web、h5、app以及微信公眾號(hào)的新的一種應(yīng)用形式，由微信團(tuán)隊(duì)于今年開(kāi)發(fā)，用張小龍自己的話(huà)來(lái)說(shuō)：

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶(hù)不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。

• 與其它類(lèi)型應(yīng)用的區(qū)別
  • 和web相比，首先入口不同，web使用url或者搜索引擎搜索，另外web回訪可能通過(guò)收藏和搜索引擎
  • 和H5相比，和web類(lèi)似
  • 和APP相比 ，首先學(xué)習(xí)、和開(kāi)發(fā)成本比較小，只需要一些css、js技能就能快速開(kāi)發(fā)。另外需要下載和安裝，不想用了還需要卸載，小程序就沒(méi)有這方面的問(wèn)題，掃碼即可使用
  • 和微信公眾號(hào)相比 入口不同，需要關(guān)注以及分享的文章
• 優(yōu)缺點(diǎn)
  • 優(yōu)點(diǎn)：開(kāi)發(fā)成本低，簡(jiǎn)單的編碼就可以實(shí)現(xiàn)原生的用戶(hù)體驗(yàn)
  • 缺點(diǎn)：比較封閉的系統(tǒng)，導(dǎo)流能力較弱
• 預(yù)計(jì)2017年1月9日上線
• 我的一個(gè)疑問(wèn)：“提高用戶(hù)效率的工具、用完即走”的理念，h5就能解決，小程序能實(shí)現(xiàn)的、不能實(shí)現(xiàn)的，h5都能實(shí)現(xiàn)，甚至還更輕量、開(kāi)發(fā)效率還更快，這種情況下開(kāi)發(fā)小程序有什么好處呢？

2.小程序的基本語(yǔ)法你介紹

小程序的語(yǔ)法非常簡(jiǎn)單，只要有一點(diǎn)前端知識(shí)就可以快速學(xué)會(huì)。另外 ，小程序語(yǔ)法和vue又相當(dāng)類(lèi)似，但是又比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!' 
    }
  })

• 與用戶(hù)交互
  • 點(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
})
}
})
```

3.實(shí)現(xiàn)一個(gè)簡(jiǎn)單的小程序