上海市建设工程安全生产协会网站,石家庄最新新闻事件,河南建设工程信息网 最权威平台中项网,办公室装修一般价格uni-app的基础知识介绍
1、在第一次将代码运行在微信开发者工具的时候#xff0c;应该进行如下的配置:
#xff08;1#xff09;将微信开发者工具路径进行配置#xff1b;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lbyk5Jw2-16790251840…uni-app的基础知识介绍
1、在第一次将代码运行在微信开发者工具的时候应该进行如下的配置:
1将微信开发者工具路径进行配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lbyk5Jw2-1679025184071)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1679024954729.png)]
2在微信开发者工具中的设置里面》安全设置》服务端口打开
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3IhwQH3-1679025184073)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1679024983105.png)]
2、全局配置
1在pages.json里面有个gloablStyle进行配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVYYEIwo-1679025184073)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210503194138648.png)]
2属性有
属性类型默认值描述navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色同状态栏背景色navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色仅支持black/whitenavigationBarTitleTextString导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉Loading的样式仅支持dark/lightenablePullDownRefreshBooleanfalse是否开启下拉刷新onReachBottomDistanceNumber50页面上拉触底事件触发时距离页面底部距离单位仅支持px
3、页面的创建
在pages中去创建页面在这里我们需要注意的是在创建了页面之后必须将此页面在全局中的pages.json中pages项进行页面路径配置
pages: [ //pages数组中第一项表示应用启动页{path : pages/message/message,//在这个里面我们可以针对当前页面的一些基础样式进行设置当前页面的设置会覆盖掉全局的设置style:{navigationBarTitleText:信息页面,navigationBarBackgroundColor:#4CD964,//我们在这里给h5单独设置h5:{pullToRefresh:{color:#007AFF}}} },{path: pages/index/index}
]4、tabBar 页面配置
属性说明
属性类型必填默认值描述平台差异说明colorHexColor是tab上面文字默认颜色selectedColorHexColor是tab上的文字选中时的颜色backgroundColorString是tab的背景色borderStyleString否blacktabBar上边框的颜色仅支持black/whiteApp2.3.4支持其他颜色值listArray是tab的列表最少2个最多5个tabpositionString否bttom可选值bottom、toptop仅微信小程序支持
在list数组里面所拥有的配置项
pagePath:页面路径必须在pages中先定义
text:tab上按钮文字
iconPath图片路径icon大小限制为40kb建议尺寸为81*81px,当position为top时此参数无效不支持网络图片不支持字体图标
selectedIconPath:选中时的图片路径icon大小限制为40kb建议尺寸为81*81px,当position为top时此参数无效
5、condition启动模式配置
启动模式配置仅支持开发期生效用于模拟直达页面的场景如小程序转发后用户点击所打开的页面
属性说明
属性类型是否必填描述currentNumber是当前激活的模式list节点的索引值listArray是启动模式列表
list说明
属性类型是否必填描述nameString是启动模式名称pathString是启动页面路径queryString否启动参数可在页面的onload函数里获得
pages.json
{condition: {current : 0,list: [{name: 详情页面,path:pages/detail/detail,query:id80}]}
}6、组件的基本使用
1text文本组件的用法
属性类型默认值必填说明selectablebooleanfalse否文本是否可选spacestring否显示连续空格可选线束ensp/emsp/nbspdecodebooleanfalse否是否解码
text 组件相当于行内标签在同一行显示
2view视图容器组件的用法类型于div
属性类型默认值必填说明hover-classstringnone否指定按下去的样式类当hover-calssnone时没有点击态效果hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态hover-start-timenumber50否按住后多久出现点击态单位是毫秒hover-stay-timenumber400否手指松开后点击态保留时间单位毫秒
3buttom按钮组件的用法
属性名类型默认值说明sizestringdefault按钮大小typestringdefault按钮的样式类型plainBooleanfalse背景色透明disabledBooleanfalse是否按钮loadingBooleanfalse是否是带loading图标
4image组件的用法
7、uni-app中的样式
1rpx即响应式px,一种根据屏幕宽度自适应的动态单位以750px宽的屏幕为基准750rpx恰好为屏幕宽度屏幕变宽rpx实际显示效果会等比放大
2使用import语句可以引入外联样式表import后跟需要导入的外联样式表的相对路径用;分号表示语句结束
3支持基本常用的选择器class/id/element等
4在uini-app里面不能使用*选择器
5page相当于body的节点
6定义在App.vue中的样式为全局样式作用于每一个页面在pages目录下的vue文件中定义的样式为局部样式只作用在对应的页面并会覆盖App.vue中相同的选择器
7uni-app支持使用字体图标使用方式与普通web项目相同需要注意一下几点
字体文件大小40kbuni-app会自动将其转化为base64格式
字体文字大小等于40kb,需开发者自己转化否则试用期不生效
字体文字的引入路径推荐使用以~开头的绝对路径
font-face{font-family:test-icon;src:url(~/static/iconfont.ttf)
}8、uni-app中的数据绑定
用法和vue中的相同
9、uni-app中的事件绑定
用法同vue中的相同
10、uni-app中的生命周期
属性名说明onLaunch当uni-app初始化完成时触发全局只触发一次onShow当uini-app启动或者从后台进入前台显示onHide当uini-app从前台进入后台onError当uini-app报错时触发
页面的生命周期
函数名说明onLoad监听页面加载其参数为上个页面传递的数据参数类型为Object用于页面传参onPullDownRefresh监听用户下拉动作一般用于下拉刷新onReachBottom页面滚动到底部的事件常用于下拉下一页数据onShow监听页面显示页面每次出现在屏幕上都触发onReady监听页面初次渲染完成onHide监听页面隐藏onUnload监听页面卸载
11、下拉刷新
1在uni-app中有两种方式开启下拉刷新
第一种需要在pages.json里找到当前页面的pages节点并且在style选项中开启enablePullDownRefresh
第二种通过调用uni.startPullDownRefresh方式开启下拉刷新
2监听下拉刷新
通过onPullDownRefresh可以监听到下拉刷新的动作
3关闭下拉刷新
uni.stopPullDownRefresh停止当前页面下拉刷新
代码示例
onPullDownRefresh() {console.log(下拉事件触发了);//当数据已经更新之后不希望还是一种下拉刷新的状态所以在这里我们需要将下拉刷新取消掉在此我们需要调用停止下拉刷新的函数,因为我们的数据在一瞬间进行改变的所以这个改变之后停止下拉刷新我们的效果并不是很明显所以在这个时候我们可以添加一个定时器setTimeout((){this.list [前端课程,Java,UI课程,大数据课程];uni.stopPullDownRefresh();},2000)
}12、网络请求
在uni中可以调用uni.request方法进行请求网络
需要注意的是在小程序中网络相关的API在使用前需要配置域名白名单
13、数据缓存
uni.setStorage
uni.setStorageSync
uni.getStorage
uni.getStorageSync
uni.removeStorage
uni.removeStorageSync
14、上传图片、预览图片
1上传图片
uni.chooseImage方法从本地相册选择图片或使用相机拍照
2预览图片
uni.previewImage(object)这个方法可以预览图片
15、条件注释实现跨段兼容
条件编译是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同的平台
写法以#ifdef加平台标识开头以#endif结尾
平台标识
值平台APP-PLU55APPH5H5MP-WEIXIN微信小程序MP-ALIPAY支付宝小程序MP-BAIDU百度小程序MP-TOUTIAO头条小程序MP-QQQQ小程序MP微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序
代码案例
!-- #ifdef H5 --
view 我只希望在H5页面中可以被看到
/view
!-- #endif --
!-- #ifdef MP-WEIXIN --
view 我只希望在微信小程序被看到
/view
!-- #endif --onLoad() {// #ifdef H5console.log(我希望在H5中打印)// #endif// #ifdef MP_WEINXINconsole.log(我希望在微信小程序中打印)// #endif
}styel/* #ifdef H5*/view {color: white;}/* #endif *//style16、两种方式导航跳转和传参
声明式导航
navigator url/pages/detail/detail?id80跳转至详情页面/navigator
!-- 当我们要跳转到tabbar页面的时候需要添加open-type --
navigator url/pages/index/index open-typeswitchTab跳转至首页/navigator
navigator url/pages/index/index open-typeredirect跳转至详情页面/navigator详情页面的接收
onLoad(options){console.log(options)
}编程式导航
button typedefault clicktoDetail跳转到详情页面/button
button typedefault clicktoIndex跳转到首页/button
methods:{toDetail(){uni.navigateTo({url:/pages/detail/detail?id80age90})},toIndex(){uni.switchTab({url:/pages/index/index})}}详情页面的接收
onLoad(options){console.log(options)
}17、组件的创建使用和组件的生命周期函数
uni里面的使用和vue一致
18、组件的通讯
uni里面的使用和vue一致
19、uni-ui组件库
