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
一、微信小程序宿主環境
微信小程序使用的技術棧是js/wxml/wxss。跟我們web開發使用的技術棧存在一些不同。
- js：微信小程序的js運行是基於微信客戶端，或者只微信APP上下文來運行的，並不是在瀏覽器中運行，因此它不能訪問瀏覽器環境下的DOM對象，也不能訪問node.js下的操作系統API等。
- wxml：是微信提供的一種新的基於XML的語法格式，作為微信小程序的展示層，提供整個頁面的結構。
- wxss：是一套用於修飾微信組件的樣式語言。wxss具有大部分的css特性，但是仍存在一些其他的不足。
微信小程序運行在三端：iOS、Android 和 用於調試的開發者工具
在 iOS 上，小程序邏輯層的 javascript 代碼運行在 JavaScriptCore 中，視圖層是由 WKWebView 來渲染的，環境有 iOS8、iOS9、iOS10； 在 Android 上， 舊版本，小程序邏輯層的 javascript 代碼運行中 X5 JSCore 中，視圖層是由 X5 基於 Mobile Chrome 57 內核來渲染的； 新版本，小程序邏輯層的 javascript 代碼運行在 V8 中，視圖層是由自研 XWeb 引擎基於 Mobile Chrome 67 內核來渲染的； 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中，mwjs是合並browser和node的運行時，使用前端技術來開發跨平台的應用，微信小程序開發工具就是使用其開發的。
注意：三端環境各不相同，雖然提供了類似的實現，但是還是存在一些不同，JavaScript 語法和 API 支持不一致，我們可以通過開啟ES6自動轉換來規避一些問題。
五、微信小程序的生命周期
應用的生命周期
當我們第一次啟動小程序的時候，首先初始化小程序執行環境，然后會從本地緩沖或者是CDN下載代碼包進行加載，當我們的小程序初始化完成之后，會觸發APP實例的onLaunch方法，全局只調用一次。
當我們切換小程序到后台的時候調用onHide，當切回前台的時候調用的是onShow方法。當小程序發生腳本錯誤，或者 API 調用失敗時，會觸發 onError 並帶上錯誤信息。
頁面的生命周期
- onLoad 頁面第一次加載的時候調用，只調用一次，此時我們可以拿到一些頁面的打開參數。
- onShow 頁面顯示或者從后台切回前台的時候調用的，該方法可能會調用多次，比如我們頁面的跳轉和返回，都會調用onShow。
- onHide 頁面隱藏或者切到后台會調用，也是會調用多次。
- onReady 頁面渲染完成之后調用，一個頁面只調用一次。
- onUnload 頁面銷毀的時候調用，比如我們點擊返回鍵，那么當前頁面會銷毀執行onUnload。
我們結合頁面跳轉來分析一下頁面生命周期的調用順序～
假如我們有index和logs頁面。index為首頁，index有一按鈕可以跳轉到logs
1、第一次進入，先調用app實例的onLaunch和onShow。 2、調用index頁面的onLoad、onShow、onReady 3、點擊按鈕：調用index的onHide，然后調用logs的onLoad、onShow、onReady 4、點擊左上角的返回，先調用logs的onUnload,然后調用index的onShow 5、點擊按鈕：調用index的onHide，然后調用logs的onLoad、onShow、onReady
上面是官網提供的一個圖，我們可以分析一下～
1、小程序執行需要兩個線程，一個是UI線程負責視圖層，一個是AppService線程，負責邏輯處理。
2、AppService線程創建好之后會依次調用onLoad和onShow方法，我們可以在這里做一些數據請求操作
3、UI線程創建好之后會進行初始化工作，當初始化ok之后，會告訴AppService線程，此時AppService發送數據，提供給UI線程進行頁面數據填充。然后頁面進行初次渲染，渲染好之后告訴AppService線程，此時onReady回調開始觸發。
4、期間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
記得看這篇文章很重要