A small and beautiful mini program scaffolding that allows you to develop mini programs more smoothly and quickly

Today I recommend to you a small program development scaffolding developed by myself. It has been used for nearly a year and is relatively stable. It will continue to be updated in the future. Welcome to use it and star.

Compared to the current Among the various cross-end solutions on the market, this development process is purer, does not introduce any new development difficulties, and completely improves development efficiency based on native mini programs~

pandora-boierpalte -wechat is a small and beautiful WeChat mini program development scaffolding. We have not introduced any new complexity and have 100% ability to use mini programs, but we have supplemented the mini program developer tools compared to normal The shortcomings of web development make it easier for you to develop WeChat applets.

We support the following enhanced capabilities:

• Less pre-compiled writing style, automatically converted to wxss

• Automatically introduce async/ await dependency

• dev/test/pre/prod multi-environment configuration

• npm dependency, use npm package like a normal web project, the rest Just leave it to the scaffolding

• Module alias, no longer need to use relative paths to introduce js modules

• icon font font file, small The icon uses the font file directly. We can go to the IconFont site to download the svg file we like.

• We have integrated the vant-weapp## provided by Youzan by default. # Come to the mini program component library, just pa i f3fc15c0228dc320ab4107d8220f2b42 we can install the required components and their dependencies into the project

• Sample File creation

• and its convenient CICD capabilities, pa release one-click deployment to the mini program control background, more semantic version number management

We recommend using

pandora-cli to develop WeChat mini programs.

Less Use

---

In fact, there is no need to say more about this. Just create a less file and replace the wxss file.

Automatically introduce async/await dependencies

---

The scaffolding construction script will automatically analyze whether the async and await keywords are used in the code. If so, The third-party libraries it depends on will be automatically introduced into the final build code, so you can use async/await syntax with confidence.

Multiple environment configuration

---

After the mini program project is initialized, you can configure multiple environments in config/app.yaml. The posture is as follows:

The configuration content of app.yaml is as follows:

    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'

After the project is started, that is, after pa start, automatic compilation will be triggered every time the app.yaml file is updated and modified

In the js file that needs to be used, use the following method to introduce it

    import config from 'config'

The config object is the configuration file we built through different environments

For example, after pa start starts, we get the configuration The object is as follows:

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

Use pa build --env test, and the configuration object obtained is as follows:

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

npm dependency

This scaffolding is not built using the npm official provided by the mini program Ability, the reasons are as follows:

• pandora-boilerpalte-wechat When developing scaffolding, npm is not officially supported

• The official npm ability requires the node_modules directory to be located The root directory of the mini program conflicts with the directory convention of the current scaffolding, and is also different from the normal web project structure

Based on the above reasons, we decided to continue to use the npm dependency processing provided by ourselves Mechanism, the company's project has been running for nearly a year and has not encountered any problems yet.

You can use the following method to install the npm package, in the project root directory:

pa i <pkg> --npm



或者



npm i <pkg>

Both of the above two methods can install the latest version of the corresponding pkg into the project node_modules

Component library

---

We have integrated the vant-weapp applet component library of Youzan open source. When using it, you only need to install the components you need through the pa command. We All required dependencies will be automatically installed, and then you can use them according to the usage posture of the mini program custom components, maximizing the development efficiency of the mini program.

For example, we want to install the dialog component

pa i dialog

This command will automatically install only the dialog component and its dependencies from the vant-weapp library into the project src/compnents.

Module alias

---

is configured in the build.config.js file in the project update directory. We can configure aliases for the directories in the project and use the alias references in the source code.

icon font support

---

Go to Alibaba IconFont official website to download your favorite icon SVG file to the project root directory icons. The build will automatically generate the font file and include it Connect it to the project and use it as follows.

There are the following files in the icons directory

wechat.svg

In the wxml file, you can add the following class class to the corresponding tag

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

where icon -font is required. The second type consists of icon-font_b2354c84525a4625614aa52786726a22

Of course we can add other styles to this element

样板文件创建

创建组件

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 &#39;<comments>&#39;

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

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

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

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

The above is the detailed content of A small and beautiful mini program scaffolding that allows you to develop mini programs more smoothly and quickly. For more information, please follow other related articles on the PHP Chinese website!