一个小而美的小程序脚手架，让您更顺利、更快速地开发小程序（app脚手架）。

今天给大家推荐一个我自己开发的小程序开发脚手架。 我用了快一年了，比较稳定。 我们将继续不时更新。 欢迎使用并star。

相比目前市面上的各种跨端方案，这种开发流程更加纯粹，不会引入新的开发难度，完全提升了基于原生的开发效率。 小程序~

pandora- boierpalte-wechat是一个小而美的微信小程序开发脚手架。 它不会引入任何新的复杂性，并且允许您 100% 的时间使用小程序，但与平常相比，它补充了小程序开发工具。 Web开发的弊端让开发微信小程序变得更加容易。

支持以下扩展：

预编译少的描述风格，自动转换为wxss

自动引入async/await依赖

dev/test/pre/prod多环境配置

npm 依赖项。 像使用常规 Web 项目一样使用 npm 包，然后让脚手架完成剩下的工作。

模块别名，不需要以后要使用它们，请使用相对路径引入js模块。

图标字体字体文件。 小图标直接使用字体文件。 您可以访问 IconFont 网站并下载您选择的 svg 文件。

有赞默认集成。 提供的vant-weapp是小程序组件库的一部分。 只需运行 即可将所需的组件及其依赖项安装到您的项目中。

创建模板文件

便捷的CICD功能，PA版本可一键部署到小程序控制后台，实现更语义化的版本号管理。

我们推荐使用pandora和-cli一起开发微信小程序。

少用

实际上，我们不需要进一步解释这一点。 只需创建一个 less 文件来替换它即可。wxss 文件就足够了。

自动引入 async/await 依赖项

脚手架构建脚本会自动分析您的代码中是否使用了 async 和 wait 关键字。 在这种情况下，将自动添加依赖项。 最终的构建代码中引入了第三方库，因此每个人都可以放心地使用 async/await 语法。

多环境配置

小程序项目初始化后，可以在config/app.yaml中配置多个环境。 姿势是：

app.yaml 配置包含：

appId: 'wxxxxxxxxx' appName: 'test-pandora' 版本: &#39 ;1.0.0 ' 开发: env: '开发' 主机: 'https://api.dev.com' 测试: env: '测试' 主机: 'https://api.test.com' 预生产: env: '预生产' 主机: 'https://api.pre.com' 生产: env : '生产' 主机: 'https://api.prod.com'

项目启动后，即pa启动后，app每次都会更新.yaml文件会触发自动编译

在需要使用的js文件中，使用如下方法引入：

import config from 'config'

配置对象是各种环境下构建的us配置文件。

例如启动pa start后，得到的配置对象是：如下。

{ appId: 'wxxxxxxxxx', appName: 'test-pandora', 版本: '1.0.0', 环境: 'development', 主机: 'https://api.dev.com' }

构建 --env 使用测试和配置对象。 这是我得到的：

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

npm 依赖

这个脚手架是由小程序完成的，因为： 没有使用官方提供的 npm 构建功能。 :

pandora-boilerpalte-开发微信脚手架时官方不支持npm

官方npm功能需要node_module为s目录位于小程序的根目录下，与目前的脚手架目录约定冲突，也与正常的Web项目结构不同。

基于上述原因，我们决定继续使用它。 专有的 npm 依赖处理机制。 他们的项目已经运行了近一年了，还没有遇到任何问题。

您可以使用以下方法将 npm 包安装到项目的根目录中：

pa i --npm 或 npm i

两者都可以以上两种方法都允许您将最新版本的 pkg 安装到您的项目中。 node_modules

组件库

集成有赞open的vant-weapp小程序组件库。 酱。 如果你想使用它，只需使用pa命令安装所需的组件即可。 所有必需的依赖项将自动安装。 您现在只需根据自己的小程序使用方式使用自定义组件，就可以最大限度地提高小程序开发效率。 效率。

例如，假设您要安装一个对话框组件。

对话框组件

此命令仅自动将 vant-weapp 库中的对话框组件及其依赖项安装到您的项目中。 来源/组件。

模块别名

在项目更新目录下的build.config.js文件中配置。 您可以为项目中的目录配置别名，并在源代码中使用别名引用。

图标字体支持

访问阿里巴巴IconFont官网，将您喜欢的图标SVG文件下载到项目根目录下的图标中。 构建会自动生成一个字体文件并将其内联到您的项目中，如下所示： 就用那个姿势吧。

图标目录包含以下文件：

wechat.svg

只需将以下类添加到 wxml 文件中的相应标记中即可。

</text>

其中，icon-font为必选，第二种由icon-font_组成

当然，你可以给这个元素添加其他样式，也可以添加。

创建模板文件

创建组件

p创建c组件演示或pa组件演示

创建的文件自动放置在项目的src/components中

创建页面

p c 创建页面demo或者页面demo

创建的文件放置在项目的src/components/pages中

CICD支持

在你的项目根目录下运行以下命令：，自动将项目释放到mini-节目背景。

pa 版本 -m ''

Version -type 是主要版本、次要版本或补丁。 您可以查看此版本的 npm 版本语义版本

评论。 描述（必填）。

这里需要注意的是，PA版本使用的是小程序开发工具HTTP接口，所以一定要启动小程序开发工具，进入【k3】>安全【k3】>安全（服务端口）打开

推荐教程：《微信小程序》

PHP快速学习视频免费教程（输入全部掌握）

如何学习 PHP？我应该从哪里开始学习 PHP？请放心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：一个小而美的小程序脚手架，让您更顺利、更快速地开发小程序（app脚手架）。 https://zhujicankao.com/123895.html