uniapp开发整理

1.导航自定义
如果用默认的tabBar导航,需要在pages.json中设置
iconWidth和fontSize这两项图标尺寸和文字尺寸在生成的app里是没有用的
spacing间距设置应该是有用的,但是app是上下结构,h5是左右结构,设置了没有实际意义
在list中设置需要显示导航的页面,相当于添加路由,并且可以设置图标(点击前点击后)但是只能是static中的图片不能用阿里样式图标
这里的图标和文字排列在app中是上下结构,在h5中是左右结构,不能统一

如果用自定义的插件导航,不需要在pages.json中设置,直接在index中写,应该也可做成组件
在index中将导航写在最下面,顶上的栏目都是组件(应该也可把导航做成组件,在需要的页面注册使用)
这里的做法应该是固定的浮动层

2.pages.json规则
不要放重复的页面,不要放没有的页面,pages文件夹里的文件最好和pages.json一一对应,否则在生成app时出现空白页面情况
pages.json的第一项是起始页,一般是登录页,
可以设置标题栏右侧图标按钮,使用阿里图标但必须加u,例如:e681,
"buttons": [{
"text": "ue681",
"fontSrc": "/static/fonts/iconfont.ttf",
"fontSize": "22px",
"color": "black"
}]
在页面上通过onNavigationBarButtonTap事件监听
onNavigationBarButtonTap(e) {
//console.log(e)
this.flag=1;
if(this.flag==1){
this.gradeshow=false;
this.questionshow=true;
}
this.$refs.popup.show()
},

3.设置全局变量(修改无效,跳页还原)
在main.js中设置全局变量,但是这个值应该是个常量,不能被改变,因为跳转页面重新加载js后值还是原来的值

4.缓存不能用异步
因为从缓存拿东西要后续使用,不能使用异步,最好用同步才能真正拿到,如果有记住密码功能就不能用清空方法
uni.setStorageSync('name',‘123’);//存
uni.getStorageSync('name');//取
uni.removeStorageSync('name');//删
uni.clearStorageSync();//清空

5.发请求用的uni,没有用axios
uni.request({
url: self.domainUrl + '/api/StoreSystem/ImportServe_GetModel',
data: {'':this.FMID},//如果没有属性名要传空字符串
method:'POST',
header: {//token
'Content-Type': 'application/x-www-form-urlencoded',
'token':self.record,
},
success: (res) => {//得到JSON格式字符串需要解析
let info = JSON.parse(res.data)
if(info.status.code == 1){

} else if (info.status.code == -1000) {
//token失效跳转登录页
uni.showModal({
content: info.status.msg,
showCancel: false,
success:(res=>{
if (res.confirm) {
uni.navigateTo({
url: '/pages/login/login'
});
}
})
});
} else{
//报错
uni.showModal({
content: info.status.msg,
showCancel: false
});
}
}
});

6.不能用jQuery,生产的app会出现空白页

7.表单页提交——提交成功页(返回后退2步到栏目选择页),历史表单——进入修改表单提交——提交成功(返回历史表单)
表单提交有两种情况:
1.新增时缓存存1,进入提交成功后再返回到表单的上一级子栏目选择页
2.从历史表单提交为修改操作,缓存存2,进入提交成功页后再返回到历史表单页,此时历史表单页会重新获取数据,刚刚改的会在最顶部,因为获取数据是在onShow生命周期下的
历史表单这里也分两种情况:
只要是提交成功后的表单都会在缓存中存num标记,再进入历史表单会判断缓存中有没有这个标记,
如果有就要重新获取数据,
如果没有说明没提交过表单或者提交不成功,此时返回历史表单可以回到原来的位置并且没有刷新数据

8.不应使用@click,应该用@tap

9.通过导航或修改返回历史表单的时候都是重新获取数据,通过后退键回到历史表单的可以在原来的列表位置

10.表单的选项都是自定义的数据,而不是获取的数据

11.使用uniapp的生命周期函数onShow(页面出现就执行)和onLoad可以不使用created和mounted
onLoad : 监听页面加载,参数为上一个页面传递的数据,类型为Object 。
onShow:监听页面的显示,页面每次出现在屏幕上都会触发。
onReady:监听页面初次完成。
onHide:监听页面隐藏。
onUnload:监听页面卸载。
onResize:监听窗口尺寸变化。
onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新。
onReachBottom:页面上拉触底事件的处理函数。
onTabItemTap:点击tab时触发,参数为Object,为当前tab信息。
// 参数:{index: 0, text: “bar1”, pagePath: “pages/index/index”}
onShareAppMessage:监听用户点击右上角分享。
onPageScroll:监听页面滚动,参数为Object。// {scrollTop: 89}
执行顺序是:
onLoad(){console.log('1')},
onShow(){console.log('2')},
created(){console.log('3')},
onReady(){console.log('4')},
mounted(){console.log('5')},
原文地址:https://www.cnblogs.com/liufeiran/p/14412218.html