uni-app（一）

• uni-app介绍

1.uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，

可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

2.即使不跨端，uni-app同时也是更好的小程序开发框架。

3.具有vue和微信小程序的开发经验，可快速上手uni-app

• 为什么学习uni-app

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以

及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

• 环境搭建

安装编辑器HbuilderX 下载地址：https://www.dcloud.io/hbuilderx.html

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用

安装微信开发者工具 下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

HbuliderX下载App开发版

微信小工具的下载，因为我的电脑系统是Window64位的，所以我下载的第一个，大家按照各自电脑的系统进行下载

• 使用HbuliderX初始化项目

点击HbuilderX菜单栏文件>项目>新建

选择uni-app,填写项目名称，项目创建的目录

   

•  创建好项目以后先让项目跑起来，运行在谷歌浏览器中

点击 运行>选择chrome浏览器 终端就会进行编译，生成我们看到的uni-app页面

• 也可以运行在微信小程序中
• 

第一次使用可能会报这些警告

此时，需要把微信开发者工具的服务端口开启   点击设置-通用设置-安全-开启端口

然后再去HbuliderX中重新运行

然后就能用微信开发者工具打开了