A small and beautiful mini program scaffolding that allows you to develop mini programs more smoothly and quickly-Mini Program Development-php.cn

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

hzc

Release： 2020-06-16 10:19:44

forward

2875 people have browsed it

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 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: &#39;wxxxxxxxxx&#39;
    appName: &#39;test-pandora&#39;
    version: &#39;1.0.0&#39;
    development:
      env: &#39;development&#39;
      host: &#39;https://api.dev.com&#39;
    test:
      env: &#39;test&#39;
      host: &#39;https://api.test.com&#39;
    preproduction:
      env: &#39;preproduction&#39;
      host: &#39;https://api.pre.com&#39;
    production:
      env: &#39;production&#39;
      host: &#39;https://api.prod.com&#39;

Copy after login

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

Copy after login

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: &#39;wxxxxxxxxx&#39;,
    appName: &#39;test-pandora&#39;,
    version: &#39;1.0.0&#39;,
    env: &#39;development&#39;,
    host: &#39;https://api.dev.com&#39;
}

Copy after login

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

{   
 
    appId: &#39;wxxxxxxxxx&#39;,
 
    appName: &#39;test-pandora&#39;,
    version: &#39;1.0.0&#39;,
    env: &#39;test&#39;,
    host: &#39;https://api.test.com&#39;
}

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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

Of course we can add other styles to this element

样板文件创建

创建组件

pa c component demo

或者 

pa create component demo

Copy after login

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

创建页面

pa c page demo

或者 

pa create page demo

Copy after login

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

CICD支持

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

pa release <version-type> -m &#39;<comments>&#39;

Copy after login

其中 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!