微信小程序開發 我的總結(2018.03)

時間  2019-11-07
標籤 微信 程序 開發 我的 總結 2018.03 简体版
原文   原文鏈接

什麼是微信小程序？

介紹： >>百度百科連接

image.png

微信小程序是一種運行在微信上的不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。
小程序在微信裏能被便捷地獲取與傳播，藉助微信龐大的用戶羣，能夠給一些優質服務提供一個寬廣開放的平臺；
構建微信生態圈的一個重要環節，小程序、訂閱號、服務號、企業號是微信中並行的體系。
小程序可以依託微信實現音頻拍照等媒體操做、位置地圖、消息通知、線下掃碼、微信支付、公衆號關聯等衆多的功能。其中，經過公衆號關聯，用戶能夠實現公衆號與小程序之間相互跳轉。

對於開發者而言，小程序開發門檻相對較低，難度不及原生APP開發和h5開發，可以知足簡單的基礎應用，適合生活服務類線下商鋪以及非剛需低頻應用。javascript

特色：

  • 不用安裝那麼多APP，省流量，省安裝時間，不佔用桌面；
  • 無需安裝卸載，體現了「用完即走」的理念；它能夠拋開操做系統的限制，作到了在一個應用（微信）中可以得到相似打開一個本地APP的體驗。小程序真正作到了小巧，不用安裝，不用卸載的先進用戶體驗。
  • 微信提供了健全的文檔，開發門檻低
  • 操做原生API的接口；
  • 發佈維護方便
  • 對於用戶來講，相較於各類APP，微信小程序UI和操做流程會更統一。
  • 開發成本更低，他們能夠更多財力，人力，精力放在如何運營好產品，作好內容自己；原生APP，推廣更容易更簡單，更省成本。
  • 小程序應該是作好人與服務的鏈接，低頻、非剛需場景的長尾服務提供者最適合來作微信小程序。

侷限 差別

  • 暫不支持小程序和外界項目的直接交互，自己侷限於微信及提供的服務，沒法移植到其餘平臺；
  • 體驗上無法徹底媲美原生APP；，從操做路徑來看，小程序的進入路徑比打開APP更長，它是一個更偏向於線下和場景的一個個輕應用，不能徹底去替代APP， 由於不少更豐富、更復雜、個性化的功能仍是須要在APP上去承載。
  • 大量小程序出現也容易擾亂用戶的選擇，減低用戶體驗。

發展歷程：

2016年1月11日，微信之父張小龍解讀了微信的四大價值觀，並提出正在研究新的形態-「微信小程序」;html

_四大價值觀：_1.一切以用戶價值爲依歸；1.讓創造發揮價值；3.一個好的東西(或者工具)是用完即走的；4.儘量的讓商業化存在於無形之中。前端

2016年9月21日，微信小程序正式開啓內測，騰訊雲正式上線微信小程序解決方案，提供小程序在雲端服務器的技術方案;vue

2017年1月9日，歷時一年，第一批小程序正式上線;java

2017年12月28日，微信更新的 6.6.1 版本開放了小遊戲，微信啓動頁面還重點推薦了小遊戲「跳一跳」,並在首頁下拉中可查看本身最近訪問的小程序。node

開發前須要知道的事項

1.官方微信公衆平臺有涉及開發各階段的比較健全的文檔。是開發者最好的學習途徑；
2.微信開發者工具；
3.微信承載着小程序的整個流程。包括 接入 + 開發 + 調試 + 編譯 + 測試 + 上傳發布 + 推廣運行等。
4.小程序並不等同於h5項目；二者有明顯的區別；jquery

接入流程

官網對使用接入流程及使用有詳細的介紹。android

註冊小程序

根據指引填寫信息和提交相應的資料，在微信公衆平臺註冊小程序。快速跳轉git

小程序信息完善

填寫小程序基本信息，包括名稱、頭像、服務範圍等。設置
管理員設置、項目成員及權限配置
小程序ID及祕鑰
服務器域名配置
騰訊雲配置
開發者工具es6

開發小程序階段

完成小程序開發配置後，開發者可下載開發者工具參考開發文檔進行小程序的開發和調試。

提交審覈和發佈

完成小程序開發後，提交代碼至微信團隊審覈，審覈經過後便可發佈。
雲真機測試

工具：

微信開發者工具

區別於H5移動端開發時的開發工具+瀏覽器Device Mode預覽的模式，小程序的開發有基於本身的開發者工具。微信官方推出的微信開發者工具，集成了公衆號網頁調試和小程序調試兩種開發模式。

  • 使用公衆號網頁調試，開發者能夠調試微信網頁受權和微信JS-SDK；
  • 使用小程序調試，開發者能夠完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發佈等功能。
  • 開發者工具（1.01.1711300版本）界面：

image.png

基於微信開發者工具能夠實現 同步本地文件 + 開發 + 調試 + 編譯 + 預覽  + 測試 + 模擬場景 + 上傳 + 發佈 等一整套流程；要了解各個菜單的功能，官網有詳細的菜單功能介紹。

其餘開發工具

咱們已經習慣於在webstorm等IDE工具上快捷開發，微信開發者工具上編碼總感受不是那麼流暢。
固然小程序編碼徹底能夠在這些編輯器上進行，但目前各IDE工具尚未比較全方位的插件來替代快速開發，只有一些不太完整的插件。且就算在其餘工具開發代碼，仍是離不開微信開發者工具的配合。查看效果、調試頁面等目前還需在開發者工具進行。

在webstorm編寫代碼，首先要識別.wxss和.wxml需配置文件類型：如：

image.png

其次配置小程序代碼提示：例：藉助wecharCode.jar 查看

小程序與H5區別

咱們接觸使用過好幾種前端MVVM框架或者前端模板引擎，能夠把小程序理解爲相似vue的h5前端框架，不過也存在着明顯的差別。

小程序不是HTML5，本質上是HyBrid技術的應用。Hybrid App（混合模式移動應用）是介於Native App（原生）、以 HTML5 爲表明的 Web App（基於Web的系統和應用）二者之間的app，它就是Native結合Web混合開發，所以兼具了Native App的大部分優點，也兼具Web App使用H5跨平臺開發低成本的特色。
固然微信小程序的總體開發語法偏向H5,但編譯運行等則差別明顯。

  1. 開發框架區別；
    區別於h5項目編碼配合各框架進行標準的HTML + CSS + JS 的開發組合，小程序開發了本身的一套WXML標籤語言和WXSS樣式語言進行視圖層開發，以及基於ES規範的 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統。
  2. 開發工具差別；
    小程序依賴微信開發者工具；
  3. 運行環境、內核；
    小程序並不是運行在瀏覽器中，頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，因此不能在腳本中使用window、document，zepto/jquery 會使用到window對象和document對象，因此也沒法使用；也沒法在腳本中操做組件。
    微信小程序運行在三端：iOS、Android 和 用於調試的開發者工具。三端的腳本執行環境以及用於渲染非原生組件的環境是各不相同的：
  • 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環境有 iOS八、iOS九、iOS10；
  • 在 Android 上，小程序的 javascript 代碼是經過 X5 JSCore來解析，是由 X5 基於 Mobile Chrome 53/57 內核來渲染的；
  • 在 開發工具 上，小程序的 javascript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的；
  1. 文件結構
    通常前端框架項目除了要求基本的h5語法結構外，通常沒有嚴格的文件結構要求，但小程序要求文件結構符合一些規範，不然沒法正常運行啓動。好比：小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。一個小程序主體部分由三個文件組成，必須放在項目的根目錄。小程序文件結構
    image.png
  2. 語法區別
    編碼語法上存在很多差別點(好比下方的頁面標籤)，有些點是必需要求符合小程序的規範，而有一些語法則能用但微信不推薦使用；這個須要在項目開發中總結。
  3. H5和小程序的頁面標籤(組件)的區別
    全部的HTML標籤都不要用(經試驗發現某些如div、span等基本標籤可使用，但無語義和樣式;官方也不推薦使用)，取而代之的是小程序提供的一套標籤(組件)。
    image.png
  4. 頁面執行順序
    頁面加載渲染順序：
    image.png
  • 傳統HTML5在加載的時候受限於網絡環境，須要順序加載HTML、CSS、JS，而後返回數據，最後渲染頁面顯 示在瀏覽器中。用戶常常須要等待很長時間，體驗會受到影響。
  • 相比之下，小程序的兩個線程：Appservice Thread和View Thread會同時進行、並行加載，甚至Appservice Thread會更早執行，當視圖線程加載完，通知Appservice，Appservice 會把準備好的數據用setData的方法返回給視圖線程。

小程序的這種優化策略，能夠減小用戶的等待時間、加快小程序的響應速度。
參考文檔

此外開發的具體區別見下文。

開發概要

微信小程序開發門檻低，除了基於javaScript的語法入門簡單的特色，還歸功於官網提供了整個開發流程詳盡的參考文檔，減小自行摸石頭過河的時間；官方開發者社區也提供了開發者互相交流、分享經驗、反饋bug,快速解決問題的開放平臺(目前帖子很少-.-!)。

快速入口：接入指南、設計規範、開發指南、框架設計、基礎組件、微信原生API、開發者工具、運營規範、數據分析； 開發者社區； 微信小遊戲開放中...微信小遊戲文檔連接(臨時)

有h5開發、vue框架等開發經驗，大概看一下文檔，進行微信開發毫無障礙。具體開發
網上有基於小程序的開發框架及UI組件， 同時可藉助網上已有開源項目熟悉具體項目開發。 做爲參考：微信小程序開源項目庫集合、微信小程序資源整理(比較老舊)；

項目開發

具體開發前最好先熟悉一下微信開發者工具！

新建項目

在小程序默認的項目模板基礎上開發。

image.png

項目目錄只能選擇空目錄或符合微信文件結構的已有項目目錄。選擇空目錄時經過 創建普通快速啓動模板選項能夠快速創建一個dome項目結構。
AppID不填寫時，部分功能會受限。
目前只支持同時運行打開一個項目。
###項目構成
項目裏主要有四種類型的文件：

  1. json 後綴的 JSON 配置文件
  2. wxml 後綴的 WXML 模板文件
  3. wxss 後綴的 WXSS 樣式文件
  4. js 後綴的 JS 腳本邏輯文件
  5. .wxs 後綴的 小程序 腳本文件

其中根目錄下的app.json、app.js是必須的，文件名不能修改。(app.json做爲入口文件，缺失直接致使項目沒法運行;缺失app.js會致使沒法預覽、沒法上傳)。
具體每一個頁面中四種類型文件名保持一致，小程序加載頁面時，會根據頁面路徑，讀取該路徑下同名的其餘幾個文件類型。

JSON 配置

在項目的根目錄有一個 app.json 和 project.config.json配置文件

小程序配置 app.json

app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

"pages": [ // 當前小程序全部頁面路徑配置 *小程序中新增/減小頁面，都須要對 pages 數組進行修改*
    "pages/index/index", // 數組第一項會被指定爲程序的首頁
    "pages/logs/logs"
  ],
  "window": { // 全局樣式配置，設置小程序的狀態欄、導航條、標題、窗口背景色
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": { // 底部或頂部的 tab 欄配置，可配置顏色、點擊表現等，點擊能夠切換頁面
    "color": "#6e6d6b",
    "selectedColor": "#e64340",
    "borderStyle": "black",
    "backgroundColor": "#D2F2A1",
    "list": [ // tab欄只能配置最少2個、最多5個，tab 按數組的順序排序。
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/nav/home-off.png",
        "selectedIconPath": "images/nav/home-on.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "images/nav/my-off.png",
        "selectedIconPath": "images/nav/my-on.png",
        "text": "個人"
      }
    ]
  },
  "networkTimeout": { // 能夠設置各類網絡請求的超時時間
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true  // 是否在開發者工具中開啓 debug 模式，方便調試
複製代碼

配置項細節能夠參考文檔 小程序的配置app.json；

工具配置 project.config.json

工具的一些個性化配置，例如界面顏色、編譯配置等。
配置項細節能夠參考文檔 [開發者工具的配置](mp.weixin.qq.com/debug/wxado… %E7%8A%B6%E6%80%81%E5%B1%95%E7%A4%BA)。

頁面配置 page.json

能夠對本頁面的窗口表現、屬性進行配置，例如具體頁面頂部顏色、是否容許下拉刷新等等。頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
配置項細節能夠參考文檔

頁面路由

[官方文檔]
在小程序中全部頁面的路由所有由框架進行管理。須要在app.json中配置好頁面路徑信息，多tab欄應用一樣設置好頁面路徑。
快速新建路由及頁面的兩種方法：
1.開發者工具編輯器中新建目錄後新建page；
2.app.json文件中pages下直接增長目錄頁面路徑，保存後自動生成頁面目錄。

頁面棧

小程序以頁面棧的形式維護了當前的全部頁面，表現爲路由頁面切換的規則，當發生路由切換的時候，內部維護出入棧數據。入棧則是至關因而 緩存了頁面加載的路徑，出棧則至關因而清除了頁面加載路徑，當清除後，點擊返回按鈕時，則不會返回，或則就不存在返回按鈕。

不一樣的路由切換方式，頁面棧的表現不一樣，以下圖：

image.png

getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。 不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤。
可直接調用查看當前頁面棧，看下圖，包含的信息比較豐富。

image.png

路由觸發方式

跳轉的頁面必需要在app.json中註冊。
路由觸發方式有 API 調用(5種方法)、navigator 組件跳轉[文檔] 和 Tab 切換三種方式；

對於路由的觸發方式以及頁面生命週期函數以下：

image.png

tab切換對應的生命週期：
image.png

api接口說明，配合頁面棧的表現理解：

  1. wx.navigateTo，原頁面保留,可以使用wx.navigateBack返回到原頁面，只能打開非 tabBar 的頁面的路徑。
  2. wx.redirectTo 頁面重定向，關閉當前頁面，只能打開非 tabBar 的頁面的路徑。
  3. wx.navigateBack，關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages()) 獲取當前的頁面棧，決定須要返回幾層。
  4. wx.switchTab，跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面，只能打開 tabBar 頁面。
  5. wx.reLaunch，關閉全部頁面，從新打開到應用內的某個頁面，重啓動，能夠打開任意頁面。
  6. 頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
    調用頁面路由帶的參數能夠在目標頁面的onLoad中獲取。

navigator組件內的open-type屬性值與api對應，調用效果一致。

運行機制

[官方文檔]

啓動機制

小程序啓動會有兩種狀況，一種是「冷啓動」，一種是「熱啓動」。
假如用戶已經打開過某小程序，而後在必定時間內再次打開該小程序，此時無需從新啓動，只需將後臺態的小程序切換到前臺，這個過程就是熱啓動；
冷啓動指的是用戶首次打開或小程序被微信主動銷燬後再次打開的狀況，此時小程序須要從新加載啓動。

當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。須要注意的是：只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正的銷燬。

銷燬機制

小程序沒有重啓的概念，當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過必定時間後（目前是5分鐘）會被微信主動銷燬；
置頂的小程序不會被微信主動銷燬；
當收到系統內存告警也會進行小程序的銷燬；

再次打開邏輯(待理解)

更新機制

小程序冷啓動時若是發現有新版本，將會異步下載新版本的代碼包，並同時用客戶端本地的包進行啓動，即新版本的小程序須要等下一次冷啓動纔會應用上。

邏輯層 js腳本

小程序中的javaScript腳本支持大部分ES6語法(部分特性受運行內核影響，支持程度不一樣)；也支持模塊化；能夠調用微信特有的API。
但沒有操做DOM的能力(Js語言自己就是不包括DOM操做的，DOM操做是瀏覽器環境爲JS作的擴展)。

頁面JS

負責與WXHL進行交互，包括用戶操做事件、頁面組件的配置參數變更。調用微信原生API,實現豐富的手機端操做功能。

註冊程序

[官方文檔]

註冊程序函數及參數

小程序app.js中使用 App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。 (多個app()註冊都會執行)

image.png

例子：

App({
  /**
   * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
   */
  onLaunch: function () {
    // 展現本地存儲能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登陸
    wx.login({
      success: res => {
        // 發送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 能夠將 res 發送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo
              // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
              // 因此此處加入 callback 以防止這種狀況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  /**
   * 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {   
  },
  /**
   * 當小程序從前臺進入後臺，會觸發 onHide
   */
  onHide: function () {  
  },

  /**
   * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
   */
  onError: function (msg) { 
  },
  globalData: { // 全局變量
    userInfo: null
  }
})
複製代碼

設置全局變量

約定 在app()函數的globalData對象中設置全局變量。其餘邏輯層中經過getApp()獲取實例後讀取全局變量。

注意點
  • 官方指出App() 必須在 app.js 中註冊，且不能註冊多個。(自行測試發現能夠註冊多個，都會執行)
  • 在別的js中，調用全局的 getApp() 函數能夠用來獲取到小程序實例，但不要在定義於 App() 內的函數中調用 getApp()。
  • 經過 getApp() 獲取實例以後，不要私自調用生命週期函數。
  • 不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成。

註冊頁面

[官方文檔]
頁面事件處理函數、生命週期、setData()函數更新頁面數據等查看文檔。

Page() 函數用來註冊一個頁面。

1. object 參數概要

Page函數接受一個 object 參數，用以指定頁面的初始數據、生命週期函數、事件處理函數等。
object 參數內容在頁面加載時會進行一次深拷貝，需考慮數據大小對頁面加載的開銷，下圖爲參數概要：

image.png

2. data參數對象

把data對象稱爲初始數據，是由於在頁面第一次渲染時，data對象會以 JSON 的形式由邏輯層傳至渲染層，渲染層經過 WXML 對數據進行綁定。 然後續直接更改data對象值，將沒法改變頁面的狀態，會形成數據不一致(這不一樣於Vue、angular的數據雙向綁定)。
其數據必須是能夠轉成 JSON 的格式：字符串，數字，布爾值，對象，數組。

邏輯層更新視圖層頁面數據，須要調用setData 函數。他是Page原型上添加的方法Page.prototype.setData()。
setData 函數調用時改變對應的 this.data 的值（同步），將數據從邏輯層發送到視圖層（異步）。

image.png

第一個參數 Object(必填項) 以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。 key值不須要在this.data 中預先定義。

第二個參數callback(選填) 是一個回調函數，在此次setData對界面渲染完畢後調用。

* 1.5.0基礎庫後才支持callback;
* 單次設置的數據不能超過1024kB，請儘可能避免一次設置過多的數據。
* 請不要把 data 中任何一項的 value 設爲 undefined ，不然這一項將不被設置並可能遺留一些潛在問題。
複製代碼

setData實現原理及優化建議。

3. 生命週期函數

生命週期函數的調用詳見頁面路由中
onLoad: 頁面加載

一個頁面只會調用一次，能夠在 onLoad 中獲取打開當前頁面所調用的 query 參數。
複製代碼

onShow: 頁面顯示

每次打開頁面都會調用一次
複製代碼

onReady: 頁面初次渲染完成

一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。
對界面的設置如wx.setNavigationBarTitle請在onReady以後設置。詳見生命週期
複製代碼

onHide: 頁面隱藏

當navigateTo或底部tab切換時調用。
複製代碼

onUnload: 頁面卸載

當redirectTo或navigateBack的時候調用。
複製代碼

4. 頁面相關事件處理函數

onPullDownRefresh: 下拉刷新

監聽用戶下拉刷新事件。
須要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
當處理完數據刷新後，wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新。
複製代碼

onReachBottom: 上拉觸底

監聽用戶上拉觸底事件。
能夠在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
在觸發距離內滑動期間，本事件只會被觸發一次。
複製代碼

onPageScroll: 頁面滾動

監聽用戶滑動頁面事件。
參數爲 Object，包含如下字段：scrollTop(頁面在垂直方向已滾動的距離（單位px）)
複製代碼

onShareAppMessage: 用戶轉發

只有定義了此事件處理函數，右上角菜單纔會顯示「轉發」按鈕。
用戶點擊轉發按鈕的時候會調用。
此事件須要 return 一個 Object，用於自定義轉發內容。
自定義轉發字段Object，包含兩個字段title和path:
{
  title: '自定義轉發標題',
  path: '/page/user?id=123'
}
複製代碼

5. 事件處理函數

除了初始化數據和生命週期函數，Page 中還能夠定義自定義一些特殊的函數：事件處理函數。在渲染層能夠在組件中加入事件綁定，當達到觸發事件時，就會執行 Page 中定義的事件處理函數。
實例代碼：

<!--WXML-->
<view bindtap="viewTap"> click me </view>
複製代碼
// js
Page({
  viewTap: function() {
    console.log('view tap')
  }
})
複製代碼

模塊化機制

小程序秉承了JavaScript模塊化的機制，採用CommonJS規範，經過module.exports暴露對象，經過require來獲取對象。

能夠將一些公共的代碼抽離成爲一個單獨的 js 文件，做爲一個模塊。模塊只有經過 module.exports 或者 exports 才能對外暴露接口。

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
複製代碼

在須要使用這些模塊的文件中，使用 require(path) 將公共代碼引入。

Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})
複製代碼
require 暫時不支持絕對路徑；
小程序目前不支持直接引入 node_modules ,使用第三方模塊時，沒法經過require直接導入模塊，須要對第三方模塊強制導出後才能正常導入。
複製代碼

WXS腳本

[官方文檔]
WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，能夠構建出頁面的結構。

差別點：
  1. wxs 不依賴於運行時的基礎庫版本，能夠在全部版本的小程序中運行。
  2. wxs 與 javascript 是不一樣的語言，有本身的語法，並不和 javascript 一致。
  3. wxs 的運行環境和其餘 javascript 代碼是隔離的，wxs 中不能調用其餘 javascript 文件中定義的函數，也不能調用小程序提供的API。
  4. wxs 函數不能做爲組件的事件回調。
  5. 因爲運行環境的差別，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上兩者運行效率無差別。

使用方式：

微信爲咱們提供了兩個使用 WXS 方法：直接插入 WXS 代碼，以及引用 WXS 文件。

<!--wxml中直接插入WXS標籤的代碼-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>

<!--wxml中引用對應路徑下的WXS文件-->
<wxs module='hello' src='./test.wxs'>
複製代碼

每個 WXS 模塊，都須要用 module 標籤進行命名。命名模塊後，開發者工具才能正常進行編譯、在 WXML 中引用模塊中的變量與函數。

語法：

WXS有本身的語法，並不與JS徹底一致

WXML 模板開發 (與HTML區別)

[官方文檔]

<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>
複製代碼
  1. 與其餘前端MVVM框架或者前端模板引擎相似，WXML中能夠進行數據綁定、列表渲染、條件渲染、模板、事件、引用等操做；
  2. 全部的HTML標籤都不能用，取而代之的是小程序提供的一套標籤。官方文檔上叫組件，這個組件的寫法和HTML標籤、模板語言中組件是同樣的，由標籤名，屬性，內容組成，也能夠經過class，id，style來添加樣式，只不太小程序組件相對來講擁有更強大的功能，自帶UI樣式也更豐富,通常的組件支持嵌套，有些嵌套則無效。
    div、p、script等標籤通過編譯後，會保留，但無語義，內容被當成了普通文本處理，屬性及style樣式一樣生效；h1等則報錯。
  3. 事件系統
    須要學習的是 事件綁定的寫法bind/catch(冒泡與捕獲的區別)，事件類型+組件自定義事件，事件對象的內容有區別。
    官方文檔-事件
  4. 文件引入
    WXML提供兩種文件引入方式，import和include。區別在於：import能夠引入定義好的template模板，模板是有做用域的；而include就是拷貝一個公用的代碼片斷到目標文件中，適合作公共頁面片的拆分。
<!--import-->
<import src="../template/a.wxml"/>
<!--include-->
<include src="../include/footer.wxml"/>
複製代碼

文件引入在小程序作模塊化拆分的過程當中很是重要。

5.可插入 wxs 標籤的小程序腳本語言。

WXSS 樣式開發(附WXSS與CSS的區別)

[官方文檔-WXSS]
WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改；

  1. 增長了rpx（responsive pixel）尺寸單位
    規則是1rpx = 屏幕寬度/750，相似於h5中的vw單位(1vw = 屏幕寬度/100)。這樣不但能夠免去換算的煩惱，還能夠根據屏幕寬度進行自適應。(設計時推薦用 iPhone6 做爲視覺稿的標準)
  2. WXSS支持的選擇器類型有限
    目前只支持.class, #id, element, ele,ele, ::before, ::after。官方文檔上暫並未說明支持後代選擇器。即便支持也不要使用，以避免出現沒必要要的bug。
  3. 全局樣式與局部樣式
    定義在 app.wxss 中的樣式爲全局樣式，做用於每個頁面。在 page 的 wxss 文件中定義的樣式爲局部樣式，只做用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。
    這樣每一個單獨頁面裏的class能夠儘可能不嵌套，提高渲染速度。
  4. 導入外聯樣式
    使用@import語句能夠導入外聯樣式表，@import後跟須要導入的外聯樣式表的相對路徑，用;表示語句結束。
  5. 內聯樣式
    image.png

6.background-image 只能用網絡url或者base64 . 本地圖片要用image標籤才行。

微信小程序框架自己也是一個UI框架，基礎實用的樣式在組件裏就提供了，大大減小開發者設置樣式的時間。

組件

[官方文檔]
快速查看效果：[小程序官方demo]

什麼是組件？
組件是視圖層的基本組成單元，與HTML頁面標籤同樣，一個組件一般包括開始標籤和結束標籤，``屬性用來修飾這個組件，內容在兩個標籤以內。

框架爲開發者提供了一系列基礎組件，它們自帶一些微信風格的樣式。開發者能夠經過組合這些基礎組件進行快速開發。
基礎組件根據使用場景，分爲如下七大類：

視圖容器、 基礎內容、 表單組件、 表單、導航、 多媒體、 地圖、 畫布、 客服。

自定義組件
[官方文檔]

從小程序基礎庫版本1.6.3開始，小程序支持簡潔的組件化編程。 開發者能夠將頁面內的功能模塊抽象成自定義組件，以便在不一樣的頁面中重複使用；也能夠將複雜的頁面拆分紅多個低耦合的模塊，有助於代碼維護。自定義組件在使用時與基礎組件很是類似。

自定義組件的寫法與用法有些不一樣。一個例子

API

[官方文檔]
快速查看效果：[小程序官方demo]

小程序開發框架提供豐富的微信原生 API，能夠方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。
說明：

  • 功能API都調用wx對象，直接使用，無需引用。
  • wx.on 開頭的 API 是監聽某個事件發生的API接口，接受一個 CALLBACK 函數做爲參數。當該事件觸發時，會調用 CALLBACK 函數。
  • 如未特殊約定，其餘 API 接口都接受一個OBJECT做爲參數。
  • OBJECT中能夠指定success, fail, complete來接收接口調用結果。

注意事項

[官方優化建議文檔]

遊戲開發

官方最新說明：開發者論壇貼
[官方教程]

後續

雲測試

數據分析

運營、維護等知識

開發要點（草稿）：
1.頁面路由說明、跳轉、與其餘路由方式對比、函數api；
2.WXML寫法區別，組件、模板、class。交互、數據驅動原理；
3.WXSS寫法區別、 動畫寫法
4.頁面js寫法、生命週期函數。 全局變量、模塊化；setData()同步頁面數據
5.微信Api。
6.網絡請求，與服務器的先後端交互。
7.es6寫法的體現，promise  ;
8.小程序與外部應用的交互
9.微信canvas，小遊戲；
10.真機測試、上傳發布、 騰訊雲的應用。
11.經常使用第三方組件；
12.場景值
13.運行原理、底層實現
14.優化
15. 利用第三方框架 開發小程序和h5頁面 等多端應用

擴展

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程