uniapp project construction

uni-app is actually one of the many products launched by DCloud, of course I only study the ones that can be used at present

​​uni-app​​​ is a front-end framework for developing cross-platform applications using Vue.js. The developer writes a set of code that can be compiled toiOS, Android, H5, applet and other platforms.

1. Initial stage:

The company wants to combine several existing front-end projects into one, and also wants to take into account h5 and small programs (currently), there may be apps in the future, let me investigate,In short, a set of codes, compatible with multiple terminals, I found this comparison in online research, which is very detailed:

image

Source address:​ ​https://juejin.im/post/5c4ec383f265da613e229a67​​, you can take a look if you are interested

After I went to the official website and joined the official QQ group, I felt pretty good. In fact, there are only a few multi-terminal compatible platforms for Vue...

2. Use uni-app

After choosing, write a demo first, see the difficulty level, and find that developers who know Vue can easily get started, and those who have written small programs at the same time are even easier.The api and life cycle are exactly the same as the applet, and follow the vue2.0 specification in custom components and programming.

3. Project construction

(1) Download the official recommended editor:​ ​hbuilderx download address​​

Click the upper right corner of the page to download the APP development version

image

It is also very convenient to create a new project directly on the editor.

(2) Click Tools-Plugin Installation in the HBuilderX interface, and install
NPM, built-in browser, UniApp compilation, js-beautify, js compression, css compression, lessCompilation, scss/sass compilation, es6 compilation, etc.

(3) Click Tools - Settings - Run Configuration,
Set the Chrome installation path in the browser's run configuration to the real Chrome installation path of this machine
For example: C:/Users/yeyiqing/AppData/Local/Google/Chrome/Application/chrome.exe
Set the WeChat developer installation path in the applet running configuration to the local real WeChat developer installation path
For example: E:/warespace/WeChat web developer tools
Set the node path in the node running configuration to the real node installation path of this machine
For example: C:/Program Files/nodejs/node.exe

(4) Find the WeChat applet configuration in manifest.json in the project, and change the applet AppID

(5) First open the WeChat developer tool, click Settings - Proxy Settings, select No proxy to apply...
To run:
First in BuilderXOpen the login.vue page under pages
Select the HBuilderX interface: Run - Run to Browser - Chrome
Run - Run to Mini Program - WeChat Developer Tools
To package:
Click; Release- H5 Mobile Version Release- Release
Release- Mini Program WeChat- Release
Information will be printed to the console below...

Finally, look at the official documentation...