一、uni-app是什么?
uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
二、创建uniapp项目
HBuilderX编辑器新建项目
三、项目目录
四、uni-app 开发的注意事项
html标签
uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。
CSS
推荐使用flex布局模型
单位方面,uni-app 支持的通用 css 单位包括 px、rpx
(早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)
项目文件
显示页面必须放到pages目录下,页面所在目录的目录名需要放入相同名称的.vue文件。
打包成微信小程序,预览时 底部导航背景图片报错
原因:大小不超过 40kb 建议 81px*81px
解决办法:图片右击编辑 重新设置像素
五、路由跳转
// 一、navigateTo 与 redirectTo 只能打开非tabBar页面
// navigateTo 与 redirectTo区别
// uni.navigateTo() 保留当前页面
// uni.redirectTo() 关闭当前页面
// 二、switchTab 只能打开tabBar页面
// 三、reLaunch 可以打开任意页面
eg:
uni.switchTab({
url: '../list/list'
});
uni.navigateTo({
url: '../demo/demo?id=1&name=uniapp'
});
六、token存储获取
uni.setStorageSync('token', '123321'); //存
uni.getStorageSync('token') //取