使用uni-app开发微信小程序

1.uni-app框架介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
体验效果可以扫描以下二维码：


官网地址：https://uniapp.dcloud.io/

uni-app与微信原生开发区别：

• 功能实现：uni-app支持微信的所有原生组件和api，无限制
• 性能：微信原生开发手工优化 = uni-app > 微信原生开发未手工优化
  (测试代码Github仓库地址：https://github.com/dcloudio/test-framework)
• 学习曲线：uni-app基于Vue，微信小程序是新语法
• 学习资料完善度：微信原生 > uni-app
• 开发体验：uniapp > 微信原生
• 社区支持：uniapp = 微信原生
• 多端复用：uni-app支持多端复用，微信原生开发只支持微信小程序

2.布置开发环境

uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目，本文是通过HBuilderX 可视化界面。HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
调试工具可以使用chrome浏览器或微信开发者工具等。如果只是为了开发微信小程序，推荐使用微信开发者工具进行调试和上传。
具体步骤如下：
1)安装HBuilderX和微信开发者工具
2)通过HBuilderX新建项目(点击工具栏里的文件 -> 新建 -> 项目)

3)配置开发工具的相关路径。(点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径)

4)运行uni-app(点击工具栏里的运行 -> 运行到小程序模拟器 -> 微信开发者工具)

5)第一次时打开微信开发者工具服务端口(打开微信开发者工具，点击工具栏里的设置->安全设置->服务端口：开启)

6)微信开发者工具会自动编译，并打开pages.json文件中pages里的第一个页面（通常定义为引导页或登录页）

3.理论基础

3.1开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

3.2目录结构

┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录
├─platforms 存放各平台专用页面的目录
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）目录，│ 注意：静态资源只能存放于此
├─wxcomponents 存放小程序