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

DC_er 發布于2019-08-01 15:54 / 1678人閱讀

摘要：微信小程序出現引發了很多討論，許多開發者都躍躍欲試嘗試了小程序的開發。為此我們設想了一套方案，怎么最快速的把現有的開發流接入到小程序中，并能快速的修改現有項目以符合微信小程序的規范于是寫了一套暴力轉譯成的方案，以及搭配了初始模板的腳手架。

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

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

1. 腳手架

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

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

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

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

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

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

到目前的微信開發者工具的版本（0.10.101100），已經附帶自動刷新頁面的功能，所以src目錄中的所有改動，會同步修改dist目錄下的文件并刷新，可以無縫在熟悉的編輯器中進行操作。

腳手架示例：
新建項目：

開發項目：

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等包含閉合標簽，再通過正則匹配符合的標簽來替換或者刪除。這個替換標簽可以在設置中更改。
舉個例子：



  
    廣東聯通
    立即生效
    月底失效
    全國可用
  
  河南聯通維護中，流量充值緩慢
  當地運營商維護中，請稍后再試

編譯后：



  
  廣東聯通 
  立即生效 
  月底失效 
  全國可用
  河南聯通維護中，流量充值緩慢
  當地運營商維護中，請稍后再試

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)來轉換。

wxss支持大部分css的屬性，但是仍有些情況下不兼容，但編譯工具沒有做處理，免得出現誤刪的情況，假如頁面中寫了a選擇器，則需要手動改成navigator選擇器。

4. image

所有png|jpg|gif|svg格式圖片統一進行壓縮并復制到個目錄下的image目錄中，并將wxml中image的src，和wxss中的background-url修改為../../image/

寫在最后

小程序的開發語言已經與日常開發的語言有所不同，一套通用的方案已經是不可行了，還是有很多東西需要手工去處理，比如template等。轉譯工具是在內部的產品環境下測試的，可能會有許多考慮不周的地方，歡迎大家斧正。

下載：

github
mac: feWorkflow-wechat-app-v0.0.1.dmg
windows: feWorkflow-wechat-app-win.7z

GPU云服務器云服務器工具類微信小程序怎么制作微信小程序微信小程序支付微信小程序部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50193.html

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

摘要：微信小程序出現引發了很多討論，許多開發者都躍躍欲試嘗試了小程序的開發。為此我們設想了一套方案，怎么最快速的把現有的開發流接入到小程序中，并能快速的修改現有項目以符合微信小程序的規范于是寫了一套暴力轉譯成的方案，以及搭配了初始模板的腳手架。微信小程序出現引發了很多討論，許多開發者都躍躍欲試嘗試了小程序的開發。它重新定義了自身的一套開發規范，對于現有的html頁面是不支持了。為此我們設...

hyuan 2019-08-20 12:06 評論0 收藏0
微信小程序模塊化開發實踐

摘要：前言省略準備了解微信小程序是什么微信小程序官方文檔了解應用狀態管理方案也是架構的具體實現了解打包工具了解代碼轉譯工具原理大致是借助語法分析工具之類的將代碼解析成抽象語法樹再重寫成最終的代碼測試工具等等請根據需要選擇微信小程序目前版本的實現需前言: 省略... 準備了解微信小程序是什么? 微信小程序官方文檔了解應用狀態管理方案: Redux, 也是Flux架構的具體實現了解Ja...

luxixing 2019-08-20 13:29 評論0 收藏0
業內首個 React Native轉微信小程序引擎 Alita 正式發布

摘要：得益于運行階段處理邏輯的設計，支持將使用的應用轉換成微信小程序。我們也在考察這一新的跨端方案和微信小程序融合轉化的可行性。作者：京東ARES多端技術團隊前言 Alita是一套由京東ARES多端技術團隊打造的React Native代碼轉換引擎工具。它對React語法有全新的處理方式，支持在運行時處理React語法，實現了React Native和微信小程序之間的主要組件對齊，可以用...

陸斌 2019-08-23 17:51 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網站積累，以每月的形式發布。年以前看這個網址概況在線地址前端開發群月報提交原則技術文章新的為主。平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發群月報提交原則：技...

FuisonDesign 2019-08-29 12:35 評論0 收藏0