第一部分：開發(fā)注意事項(xiàng)：

一 、小程序是什么？

• 一種介于原生app、和web app的hybrid, 比web app 的開發(fā)成本還低;
• 通過微信進(jìn)行加載;
• 相對(duì)原生app來說，更加輕量、更新實(shí)時(shí)、跨平臺(tái);
• 相對(duì)web app來說，資源離線，體驗(yàn)更流暢。
• 可以使用微信的支付功能

二 、實(shí)現(xiàn)機(jī)制

基于微信提供的一套應(yīng)用框架。微信通過封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、任務(wù)管理、數(shù)據(jù)安全等基礎(chǔ)功能，對(duì)上層提供了一套完整的Javascript Api，開發(fā)者能夠非常方便的調(diào)用微信客戶端提供的各種基礎(chǔ)功能。

視圖層描述語言 .WXML 和 .WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層之間通過 單向數(shù)據(jù) 綁定進(jìn)行數(shù)據(jù)傳輸

三 、開發(fā)前須知

• AppStore問題;
• 發(fā)布的項(xiàng)目包體積 < 1M, 只適合輕量級(jí) ;
• 開發(fā)基于微信框架，部分功能受限, 不能操作DOM, 沒有script標(biāo)簽，要引入則需加入項(xiàng)目文件夾;
• 沒有與瀏覽器BOM相關(guān)的API;
• 沒有cookie ;
• 用 storage 替代了H5中的localstorage、sessionstorage、 storage對(duì)每個(gè)小程序的大小是 10M，支持 同步 和 異步 。
• 同時(shí)只能存在 5 個(gè)url請(qǐng)求;
• 小程序頁面只能同時(shí)打開 5 個(gè)，如果交互流程較長(zhǎng)難以支持;
• 注釋方式： // comment, /** comment **/;

注意：cookie問題，在請(qǐng)求發(fā)送時(shí)，可以動(dòng)態(tài)設(shè)置Header發(fā)送報(bào)文的cookie，但是 cookie本身不能在客戶端進(jìn)行讀寫。

wx.request({
    header: {cookie: "abcd1234"},
    url: "/getinfo",
    data: {},
    ...
})

四、路由

1. pages 里面的第一個(gè)元素即為首頁;
2. 每個(gè)頁面需要手動(dòng)在app.json中進(jìn)行注冊(cè)，否則不能訪問;
3. 路由跳轉(zhuǎn)： 組件跳轉(zhuǎn)(navigator) ／ API跳轉(zhuǎn)

wx.navigateTo({  // 保留當(dāng)前頁
    url: "",
    ...
}) 

wx.navigateTo({  // 關(guān)閉當(dāng)前頁
    url: "",
    ...
})


五、Tab頁

1. 由app.json定義；
2. 配置最少2個(gè)、最多5個(gè)；
3. 每個(gè)頁面的 .json 文件可以覆蓋定義導(dǎo)航欄。
4. 六、頁面結(jié)構(gòu)由同路徑下同名的四個(gè)不同后綴文件的組成：

• .js 文件是腳本文件
• .json 文件是配置文件
• .wxss 是樣式表文件
• .wxml 文件是頁面結(jié)構(gòu)文件

.wxml 文件

// wxml語法

<block wx:for="{{shareItems}}" wx:for-index="idx">
    <view id="{{idx}}" class="flex share-item box box-tb">
      <view class="flex box box-lr article-info">
        <view class="flex title">{{item.articleInfo.title}}</view>
      </view>
      <view class="user-info box box-lr">
        <image src="{{item.articleInfo.isApproved ? icon.approved : icon.approve}}" class="icon approve-icon"></image>
      </view>
    </view>
</block>

1. .wxml 文件通過相同的名稱，將頁面與邏輯js、樣式、配置進(jìn)行關(guān)聯(lián)匹配
2. .wxml 組件語法
3. .wxml 提供兩種文件引用方式import(有作用域)和include
4. 事件綁定方式

// test.wxml

{{userName}}

// test.js

page({
    data: {},
    getInfo: function() {
        this.setData({
            userName: "Tom"
        })
    }
})


.wxss 文件

/** app.wxss **/

@import "common.wxss";

view {
  padding:15px;
}

1. 可通過 @import (后跟相對(duì)路徑)樣式表;
2. 尺寸單位：有兩種單位：(1)、引入rpx(根據(jù)屏幕寬度進(jìn)行自適應(yīng))的概念； (2)、rem；
3. 支持內(nèi)聯(lián)
4. 選擇器：不再支持媒體查詢，支持 .demo, #demo, view, view input, view::after, view::before;
5. 增加了app的flex布局;
6. 目前還不支持動(dòng)畫 ;
7. weui 官方樣式庫

規(guī)定屏幕寬為750rpx, 如iPhone6, 1rpx = 1物理像素 = 0.5px;

規(guī)定屏幕寬度為20rem, 1rem = (750/20)rpx;


.js 文件

1. 模塊運(yùn)行（類似node，框架自動(dòng)添加外層define）;
2. 形式上支持CommonJs，通過require加載;
3. data應(yīng)約定為只讀，不能直接修改data值，否則 容易造成data中的數(shù)據(jù)與view不一致;

4. 更新View需使用setData()，與data中的數(shù)據(jù)進(jìn)行Diff比較，不同才會(huì)更新。

• setData() 單次設(shè)置的數(shù)據(jù) < 1M，要避免一次設(shè)置過多的數(shù)據(jù);
• 支持ES6中的 … 操作符展開模塊數(shù)據(jù)。

// js引入 

// a.js
function sayHi() {
    console.log("hello wxAPP!");
}
module.exports = {
    say: sayHi
}

// b.js
var say = require("a.js");

// data 操作 

page({
    data: {
        name: 'one'
    },
    handleData() {

        // 錯(cuò)誤操作方式，雖不會(huì)報(bào)錯(cuò)，但不會(huì)更新view
        this.data.name = 'two';

        // 正確操作方式
        this.setData({
            name: 'tow'
        })
    }
})
.json 文件

• 各個(gè)頁面的配置性文件