uni-app基础知识介绍
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）属性有：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F7F7F7 | 导航栏背景颜色（同状态栏背景色） |
| navigationBarTextStyle | String | white | 导航栏标题颜色及状态栏前景颜色，仅支持black/white |
| navigationBarTitleText | String | 导航栏标题文字内容 | |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉Loading的样式，仅支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距离页面底部距离，单位仅支持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 页面配置
属性说明：
| 属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab上面文字默认颜色 | ||
| selectedColor | HexColor | 是 | tab上的文字选中时的颜色 | ||
| backgroundColor | String | 是 | tab的背景色 | ||
| borderStyle | String | 否 | black | tabBar上边框的颜色，仅支持black/white | App2.3.4+支持其他颜色值 |
| list | Array | 是 | tab的列表，最少2个，最多5个tab | ||
| position | String | 否 | bttom | 可选值bottom、top | top仅微信小程序支持 |
在list数组里面所拥有的配置项：
pagePath:页面路径，必须在pages中先定义
text:tab上按钮文字
iconPath：图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath:选中时的图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效
5、condition启动模式配置
启动模式配置，仅支持开发期生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面
属性说明：
| 属性 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| current | Number | 是 | 当前激活的模式，list节点的索引值 |
| list | Array | 是 | 启动模式列表 |
list说明：
| 属性 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| name | String | 是 | 启动模式名称 |
| path | String | 是 | 启动页面路径 |
| query | String | 否 | 启动参数，可在页面的onload函数里获得 |
pages.json
{
"condition": {
"current" : 0,
"list": [
{
"name": '详情页面',
"path":"pages/detail/detail",
"query":"id=80"
}
]
}
}
6、组件的基本使用
（1）text文本组件的用法
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| selectable | boolean | false | 否 | 文本是否可选 |
| space | string | 否 | 显示连续空格，可选线束：ensp/emsp/nbsp | |
| decode | boolean | false | 否 | 是否解码 |
text 组件相当于行内标签，在同一行显示
（2）view视图容器组件的用法（类型于div）
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| hover-class | string | none | 否 | 指定按下去的样式类，当hover-calss="none"时，没有点击态效果 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位是毫秒 |
| hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间，单位毫秒 |
（3）buttom按钮组件的用法
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | string | default | 按钮大小 |
| type | string | default | 按钮的样式类型 |
| plain | Boolean | false | 背景色透明 |
| disabled | Boolean | false | 是否按钮 |
| loading | Boolean | false | 是否是带loading图标 |
（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中的生命周期
| 属性名 | 说明 |
|---|---|
| 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-PLU5 | 5+APP |
| H5 | H5 |
| MP-WEIXIN | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 |
| MP-BAIDU | 百度小程序 |
| MP-TOUTIAO | 头条小程序 |
| MP-QQ | QQ小程序 |
| MP | 微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序 |
代码案例：
<!-- #ifdef H5 -->
<view >
我只希望在H5页面中可以被看到
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view >
我只希望在微信小程序被看到
</view>
<!-- #endif -->
onLoad() {
// #ifdef H5
console.log('我希望在H5中打印')
// #endif
// #ifdef MP_WEINXIN
console.log('我希望在微信小程序中打印')
// #endif
}
<styel>
/* #ifdef H5*/
view {
color: white;
}
/* #endif */
</style>
16、两种方式导航跳转和传参
声明式导航：
<navigator url="/pages/detail/detail?id=80">跳转至详情页面</navigator>
<!-- 当我们要跳转到tabbar页面的时候，需要添加open-type -->
<navigator url="/pages/index/index" open-type="switchTab">跳转至首页</navigator>
<navigator url="/pages/index/index" open-type="redirect">跳转至详情页面</navigator>
详情页面的接收：
onLoad(options){
console.log(options)
}
编程式导航：
<button type="default" @click="toDetail">跳转到详情页面</button>
<button type="default" @click="toIndex">跳转到首页</button>
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一致