(一)、uni-app 起步
1.Uniapp简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
2.Uniapp开发工具
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
- 模板丰富
- 完善的只能提示
- 一键运行
(1).下载HbuilderX
官网链接 : https://www.dcloud.io/hbuilderx.html
第一步:
(2).安装scss/sass编译
为了方便编写样式，建议安装 scss/sass编译插件。
插件地址: https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后，点击右上角的 使用 HbuilderX 导入插件按钮进行自动安装。
(3).快捷键方案切换
操作步骤: 工具 -> 预设快捷方式切换 -> Vscode
(4).修改编辑器的基本设置
操作步骤: 工具->设置->打开settings.json按需进行配置
{ "editor.colorScheme": "Default", "editor.fontSize": 12, "editor.fontFamily": "Consolas", "editor.fontFmyCHS": "微软雅黑 Light", "editor.insertSpaces": true, "editor.lineHeight": "1.5", "editor.minimap.enabled": false, "editor.mouseWheelZoom": true, "editor.onlyHighlightWord": false, "editor.tabSize": 2, "editor.wordWrap": true, "explorer.iconTheme": "vs-seti", "editor.codeassist.px2rem.enabel": false, "editor.codeassist.px2upx.enabel": false }
3.新建 uni-app项目
1.文件->新建->项目
2.填写项目基本信息
4.uniapp 的目录结构
┌─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 等页面类信息
5.把项目运行到微信开发者工具中
(1).填写自己的微信小程序的AppID:
(2).在HBuilderX中，配置微信开发者工具的安装路径
(3).在微信开发者工具中， 通过 设置-> 安全设置-面板，开启微信开发者工具的服务端口
(4).在Hbuilder中，点击菜单栏中的 运行->运行到小程序模拟器->微信开发者工具，将当前uni-app项目编译之后，自动运行到开发者工具中，从而方便查看项目效果与测试。
取消黄色警告!
