Why use NUI-APP to develop wechat applets?

  • One development, multiple releases
  • Prevent source code decompilation, increase security
  • Provide plug-in market, UI library, rich surrounding ecology

It does have a lot of advantages, so I plan to use UNI-App to develop a mini app for wechat. However, the chief UI designer Xiao Xiao doesn’t like the UI library of NUI-App, but she recognized vant’s component style at the first look, so I started to try to introduce Vantappi

Note that Vant itself does not cross ends. Make no mistake. Vant appetrie is a version of Vant, a Vue component library, that provides a consistent API to help developers quickly build appetrie applications based on the same visual specifications.

I. Establish new nuI-APP projects

2. Run wechat developer tools

Run to the mini program simulator >> wechat developer tools

1. Choose Tools >> Settings and configure path 2 of the wechat Developer tool. In wechat developer tools Settings > Security Settings open the service port again run wechat developer tools, HBuilder will automatically create small program update to wechat developer tools

Nui-app compiled an additional NUPackge folder (red box), and the code in the green box was running in wechat developer tools

Introduced 3.Vant WeappComponent library

1. Go to the unpackage/dist /dev/mp-weixin folder and run NPM init to initialize a package.js file

npm init
Copy the code

2. In the unpackage/dist /dev/mp-weixin folder, run NPM I vant-pervasive P-s –production to download vant pervasive P

npm i @vant-weapp -S --production
Copy the code

3. In the wechat developer tool, click Details > Local Settings in the upper right corner to switch from ES6 to ES5 and use NPM module 4. In wechat developer Tools, click Menu bar Tools > Build NPM and wait for the build to complete

Four.Vant WeappComponent library

In the root directory of the uni-app project, register the component declaration in pages. Json

"usingComponents": {
  "van-button" : "@vant/weapp/button/index"
}
Copy the code

Use this component on the corresponding index.vue page

<van-button type="warning"> </van-button>Copy the code

Five. View the page effect

Done!!