一、初识uni-app
1、uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
2、uni-app特征
①跨屏平台更多：
真正做到“一套代码、多端发行”
条件编译：优雅的在一个项目里调用不同平台的特色功能
②运行体验更好：组件、api与微信小程序一致 兼容weex原生渲染
③通用技术栈，学习成本更低：vue的语法、微信小程序的api 内嵌mpvue
④开放生态，组件更丰富
支持通过npm安装第三方包
支持微信小程序自定义组件及十多块
兼容mpvue组件及项目
APP端支持和原生混合编码
DCloud将发布插件市场
3、
所有绿色部分表示所有跨平台的功能模块
二、新建项目
打开HbulidX，新建uni-app项目
①项目类型选择uni-app
②输入项目名称
③模板选择默认模板
④创建
项目目录如下：
三、运行配置
1、点击运行→运行到小程序模拟器→运行设置
2、在浏览器运行配置和小程序运行配置中的微信开发者工具路径中写入路径
3、点击运行微信开发者工具
出现上图所示说明微信开发者工具中的端口没有开启，需要开启端口，步骤如图所示 工具→设置→安全设置→点击开启，如下图所示
开启端口之后再次运行，出现下图所示则表示运行成功
自动生成微信小程序文件
首页文件
四、scss文件
全局文件，不需要在分页里引入就可以直接用
设置全局样式、常用颜色、字体等
五、pages.json
在pages文件夹中新建页面，选择使用scss页面
在pages.json中会自动配置