微信小程序的一些坑和html的一些差異

1.第一點差異，單位的差異

這個rpx單位好用得不行，直接設計圖給多少直接寫多少就好了，徹底不用作適配。到後來稍微瞭解了一下這個rpx單位之後發現事情並無那麼簡單。

這個rpx以iphone6爲基礎，他會本身轉化那個比例的。1px=2rpx；可是你寫px爲單位的話，他不是不會適配的就固定多少px而不會由於本身的屏幕變大

而會改變。仍然是佔那麼多的比例

2兼容性適配
說到兼容性的適配，必須提出來的一點是：在微信開發者工具中看到的樣式頗有可能跟真機測試的樣式是不同的
致使的緣由有幾種：

狀況一：可能使用了ios或安卓某一端不兼容的樣式屬性；目前編輯器檢查愈來愈嚴格，標籤不閉合可能致使一些奇怪的問題；
狀況二：使用了開發工具內的壓縮代碼，樣式自動補全等設置，這些設置有時候會存在BUG會致使一些css丟失等問題；能夠在取消部分設置後重試；
狀況三：顏色不對，或者設置顏色無效，請使用十六進制顏色碼代替英文顏色；
————————————————
版權聲明：本文爲CSDN博主「麪條君1995」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/sinat_41627898/article/details/83475291

 

微信小程序入門的學習之路：https://blog.csdn.net/sinat_41627898/article/details/83473927

 

 

微信小程序知識點總結

與css相比咱們擴展的特性有：
　　尺寸單位
　　樣式導入

對每一個手機不通屏幕設置了比例px，當咱們的單位是rpx的時候，會本身轉換比例的。  iphone6的比例是1rpx=0.5px，因此通常用iphone6爲稿標準吧

建議： 開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。 注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發時儘可能避免這種狀況

 

使用@import語句能夠導入外聯樣式表，
這是導入到wxss中的，不是像咱們引入到html中的
@import後相對路徑，用;表示語句結束

/* common.wxss */
.small-p{
padding:10rpx;
}

/* app.wxss */
@import "common.wxss";
.middle-p{
padding:10rpx;
}

 

什麼是小程序?

小程序是微信推出的一種新的公衆號的形態

不須要下載安裝便可在微信中使用的應用

小程序、訂閱號、服務號、企業號是並行的體系

 

 

微信小程序框架–MINA

小程序融合了不少前端開發界的概念，可是並無採用任何一個框架，包括流行的REACT、VUE，還有CORDOVA。它不是三者中的任意一個，而是拼湊出一個新的框架。

儘量簡單、高效的方式讓開發者能夠在微信中開發

具備原生 APP 體驗的服務

 

下面的知識點原文：https://segmentfault.com/a/1190000019906178?utm_source=tag-newest

1、微信小程序宿主環境

微信小程序使用的技術棧是js/wxml/wxss。跟咱們web開發使用的技術棧存在一些不一樣。

• js：微信小程序的js運行是基於微信客戶端，或者只微信APP上下文來運行的，並非在瀏覽器中運行，所以它不能訪問瀏覽器環境下的DOM對象，也不能訪問node.js下的操做系統API等。
• wxml：是微信提供的一種新的基於XML的語法格式，做爲微信小程序的展現層，提供整個頁面的結構。
• wxss：是一套用於修飾微信組件的樣式語言。wxss具備大部分的css特性，可是仍存在一些其餘的不足。

微信小程序運行在三端：iOS、Android 和 用於調試的開發者工具

在 iOS 上，小程序邏輯層的 javascript 代碼運行在 JavaScriptCore 中，視圖層是由 WKWebView 來渲染的，環境有 iOS八、iOS九、iOS10； 在 Android 上， 舊版本，小程序邏輯層的 javascript 代碼運行中 X5 JSCore 中，視圖層是由 X5 基於 Mobile Chrome 57 內核來渲染的； 新版本，小程序邏輯層的 javascript 代碼運行在 V8 中，視圖層是由自研 XWeb 引擎基於 Mobile Chrome 67 內核來渲染的； 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中，mwjs是合併browser和node的運行時，使用前端技術來開發跨平臺的應用，微信小程序開發工具就是使用其開發的。



注意：三端環境各不相同，雖然提供了相似的實現，可是仍是存在一些不一樣，JavaScript 語法和 API 支持不一致，咱們能夠經過開啓ES6自動轉換來規避一些問題。

5、微信小程序的生命週期

應用的生命週期

 

 當咱們第一次啓動小程序的時候，首先初始化小程序執行環境，而後會從本地緩衝或者是CDN下載代碼包進行加載，當咱們的小程序初始化完成以後，會觸發APP實例的onLaunch方法，全局只調用一次。
當咱們切換小程序到後臺的時候調用onHide，當切回前臺的時候調用的是onShow方法。當小程序發生腳本錯誤，或者 API 調用失敗時，會觸發 onError 並帶上錯誤信息。

頁面的生命週期

 

 

• onLoad 頁面第一次加載的時候調用，只調用一次，此時咱們能夠拿到一些頁面的打開參數。
• onShow 頁面顯示或者從後臺切回前臺的時候調用的，該方法可能會調用屢次，好比咱們頁面的跳轉和返回，都會調用onShow。
• onHide 頁面隱藏或者切到後臺會調用，也是會調用屢次。
• onReady 頁面渲染完成以後調用，一個頁面只調用一次。
• onUnload 頁面銷燬的時候調用，好比咱們點擊返回鍵，那麼當前頁面會銷燬執行onUnload。

咱們結合頁面跳轉來分析一下頁面生命週期的調用順序～
　　
假如咱們有index和logs頁面。index爲首頁，index有一按鈕能夠跳轉到logs

一、第一次進入，先調用app實例的onLaunch和onShow。 二、調用index頁面的onLoad、onShow、onReady 三、點擊按鈕：調用index的onHide，而後調用logs的onLoad、onShow、onReady 四、點擊左上角的返回，先調用logs的onUnload,而後調用index的onShow 五、點擊按鈕：調用index的onHide，而後調用logs的onLoad、onShow、onReady

 

 

上面是官網提供的一個圖，咱們能夠分析一下～

一、小程序執行須要兩個線程，一個是UI線程負責視圖層，一個是AppService線程，負責邏輯處理。
二、AppService線程建立好以後會依次調用onLoad和onShow方法，咱們能夠在這裏作一些數據請求操做
三、UI線程建立好以後會進行初始化工做，當初始化ok以後，會告訴AppService線程，此時AppService發送數據，提供給UI線程進行頁面數據填充。而後頁面進行初次渲染，渲染好以後告訴AppService線程，此時onReady回調開始觸發。
四、期間AppService線程能夠處理一些事件觸發，從而更新data數據，從新觸發視圖的渲染。

針對路由變化，頁面生命週期的調用

 

 總之頁面出棧，會調用onUnload去銷燬咱們的頁面，若是不出棧，調用onHide。

 

如何能好的掌握頁面路由變化咱們頁面生命週期怎麼變化，咱們還須要知道路由變化的機制。

 

navigateTo, redirectTo 只能打開非 tabBar 頁面。 switchTab 只能打開 tabBar 頁面。 reLaunch 能夠打開任意頁面。 頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。 調用頁面路由帶的參數能夠在目標頁面的onLoad中獲取。

wx是封裝的全局對象
開發查官網：https://developers.weixin.qq.com/miniprogram/dev/reference/
App()：註冊小程序
結構 樣式 行爲（頁面三要素）
小程序找圖片絕對路徑
控制檯看到的是css像素
app.json的page會有頁面路徑，新建時會自動寫入，若是沒有app.json，則沒有地方寫入
捕獲 獲取 冒泡
自定義事件
————————————————

冒泡事件
a) 定義：冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
b) 冒泡事件列表：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
非冒泡事件
a) 定義：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
b) 非冒泡事件：表單事件和自定義事件一般是非冒泡事件
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
綁定事件
bind綁定：事件綁定不會阻止冒泡事件向上冒泡
————————————————

catch 綁定: 事件綁定能夠阻止冒泡事件向上冒泡
將上面的bindtap改爲catchtap就能夠啦
跳轉頁面

wx.navigateTo(OBJECT)：跳轉有記錄，可經過回退鍵進行回退9
// 跳轉到list頁面
wx.navigateTo({
url: ‘/pages/list/list’,
success(){
console.log(‘跳轉成功’);
}
})

wx.redirectTo(OBJECT)：
沒有記錄，不能進行回退
// 跳轉到list頁面
wx.redirectTo({
url: ‘/pages/list/list’,
success(){
console.log(‘跳轉成功’);
}
})

————————————————
原文連接：https://blog.csdn.net/qq_37642495/article/details/88971457

 

發現一篇文章還能夠知識點全面：https://www.jianshu.com/p/ae66feab1ef7記得看這篇文章很重要