用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

常被忽略的小程序二三事

Rolan 2019-6-27 00:15

小程序在冷啟動的時候遇到版本更新,小程序會異步加載,幫我們下載最新版本的代碼包,并同時使用微信本地版本的代碼包啟動,也就是說最新的代碼包,將在小程序下次啟動才去加載。如果偏要使用最新版本的代碼包,我們 ...

小程序在冷啟動的時候遇到版本更新,小程序會異步加載,幫我們下載最新版本的代碼包,并同時使用微信本地版本的代碼包啟動,也就是說最新的代碼包,將在小程序下次啟動才去加載。如果偏要使用最新版本的代碼包,我們可以使用api來處理

wx.getUpdateManager

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 請求完新版本信息的回調
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已經準備好,是否重啟應用?',
    success(res) {
      if (res.confirm) {
        // 新的版本已經下載好,調用 applyUpdate 應用新版本并重啟
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下載失敗
})
復制代碼

小程序加載機制:

小程序的啟動流程圖里面:

左側的部分是在啟動的時候,微信客戶端里面的視圖層和邏輯層一些交互邏輯以及數據緩存的存取操作,在小程序啟動的時候,會向 cdn 請求最新代碼包,第一次啟動必須等到代碼包下載完畢,注入到 webView 容器內執行之后,才能看到小程序頁面,所以在網絡不好的情況下,我們會感覺到頁面打開比較慢,客戶端會幫我們把代碼包緩存到本地,當我們下一次啟動的時候,我們會從 cdn

請求是否有最新版本的代碼包。

小程序應用和頁面的生命周期:

小程序應用生命周期:onLaunch,onShow,onHide,onError

首次進入小程序,從 cdn 或者小程序本地拿到代碼包注入到運行環境, 微信客戶端會給我們邏輯層 app.js 的 app 實例來派發 onLaunch 事件, 在邏輯層, app.js 的 app 構造器的參數里面的 onLaunch 方法就會被調用。 當用戶使用 home 件或者點擊右上角小程序關閉按鈕,來關閉小程序時,小程序是沒有被直接銷毀的,這時 app 構造器的參數里面的 onHiede 方法就會被調用,當我們再次打開小程序時,微信喚起小程序, onShow 方法就會被調用, 當小程序腳本發現錯誤時,或 api 調用失敗時,會調用 onError 。

小程序頁面的生命周期:onLoad,onShow,onReady,onHide,onUnload,

頁面未被銷毀之前, onLoad 只會調用一次, 頁面顯示之后,會調用page實例里面的 onShow當頁面初次渲染之后, onReady 就會被調用,頁面未被銷毀之前,只會調用一次 onReady 觸發之后,邏輯層和視圖層進行交互, 當我們在當前頁面打開新的頁面之后,當前頁面會觸發 onHide , 如果關閉當前頁,會觸發 onUnload

負責頁面視圖的 view 線程和處理數據的服務以及服務的服務線程, AppService , 協同完成生命周期周期調用

小程序事件模型

1. 事件捕獲階段

綁定的事件從最外層節點向下傳遞到目標節點元素,依次檢查,所經過的節點是否綁定了同一事件類型的監聽回調函數,如果有則執行對應的事件回調函數

2. 事件處理階段

事件在到達目標節點之后,會觸發目標節點所綁定的監聽回調函數

3. 事件冒泡階段

事件從目標節點,向上冒泡到最外層節點,依次檢查經過的節點是否綁定了,同樣事件類型的監聽回調函數,如果有,會執行這個回調函數

target 屬性: 觸發事件的當前組件 currentTarget 屬性: 觸發事件的根源組件

eg: 如果有外層 view 還有個里層 view 嵌套,都通過 bind 綁定了點擊事件, target 為外層 view 組件的事件對象, currentTarget 為底層 view 組件的事件對象

  • type 觸發事件的觸發類型
  • timestamp 觸發事件的時間戳
  • target 觸發事件的根源組件,包括觸發事件根源組件的id自定義屬性的集合
  • currenTarget 事件綁定額當前組件 ,包括當前組件的 id ,類型, data 自定義屬性的集合
  • touches 是一個數組,每一個元素都是一個 touc h對象 ,標識當前停留在屏幕上的觸摸點和信息
  • changedTouches 是一個數據,標識有變化的 觸摸點,即當前觸摸點從有到無或從無到有的變化
  • detail 標識各個事件帶有的數據,點擊事件: ‘觸摸點距離文檔左上角的距離’ 媒體事件,觸發事件的時候播放狀態,以及時間戳

小程序運行環境:

在不同環境下的 javascript 腳本運行環境是不同的,微信小程序運行在三端 :iOS(iPhone/iPad) 、 Android 和 用于調試的開發者工具。

三端的腳本執行環境以及用于渲染非原生組件的環境是各不相同的:

  • 在 iOS 上,小程序邏輯層的 javascript 代碼運行在 JavaScriptCore 中,視圖層是由 WKWebView 來渲染的,環境有 iOS8 、 iOS9 、 iOS10 ;

  • 在 Android 上,

    • 舊版本,小程序邏輯層的 javascript 代碼運行中 X5 JSCore 中,視圖層是由 X5 基于 Mobile Chrome 57 內核來渲染的
    • 新版本,小程序邏輯層的 javascript 代碼運行在 V8 中,視圖層是由自研 XWeb 引擎基于 Mobile Chrome 6 7 內核來渲染的;
  • 在 開發工具上,小程序邏輯層的 javascript 代碼是運行在 NW.js 中,視圖層是由 Chromium 60 Webview 來渲染的。

Tips:

wx:key

列表數據發生改變重新出發頁面渲染的時候,列表中的項目可以保持自身狀態 比如在 input 組件里,輸入了內容之后 在頁面渲染之后,不希望 input 內容發生改變,需要用此屬性 這個屬性,在頁面重新渲染的時候,確保帶有 key 的組件 會重新排序,而不是重新渲染,從而提高頁面渲染性能的效率

Block是一個包裝元素,不是組件,渲染之后頁面看不出來

wx:if 和hidden 區別

wx:if 在切換時有局部渲染的過程,從而保證條件塊渲染時,可以銷毀并重新渲染,有更高的切換消耗 hidden 始終渲染。可以控制視圖上的顯示和隱藏,有更高的初始化渲染消耗, 所以元素頻繁切換的話,使用 hidden

wxml支持文件引用

import : 只能引用我們定義模板文件的模板內容塊

作用域的概念:只能引用目標文件定義的 template

模板,如果目標文件內嵌套了其他模板,是不會被引用的,避免了引用模板死循環的問題

include : 把目標 文件內除了模板代碼塊外的 所有代碼都引入,相當于拷貝到了 include

位置這里

Wxss和css對比

尺寸單位rpx

先了解幾個概念:

設備像素
Css像素
Ppi/dpi

  • Dpr :手機的某一方向上設備像素和css像素之比

雖然 wxss 支持 rem ,但是我們知道 rem 是根據 html 根元素的 fontSize 大小來適配的, wxss 不能直接操作 html 的樣式屬性,所以 rem 適配方案就失效了。 rpx 應運而生,規定屏幕寬度為 750rpx ,從而我們可以根據屏幕寬度來自適應, rpx 和 rem 實現方式是相似額,而且 rpx 最終轉換為 rem

樣式導入

  • 外聯樣式引入: @import ‘./ss.wxss’

  • 內連樣式引入: style 一般用來寫動態的樣式

選擇器

一般想要修改他人插件樣式的時候使用

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 掘金 來自: 掘金
致青春APP 湖北快3表 城通网盘怎赚钱 重庆时时彩走势图下载 时时彩买大小绝招 遗漏数据湖南快乐10分 舟山清墩星空棋牌官网 温州麻将碰碰胡 辽宁快乐12组选走势图 赚钱宝已绑定手机 北京pk10怎么研究走势 快三开奖 电玩城鲨鱼机飞禽走兽 洗碗赚钱买书作文四百字 天津快乐十分钟前三组遗漏 排列五201走势图带连线图 太阳城彩票合法吗