小程序學習筆記-日??偨Y

小程序學習筆記日??偨Y

目錄結構

1.為了方便開發(fā)者減少配置項,描述頁面的四個文件(home.json/home.js/home.wxml/home.wxss)必須具有相同的路徑與文件名。


配置

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

3.pages數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面,都需要對 pages 數組進行修改。(在小程序工具里建好頁面文件夾,然后再pages數組里配置好并保存,就可以自動生成頁面文件)

4.自定義頭部導航欄 (navigationStyle )只在 app.json 中生效

5.tabBar 中的 list 是一個數組,只能配置最少2個、最多5個 tab,tab 按數組的順序排序。


邏輯層
6.由于框架并非運行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無法使用,如 document,window 等。

7.增加 getApp 和 getCurrentPages 方法,分別用來獲取 App 實例和當前頁面棧。通過 getApp() 獲取實例之后,不要私自調用生命周期函數。


轉發(fā)
8.現在通過調用 wx.showShareMenu 并且設置 withShareTickettrue ,當用戶將小程序轉發(fā)到任一群聊之后,可以獲取到此次轉發(fā)的 shareTicket,此轉發(fā)卡片在群聊中被其他用戶打開時,可以在 App.onLaunch()App.onShow 獲取到另一個 shareTicket。這兩步獲取到的 shareTicket 均可通過 wx.getShareInfo()接口可以獲取到相同的轉發(fā)信息。

9.只有轉發(fā)到群聊中打開才可以獲取到 shareTickets 返回值,單聊沒有 shareTickets


注冊程序

10.當小程序初始化完成時,會觸發(fā) onLaunch(全局只觸發(fā)一次)

11.當用戶點擊左上角關閉,或者按了設備 Home 鍵離開微信,小程序并沒有直接銷毀,而是進入了后臺;
當再次進入微信或再次打開小程序,又會從后臺進入前臺

12.只有當小程序進入后臺一定時間,或者系統(tǒng)資源占用過高,才會被真正的銷毀。


場景值
13.由于Android系統(tǒng)限制,目前還無法獲取到按 Home 鍵退出到桌面,然后從桌面再次進小程序的場景值,對于這種情況,會保留上一次的場景值。


頁面棧

頁面重定向:當前頁面出棧,新頁面入棧
頁面返回:頁面不斷出棧,直到目標返回頁,新頁面入棧
Tab 切換:頁面全部出棧,只留下新的 Tab 頁面
重加載:頁面全部出棧,只留下新的頁面

15.getCurrentPages() 函數用于獲取當前頁面棧的實例,以數組形式按棧的順序給出,第一個元素為首頁,最后一個元素為當前頁面。

16.不要嘗試修改頁面棧,會導致路由以及頁面狀態(tài)錯誤。

navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。

18.調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。

(路由帶參可以形如: /pages/life/life?id=1 路徑+‘?' + 參數)


事件
19.冒泡事件:當一個組件上的事件被觸發(fā)后,該事件會向父節(jié)點傳遞。非冒泡事件:當一個組件上的事件被觸發(fā)后,該事件不會向父節(jié)點傳遞

  1. key 以bindcatch開頭,然后跟上事件的類型,如bindtapcatchtouchstart。自基礎庫版本 1.5.0 起,bindcatch后可以緊跟一個冒號,其含義不變,如bind:tapcatch:touchstart。

21.bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡

22.需要在捕獲階段監(jiān)聽事件時,可以采用capture-bind、capture-catch關鍵字,后者將中斷捕獲階段和取消冒泡階段。


注冊頁面

23.onTabItemTap 怎么用?當點擊tab界面時觸發(fā)

onLoad,onReady 一個頁面只會調用一次,除非被unload
onShow 頁面每次打開都調用
onHide 在navigateTo跳轉或tab跳轉時候調用
onUnload 在redirectTo重定向或者navigateBack退回前一個頁面的時候調用

25.route 字段可以獲取到當前頁面的路徑。(通過this.route獲取)

26.setData 函數用于將數據從邏輯層發(fā)送到視圖層(異步),同時改變對應的 this.data 的值(同步)。

27.其中 key 可以非常靈活,以數據路徑的形式給出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中預先定義。(不需要定義? 刺激)

28.單次設置的數據不能超過1024kB,請盡量避免一次設置過多的數據。

29.請不要把 data 中任何一項的 value 設為 undefined ,否則這一項將不被設置并可能遺留一些潛在問題。


模塊化
30.不同的文件中可以聲明相同名字的變量和函數

31.通過全局函數 getApp() 可以獲取全局的應用實例,如果需要全局的數據可以在 App() 中設置

32.exports 是 module.exports 的一個引用,因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發(fā)者采用 module.exports 來暴露模塊接口

33.小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。


數據綁定
34.數據都要放到雙引號里,并用{{}}包括

35.data屬性中的對象可以隨意組合,但是如有存在變量名相同的情況,后邊的會覆蓋前面

36.花括號和引號之間如果有空格,將最終被解析成為字符串
例如

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

列表渲染
37.使用 wx:for-item 可以指定數組當前元素的變量名,使用 wx:for-index 可以指定數組當前下標的變量名

38.將 wx:for 用在<block/>標簽上,以渲染一個包含多節(jié)點的結構塊

39.wx:key 的值以兩種形式提供
1)字符串,代表在 for 循環(huán)的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數字,且不能動態(tài)改變。
2)保留關鍵字 *this 代表在 for 循環(huán)中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字

40.當 wx:for 的值為字符串時,會將字符串解析成字符串數組


條件渲染
41.<block/> 并不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。

wx:if 如果為false 則不渲染;
hidden 先渲染,如果為false 則隱藏
如果頻繁切換,則使用hidden
如果不過多改變,則使用wx:if


模板
43.模板擁有自己的作用域,只能使用 data 傳入的數據以及模版定義文件中定義的 <wxs /> 模塊


引用
44.import 有作用域的概念,即只會 import 目標文件中定義的 template,而不會 import 目標文件 import 的 template。

45.include 可以將目標文件除了 <template/> <wxs/> 外的整個代碼引入,相當于是拷貝到 include 位置


WXS模塊
46.每個 wxs 模塊均有一個內置的 module 對象。

47.wxs文件引入方式:

<wxs src="./../tools.wxs" module="tools" />

48.wxs 模塊均為單例,wxs 模塊在第一次被引用時,會自動初始化為單例對象。多個頁面,多個地方,多次引用,使用的都是同一個 wxs 模塊對象。

49.module 屬性是當前 <wxs> 標簽的模塊名。在單個 wxml 文件內,建議其值唯一。有重復模塊名則按照先后順序覆蓋(后者覆蓋前者)。不同文件之間的 wxs 模塊名不會相互覆蓋。


WXSS
50.rpx(responsive pixel): 可以根據屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

51.開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。

52.使用@import語句可以導入外聯(lián)樣式表,@import后跟需要導入的外聯(lián)樣式表的相對路徑,用;表示語句結束。(導入外部的UI庫)


組件模板
53.在組件模板中可以提供一個 <slot> 節(jié)點,用于承載組件引用時提供的子節(jié)點。

54.在組件定義時的選項中啟用多slot支持

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

55.可以在這個組件的wxml中使用多個slot,以不同的 name 來區(qū)分。
使用時,用 slot 屬性來將節(jié)點插入到不同的slot上。

1)組件和引用組件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標簽名選擇器,請改用class選擇器。
2)組件和引用組件的頁面中使用后代選擇器(.a .b)在一些極端情況下會有非預期的表現,如遇,請避免使用。
3)子元素選擇器(.a>.b)只能用于 view 組件與其子節(jié)點之間,用于其他組件可能導致非預期的情況。
4)繼承樣式,如 font 、 color ,會從組件外繼承到組件內。
5)除繼承樣式外, app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效

57.組件希望接受外部傳入的樣式類(類似于 view 組件的 hover-class 屬性)。此時可以在 Component 中用 externalClasses 定義段定義若干個外部樣式類。


Component構造器
58.properties ,組件的對外屬性,是屬性名到屬性設置的映射表,屬性設置中可包含三個字段, type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應函數

59.在 properties 定義段中,屬性名采用駝峰寫法(propertyName);在 wxml 中,指定屬性值時則對應使用連字符寫法(component-tag-name property-name="attr value"),應用于數據綁定時采用駝峰寫法(attr="{{propertyName}}")。


組件事件
60.自定義組件觸發(fā)事件時,需要使用 triggerEvent 方法,指定事件名、detail對象和事件選項


behaviors
61.每個 behavior 可以包含一組屬性、數據、生命周期函數和方法,組件引用它時,它的屬性、數據和方法會被合并到組件中,生命周期函數也會在對應時機被調用。每個組件可以引用多個 behavior 。 behavior 也可以引用其他 behavior 。

62.behavior 需要使用 Behavior() 構造器定義。

63.wx://form-field 代表一個內置 behavior ,它使得這個自定義組件有類似于表單控件的行為。


組件間關系
64.父子組件有相互間的關系,相互間的通信往往比較復雜。此時在組件定義時加入 relations 定義段,可以解決這樣的問題(通過relation來告訴組件他的父節(jié)點是誰 或者 他的子節(jié)點是誰)

65.relations中type選項:目標組件的相對關系,可選的值為 parent 、 child 、 ancestor 、 descendant


插件
66.插件是對一組 js 接口或 自定義組件的封裝,用于提供給第三方小程序調用。插件必須嵌入在其他小程序中才能被用戶使用。


分包加載
67.首頁的 TAB 頁面必須在 app(主包)內


多線程worker
68.一些異步處理的任務,可以放置于 Worker 中運行,待運行結束后,再把結果返回到小程序主線程。Worker 運行于一個單獨的全局上下文與線程中,不能直接調用主線程的方法。 Worker 與主線程之間的數據傳輸,雙方使用 Worker.postMessage() 來發(fā)送數據,Worker.onMessage() 來接收數據,傳輸的數據并不是直接共享,而是被復制的

1) Worker 最大并發(fā)數量限制為 1 個,創(chuàng)建下一個前請用 Worker.terminate() 結束當前 Worker
2)Worker 內代碼只能 require 指定 Worker 路徑內的文件,無法引用其它路徑
3)Worker 的入口文件由 wx.createWorker() 時指定,開發(fā)者可動態(tài)指定 Worker 入口文件
4)Worker 內不支持 wx 系列的 API
5)Workers 之間不支持發(fā)送消息


兼容
70.可以通過 wx.getSystemInfo 或者 wx.getSystemInfoSync 獲取到小程序的基礎庫版本號。也可以通過 wx.canIUse 詳情 來判斷是否可以在該基礎庫版本下直接使用對應的API或者組件


運行機制
71.假如用戶已經打開過某小程序,然后在一定時間內再次打開該小程序,此時無需重新啟動,只需將后臺態(tài)的小程序切換到前臺,這個過程就是熱啟動;冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況,此時小程序需要重新加載啟動。(熱啟動,打開過,一段時間內再次打開
冷啟動,第一次打開,或者銷毀后再打開)

72.小程序冷啟動時如果發(fā)現有新版本,將會異步下載新版本的代碼包,并同時用客戶端本地的包進行啟動,即新版本的小程序需要等下一次冷啟動才會應用上。(如果第一次打開,就是直接下載新版本。
如果以前打開過,就先用老包,然后后臺異步下載新包,再次冷啟動后時替換)

73.(只有銷毀后才算真正的關閉小程序,下次打開就時冷啟動)
1)小程序沒有重啟的概念
2)當小程序進入后臺,客戶端會維持一段時間的運行狀態(tài),超過一定時間后(目前是5分鐘)會被微信主動銷毀
3)當短時間內(5s)連續(xù)收到兩次以上收到系統(tǒng)內存告警,會進行小程序的銷毀

74.再次打開邏輯
可以設置打開上次的頁面,
也可以設置打開直接到首頁
使用wx.reLaunch 打開指定頁面


優(yōu)化建議
75.用戶傳輸的數據,需要將其轉換為字符串形式傳遞,同時把轉換后的數據內容拼接成一份 JS 腳本,再通過執(zhí)行 JS 腳本的形式傳遞到兩邊獨立環(huán)境。

76.數據到達視圖層并不是實時的。

77.常見的setData操作錯誤
1) 頻繁的去 setData
2)每次 setData 都傳遞大量新數據
3)后臺態(tài)頁面進行 setData

78.建議開發(fā)者盡量減少使用大圖片資源

79.有必要盡量減少代碼包的大小,因為代碼包大小直接影響到下載速度,從而影響用戶的首次打開體驗

80.控制代碼包內圖片資源。GZIP 對基于文本資源的壓縮效果最好,在壓縮較大文件時往往可高達 70%-80% 的壓縮率,而如果對已經壓縮的資源(例如大多數的圖片格式)則效果甚微。

81.及時清理沒有使用到的代碼和資源


發(fā)起請求
82.最終發(fā)送給服務器的數據是 String 類型,如果傳入的 data 不是 String 類型,會被轉換成 String

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 因新工作主要負責微信小程序這一塊,最近的重心就移到這一塊,該博客是對微信小程序整體的整理歸納以及標明一些細節(jié)點,初...
    majun00閱讀 7,639評論 0 9
  • 最近學習小程序,記錄一下(2018.4.6) 目錄結構1.為了方便開發(fā)者減少配置項,描述頁面的四個文件必須具有相同...
    ZZES_ZCDC閱讀 5,051評論 0 6
  • 1.小程序起步 (1)點擊https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon閱讀 3,607評論 0 0
  • 每天的學習記錄,可能有的地方寫的不對,因為剛學,以后發(fā)現錯的話會回來改掉整體流程 https://develope...
    有點健忘閱讀 5,035評論 0 7
  • 人生四季, 日升日落, 沒有什么真正清閑的時光, 奔波勞苦, 也是平常。 夜晚的心情很純凈, 空氣中彌漫著咖啡的清...
    根在蜀渝閱讀 260評論 1 5

友情鏈接更多精彩內容