微信小程序

一、介绍

现如今，微信小程序越来越火，它实现了应用无需下载，随时随地使用，不需要传统APP的下载安装过程。
微信小程序，简称小程序，英文名Mini Program。

由于小程序的开发具有一整套完整极致详细的开发文档，在这里就不一一介绍了。

点击微信小程序开发文档开始学习吧！

微信开发者工具安装包点击获取，提取码hhhh

二、小程序的框架

简单说一些小程序的框架吧。

mpvue：美团点评团队出品的小程序开发框架：mpvue，是基于Vue的框架的，相当于是给Vue增加了开发微信小程序的能力。

wepy：wepy是在代码开发风格上借鉴了Vue，本身和Vue没有什么关系。

2.1、mpvue

2.1.1、mpvue的介绍：

mp:mini program

Vue:就是vue了

Mpvue就是用vue的技术体系开发小程序的框架。

2.1.2、mpvue框架的优点：

· 完整的 Vue.js 开发体验（会vue就没问题）

· 方便的 Vuex 数据管理方案：方便构建复杂应用

· 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

· 支持使用 npm 外部依赖

· 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

· H5 代码转换编译成小程序目标代码的能力

2.1.3、环境搭建和第一个程序：

1、安装nodejs，vue-cli

2、创建mpvue的项目：

vue init mpvue/mpvue-quickstart 项目名称

3、进入项目目录，安装依赖：

npm i

4、Npm run dev后，进入开发模式，就会自动产生目录dist。Dist目录是编译产生的小程序的代码。写vue代码，小程序的代码就会自动产生。

Npm run dev

5、运行小程序。

需要打开微信开发者工具，来运行。

(1)在微信开发者工具里，导入项目：

(2)项目目录指向 mpvueprj

(3)填入appId

(4)点击“导入”按钮

(5)尝试修改vue组件，自动编译，小程序结果立即呈现

Vue组件（index/index.vue）增加“hello”文字

自动编译后，在微信开发者工具里小程序的结果立即呈现

2.2、wepy

2.2.1、WePY介绍

​ WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。
注意：WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。
官网：https://wepyjs.github.io/wepy-docs/2.x/#/

WePY 版本

​ WePY 2 并不是基于 WePY 1 的升级版，而是完全重新开发的全新版本

2.2.2、WePY 安装和创建项目

WePY的安装或更新都通过npm进行。

• ​ 全局安装 WePY CLI 工具

  ​ npm install @wepy/cli -g

• ​ 使用 standard 模板初始化项目：

  ​ wepy init standard 项目名

• 切换目录

  cd myproj 
  

• 初始化

  npm install  
  

• npm run dev 监听并且编译项目，微信开发者工具导入项目（项目根目录），就可以预览效果

  npm run dev