? ?? ?? ???? ? ???(xx.xml)? ?? ???(xx.js)? ?? ??? ??? ???? ?? ??? ???? ????. ??? ???? ??? ? ????.

?? ???? ??? ? ?? ???? OS? ????? WeChat ??? ??? OS???. ?? WeChat ?? ???? WeChat ?? ??? ??? ?? ?? ??? ??? ?? ?? ?? ??? ???? ??? ? ??? ??? ??? ?? ?? ??? ??? ? ??? ?? ??? ? ?? ???? ????. Apple App Store ??? ??? ?? ????? ????? ???? ???? ????? ?? ???? ???? ????. ???? ?? ???? ?? ???? ???? Apple? ? ??? ?? 3:7? ??????. WeChat ?? ???? ?? ??? ??? ??? ????? 8? ?? ?? ???? ?? ? ?? ??? ? ??? ??, ???, ??? ?? Tencent? ? ?? ??? ? ????.

WeChat ?? ????? ?? ???? ?? ??????? ???? ??? ??? ? ????. ???? WeChat?? QR ??? ???? ????? ? ? ????. ?? ???? ?????, iOS ? ??? ???? ??? ? ??, ? ??? ???? ???? ???? ??? ??? ????? ??? ?? ????.

?? ???? ? ???(xx.xml)? ?? ???(xx.js)

?? ???? ? ???? ??? ? ???(View)? ?? ???(App Service)

?????? ?? ???? ???? ?? ???? ? ????. ???? ??? ? ?? ??? ???? ???? ?? ?? ?? ? ??? ???????.

? ??? ?? ???:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. ???? ?????? ?? ?? ?? ???? ??? ? ??? ??? ??????. ???? ??? Hello WeChat? ?????!

2. ??? ???? ? ????? ChangeName ???? ?? ???? ??? ?? ????? ?? ???? ????. ?? ??

3. ?? ????? setData ??? ???? ??? WeChat?? MINA? ??????. ???? ? ???? ?????? ??? ? ???? ???? Hello MINA? ?????. !.

? ???? xx.xml???

?? ???? xx.js???

?? ?? ?? ??? ?? ???? ?? ?? ??? ????. ?? ??? ?? ??? ???? ????? ?? ??? ?? ??? ???? ???? ?????.

?? ???(App Service)

??? ?? ?????? ?? ???? JavaScript? ?????.

?? ???? ???? ???? ? ???? ??? ??? ? ?????? ??? ???? ????. JavaScript? ???? ?? ???? ??? ???? ?? ?? ? ?? ??? ????.

1. ???? ? ???? ????? ? ? ??? ??? ?????.

2. ??, ??, ?? WeChat ?? ?? ? ??? API? ?????.

3. ? ????? ???? ??? ??? ??? ??? ?????.

4. ?????? ?????? ???? ?? ??? ??, ??? ? JavaScript? ?? ??? ??? ??? ? ????.

5. ???? ??? ?? ??? ?? ??????? ????? ?? ????? ??? ? ?? ????? ??? ??? ?????. ServiceWorker? ???? ?? ??? App Service??? ???.
   

??? ???

??? ???? ???? ? ?? ????? ?????. ???? JSON ???? ?? ????? ??? ???? ????? ???? JSON?? ??? ? ?? ??(???, ??, ?? ?, ??, ??)??? ???.

??? ???? WXML? ?? ???? ???? ? ????.

?? ??:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})

Page.prototype.setData()

setData ??? ???? ?????. data this.data? ?? ?? ????? ?? ????? ? ???? ?????.

??:

1. this.data? ?? ???? ?? ???? ??? ???? ??? ??? ? ??? ?? ?? ??? ???? ?????. .
2. ? ?? ???? ???? 1024kB? ??? ? ????.

setData() ???? ??

Accept key, value ??? ??? this.data? ?? ???? ?? value? ???? ?? ?????.

?? array[2].message, a.b.c.d? ?? ??? ?? ??? ????? ?? ??? ? ??? this.data? ?? ??? ??? ????.

?? ??:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

View Layer

?????? ? ???? WXML? WXSS ?????? ?? ?????.

將邏輯層的數(shù)據(jù)反應成視圖，同時將視圖層的事件發(fā)送給邏輯層。

WXML(WeiXin Markup language)用于描述頁面的結構。

WXSS(WeiXin Style Sheet)用于描述頁面的樣式。

組件(Component)是視圖的基本組成單元。

什么是事件

1. 事件是視圖層到邏輯層的通訊方式。

2. 事件可以將用戶的行為反饋到邏輯層進行處理。

3. 事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應的事件處理函數(shù)。

4. 事件對象可以攜帶額外信息，如id, dataset, touches。
   

事件的使用方式

在組件中綁定一個事件處理函數(shù)。

如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數(shù)。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相應的Page定義中寫上相應的事件處理函數(shù)，參數(shù)是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基礎組件

框架為開發(fā)者提供了一系列基礎組件，開發(fā)者可以通過組合這些基礎組件進行快速開發(fā)。

什么是組件：

1. 組件是視圖層的基本組成單元。

2. 組件自帶一些功能與微信風格的樣式。

3. 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。

<tagname property="value">
 Content goes here ...
</tagename>

注意：所有組件與屬性都是小寫，以連字符-連接

【相關推薦】

1.?微信小程序之頁面?zhèn)髦翟斀?/a>

2.?微信小程序開發(fā)樣式常見的問題整理

3.?利用組件開發(fā)微信小程序日歷的詳細方法

4.?小程序開發(fā)之利用co處理異步流程的實例教程

? ??? WeChat ??? ? ???(xx.xml)? ?? ???(xx.js)? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!