1、小程序与普通网页开发的区别
1.1、运行环境不同
网页运行在浏览器环境中，而小程序运行在微信环境中
1.2、API 不同
由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位、扫码、支付
1.3、开发模式不同
网页的开发模式：浏览器 + 代码编辑器,小程序有自己的一套标准开发模式：
- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
2、注册小程序开发帐号
2.1、在使用uni-app开发小程序之前，需要先在微信公众平台注册小程序开发账号
使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程，主要流程截图如下：
2.2、选择注册账号的类型
2.3、填写账号信息
2.4、提示邮箱激活,点击链接激活账号
2.5、选择主体类型
2.6、主体信息登记
2.7、获取小程序的 AppID
3、安装微信开发者工具
3.1、微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：
- 快速创建小程序项目
- 代码的查看和编辑
- 对小程序功能进行调试
- 小程序的预览和发布
3.2、下载微信开发者工具
推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下： developers.weixin.qq.com/miniprogram…
下载完成之后按步骤安装即可
3.3、下载完成后，运行微信开发者工具，微信扫码登录
3.4、点击加号，创建一个小程序，AppID就是刚才申请的开发者ID
3.5、项目创建完成
3.6、点击预览，扫描二维码可以在手机上预览真实效果
3.7、至此，微信小程序开发环境搭建完毕，下面需要搭建uni-app开发环境
4、uni-app 简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
- 模板丰富
- 完善的智能提示
- 一键运行
4.1、下载 HBuilderX
- 访问 HBuilderX 的官网首页 www.dcloud.io/hbuilderx.h…
- 点击首页的
DOWNLOAD按钮 - 选择下载
正式版->App 开发版
4.2、安装 HBuilderX
- 将下载的
zip包进行解压缩 - 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
- 双击
HBuilderX.exe即可启动 HBuilderX
HBuilderX启动后截图如下
4.3、安装 scss/sass 编译
为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
5、新建 uni-app 项目
5.1、选择文件 -> 新建 -> 项目，填写项目基本信息
5.2、项目创建成功
5.3、目录结构
一个 uni-app 项目，默认包含如下目录及文件：
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
6、把项目运行到微信开发者工具
6.1、点击manifest.json文件，填写自己的微信小程序的 AppID：
6.2、在 HBuilderX 中，配置“微信开发者工具”的安装路径：
在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：
