前端筆記之微信小程序（一）初識微信小程序&WXSS與CSS|WXML與HTML的差別&像素和DPR

時間 2019-11-30

標籤前端筆記微信程序 wxss css wxml html 差別像素 dpr 欄目 CSS 简体版

原文原文鏈接

一、小程序概述

2017 年 1 月 9 日小程序正式上線，騰訊開放了我的開發者開發小程序，小程序今後就開始火爆，這一年，小程序狂攬 4 億用戶、1.7 億的平常活躍，上線 58 萬個。這是一個巨大的機會，對於企業宣傳，拉新用戶存在變革性的影響。css

小程序的本質是：輕應用，就是不用安裝就能使用的手機APP。html

「跳一跳」養成了你們下拉尋找經常使用小程序的習慣。前端

小程序對開發者而言也是很是友好的。vue

微信就是一個「虛擬機」，小程序使用JavaScript編程，小程序將JavaScript翻譯爲機器可以識別的Java、OC等語言，能操做硬件，好比蜂鳴器、陀螺儀、相冊、閃關燈、攝像頭。web

小程序屏蔽了手機操做系統之間的差別，咱們寫iOS的小程序、安卓的小程序是不須要考慮系統的差別的。算法

2、小程序開發帳號註冊

一我的最多隻能有5個小程序項目，只能有5個小程序AppID，公司帳戶能夠有20個小程序項目。vue-cli

https://mp.weixin.qq.com/數據庫

去本身的郵箱點擊激活右鍵的超級連接：編程

而後在打開的頁面選擇我的開發者，須要讓你填寫身份證號碼和用戶真實姓名，這裏爲了隱私就不截圖了。json

3、得到AppID下載使用開發者工具

https://mp.weixin.qq.com/ 登陸

3.1 添加小程序信息

3.2 添加開發者

能夠有15我的爲咱們的小程序進行測試。

最高管理員有全部的權限：

添加了一些同窗當作體驗者權限：

3.3 得到AppID

便可看到AppID，備份好。

3.4 開發者工具

微信官方的開發者工具，集項目建立、開發、調試於一身。

下載地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安裝完畢以後，使用：

勾選「創建普通快速啓動模板」後，會爲項目生成一份Hello World代碼，這樣能夠方便咱們瞭解小程序框架的代碼目錄結構。你也能夠對比看看不勾選時創建的空項目是如何的。

微信小程序開發工具集成度很高：

實時調試熱更新

腳手架起步

預覽自動打包

控制檯有網絡請求和console，集成了Chrome瀏覽器的功能

因爲開發條件的限制，不可能對全部尺寸手機的屏幕進行測試，但每每不少bug出如今屏幕適配的問題上，因此這些提供了不少屏幕尺寸進行測試。

4、小程序程序開發初步

4.1 認識默認的文件夾結構

當建立「默認普通快速啓動模板」以後，項目會自動建立了一些文件。把這樣的可以幫咱們起步的工具叫作「腳手架」。React，有腳手架React-cli。Vue有腳手架vue-cli，還有第三方腳手架，好比yeoman。

零散文件：

app.js	微信小程序本質上JavaScript開發，程序都是.js結尾的。 app.js這個文件是整個小程序的第一個入口文件。寫法必須是App({})。 App函數是小程序內置的，每一個項目必須有且只能有一個，必須出如今app.js中。大括號中描述這個App的一些生命週期和全局數據。
app.json	小程序當前項目的「程序配置」。能夠配置小程序有哪些頁面，標題欄，tab欄等內容。
app.wxss	小程序的全局的樣式表，小程序使用wxss而不是css，基本上和css差很少。這個樣式表是全部頁面都可以看見的樣式。
project.config.json 項目配置文件	一般你們在使用一個工具的時候，都會針對各自喜愛作一些個性化配置，例如界面顏色、編譯配置等，當你換另一臺電腦從新安裝工具時，還要從新配置。 project.config.json文件就是爲了減小開發者重複配置開發工具而產生的，經過json數據格式，每一個小程序項目都在配置文件裏定義了開發者習慣的配置參數，不管開發環境如何變動，只要載入同一個項目的代碼包，開發者工具就經過project.config.json自動恢復開發項目的個性化配置，其中會包括編輯器的顏色、編輯設置、代碼上傳時自動壓縮等等一系列選項。關於其餘配置項細節能夠參考文檔「開發者工具的配置」。事實上這個文件不須要手動更改，能夠在菜單中可視化面板進行更改。
page.json頁面配置文件	做爲頁面的個性化配置，page.json裏只能定義app.json中window 相關的配置項，這部份比較簡單，能夠直接參考文檔「小程序的配置 page.json」，這裏不做贅述。

刪除app.js文件大括號中的默認配置：

App({ });

看一下pages文件夾，文件夾中的子文件夾就是小程序的一個個頁面。一個頁面就是一個文件夾。

每一個頁面文件夾中，有四個文件，都是同名文件。

.js	頁面的程序邏輯
.json	頁面的配置
.wxml	頁面的結構，相似於HTML
.wxss	頁面的樣式表

將index.wxml的頁面刪除乾淨：

<view class="container">
    <view>你好，我是小程序</view>
</view>

將index.js文件刪乾淨：

Page({  });

這裏Page函數是內置的函數，表示建立一個頁面。大括號中的內容是頁面的一些生命週期、數據。

刪除logs文件頁面，和utils文件夾，此時項目很是乾淨：

4.2 app.json全局配置

每一個小程序都是由多個頁面組成的，但在這些頁面之上，存在被全部頁面共用的內容，好比標題顏色，網絡超時設置等，這些被統稱爲「全局配置」，而app.json文件裏保存的就是這些配置內容。

「全局配置」包含5個部份，包括：

pages 「頁面路徑」：用於指定小程序裏全部頁面對應的目錄路徑，只有加入到這個配置項裏，頁面纔會生效

window「窗口表現」：用於指定小程序窗口的外觀表現，好比上面提到的標題顏色、背景顏色等等

tabBar「底部tab」：小程序允放進開發者設置底部tab進行頁面切換，這個配置項就是用於定義底部tab按鈕樣式。

networkTimeout「網絡請求超時」：在開發小程序的開發過程當中，不可避免會出現網絡請求失敗的狀況，若是沒有設置一個網絡超時時間，在出現錯誤的時候，小程序就會一直等待請求響應數據，若是有了超時時間，在超過設置的時間沒有收到數據時，咱們能夠爲用戶輸出異常反饋信息，並引導用戶後續能夠嘗試的操做，提升程序代碼的可用性

debug「調試模式」：開啓調試模式時，調試信息會輸出到控制檯裏，包括頁面路由，數據更新，事件觸發等，能夠幫助開發者快速定位常見問題。
關於其餘配置項細節能夠參考文檔「小程序的配置 app.json」。

手冊：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

4.2.1 pages配置

接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項表明對應頁面的【路徑+文件名】信息，數組的第一項表明小程序的初始頁面。小程序中新增/減小頁面，都須要對 pages 數組進行修改。

文件名不須要寫文件後綴，由於框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。

4.2.2 window配置

寫程序就兩個東西：API、算法，API不用背，算法忘不掉。

{
    "pages": [
        "pages/index/index",
        "pages/haha/haha"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#2bb",
        "navigationBarTitleText": "小灰灰的家",
        "navigationBarTextStyle": "white",
        "backgroundColor" : "#eee"
    }
}

示例代碼

4.2.3 tabBar配置

tabBar的屬性：

其中list屬性數組項的屬性：

更改以後的完整的app.json文件：

{
  "pages":[
    "pages/index/index",
    "pages/meishi/meishi",
    "pages/lvyou/lvyou"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2bb",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
        "color": "#eee",
        "selectedColor": "#2bb",
        "backgroundColor": "#fff",
        "list": [
            {
                "text": "首頁",
                "pagePath": "pages/index/index",
                "iconPath": "images/i1_a.png",
                "selectedIconPath" : "images/i1_b.png"
            },
            {
                "text": "美食",
                "pagePath": "pages/meishi/meishi",
                "iconPath": "images/i2_a.png",
                "selectedIconPath": "images/i2_b.png"
            },
            {
                "text": "旅遊",
                "pagePath": "pages/lvyou/lvyou",
                "iconPath": "images/i3_a.png",
                "selectedIconPath": "images/i3_b.png"
            }
        ]
    }
}

4.3小程序開發語言

小程序採用 WXML + WXSS + JS 三種開發語言組合，其和網頁編程採用的 HTML + CSS + JS 相似，WXML 用來描述當前這個頁面的結構，WXSS 用來描述頁面的樣式，JS 用來處理這個頁面和用戶的交互。

4.3.1 WXML

WXML（WeXin Markup Language）和 HTML 相似，也有標籤和屬性，但針對小程序平臺作了些優化。

相較 HTML，小程序的標籤顯得更加簡潔，好比 div、section、header等塊級標籤統一爲view、p、span、b 等文案類標籤統一爲text，同時新增不少實用標籤，好比 picker 滾動選擇器、map 地圖、web-view 網頁容器等。

能夠簡單理解爲，小程序全部的標籤都是原生組件。

4.3.2 WXSS

WXSS（WeXin Style Sheets）是微信定義的一套樣式語言，其具備 CSS 大部分特性，同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

小程序使用 rpx（responsive pixel）做爲尺寸單位。屏幕寬度固定爲 750rpx，設置了 rpx 單位的元素能夠根據屏幕寬度進行自適應，因此設計稿統一以 750px 輸出（iPhone 6 標準）。

小程序沒有 html 、body標籤，若是想要設置頁面的樣式，能夠直接使用 page 選擇器：

page{ background: #FFFFFF; }

4.3.3 JavaScript

小程序中JavaScript沒有 window、document 等變量，大部分瀏覽器中全局方法會被禁用，好比 alert。但也有部分被支持，好比 setTimeout、encodeURIComponent等，具體能夠在開發者工具中嘗試使用，官方文檔並無詳細的介紹。

5、WXSS與CSS的開發差別

5.1選擇器

小程序官網上只列出6種可支持的選擇器，實際上可支持的選擇器不少。經過圖表，咱們能夠對比WXSS與CSS選擇器的差別：

選擇器	WXSS官方公佈可用	目前WXSS版本實際可用	CSS版本可用
.class	O	O	CSS1
#id	O	O	CSS1
*	X	X	CSS2
element	O	O	CSS1
element,element	O	O	CSS1
element element	X	O	CSS1
element>element	X	X	CSS2
element+element	X	X	CSS2
element1~element2	X	X	CSS3
[attribute]	X	X	CSS2
[attribute=value]	X	X	CSS2
[attribute-=value]	X	X	CSS2
[attribute\=value]	X	X	CSS2
:link	X	X	CSS1
:visit	X	X	CSS1
:active	O	O	CSS1
:hover	X	X	CSS1
:focus	X	O	CSS2
:first-letter	X	O	CSS1
:first-line	X	O	CSS1
:first-child	X	O	CSS2
:last-child	X	O	CSS3
:before	O	O	CSS2
:after	O	O	CSS2
:lang	X	X	CSS2
:first-of-type	X	O	CSS3
:last-of-type	X	O	CSS3
:only-of-type	X	O	CSS3
:only-child	X	O	CSS3
:nth-child(n)	X	X	CSS3
:nth-last-child(n)	X	X	CSS3
:nth-of-type(n)	X	X	CSS3
:nth-last-of-type(n)	X	X	CSS3
:root	X	O	CSS3
:empty	X	X	CSS3
:target	X	X	CSS3
:enabled	X	X	CSS3
:disabled	X	X	CSS3
:checked	X	X	CSS3
:not(selected)	X	X	CSS3
::selection	X	X	CSS3

　　　　　　　　　　　　　　　　　　注：表格中的可用性是通過測試得出，小程序升級迭代可能發生變化。

5.2適配

rpx，即responsive pixel，是微信小程序團隊推出的彈性單位。它規定屏幕寬度爲750rpx，能夠根據屏幕寬度進行自適應。

rpx最大的優點在於，寬度爲750px的設計稿再也不須要進行任何轉換便可完成適配。750px的設計稿上，量出來是多少px，就是多少rpx。舉個例子，iphone6的屏幕寬度爲375px,共有750個物理像素，也就是1px有2個物理像素，則750rpx=375px=750物理像素，即：1rpx=0.5px=1物理像素。

若是設計稿尺寸爲640px，那麼1px=640/750rpx,。因此小程序的視覺設計稿應該儘可能使用750px。

另外，微信小程序也支持rem尺寸單位，rem和rpx的換算關係：
rem: 規定屏幕寬度爲20rem；
在寬度爲750px的設計稿中，1rem = (750/20)rpx = 37.5px；
在寬度爲640px的設計稿中，1rem = (640/20)rpx = 32px。

rpx實際上就是系統級的rem（把頁面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸縮佈局的width=750。也就是說，微信小程序的rpx幫你們把rem中設置根元素字體尺寸這步省了，或者減小了scale伸縮佈局不能開啓GPU raster的問題。

5.3樣式級聯

表格中提到的「element element」，是一種常見的級聯方式。

上面一段代碼中，咱們讓圖片具2像素，色值爲#f00的實線邊框，該怎麼寫樣式呢？
首先來看級聯寫法：

view image{ border:2px solid #f00 }

很明顯，這樣的寫法很是低效。更高效的寫法應該爲：

.demo_img_1{ border:2px solid #f00 }

在WXSS中，雖然如今還能使用級聯寫法，但從提升WXSS性能的角度上看，建議你們儘可能不適用級聯。微信小程序團隊推薦使用BEM，即Block（塊）、Element（元素）、Modifier（修飾符）,是有Yandex團隊提出的CSSClass命名方法。

6、WXML與HTML

歸根結底，小程序的頁面與H5網頁，同樣是運行在客戶端WebView組件中的，而這些頁面也一樣通過腳本引擎和渲染引擎處理。那爲何不能直接沿用網頁的HTML+CSS+JavaScript的組合呢？WXML與HTML的差別主要體如今哪些地方？

6.1小程序沙盒模型

隨着前端開發技術的發展，H5頁面的能力愈來愈大，咱們既能夠利用IndexedDB創建瀏覽器本地數據庫，也能夠經過WebRTC進行網絡間點對點實時通訊，甚至於利用FileReader和Blob等對本地文件進行讀取和修改等操做。另外一方面，小程序在設計上，也須要爲開發者提供許多微信獨有的API，好比獲取用戶微信暱稱，調用微信支付接口等等。若是這些API與現有的前端能力相結合，開發者的能力將被極大擴展，更可能超過微信保護用戶的可控範圍。爲了在「保護用戶數據」和「對開發者開放能力」之間找到平衡，天然有必要把這二者放在本身力所能及的「沙盒模型」中實現。而這個沙盒，也就是咱們的小程序框架，咱們使用WXML+WXSS+JavaScript構建的小程序，都是運行在這個沙盒模型中。

6.2組件化

傳統的網頁開發，是使用HTML進行頁面構建的，開發者常常會用到div、span、ul/li等標籤進行頁面佈局，這些基礎標籤經過互相結合並與CSS定義的樣式搭配，從而實現許多功能組件，好比用戶確認窗口、日曆選擇器、滑動廣告板等等。在小程序中，開發者一樣也會用到標籤，但這些標籤，已通過微信的一層封裝，以組件的形式提供給開發者使用，每一個組件都會實現本身特有的功能，提升了開發效率，而佈局通常是採用view組件來實現。「組件化」使WXML標籤更具語義，經過名稱就能夠知道組件的具體功能。

6.3數據綁定

WXML還有一個特色與HTML有所不一樣，就是「數據綁定」。傳統的HTML須要經過JavaScript對DOM結點進行操做，才能動態改變頁面內容。而在WXML裏，數據能夠跟頁面結構進行綁定，JavaScript只對數據進行操做，而這些數據的修改，最終會反饋給綁定數據的頁面結構並動態更新。這種機制相似於Vue.js的聲明式渲染，實現了頁面和數據的分離。

6.4邏輯控制

在WXML裏，咱們還能夠經過特定的語法對結構進行邏輯控制，包括條件控制和循環控制，使頁面開發更加靈活。而HTML只能依賴於JavaScript生成或刪除結構，開發人員不僅要關心數據，還要關心對頁面結構的操做，數據和展現每每耦合在一塊兒，增長管理代碼的成本。

7、像素和DPR

在web開發的過程當中，常常會提到「像素」這個詞，那麼，像素究竟是什麼？移動端的像素與桌面端是否有區別？一樣大小的手機屏幕，爲何有的像素高，有的像素低？下面讓咱們經過資料閱讀找到這些問題的答案吧。

7.1像素的定義

「像素」是圖像顯示的基本單位，譯自英文「pixel」，一個像素就是屏幕上可以顯示一種特定顏色的最小區域。以下圖右側圖片中，每一小格子表明一像素：

當設備尺寸相同，但像素變得更密集時，屏幕能顯示的畫面過渡更細緻，圖像看起來就更清晰明快。由此定義了「屏幕像素密度PPI（pixel per inch）」，用於表明屏幕上每英寸能夠顯示的像素點的數量：

7.2像素的分類

像素實際上分爲兩種：
1．物理像素：又稱設備像素(device pixels)，指設備屏幕的物理像素，一個屏幕裏的物理像素數量是固定的。
2． 邏輯像素：又稱CSS像素(CSS pixels)，是爲web開發而創造的抽象概念，用於在CSS和JavaScript中以「px」描述位置、大小和間距的單位尺寸。

因爲不一樣的設備屏幕，特別是移動端手機屏幕尺寸千差萬別，物理像素也不一而同，在web開發過程當中都是使用邏輯像素，物理像素不多會被用到。

隨着移動設備屏幕技術的發展，手機的PPI(屏幕像素密度)愈來愈高。一個典型的例子就是，從iPhone4開始，蘋果公司推出了retina視網膜屏幕。之因此叫作視網膜屏幕，是由於屏幕的PPI過高，人的視網膜沒法分辨出屏幕上的像素點。iPhone4的PPI提升了一倍，但屏幕尺寸卻沒有變化，這意味着一樣大小的屏幕上，像素多了一倍。

像素的增長對於一樣大小的網頁圖像，在舊手機裏全屏展現，在新手機裏卻只須要一半的屏幕就顯示出來了，剩下的另外一半屏幕將成爲空白，這下降了web用戶的體驗。如何適配不一樣的手機屏幕，成爲web開發者須要關心的問題。