技術研究
當前位置:首頁>技術研究 >文章
微信小程序研發

發布日期:2019-03-28        點擊數:3061

簡介:

979473-20181031182455015-1648278112.png

總結:

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

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

3. 可以自動補全css的兼容語法

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

一. 設計

979473-20181031184159435-1590606326.png

總結:

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

 

二. 小程序頁面結構

979473-20181024221551723-98518430.png

 wxml:

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

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

979473-20181024223522631-149273372.png

 

三. 工作原理

 979473-20181031183933975-1144495277.png

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

視圖層和邏輯層通過系統層的JSBridage進行通信,

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

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

 

 979473-20181024221724279-1765389086.png

 

視圖層和邏輯層的數據傳輸,實際上通過兩邊提供的 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

979473-20181024221441709-2050009070.png

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

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

四. 開發工具

979473-20181031192247280-1296702187.png

 

 項目設置:

979473-20181031191714109-482254864.png

Q&A:

為什么要代碼保護?

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

所以我們可以在文件系統找到此包,進行反編譯,如下為反編譯后的小程序源碼:

979473-20181031193101344-1019348851.png

但源碼的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. 小程序支付

979473-20181031201011826-2002070776.png

979473-20181031201523841-498369276.png

 


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. 小程序登錄

實際項目登錄時序圖:

979473-20181101142807830-1148455969.jpg

 

授權彈框兩種形式:

1. 判斷skey不存在,直接顯示登錄按鈕

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

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

微信授權彈框:

979473-20181101132446210-364506762.png

 

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

自定義登錄彈框內的登錄按鈕依然為:

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

 

自定義登錄彈框:

979473-20181101132410401-1662981456.png

 

Unionid機制

979473-20181101143155967-2079273086.png


地址:貴陽市中山西路97號騰達廣場A棟18樓
總機:0851-85831618 85831628 (傳真轉8008)
Copyright 2006-2021 www.honglinjin.com All rights reserved.
黔ICP備18003547號-1
  貴公網安備52010302000315
97精品全国免费视频