微信小程序原生開發簡介

 

簡介：

總結：

1. 邏輯層使用js引擎，視圖層使用webview渲染

2. 微信小程序已經支持了絕大部分的 ES6 API

3. 能夠自動補全css的兼容語法

文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/details.html

一. 設計

總結：

設計圖750px， 1px =  1rpx，方便計算

 

二. 小程序頁面結構

 wxml:

功能相似html，描述節點，但小程序的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程序給開發者包裝好的基本能力，咱們還提供了地圖、視頻、音頻等等組件能力

wxss:

相似css，有css大部分屬性：

1. 單位rpx

2. 樣式導入和less等css預處理器一致，用@import

3. 不能用嵌套選擇器

 js: 

微信小程序的 JavaScript 運行環境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中，不能操做DOM，沒有window, document, 也不能經過 Node.js 相關接口訪問操做系統 API

JS 腳本文件經過改變數據來處理用戶的操做

Page({
   data: {
        msg: ''
    }, 
   clickMe: function() {
        this.setData({ msg: "Hello World" })
  }
})

 json:

頁面配置文件，可選

好比配置組件，配置下拉刷新功能等

{
    "usingComponents": {
        "login-page": "/components/login-page/login-page"
    },
    "enablePullDownRefresh": true
}

 

Q&A

 

三. 工做原理

 

微信小程序View層用來渲染頁面結構，AppService層用來邏輯處理、數據請求、接口調用，它們在兩個進程（兩個Webview）裏運行。

視圖層和邏輯層經過系統層的JSBridage進行通訊，

邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，

視圖層把觸發的事件通知到邏輯層進行業務處理。

 

 

 

視圖層和邏輯層的數據傳輸，實際上經過兩邊提供的 evaluateJavascript 所實現。

即用戶傳輸的數據，須要將其轉換爲字符串形式傳遞，同時把轉換後的數據內容拼接成一份 JS 腳本，再經過執行 JS 腳本的形式傳遞到兩邊獨立環境。

而 evaluateJavascript 的執行會受不少方面的影響，數據到達視圖層並不是實時的。

 

爲何小程序最多容許打開5個層級的頁面？

小程序的UI視圖和邏輯處理是用多個webview實現的，邏輯處理的JS代碼所有加載到一個Webview裏面，稱之爲AppService，整個小程序只有一個，而且整個生命週期常駐內存，

而全部的視圖（wxml和wxss）都是單獨的Webview來承載，稱之爲AppView。

因此一個小程序打開至少就會有2個webview進程，正式由於每一個視圖都是一個獨立的webview進程，考慮到性能消耗，小程序不容許打開超過5個層級的頁面，固然同是也是爲了體驗更好。

類MVVM開發模式

1. 都是渲染和邏輯分離，再也不 JS 直接操控  DOM， JS 只須要管理狀態，再經過一種模板語法（{{ }}）來描述狀態和界面結構的關係

2. 小程序邏輯和UI執行在2個獨立的Webview裏面，這個是跟當前流行的react，agular，vue本質的差異

 

Q&A

原理詳解：https://www.jianshu.com/p/b50ed8fc49d6

JsCore詳解：http://www.cnblogs.com/meituantech/p/9528285.html

四. 開發工具

 

 項目設置：

Q&A：

爲何要代碼保護？

 第一次打開小程序，微信會把整個小程序包下載到本地，命名爲：  _1992529666_112.wxapkg  形式，在本地進行解壓編譯操做。

因此咱們能夠在文件系統找到此包，進行反編譯，以下爲反編譯後的小程序源碼：

但源碼的js部分會被混淆或者丟失

 

詳解：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.htm

 

五. 小程序能力--分包加載

目的： 用戶在使用時按需進行加載，減小啓動時間

主包：放置默認啓動頁面/TabBar 頁面，以及一些全部分包都需用到公共資源/JS 腳本

分包：能夠有多個分包。每一個分包小程序一定含有一個主包

 

在小程序啓動時，默認會下載主包並啓動主包內頁面，當用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成後再進行展現。

目前小程序分包大小有如下限制：

• 整個小程序全部分包大小不超過 8M
• 單個分包/主包大小不能超過 2M

 

獨立分包：是小程序中一種特殊類型的分包，能夠獨立於主包和其餘分包運行。從獨立分包中頁面進入小程序時，不須要下載主包。當用戶進入普通分包或主包內頁面時，主包纔會被下載。

 

全部的分包，獨立分包，都是在同一套源碼內，經過app.json配置進行劃分

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleA",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

 

分包預下載：

在主包內預下載分包，在獨立分包內預下載主包

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

 

6. 小程序支付

 

wx.requestPayment(
{
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
})

 

文檔：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

 

7. 小程序登陸

實際項目登陸時序圖：

 

受權彈框兩種形式：

1. 判斷skey不存在，直接顯示登陸按鈕

<button class="btn" open-type="getUserInfo" bindgetuserinfo="login">登陸</button>

點擊按鈕直接彈出微信受權框，受權成功後調用wx.login()等上述流程

微信受權彈框：

 

2. 接口返回未登陸狀態，彈起自定義登陸框

自定義登陸彈框內的登陸按鈕依然爲：

<button class="btn" open-type="getUserInfo" bindgetuserinfo="login">登陸</button>

 

自定義登陸彈框：

 

Unionid機制

 注意：

這裏要注意下UnionID的獲取，若是這個用戶沒有關注你的公衆號，那你直接從code2session中是拿不到unionId的，因此就看上面的第一點，從getUserInfo中獲取加密數據傳到後臺解密後再獲取unionId才行。

 

瞭解更多小程序，建議再看下小程序避坑指南