如何使用pandora-boierpalte-wechat微信小程序开发脚手架

发布时间:2021-04-01 10:15:17 作者:小新
来源:亿速云 阅读:194

小编给大家分享一下如何使用pandora-boierpalte-wechat微信小程序开发脚手架,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

pandora-boierpalte-wechat 是一款小而美的微信小程序开发脚手架,我们没有引入任何新的复杂度,百分百使用小程序的能力,但是我们有补齐了小程序开发者工具相较于正常 web 开发所存在的短板,让你更加轻松的搞定微信小程序的开发。

我们支持如下增强能力:

我们推荐配合使用 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 构建能力,原因如下:

基于以上原因,我们决定继续使用我们自己提供的 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 接口,所以务必保证小程序开发者工具启动,并且  设置 -> 安全 -> 安全(服务端口)开启

看完了这篇文章,相信你对“如何使用pandora-boierpalte-wechat微信小程序开发脚手架”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 微信小程序开发教程
  2. 微信小程序开发入门

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 微信小程序

上一篇:conda安装nodejs版本过低怎么办

下一篇:Bootstrap中分页组件的使用方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》