---【uni-app】:
是一个使用vue。js开发所有前端应用的框架,开发者编写一套代码,可发布到ios,android,H5,以及各种小程序,
(微信/支付宝/百度/头条/QQ/钉钉)等多个平台
---【环境搭建】:
1,安装APP开发版HBuilderX
2,安装微信开发者工具
---【使用HBuilderX初始化项目】:
1,点击HBuilderX菜单栏文件》项目》新建》
2,选择uni-app填写项目名称,项目创建的目录
---【项目的运行】 可以打包成H5网页,安卓/IOS应用,和各种小程序
1,点击运行,选择运行在浏览器
2,点击运行,运行在小程序》运行在微信开发者工具
-第一次运行在微信开发者工具时需要注意两个问题,
1,第一次运行会弹出一个框需要填写微信开发者工具的路径
2,右键桌面的微信开着工具,打开文件夹所在位置,复制路径,然后把路径粘贴到弹出框里
设置完路径打开微信小程序可能会报错,打不开,须在微信开发者工具里进行设置
1,点击上方菜单的设置》安全设置》端口号,选择开启
3,运行在安卓手机/ios手机,点击运行》运行在手机或者模拟器,前提是手机用数据线连接电脑
---【项目目录介绍以及开发规范简介】:
1,page文件夹,存放页面的文件夹
2,static文件夹,存放静态资源的文件夹 /图片/字体图标,等
3,unpackage>dist 存放最终打包输出的文件
4,App.vue 文件 是项目的根组件 是页面的入口文件,可调用应用的生命周期函数
5,main.js 文件 是项目的入口文件 ,项目加载首先会加载main.js
6,manifest.json 文件 用来配置应用的一些打包的东西
7,pages.json 文件 用来设置整个项目的页面的存放路径,以及窗口的外观
8,uni.scss 文件 常用的样式变量
开发规范:
1,页面文件遵循vue中文件组件 ,后缀为vue
2,组件标签靠近小程序规范 详见官方文档
3,接口能力,靠近微信小程序规范,但需前缀wx替换为uni 详见官方文档
4,数据绑定及事件处理同vue.js规范,同时补充了app及页面的生命周期
5,为兼容多端运行,建议使用flex布局 进行开发
---【全局外观的样式,配置】:pages.json
1,‘globalStyle":{
"navigationBarBackgroundColor":"#F8F8F8" //设置顶部导航栏的背景色 十六进制
"navigationBarTextStyle":"black" //设置顶部导航栏标题的文字颜色 仅支持black/white 字符串
"navigationBarTitleText":"xxxxxx" //自定义标题的文字
}