hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

一款小而美小程序脚手架,让你更流通疾速的开发小程序_微信小程序

2020-06-17小程序ki4网11°c
A+ A-
本日向人人引荐一款本身开发的小程序开发脚手架,已运用了近一年,相对比较稳定,后续也会延续更新,迎接运用,迎接 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 <component-name> 我们就能够把须要的组件及其依靠装置到项目中

  • 榜样文件建立

  • 及其轻易的 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 <pkg> --npm



或许



npm i <pkg>

以上两种体式格局都能够讲对应 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 类即可

<text class="icon-font icon-font_wechat"></text>

个中 icon-font 是必需的,第二个范例的构成 icon-font_<svg 文件名>

固然我们能够为该元素再增加其他款式

榜样文件建立

建立组件

pa c component demo

或许 

pa create component demo

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

建立页面

pa c page demo

或许 

pa create page demo

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

CICD支撑

在项目根目次下实行以下敕令能够自动宣布项目到小程序背景

pa release <version-type> -m '<comments>'

个中 version-type 为 major, minor, patch 能够参考 npm version 语义化版本

comments 为此次宣布的形貌,必填。

这里须要注重的是,pa release 运用的是小程序开发者东西的 HTTP 接口,所以务必保证小程序开发者东西启动,而且 设置 -> 平安 -> 平安(效劳端口)开启

引荐教程:《微信小程序》

以上就是一款小而美小程序脚手架,让你更流通疾速的开发小程序的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
一款小而美小程序脚手架,让你更流通疾速的开发小程序_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>