微信小程式的簡單介紹
阿新 • • 發佈：2018-11-14
微信小程式的簡單介紹
1.與HTML的區別
| HTML | 微信小程式 |
|---|---|
<div></div> |
<view></view> |
<h1></h1> ---<h6></h6><span></span><p></p> |
<view></view> |
<i class="icon" |
<icon></icon> |
<iput type="text"> |
<input/> |
<iput type="checkbox"> |
<checkbox/> |
<iput type="radio"> |
<radio/> |
<iput type="file"> |
<view bindtab="chooseImage"> |
<a href="#"></a> |
<navigator url="#" redirect></navigator > |
<img src=""> |
<image src="" ></image > |
2.小程式與HTML的差別
- 開發語言的不同。
小程式自己開發了一套WXML標記語言和WXSS樣式語言，並非直接使用標準的HTML5+CSS3。小程式自己開發了一套WXML標記語言和WXSS樣式語言，並非直接使用標準的HTML5+CSS3。 - 元件封裝不同。
小程式獨立出來了很多原生APP的元件，在HTML5需要模擬才能實現的功能，小程式裡可以直接呼叫元件。小程式獨立出來了很多原生APP的元件，在HTML5需要模擬才能實現的功能，小程式裡可以直接呼叫元件。 - 執行速度
傳統HTML5在載入的時候受限於網路環境，需要順序載入HTML、CSS、JS，然後返回資料，最後渲染頁面顯示在瀏覽器中。使用者經常需要等待很長時間，體驗會受到影響。
相比之下，小程式的兩個執行緒：Appservice Thread和View Thread會同時進行、並行載入，甚至Appservice Thread會更早執行，當檢視執行緒載入完，通知Appservice，Appservice 會把準備好的資料用setData的方法返回給檢視執行緒。
小程式的這種優化策略，可以減少使用者的等待時間、加快小程式的響應速度 - 檔案引入
WXML提供兩種檔案引入方式，import和include。區別在於：import可以引入定義好的template模板，模板是有作用域的;而include就是拷貝一個公用的程式碼片段到目標檔案中，適合做公共頁面片的拆分。 - 尺寸單位
WXSS支援的單位有px、rem和rpx，其中rem和rpx可以針對螢幕容器進行適配，px則為固定尺寸。
在iPhone6上，1rpx=0.5px。建議：開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。
在WXSS和WXML中定義的rpx單位最終會轉換為在手機端可以識別的rem單位。
所以工程師拿到750的設計稿，在PS中量取的容器大小，可以直接定義為rpx，不需要進行2倍尺寸的換算。
view {
font-size: 66rpx;
width: 666rpx;
height: 666rpx;
}
小程式使用的開發工具：小程式開發者工具
微信小程式的開發工具，基於MINA框架(現已取消該名稱)，現在官方公佈的工具名為微信web開發者工具。小程式開發工具是一種基於Native System系統層的框架，由於並非執行在瀏覽器中，所以JavaScript在web中的一些諸如Document、Window等方法無法使用。