适合新手阅读的 uni-app 知识
一、uniapp怎么进行路由跳转?
二、配置tabbar(底部导航栏),在pages.json里面配置
tabbar,小程序的tabbar
"tabBar":{
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/img/shouye.png",
"selectedIconPath": "static/img/shouye1.png",
"text": "首页"
}, {
"pagePath": "pages/dong/dong",
"iconPath": "static/img/dongtai.png",
"selectedIconPath": "static/img/dongtai1.png",
"text": "动态"
},
{
"pagePath": "pages/xiao/xiao",
"iconPath": "static/img/dibudaohanglan-.png",
"selectedIconPath": "static/img/dibudaohanglan-1.png",
"text": "消息"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/img/wode.png",
"selectedIconPath": "static/img/wode1.png",
"text": "我的"
}]
}
三、导航标题
"pages" : [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/index/index",
"style" : {
"navigationBarTitleText" : "uni-app" //顶部导航标题
}
},
{
"path" : "pages/info/info",
"style" : {
// "navigationBarTitleText" : "新闻" //如果没有设置,那么顶部导航标题为 uni-app
}
}
],
四、请求接口
在项目那边新建一个文件夹utils,在里面新建request.js文件。
let request = function (url,data={},method="GET"){
return new Promise((resolve,reject)=>{
uni.showLoading({
title: '加载中',
})
uni.request({
url:'http://ceshi2.dishait.cn/api/v1/'+url,
data,
method,
header:{
"token":uni.getStorageSync("token")
},
success:(res)=>{
resolve(res)
},
fail:(res)=>{
reject(res)
},
complete: () => {
uni.hideLoading();
}
})
})
}
module.exports={
request:request
}
根据自己的需求来配置地址,然后再把封装好的方法给导出来,在需要的组件中引入,然后就可以请求接口了。
五、 生命周期都有哪些
uni-app 完整支持 Vue 实例的生命周期 同时还新增 应用生命周期 及 页面生命周期。
1.应用生命周期
1.1. onLaunch 当uni-app 初始化完成时触发(全局只触发一次)
1.2. onShow 当 uni-app 启动,或从后台进入前台显示
1.3. onHide 当 uni-app 从前台进入后台
1.4. onError 当 uni-app 报错时触发
2.页面生命周期
2.1. onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
2.2. onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
2.3. onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
2.4. onHide 监听页面隐藏
2.5. onUnload 监听页面卸载
2.6. onResize 监听窗口尺寸变化
2.7. onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新,参考示例
2.8. onReachBottom 页面上拉触底事件的处理函数
六、nvue的使用
- 不用写display:flex; 自动就是flex布局,但是自动加入了flex-derection:column,需要自己覆盖修改
- 没有%,最好通过获取屏幕宽度动态绑定宽度
- border不能简写,分成border-style,border-color,border-width(border-top)
- 文字显示和绑定只能通过text标签绑定
- nvue向vue页面传输许多数据并跳转时,可以使用仓库储存,在onUnload时清空(判断对象是否为空。
- JSON.stringify(data)==’{}’)
- swiper的很多属性不能使用,duration,previous-margin,display-multiple-items等属性