Uni-APP
Uni-app是一个跨平台的开发框架,学会Uni-APP之后可以跨发除iOS,Android,h5,以及各种小程序的应用,不需要再去学习其他应用的框架
uni-app常用开发软件 对uni-app比较友好的软件
微信开发者工具 下载微信小程序的使用工具
创建项目
打开hbuilderx 创建项目选择uni-app选项
创建好一个项目后点击运行到谷歌
运行在微信小程序的时候需要先配置路径
并且在设置中打开端口号才行
这样环境都配完之后就可以运行了
目录文件
- pages 存放所有的页面
- static 存放所有的静态资源图片等
- unpackage 打包过后的文件的存储位置
- app.vue 页面入口文件
- main.js 项目入口文件
- manifest.json 打包后的配置文件
- pages.json 设置项目的存放路径跟窗口外观
- uni.scss 常用的css变量
页面遵循vue,组件靠近小程序,接口能力也是靠近微信小程序的但须将wx 替换为url 数据绑定及事件处理同vue.js规范同时补充了app及页面的生命周期,为了兼容多端运行,建议使用flex布局
uni-app 全局配置
pages.json文件下面的globalStyle
"navigationBarBackgroundColor"
头部导航栏颜色navigationBarTextStyle
头部导航文字颜色,仅支持黑白色navigationBarTitleText
头部导航文字内容,你会发现不成功
那是因为在pages 里面有个页面的配置他会覆盖全局的配置文件只需要去掉pages里面的style样式就行"enablePullDownRefresh":true
开启全局的下拉,可以实现下拉刷新backgroundColor
配置下拉的背景色backgroundTextStyle
设置下拉的文字颜色onReachBottomDistance
距离底部多远触发事件
创建页面
在pages 下面创建一个文件夹,在文件夹下面创建一个vue 文件 ,然后在page.json里面创建路由,注意默认显示的都是第一个路由,所以首页路由一般是第一个路由
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message" ,
"style":{
"navigationBarTitleText":"信息页",
"h5":{
//这里是设置独有的设置,这里是h5的独有设置,详情见文档
"pullToRefresh":{
"color":"#007AFF"}
}
}
},
{
"path": "pages/index/index"
}
],
uni-app设置页面tab-bar
tab-bar 个数只能是2-5,当设置position:top
时,将不会显示icon
color
文字颜色selectedColor
tab上的文字选中时的颜色backgroundColor
tab的背景色borderStyle
tab上边框的颜色,仅支持黑白list
tab的列表在(2-5)之间
–pagePath
就是要跳转的页面路径,必须在pages中定义
–text
tab上的按钮文字,在5+app和平台上非必填,例如中间可放一个没有文字的+号图标
–iconPath
图片路径icon大小限制为40kb,建议尺寸为81x81px,当position为top时,此参数无效,不支持网络图片,不支持字体图标
–selectedIconPath
选中时的图片路径,要求与iconPath一致position
tabbar的位置可选值bottom,top,top仅微信小程序支持
page.json下面tabbar配置
如果只写一个是显示不出来的,最少要两个
"tabBar":{
"color":"只支持16进制",//未选中的颜色
"selectedColor":"16进制",//选中的颜色
"backgroundColor":"16进制"//背景颜色
"list":[
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":'路径', //未选中时的图片路径 ,路径都放在static下面
"selectedIconPath":"路径" //选中时的图片路径
},{
"text":"信息页",
"pagePath":"pages/message/message"
}
]
}
condition启动模式配置
就是没有在tabbar的页面需要借助某个页面来显示,比如说购物车就是在商品的详情页之中
"condition":{
"current":0, //代表第1个页面启动,根据路由的排序算的
"list":[
{
"name":"详情页", //启动的页面名
"path":"pages/detail/detail", //路径
"query":"id=80" //携带的参数
}
]
}
text组件
默认是一行显示的,在外面加个view标签就行,但是在template默认只能有view
selectable
文本是否可选 默认是falsespace
显示连续空格,参数ensp字符一半大小 ,emsp 一个字符大小 ,nbsp 解析成当前设置的字符大小decode
是否解码默认是false,以前是不能解码,现在基本都是true
view组件
view组件相当于div
hover-class
指定按下去的样式类,当为none时,没有点击效果,默认为nonehover-stop-propagation
指定是否阻止本节点的祖先节点出现点击效果,相当于阻止冒泡,默认为false,直接写这个属性就行,不用加true加了你会发现报错,实在要加的话,这个时候就需要使用属性绑定:hover-stop-propagation="true"
下面的几个属性同理,如果要加具体值就需要绑定,这点跟vue很相似,不加冒号默认是字符串,这点详见vue语法糖hover-start-time
按住后多久出现点击效果,单位毫秒,默认50,hover-stay-time
手指松开后点击效果保留时间单位毫秒,默认400
scroll-view 组件
可滚动的视图组件
-scroll-y
y轴滚动
-scroll-x
x轴滚动
button组件
size
按钮大小(mini)小尺寸type
按钮类型 (default:白色默认)(primary:wx绿色,app,h5,百度,支付宝蓝色,头条红色,)(warn:红色)plain
按钮是否镂空,背景色透明disabled
是否禁用loading
名称前是否带loading图标form-type
用于form组件点击分别会触发form组件的submit/reset事件open-type
开放能力
还有很多具体看文档
image组件
image组件默认是300x240px,图片默认是会填充的
src
图片路径mode
图片裁剪,缩放的模式
– aspectFit缩放保持纵横比,使长边完全显示,也就是说可以完整的将图片显示出来,跟contain差不多
– aspectFill 保持缩放比,使短边完全显示,将多余的长边裁剪,跟cover差不多lazy-load
图片懒加载只针对page与scroll-view下的image有效fade-show
图片显示动画效果@error
当发生错误时,发布到appservice的事件名,当事件对象event.detail={errMsg:‘something wrong’}@load
当图片载入完毕时,发布到appservice的事件名,事件对象event.detail={height:‘图片高度px’,width:‘图片宽度px’}