小程序 簡易教程

https://mp.weixin.qq.com/debug/wxadoc/dev/

稍微寫點好了，本來是打算直接寫到項目里面的，但是.json的配置文件里面好像不可以添加注釋，所以 哎 無奈。

前面的廢話不說了，看代碼構成 。 微信還是以前端的MVVM模式來做的。 傳統的HTML 是HTML+CSS+JS ，微信類似于這種，為WXML+WXSS+JS 一一對應咯。

WXML為頁面結構，WXSS為頁面樣式 JS為頁面邏輯。

JSON配置：

1.app.json 小程序配置 即全局配置 ，所謂配置 一般就是配置界面樣式（window）頂部標題 顏色 等 ，還有項目文件路徑（pages）。
2.project.config.json 這個也是配置，但是是工具配置，跟當前的IDE開發工具有關，目的是即使換電腦了，拷貝這個文件過去覆蓋也可以輕松完成工具配置。跟項目無關。
3.page.json 頁面配置 針對單獨頁面做的配置了。比如初始化項目后出現的log.json ,可以在上面定義一些頁面單獨的屬性，比如是否可以下拉刷新 ，頁面標題什么的。

WXML模板：

//pages/index/index.wxml 
//相對于前端 很多標簽不一樣了，其實也就是小程序對這些標簽做了一定的封裝，特別是地圖 音頻 視頻等等 ，可以直接找到指定的標簽放進去就可以了。
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

2.多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式. {{}}是用js里面的參數。通過 {{ }} 的語法把一個變量綁定到界面上，我們稱為數據綁定。僅僅通過數據綁定還不夠完整的描述狀態和界面的關系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。

WXSS 樣式：

1.小程序增加了一個尺寸類型 rpx，避免換算的問題。
提供全局樣式 跟局部樣式，比如app.wxss 就是全局樣式。log.wxss 就是局部樣式。

JS交互邏輯：

比如一些點擊事件 用戶反饋之類的，都是在js里面寫的。
<button bindtap="clickMe">點擊我</button>
bindtap就是綁定事件，然后在js里面寫好這個方法就可以了。
小程序提供了非常多的api，例如獲取用戶信息、本地存儲、微信支付等。

tip：

1.微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。然后加載渲染出app出來。

2.程序啟動會有回調，相當于app的生命周期嘛：

App({
  onLaunch: function () {
    // 小程序啟動之后 觸發 可以玩點刺激的
  }
})

3.整個小程序只有一個 App 實例，是全部頁面共享的

4.頁面渲染完畢后 也是有回調的，在js文件里面寫就行

Page({
  data: { // 參與頁面渲染的數據
    logs: []
  },
  onLoad: function () {
    // 頁面渲染后 執行
  }
})

Page 是一個頁面構造器，這個構造器就生成了一個頁面。在生成頁面的時候，小程序框架會把 data 數據和 index.wxml 一起渲染出最終的結構，于是就得到了你看到的小程序的樣子。

在渲染完界面之后，頁面實例就會收到一個 onLoad 的回調，你可以在這個回調處理你的邏輯。

小程序 框架

全局配置 除了 pages 跟window屬性，還有 tabBar,networkTimeout,debug等

小程序 框架

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html

一個頁面由四個文件組成

文件類型    必需  作用
js          是      頁面邏輯
wxml        是      頁面結構
json        否      頁面配置
wxss        否      頁面樣式表

配置

全局配置的屬性

pages :指向頁面文件的路徑（每次創建貌似都要寫一個）
window：頁面頂部的屬性 比如文字 顏色 能否下拉刷新 等
tabBar：設置底部tabbar，用list包裹 里面pagePath指向路徑，text定義名字
networkTimeout:設置網絡超時時間 
debug :是否開啟debug模式，用來定位問題，默認關閉
functionalPages:是否開啟頁面插件功能。默認關閉 不知道啥用
subPackages: 分包功能 聽起來有點像是插件化的功能
workers:worker代碼放置的位置 ，為了處理多線程？
requiredBackgroundModes：需要在后臺使用到的功能，比如項目中使用到了音樂播放的話，可以寫到這里面去
其他的 就不寫了 ，感覺沒啥必要。

文檔寫的太清楚了 有點不大想寫這個筆記了。

app.json跟局部配置.json文件有相同設定的時候，也是根據就近原則，用最近的。

邏輯

前端的邏輯都是寫在.js文件上面，用javascript引擎。 邏輯層處理數據，發送數據給視圖層，并且接收視圖層的反饋。 開發者寫的所有代碼最終將會打包成一份 JavaScript 文件，并在小程序啟動的時候運行，直到小程序銷毀。這一行為類似 ServiceWorker，所以邏輯層也稱之為 App Service。 在 JavaScript 的基礎上，我們增加了一些功能，以方便小程序的開發：

增加 App 和 Page 方法，進行程序和頁面的注冊。 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當前頁面棧。 提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。 每個頁面有獨立的作用域，并提供模塊化能力。 注意：小程序框架的邏輯層并非運行在瀏覽器中，因此 JavaScript 在 web 中一些能力都無法使用，如 window，document 等。

小程序 邏輯層

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html

App（Object）

用來注冊一個小程序。接受一個 Object 參數，其指定小程序的生命周期回調等。
App() 必須在 app.js 中調用，必須調用且只能調用一次。不然會出現無法預期的后果。
這個方法有點類似于application的onCreate方法。

里面參數涉及一系列的監聽方法，小程序初始化啟動，小程序前后臺切換，甚至一些問題都可以展示出來。

關于小程序銷毀，說是關閉并沒有銷毀小程序，而只是進入了后臺，只有在資源不足的情況下，才會銷毀，但是我發現部分手機 比如我自己的360N5，死也不銷毀，卡的爆炸，需要手動去一鍵加速搞定他。

App({
  onLaunch: function(options) {
    // Do something initial when launch.
    //類似于application的onCreate,在options又能拿到一堆信息，比如進入的渠道（場景值） 等，
  },
  onShow: function(options) {
    // Do something when show.
    //類似于application的從后臺轉前臺監聽
  },
  onHide: function() {
    // Do something when hide.
        //類似于application的從前臺轉后臺監聽
  },
  onError: function(msg) {
    console.log(msg)
    //錯誤提醒，用于debug，應該要設置debug的屬性才可以，錯誤信息，包含堆棧
  },
  globalData: 'I am global' //定義的全局變量
})

getApp()可以獲取小程序實例 可以拿到里面定義的變量 ，比如上面的globalData ，當然在App方法里面 直接用this就能拿到實例。

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

app.js里面可以做全局的監聽 ，用的是App（）方法 頁面也有自己的js文件，里面用的是Page()方法，監聽的更加到位 ，相當于android里面的所有生命周期都有

//index.js
Page({
  data: {
    //數據 可以填多個 按照這個樣式就行，要json格式
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
    //類似 activity onCreate()
  },
  onReady: function() {
    // Do something when page ready.
    //類似 activity onStart()，但是一個頁面只會調用一次
  },
  onShow: function() {
    // Do something when page show.
    //類似activity onResume()
  },
  onHide: function() {
    // Do something when page hide.
    //類似activity onPause
  },
  onUnload: function() {
    // Do something when page close.
    //類似 activity onDestroy()
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
    //下拉刷新監聽
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
    //上拉加載監聽
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
    //右上角分享監聽 
    //注意：只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕
  },
  onPageScroll: function() {
    // Do something when page scroll
    //滾動監聽
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
    //當前是tab頁的話 點擊tab監聽
  },
  // Event handler.自定義方法處理事件
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'//開發者可以添加任意的函數或數據到 Object 參數中，在頁面的函數中用 this 可以訪問
  }
})

稍微需要注意一點的是 Object 內容在頁面加載時會進行一次深拷貝，需考慮數據大小對頁面加載的開銷。并且必須是json格式的。

Page.prototype.setData(Object data, Function callback)

setData 函數用于將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

以為小程序是跟Vue一樣，改變值就可以直接同步到視圖層的，現在看來不是這樣的，需要調用setData才可以將視圖層綁定的數據修改，這樣才能作用到視圖層，不然直接修改是沒有作用的 而且會有數據不一致的風險。 當然，如果你數據本身就只是一個參數，比如說page，跟視圖層不綁定的，那就直接改唄。

以上所寫更類似于筆記，畢竟官方文檔太清晰的。