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）属性有：

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 页面配置

属性说明：

在list数组里面所拥有的配置项：

pagePath:页面路径，必须在pages中先定义

text:tab上按钮文字

iconPath：图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效，不支持网络图片，不支持字体图标

selectedIconPath:选中时的图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效

5、condition启动模式配置

启动模式配置，仅支持开发期生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

属性说明：

list说明：

pages.json
{"condition": {"current" : 0,"list": [{"name": '详情页面',"path":"pages/detail/detail","query":"id=80"}]}
}

6、组件的基本使用

（1）text文本组件的用法

text 组件相当于行内标签，在同一行显示

（2）view视图容器组件的用法（类型于div）

（3）buttom按钮组件的用法

（4）image组件的用法

7、uni-app中的样式

（1）rpx即响应式px,一种根据屏幕宽度自适应的动态单位，以750px宽的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大；

（2）使用@import语句可以引入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;分号表示语句结束；

（3）支持基本常用的选择器class/id/element等；

（4）在uini-app里面不能使用*选择器；

（5）page相当于body的节点；

（6）定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器；

（7）uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意一下几点：

字体文件大小40kb，uni-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中的生命周期

页面的生命周期

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结尾；

平台标识

代码案例：

我只希望在H5页面中可以被看到



我只希望在微信小程序被看到

onLoad() {// #ifdef H5console.log('我希望在H5中打印')// #endif// #ifdef MP_WEINXINconsole.log('我希望在微信小程序中打印')// #endif
}/* #ifdef H5*/view {color: white;}/* #endif */

16、两种方式导航跳转和传参

声明式导航：

跳转至详情页面

跳转至首页
跳转至详情页面详情页面的接收：
onLoad(options){console.log(options)
}

编程式导航：

跳转到详情页面
跳转到首页
methods:{toDetail(){uni.navigateTo({url:"/pages/detail/detail?id=80&age=90"})},toIndex(){uni.switchTab({url:"/pages/index/index"})}}详情页面的接收：
onLoad(options){console.log(options)
}

17、组件的创建使用和组件的生命周期函数

uni里面的使用和vue一致

18、组件的通讯

uni里面的使用和vue一致

19、uni-ui组件库