微信小程序學習 （一）

這兩天在看微信小程序的東東，在此整理一下。

首先標明，個人用戶無法申請小程序開發資格。

什麼是微信小程序

微信小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序、訂閱號、服務號、企業號是並行的體系

能夠實現什麼

以下是自我總結出來的，如有欠缺，還請指正

1. 實現基本的表單輸入提交
2. 酷炫動畫展示頁的開發，可查看coolsite360 （注：並非推薦其編輯器，暫時也沒有做了解，主要是看其實現的作品）
3. 基於H5小遊戲的開發，因爲微信小程序暴露了原生的重力感應和羅盤等部分原生系統設備接口
4. 在線支付應用開發
5. 等其他應用，尚待探索，歡迎補充

學習資源

• 官方網站：包括基本接入流程，和”hello world“的入手demo程序
• w3cschool：基本copy官網的開發文檔，不過看起來感覺比官網要更加流暢一些

感悟總結

IDE

官網中提供小程序編制的IDE，優缺點皆備，總結如下：

• 優點：較輕量級，但集開發，調試，結構一體化結構，調試工具與Chrome相同，習慣使用Chrome做前端開發的同學上手很快，有一般性的輸入提示，界面排版簡單明瞭
• 缺點：自身存在一些bug，例如代碼過長，面板無法橫滾等。調試頁面的Wxml面板，最開始隱藏在最後，找了半天，才知道是在哪。只有js文件可以實現代碼排版格式化，wxml和wxss文件不支持，暫未找到基於項目的全局搜索。比較適合大屏開發，直接在mac上看會感覺比較尷尬

開始項目

1. 如何申請開發資格及基本準備在 官方網站描述的很詳細，在此不再贅述。

2. 項目結構以功能頁面作爲結構區分理念

   全局文件
   pages//單一頁面目錄的父目錄
    - foo//文件夾
    - foo.js//實現該頁面的功能邏輯文件
    - foo.wxml//頁面展示結構，與H5相似，多了些自有標籤
    - foo.json//單一頁面的簡單配置，覆蓋全局配置
    - foo.wxss//單一頁面的樣式表，覆蓋全局樣式中的同名樣式
   common//公用文件夾，可包含公用樣式，公用邏輯功能代碼
   app.js//全局邏輯文件
   app.json//全局配置文件
   app.wxss//全局樣式表

3. 在app.js中包含App()函數，進行全局設置，在其他單一頁面中使用getApp()獲取其引用

4. 在foo.js中使用Page()函數，定義單一頁面數據和交互功能

需要注意的事項

• 在Page函數綁定的數據必須是對象，否則在頁面中無法進行綁定

  //正確
  Page({
    data:{
      name:'foo'
    }
  })
  //錯誤
  Page({
    data:'foo'
  })

• 在進行交互式必須使用setData()方法設置數據的值，進行直接賦值無效

  <!--foo.wxml-->
  <view bindtap="foo">{{fooValue}}</view>
  //foo.js
  Page({
    data:{fooValue:'hello'},
    foo:function(){
      //this.data.fooValue = 'test';//❌錯誤
      this.setData({//✔️正確
        fooValue:'test'
      })
    }
  })

• 在app.json中設置pages屬性，其數據的順序要和tabBar中list屬性中數據的順序保持一致，否則會報錯,如有未在導航欄中的頁面，則排列在最後，tarBar中有個數限制，

  "pages":[
      "pages/foo1/foo1",
      "pages/foo2/foo2",
      "pages/foo3/foo3",
      "pages/foo4/foo4",
      "pages/foo5/foo5"
    ],
    "tabBar": {
      "list": [{
        "pagePath": "pages/foo1/foo1",
        "text": "foo1"
      }, {
        "pagePath": "pages/foo2/foo2",
        "text": "foo2"
      }, {
        "pagePath": "pages/foo3/foo3",
        "text": "foo3"
      }]
    }

• 微信小程序提供模板，可以將重複使用的wxml文件寫入template中，然後通過is和name屬性進行調用，但是要注意的是template的內容要寫在當前使用的頁面文件中，否則報錯

---

這兩天只是簡單的瞭解了一下小程序的開發，寫了個todoList，然後就沒什麼想法了，如果有好的想法，歡迎共享，之後倒有些計劃，列表如下

1. 結合H5遊戲開發，做個小遊戲
2. 結合Canvas開發個類似繪圖的東東
3. 使用CSS做個酷炫的展示頁

呵呵，再會，祝好