WeApp Workflow下載 - WeApp Workflow原始碼下載

WeApp Workflow

Ai源碼

1.0.0

下載

WeApp-Workflow：基於Gulp 的微信小程式前端開發工作流程

介紹

WeApp-Workflow 是一個專為開發微信小程式打造的前端開發工作流程，基於Gulp 4 開發，旨在透過工作流程的方式解決微信小程式開發過程中寫入前端程式碼的痛點。

專案首頁：https://github.com/Jeff2Ma/WeApp-Workflow

文章介紹：https://devework.com/weapp-workflow.html

功能

SCSS 即時編譯為WXSS

使用Sass 預處理器，讓寫入CSS 更加順暢。 .scss檔會即時編譯為微信小程式支援的.wxss檔。

WXSS(CSS) 中px 單位轉小程式單位rpx

以官方推薦的iPhone 6 為標準設計格式，開發中直接寫入px即可自動轉換為rpx 。

// Input: src/pages/index/index.scss
. index__header {
	font-size : 14 px ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

// Output: dist/pages/index/index.wxss
. index__header {
	font-size : 28 rpx ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

圖片壓縮

即時壓縮圖片並採用增量方式防止重複壓縮。

自動上傳圖片到CDN 並更新路徑為https 絕對路徑

小程式不支援相對路徑的圖片引用，僅支援具有https協議頭的絕對路徑。本工作流程可以將WXML 以及WXSS 檔案中引用的相對路徑圖片上傳到雲端儲存CDN 或透過FTP/SFTP 協定上傳到個人伺服器空間。目前支援騰訊雲，七牛雲。

// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >

// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >

Font 檔案轉為base64 編碼

小程式不支援相對路徑的字型文件，本工作流程可將CSS 中引用到的Font 文件轉碼為base64 並取代原路徑。

 // Input: src/pages/index/index.scss
@font-face {
  font-family: 'fontello';
  src: url("assets/fonts/fontello.ttf") format('truetype');
}

// Output: dist/pages/index/index.wxss
@font-face {
  font-family: 'fontello';
  src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}

全自動建構雪碧圖及產生對應CSS

本功能由postcss-lazysprite 外掛程式驅動。開發中準備好圖片後僅寫一句類似@lazysprite "xxxx"的程式碼，即可全自動建構雪碧圖及產生對應CSS。

// Input: src/app.scss
@lazysprite "filetype" ;

/ / Output : d is t / app. wxss
. icon-filetype-doc {
    background-image : url(.. / sprites/filetype.png);
    background-position : 0 0 ;
    width : 80 px ;
    height : 80 px ;
}

. icon-filetype-pdf {
    background-image : url(.. / sprites/filetype.png);
    background-position : -90 px 0 ;
    width : 80 px ;
    height : 80 px ;
}

@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
    . icon-filetype-doc {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : 0 0 ;
        background-size : 170 px 170 px ;
    }

    . icon-filetype-pdf {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : -90 px 0 ;
        background-size : 170 px 170 px ;
    }
}

亮點

Gulp4

採用最新的Gulp 4版本的新特徵，讓工作流程運作更快。

簡潔不簡單

核心只有一個預設任務，透過合理的任務搭配機制減少繁瑣流程及來回運作終端，讓開發更方便。

增量更新機制，運作起來更快

引入Sass 的增量編譯以及圖片相關任務的增量更新機制，讓工作流程運行速度更快。

專案結構

 .
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── assets // 开发相关的静态文件原始资源
│   │   ├── fonts //字体文件
│   │   ├── images // 图片文件，可被上传到CDN
│   │   ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│   │   └── sprites // 生成雪碧图小图的目录
│   ├── image // 小程序专用的图片资源（如tabbar icon）目录
│   ├── pages
│   └── utils
├── tmp //  通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录

開始使用

Node 版本建議在v4 以上。因為該工作流程涉及第三方依賴，建議在科學上網的環境下操作。

安裝

0.請先全域按照Gulp-cli

 npm install gulp-cli -g

1、透過git clone下載專案檔。

 git clone https://github.com/Jeff2Ma/WeApp-Workflow

2、建議刪除.git目錄（Windows 使用者請手動刪除）

 cd WeApp-Workflow
rm -rf .git

3.安裝必要模組

 npm i

4、啟動開發

建議複製config.js並重新命名為config.custom.js ，然後根據個人實際需求改寫相關設定資訊（每個設定項都有註解說明）。接下來在終端機中執行以下命令開啟：

 gulp

iterm

其餘任務： gulp clean ：清除dist ， tmp資料夾。

配置

完成以上操作後，需要在「微信web 開發者工具」也進行相關設定（以v1.x 為準，不再相容v0.x 版）。

1.新建項目，直接選擇整個項目目錄，即project.config.json所在的目錄作為項目目錄。

WeApp-Workflow配置

開發

接下來進入常規開發即可。開發過程中，使用第三方編輯器（WebStorm、Sublime Text 等）編輯src目錄下的文件，儲存修改後gulp 進程會即時編譯到dist目錄對應的位置。而微信web 開發者工具會自動編譯刷新，此時僅充當預覽功能。

開發要點說明：

SCSS 開發：直接在src/pages/page-name下進行編輯page-name.scss ，會自動轉換為page-name.wxss並放置到dist目錄對應位置。開發過程中涉及數值的地方直接寫入px單位（以iPhone6 為標準設計稿），會自動計算轉換為rpx單位。如果特殊情況不想轉化，請寫大寫的PX 。
WXML開發：除CDN 圖片功能需要特殊寫入圖片路徑外，其它無特殊要求。
WebFont ：先在fontell.com 這類網站製作好雪碧圖然後拿到ttf 格式的檔案到src/assets/fonts下，常規方式引用即可自動base64 轉碼。
CDN 圖片：（此功能預設為關閉，需自行在設定項目開啟）微信小程式中wxss 或wxml 不支援相對路徑的圖片，需要https 開頭的絕對路徑。本工作流程可以使得開發時候直接寫入相對路徑，工作流程會幫忙上傳到CDN 並取代原始路徑。此類圖片必須放置到src/assets/images下，然後在wxml 或CSS 中以%ASSETS_IMG%/filename.png的方式寫入路徑。 %ASSETS_IMG%為自訂的目錄供後續字串替換。
雪碧圖：首先在小程式中不建議用雪碧圖，直接用單圖或WebFont 的形式比較好。如果一定要用，請按照程式碼中的小程式範例放置小圖目錄到src/assets/sprites下方然後在SCSS 中透過@lazysprite "xxxx"呼叫即可（建議呼叫程式碼放到app.scss下）。雪碧圖高級用法請點這裡。

Q&A

Q：為什麼工作流程中沒有AutoPrefixer 的功能？
A：因為微信開發者工具的「專案」中「樣式補全」選項已經提供了這個功能；
Q：為什麼工作流程中沒有設定bable 的ES6 轉ES5 的功能？
A：如上，微信開發者工具已經提供。
Q：跟WePY 這類小程式開發框架相比優勢在哪？
A：微信支付團隊開發的WePY 確實是個不錯的工具。如果跟著WePY 放到同一水平線對比，WeApp-Workflow 根本沒有優勢。 WeApp-Workflow 是一個workflow 工具，不是一個開發框架，其專注的是小程式中CSS 層面的開發，對於一部分開發者來說，他/她的小程式並不需要WePY 那麼重的開發框架。
Q：WeApp-Workflow 沒有對應專門的編譯任務（類似gulp build , npm run build這種）？
A：是的，因為WeApp-Workflow 是適合用來開發「小」的小程序而非複雜的小程序，所以綜合考慮開發速度、程式碼量等方面，沒有專門的開發階段一個任務(dev)，開發完成階段額外一個編譯任務(buid)。直接一個任務就行。