微信小程序腳手架及html轉譯GUI工具

時間 2019-12-07

標籤微信程序腳手架 html 轉譯 gui 工具欄目 HTML 简体版

原文原文鏈接

微信小程序出現引起了不少討論，許多開發者都躍躍欲試嘗試了小程序的開發。它從新定義了自身的一套開發規範，對於現有的html頁面是不支持了。css

爲此咱們設想了一套方案，怎麼最快速的把現有的開發流接入到小程序中，並能快速的修改現有html項目以符合微信小程序的規範？因而寫了一套html暴力轉譯成wxml的方案，以及搭配了初始模板的腳手架。結構沿用feWorkflow，大部分改動是針對目錄的gulp工做流。html

1. 腳手架

小程序有一套默認的文件結構，根目錄下必須存放有如下3個文件：git

.
├──app.js
├──app.json
├──app.wxss

而頁面則由4個文件構成:github

.
├──js
├──wxml
├──wxss
├──json

根據這套規則，經過GUI工具新建的模板，這個腳手架會默認建立一個源碼src目錄：json

點擊開發，會建立dist文件目錄，將編譯後的less（或在設置中配置成sass）文件轉換成wxss文件，其餘html,js, css文件的更改也會同步處理到dist目錄中，圖片資源則會經過imagemin進行壓縮，拋出到dist/image目錄中。src源碼目錄和dist目錄（二者都可以經過配置項修更名稱）的劃分是爲了保持源代碼的完整性，以及維持圖片的原始文件(psd等)，而不會在編譯過程當中被破壞。gulp

到目前的微信開發者工具的版本（0.10.101100），已經附帶自動刷新頁面的功能，因此src目錄中的全部改動，會同步修改dist目錄下的文件並刷新，能夠無縫在熟悉的編輯器中進行操做。小程序

腳手架示例：
新建項目：
segmentfault

開發項目：
windows

HTML to WXML轉譯工具

demo:
微信小程序

1.目錄結構

上文提到了小程序有默認的一套腳手架結構，編譯工具會將源碼目錄下的全部html文件進行轉譯，並建立一個當前目錄名-build的文件夾，將全部編譯後的wxml存放到page/文件名/文件名.wxml。app.json全局配置的pages也會默認建立。根據建立的目錄名，將同名的css文件，重命名爲wxss文件，並存放到同名目錄中，當css與文件名不符，則合併不符的css文件，存放到全局目錄的app.wxss中。而由於小程序再也不支持jQuery等等通用庫，源碼目錄下的js會所有忽略，頁面級的js，則會複製到同名目錄中，這個js則包括註冊頁面的Page函數基礎模板。

舉個例子：
源碼test目錄文件結構以下

├──test
|   └──css
|       └──index.css
|       └──global.css
|   └──js
|       └──index.js
|   └── index.html
|   └── other.html

編譯後的目錄結構會改變爲：

├──test-build
|   └──app.wxss
|   └──page
|       └── index
|           └── index.wxml
|           └── index.wxss
|           └── index.js
|       └── other
|           └── other.wxml

2. HTML

先來看一下wxml和html的標籤大體的對比圖：

根據圖中標籤的的匹配規則，在編譯過程當中，遍歷html文件，先轉換成xml，保證img等包含閉合標籤，再經過正則匹配符合的標籤來替換或者刪除。這個替換標籤能夠在設置中更改。
舉個例子：

<!-- html -->
<div class="flow-form_tips">
  <div class="address">
    <span>廣東聯通</span>
    <span>當即生效</span>
    <span>月底失效</span>
    <span>全國可用</span>
  </div>
  <p class="desc">河南聯通維護中，流量充值緩慢</p>
  <div class="tips hide">當地運營商維護中，請稍後再試</div>
</div>

編譯後：

<!-- wxml -->
<view class="flow-form_tips">
  <view class="address">
  <text>廣東聯通</text> 
  <text>當即生效</text> 
  <text>月底失效</text> 
  <text>全國可用</text></view>
  <view class="desc">河南聯通維護中，流量充值緩慢</view>
  <view class="tips hide">當地運營商維護中，請稍後再試</view>
</view>

3. css

尺寸單位
小程序推出了自身的計量單位rpx，並推薦使用750的設計稿做爲開發標準，而目前組內開發廣泛使用640的設計稿進行設計，同時使用rem進行適配。
因此在轉義過程當中，添加了設計稿尺寸的設置，默認設置，是640設計稿，100px計算rem，默認乘以2倍。
這個設置的意思是：咱們在開發過程當中使用640的設計稿，並使用rem兼容，iphone4屏幕320px的html font-size爲100px，css中表現爲：640 / 2 / 100rem，即640px == 3.2rem;
css中會去遍歷全部匹配rem的屬性，獲取數值，經過(match * fontSize * (750 / viewport)).toFixed(2) * times來計算rpx，即(匹配數值 * fontSize * (750 / 640)).toFixed(2) * 2。
而px轉rpx則是由(match * (750 / viewport) * times).toFixed(2)來轉換。