EDITORIAL: There are too small to develop programs friend must know the characteristics of component-based development, high cohesion and low coupling. Use an existing library of UI components, such as: birth vantUI-weapp, minUI-weapp and other UI component library allows us to greatly accelerate the speed of development, rich component that is used to use [more UI component libraries, frameworks can be viewed my another blog mobile terminal, PC-side (front and back), applets common UI framework . ], But I have not encountered just want to use a library of components of a single function, or want the component library in excellent collection of components into their component library, or want to develop your own UI component library read official website document knowing where to start it, then please follow me from zero to develop a small program their own UI component library and upload them for others to learn to use npm.
Special attention : from zero development, does not mean never come into contact applet here is white, the development component library on the premise that: ① familiar with the layout and css3 js (es6) write; ② familiar with the existing components and applets API, while the least developed over applet; ③ understand node, npm, familiar with git.
This section of the base portion
1. Download the program components template ( official address ), [default everyone node, npm, the command line in an understanding]
Global installation command-line tool, run:
NPM install -g @ WeChat applet / applet-cli
In a new letter of an empty directory, tentatively named: mineui (Note: must use lowercase in English, it would be responsible for naming please carefully), this empty directory as the project root directory, execute:
miniprogram init --type custom-component
Project implementation will fill out some information, all the way to enter. Upon completion, the project will generate a basic document in mineui, we will develop our component library on this basis.
2. Run Project
First install dependencies, run:
npm install
Then run the project, execute:
npm run dev or npm run watch
Can be seen in the project directory, more than a miniprogram_dev directory, and this is after we write components to preview the directory, this time would be for a letter open our micro tool (note to adjust basic library version 2.2.1 above ), the import project, the directory selection miniprogram_dev directory mineui file we just created under the folder, appid use test number . Click Import to preview the initialization of the project.
3. To understand the role of each file
①miniprogram_dev directory: Perform npm RUN dev || npm RUN Watch generate files (compiled in real time) later, this small program catalog and the final page assembly structure;
②src directory: storage component of our goal to be prepared, packaged after also need to upload files, very important!
③tools directory: where the demo folder page framework that we are running, you need to pay attention to the configuration file json, consistent with the development of common projects. Config.js file in this directory is also very important, entry field src directory that is required components packaged directory, [ 'index'] refers to the first layer of packing time only related index file src directory. If we want to develop a multi-component library, you need to create multiple folders to store components, such as the src directory: We write its own button components, you create a folder button in the src directory, created under this folder index.js, index.json, index.wxml, index.wxss, while the modified entry field: [ 'index', 'button / index']. Note that when we file deletion directory under src, but also to modify the entry field, otherwise an error when executing the command, lead to failure.
4. Packaging and uploaded to npm
① First, we need to have our own npm account registered address .
② in the project root directory, execute:
npm login
Just enter the registered user name, password, email. It should be noted that if the login failed, mostly because of the use of the registry of non-npmjs.org official website, execute:
npm config set registry https://registry.npmjs.org/
Npm source is switched to the registry npmjs.org official website.
③ verify whether the landing is successful, execute:
npm who am i
Returns the name of the currently logged in user
④ execution:
npm publish
At this point, we will be pushed to the initialization component template npm official website, and give yourself applause O (∩_∩) O haha ~. Next, we go to the official website to see npm own component libraries, and download a small program to a new project, to see the effect under the bar.
If you want to delete npm package, or just want to delete a version under npm package, the executable (be careful, you may use the project has been to be more than expectations):
--force unpublish npm // forced to delete
@ GuiTest unpublish npm 1.0 .0 // specify the version number
The download package and verify npm
① Open npm official website , the search project just created, my name is mineui, everyone found their own name. found it:
You can see that the current mineui only one version, and readme file is also an official template, has not been modified, the back will make changes.
② the component library installed into an existing or new project, I am here with a brand new project to do presentations.
Then open a micro letter developer tools, the implementation of new projects processes, information self-administered, for example: my little project named as: mine-weapp.
After initialization program in the root directory of the project execution:
nPM heat
Enter the default same way, after the success of the project root directory will generate package.json, project.config.json two files
In our npm component library, you'll see how to install, we execute (everyone's package name may be different Oh, note):
npm i mineui -S --production -verbose
-S is the --save, add -production option, you can reduce the installation unrelated business npm package, thereby reducing the size of the entire small package. -verbose to output detailed information (can not), the English translation is redundant means.
Finished, we operate in developer tools: Tools → build npm , at the same time check the details on the right [ using npm module options ]
We will find in the project root directory will generate miniprogram_npm directory, this is the developer tools to build out the module, then how we refer to him?
③由于对刚刚初始化的组件模板没有做任何修改，我们现在修改新创建的小程序的根目录下的app.json文件，新增usingComponents字段：
"usingComponents": { "comp": "mineui/index" },
在pages→index→index.wxml文件中最下方添加组件：
<comp />
编译后发现，我们的组件已经成功渲染到小程序页面中：
至此，初始化组件库模板、模板文件概述、模板上传npm、npm包文件下载至本地并运用到项目就讲解完了。
后续我会逐一讲解：基础UI组件库的搭建和丰富、如何在本地使用npm link调试npm包项目。
由于工作原因，后续不定时更新，请见谅、、