一款小而美小程式腳手架,讓你更流暢快速的開發小程式

hzc
發布: 2020-06-16 10:19:44
轉載
2780 人瀏覽過

今天向大家推薦一款自己開發的小程式開發鷹架,已經使用了近一年,相對比較穩定,後續也會持續更新,歡迎使用,歡迎star.

相較於目前市場上的各種跨端解決方案,這個開發流程更加純粹,沒有引入任何新的開發難度,完全在原生小程式的基礎上進行開發效率的提升~

pandora-boierpalte -wechat 是一款小而美的微信小程式開發鷹架,我們沒有引入任何新的複雜度,百分百使用小程式的能力,但是我們有補齊了小程式開發者工具相較於正常web 開發所存在的短板,讓你更輕鬆的搞定微信小程式的開發。

我們支援如下增強能力:

  • Less 預編譯編寫樣式,自動轉成wxss

  • 自動引入async/ await 依賴

  • dev / test / pre / prod 多環境配置

  • npm 依賴,像正常web 專案那樣使用npm 包,剩下的就交給腳手架

  • 模組別名,再也不用使用相對路徑來引入js 模組了

  • icon font 字體文件,小的圖示直接使用字體文件,我們可以去IconFont 網站下載喜歡的svg 文件

  • 我們預設整合了有讚提供的vant-weapp 來小程式元件庫,只要pa i 我們就可以把需要的元件及其相依性安裝到專案中

  • 樣板檔案建立

  • 及其方便的CICD 能力,pa release 一鍵部署到小程式控制後台,更語意化的版本號管理

我們推薦配合使用 pandora-cli 來進行微信小程式的發展。

Less 使用


其實這個不用多說,直接建立 less 檔案取代 wxss 檔案。

自動引入async/await 依賴


「鷹架的建置腳本會自動分析程式碼中是否使用了async 和await 關鍵字,如果使用了,就會自動把其所依賴的三方函式庫引入最終的建置程式碼中,所以大家可以放心的使用async/await 語法。

多重環境設定


在小程式專案初始化完成後,可以在 config/app.yaml 中進行多環境設定。姿勢如下:

app.yaml 設定內容如下:

    appId: 'wxxxxxxxxx'
    appName: 'test-pandora'
    version: '1.0.0'
    development:
      env: 'development'
      host: 'https://api.dev.com'
    test:
      env: 'test'
      host: 'https://api.test.com'
    preproduction:
      env: 'preproduction'
      host: 'https://api.pre.com'
    production:
      env: 'production'
      host: 'https://api.prod.com'
登入後複製

在專案啟動後, 即pa start 後,每次更新修改app.yaml 檔案都會觸發自動編譯

#在需要使用的使用的js 檔案中,使用以下方式引入

    import config from 'config'
登入後複製

config 物件就是我們透過不同環境建構出來的設定檔

例如pa start 啟動後,我們得到的配置物件如下:

{
    appId: 'wxxxxxxxxx',
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'development',
    host: 'https://api.dev.com'
}
登入後複製

使用 pa build --env test , 得到的設定物件如下:

{   
 
    appId: 'wxxxxxxxxx',
 
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'test',
    host: 'https://api.test.com'
}
登入後複製

npm 依賴

該鷹架沒有使用小程式官方提供的npm 建構能力,原因如下:

  • pandora-boilerpalte-wechat 鷹架開發時,官方並不支持npm

  • 官方npm 能力需要node_modules 目錄位於小程式root 目錄中,與目前腳手架的目錄約定有衝突,且與正常web 專案結構也不同

基於以上原因,我們決定繼續使用我們自己提供的npm 依賴處理機制,公司專案運作將近一年,暫未遇到問題。

你可以使用以下方式安裝npm 套件,在專案根目錄下:

pa i  --npm



或者



npm i 
登入後複製

以上兩種方式都可以講對應pkg 的最新版本安裝到專案node_modules 中

元件庫


我們整合了有讚開源的vant-weapp 小程式元件庫,使用時,只需要透過pa 指令安裝自己需要的元件即可,我們會自動將所需的所有依賴進行安裝,接下來就按照小程式自訂組件的使用姿勢進行使用即可,最大程度的提升小程式的開發效率。

例如我們要安裝 dialog 元件

pa i dialog
登入後複製

該指令會自動從 vant-weapp 函式庫只將 dialog 元件及其相依性安裝到專案 src/compnents 中。

模組別名


設定在專案更目錄 build.config.js 檔案中。我們可以為專案中的目錄配置別名,原始碼中使用別名引用即可。

icon font 支援


去阿里IconFont 官網下載喜歡的圖示SVG 檔案到專案根目錄icons 中,建置會自動產生字體文件,並內聯到項目中,依照下列姿勢使用即可。

icons 目錄下有以下檔案

wechat.svg

#在wxml 檔案中透過對應標籤新增以下class 類別即可

登入後複製

其中 icon -font 是必須的,第二個類型的組成 icon-font_

當然我們可以為該元素再增加其他樣式

样板文件创建

创建组件

pa c component demo

或者 

pa create component demo
登入後複製

创建好的文件会自动位于项目 src/components 中

创建页面

pa c page demo

或者 

pa create page demo
登入後複製

创建好的文件为自动位于项目 src/pages 中

CICD支持

在项目根目录下执行以下命令可以自动发布项目到小程序后台

pa release  -m ''
登入後複製

其中 version-type 为 major, minor, patch 可以参考 npm version 语义化版本

comments 为此次发布的描述,必填。

这里需要注意的是,pa release 使用的是小程序开发者工具的 HTTP 接口,所以务必保证小程序开发者工具启动,并且  设置 -> 安全 -> 安全(服务端口)开启

推荐教程:《微信小程序

以上是一款小而美小程式腳手架,讓你更流暢快速的開發小程式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!