Uni app from creation to operation to wechat developer tool

uni-app It's based on Vue.js Develop a front-end framework for cross platform applications

It solves the tedious writing of native small programs , As long as you can vue You can go through uni-app Write an applet

First of all, I recommend developing tools HBuilder, Although I prefer VScode, But this is really suitable for writing uni-app, and uni-app Official recommendation HBuilderX To develop uni-app Item of type

benefits ： Rich templates 、 There are perfect code prompts 、 You can preview our project by running on multiple platforms with one click
You can also use VScode Wait for your familiar editor

download HBuilderX

Address ：https://www.dcloud.io/hbuilderx.html

Choose to download the official version 》App Development Edition

decompression （ English only catalogue ）   double-click HBuilderX.exe You can start

stay HBuilderX Install in scss/sass Compile the plug-in

Easy to write css style <style lang="scss"></style>
Address ：https://ext.dcloud.net.cn/plugin?name=compile-node-sass
Sign in , No account registered first ,
After successful login , Open it first HBuilderX, Click green to use HBuilderX Import plug-ins

Click OK to jump to HBuilderX

Click on the install , Wait for the installation to succeed

 

  file 》 newly build 》 project

Project name 、 route 、 Recommended choice uni-ui project 、vue Version selection

create

 

  Log in to your own applet wechat public platform , Copy and paste your own wechat applet AppID

stay HBuilderX Configure wechat applet （ Paste your own AppID） Pictured ：

 HBuilderX Configure the installation path of wechat developer tools in
First, Download wechat developer tools, and then ：
Tools 》 Set up 》 Pictured

  In wechat developer tools , Set up 》 Security Settings 》 Open the service port ： Pictured

  function
First, close the wechat developer tool
stay HBuilderX in
function 》 Run to the applet Simulator 》 Choose the first default wechat developer tool
After clicking, the project will automatically run into the wechat developer tool
Pictured

  After running, the wechat developer tool will be automatically opened , And run the running project

If there is a white screen problem after running , Close wechat developer tools , stay HBuilderX Stop running the project , Then run it again

  Roar, roar , It's over ！！！