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

1.我對小程序的理解

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

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yī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ā)。另外需要下載和安裝，不想用了還需要卸載，小程序就沒有這方面的問題，掃碼即可使用
  • 和微信公眾號相比 入口不同，需要關(guān)注以及分享的文章
• 優(yōu)缺點(diǎn)
  • 優(yōu)點(diǎn)：開發(fā)成本低，簡單的編碼就可以實(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.小程序的基本語法你介紹

小程序的語法非常簡單，只要有一點(diǎn)前端知識就可以快速學(xué)會。另外 ，小程序語法和vue又相當(dāng)類似，但是又比vue精簡一些

• 數(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)擊事件

模板
<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è)簡單的小程序