One 、 Introduce

Today, , Wechat apps are becoming more and more popular , It realizes the application without downloading , Anytime, anywhere , No need for tradition APP Download and install process for .
Wechat applet , Short for applet , English name Mini Program.

Because the development of small programs has a complete set of extremely detailed development documents , I won't introduce it here .

Click wechat applet development document to start learning ！

Click wechat developer tool installation package to get , Extraction code hhhh

Two 、 The framework of the applet

Let's briefly talk about the framework of some small programs .

mpvue： Small program development framework produced by meituan review team ：mpvue, Is based on Vue The framework of , Quite so Vue Increased the ability to develop wechat applet .

wepy：wepy It draws lessons from the code development style Vue, Itself and the Vue It doesn't matter .

2.1、mpvue

2.1.1、mpvue Introduction to ：

mp:mini program

Vue: Namely vue 了

Mpvue Just use vue The technical system of development applet framework .

2.1.2、mpvue Advantages of frameworks ：

· complete Vue.js Development experience （ Meeting vue Is no problem ）

· convenient Vuex Data management solutions ： Easy to build complex applications

· shortcut webpack Build mechanism ： Custom build strategy 、 The development phase hotReload

· Support use npm External dependence

· Use Vue.js Command line tools vue-cli Quick initialization project

· H5 The ability of code conversion to compile into the object code of an applet

2.1.3、 Environment construction and the first program ：

1、 install nodejs,vue-cli

2、 establish mpvue Project ：

vue init mpvue/mpvue-quickstart  Project name 

3、 Enter project directory , Installation dependency ：

npm i

4、Npm run dev after , Enter development mode , The directory will be automatically generated dist.Dist The directory is the code of the compiled applet . Write vue Code , The code of the applet will be generated automatically .

Npm run dev

5、 Run applet .

You need to open wechat developer tool , To run the .

(1) In wechat developer tools , Import the project ：

(2) Project directory points to mpvueprj

(3) fill appId

(4) Click on “ Import ” Button

(5) Try to modify vue Components , Automatic compilation , The applet results are immediately presented

Vue Components （index/index.vue） increase “hello” written words

After automatic compilation , In the wechat developer tool, the results of the applet are immediately presented

2.2、wepy

2.2.1、WePY Introduce

​ WePY yes tencent Refer to the Vue The framework for re encapsulation of native applets , It's closer to MVVM Architecture mode , And support ES6/7 Some new features of .
Be careful ：WePY 2 It is a component-based development based on the native components of small programs . therefore WePY 2 The minimum supported version of applet base library is 1.6.3.
Official website ：https://wepyjs.github.io/wepy-docs/2.x/#/

WePY edition

​ WePY 2 Not based on WePY 1 Upgraded version , It's a completely new version of redevelopment

2.2.2、WePY Install and create the project

WePY The installation or update of is through npm Conduct .

• ​ Global installation WePY CLI Tools

  ​ npm install @wepy/cli -g

• ​ Use standard Template initialization project ：

  ​ wepy init standard Project name

• Toggle directory

  cd myproj 
  

• initialization

  npm install  
  

• npm run dev Listen and compile the project , Wechat developer tool import project （ Project root ）, You can preview the effect

  npm run dev