国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序腳手架及html轉(zhuǎn)譯GUI工具

hyuan / 3195人閱讀

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

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

為此我們?cè)O(shè)想了一套方案，怎么最快速的把現(xiàn)有的開發(fā)流接入到小程序中，并能快速的修改現(xiàn)有html項(xiàng)目以符合微信小程序的規(guī)范？于是寫了一套html暴力轉(zhuǎn)譯成wxml的方案，以及搭配了初始模板的腳手架。結(jié)構(gòu)沿用feWorkflow，大部分改動(dòng)是針對(duì)目錄的gulp工作流。

1. 腳手架

小程序有一套默認(rèn)的文件結(jié)構(gòu)，根目錄下必須存放有以下3個(gè)文件：

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

而頁面則由4個(gè)文件構(gòu)成:

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

根據(jù)這套規(guī)則，通過GUI工具新建的模板，這個(gè)腳手架會(huì)默認(rèn)創(chuàng)建一個(gè)源碼src目錄：

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

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

腳手架示例：
新建項(xiàng)目：

開發(fā)項(xiàng)目：

HTML to WXML轉(zhuǎn)譯工具

demo:

1.目錄結(jié)構(gòu)

上文提到了小程序有默認(rèn)的一套腳手架結(jié)構(gòu)，編譯工具會(huì)將源碼目錄下的所有html文件進(jìn)行轉(zhuǎn)譯，并創(chuàng)建一個(gè)當(dāng)前目錄名-build的文件夾，將所有編譯后的wxml存放到page/文件名/文件名.wxml。app.json全局配置的pages也會(huì)默認(rèn)創(chuàng)建。根據(jù)創(chuàng)建的目錄名，將同名的css文件，重命名為wxss文件，并存放到同名目錄中，當(dāng)css與文件名不符，則合并不符的css文件，存放到全局目錄的app.wxss中。而因?yàn)樾〕绦虿辉僦С謏Query等等通用庫，源碼目錄下的js會(huì)全部忽略，頁面級(jí)的js，則會(huì)復(fù)制到同名目錄中，這個(gè)js則包括注冊(cè)頁面的Page函數(shù)基礎(chǔ)模板。

舉個(gè)例子：
源碼test目錄文件結(jié)構(gòu)如下

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

編譯后的目錄結(jié)構(gòu)會(huì)改變?yōu)椋?/p> 

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

先來看一下wxml和html的標(biāo)簽大致的對(duì)比圖：

根據(jù)圖中標(biāo)簽的的匹配規(guī)則，在編譯過程中，遍歷html文件，先轉(zhuǎn)換成xml，保證img等包含閉合標(biāo)簽，再通過正則匹配符合的標(biāo)簽來替換或者刪除。這個(gè)替換標(biāo)簽可以在設(shè)置中更改。
舉個(gè)例子：




  

    廣東聯(lián)通
    立即生效
    月底失效
    全國可用
  

  
河南聯(lián)通維護(hù)中，流量充值緩慢

  
當(dāng)?shù)剡\(yùn)營商維護(hù)中，請(qǐng)稍后再試

編譯后：



  
  廣東聯(lián)通 
  立即生效 
  月底失效 
  全國可用
  河南聯(lián)通維護(hù)中，流量充值緩慢
  當(dāng)?shù)剡\(yùn)營商維護(hù)中，請(qǐng)稍后再試
3. css

尺寸單位
小程序推出了自身的計(jì)量單位rpx，并推薦使用750的設(shè)計(jì)稿作為開發(fā)標(biāo)準(zhǔn)，而目前組內(nèi)開發(fā)普遍使用640的設(shè)計(jì)稿進(jìn)行設(shè)計(jì)，同時(shí)使用rem進(jìn)行適配。
所以在轉(zhuǎn)義過程中，添加了設(shè)計(jì)稿尺寸的設(shè)置，默認(rèn)設(shè)置，是640設(shè)計(jì)稿，100px計(jì)算rem，默認(rèn)乘以2倍。
這個(gè)設(shè)置的意思是：我們?cè)陂_發(fā)過程中使用640的設(shè)計(jì)稿，并使用rem兼容，iphone4屏幕320px的html font-size為100px，css中表現(xiàn)為：640 / 2 / 100rem， 即640px == 3.2rem;
css中會(huì)去遍歷所有匹配rem的屬性，獲取數(shù)值，通過(match * fontSize * (750 / viewport)).toFixed(2) * times來計(jì)算rpx，即(匹配數(shù)值 * fontSize * (750 / 640)).toFixed(2) * 2。
而px轉(zhuǎn)rpx則是由(match * (750 / viewport) * times).toFixed(2)來轉(zhuǎn)換。

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

4. image

所有png|jpg|gif|svg格式圖片統(tǒng)一進(jìn)行壓縮并復(fù)制到個(gè)目錄下的image目錄中，并將wxml中image的src，和wxss中的background-url修改為../../image/

寫在最后

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

下載：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80799.html

相關(guān)文章

  • 微信小程序腳手架及html轉(zhuǎn)譯GUI工具

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

    DC_er 評(píng)論0 收藏0

  • 微信小程序模塊化開發(fā)實(shí)踐

    摘要：前言省略準(zhǔn)備了解微信小程序是什么微信小程序官方文檔了解應(yīng)用狀態(tài)管理方案也是架構(gòu)的具體實(shí)現(xiàn)了解打包工具了解代碼轉(zhuǎn)譯工具原理大致是借助語法分析工具之類的將代碼解析成抽象語法樹再重寫成最終的代碼測(cè)試工具等等請(qǐng)根據(jù)需要選擇微信小程序目前版本的實(shí)現(xiàn)需 前言: 省略... 準(zhǔn)備 了解微信小程序是什么? 微信小程序官方文檔 了解應(yīng)用狀態(tài)管理方案: Redux, 也是Flux架構(gòu)的具體實(shí)現(xiàn) 了解Ja...

    luxixing 評(píng)論0 收藏0

  • 業(yè)內(nèi)首個(gè) React Native轉(zhuǎn)微信小程序引擎 Alita 正式發(fā)布

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

    陸斌 評(píng)論0 收藏0

  • 2017年1月前端月報(bào)

    摘要：平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個(gè)網(wǎng)址概況在線地址前端開發(fā)群月報(bào)提交原則技術(shù)文章新的為主。 平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 概況 在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報(bào) 提交原則： 技...

    FuisonDesign 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<