uniapp混合开发
2022-10-11 14:03:02 0 举报AI智能生成
uniapp涉及知识点
作者其他创作
大纲/内容
开发规范
页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
项目目录结构
生命周期
应用生命周期
onLaunch
onShow
onHide
onError
onPageNotFound
onThemeChange
页面生命周期
onInit
onLoad
onShow
onReady
onHide
onUnload
onResize
onPullDownRefresh
onReachBottom
onTabItemTap
onShareAppMessage
onPageSAcroll
onBackPress
页面通信
路由传参
globalData 全局数据
本地缓存
uni.setStorage(OBJECT)
uni.setStorageSync(KEY,DATA)
uni.getStorage(OBJECT)
uni.getStorageSync(KEY)
uni.removeStorage(OBJECT)
uni.removeStorageSync(KEY)
uni.clearStorage()
uni.clearStorageSync()
vuex
uni自带API方式
uni.$emit(eventName,OBJECT)
uni.$on(eventName,callback)
uni.$once(eventName,callback)
uni.$off([eventName, callback])
条件编译
API条件编译
组件的条件编译
样式的条件编译
pages.json的条件编译
uniapp组件库推荐
uViewUI
常用组件
视图容器类
view
swiper
基础内容类
icon
text
rich-text
表单组件
button
checkbox
editor
form
input
label
picker
switch
uni第三方服务
分享
APP分享
uni.share(OBJECT)
分享配置
小程序分享
button按钮分享
胶囊按钮分享
客服
APP第三方登录
微信登录
uni.login(OBJECT)
注意事项
小程序获取手机号
APP推送
分包
打包
H5
Android
IOS
uni简介
优势
开发者/案例数量更多
平台能力不受限
性能体验优秀
周边生态丰富
学习成本低
开发成本低
一套代码，运行到多个平台
Android
IOS
H5
微信小程序
支付宝小程序
百度小程序
头条小程序
QQ小程序
钉钉小程序
快手小程序
创建uniapp项目
HBuilderX （推荐）
vue-cli 命令行
uni不支持vue特性
nextTick
directive
keep-alive
transition
全局配置项
globalStyle
navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
navigationStyle
backgroundColor
backgroundTextStyle
enablePullDownRefresh
onReachBottomDistance
pageOrientation
app-plus
H5
mp-weixin
pages
path
style
tabBar
color
selectedColor
backgroundColor
borderStyle
list
pagePath
text
iconPath
selectedIconPath
position
fontSize
iconWidth
height
subPackages
root
pages
路由跳转
API方式
uni.navigateTo(OBJECT)
uni.redirectTo(OBJECT)
uni.reLaunch(OBJECT)
uni.switchTab(OBJECT)
uni.navigateBack(OBJECT)
组件方式
navigator组件
页面样式与布局
尺寸单位
px
rpx
样式导入
@import语句
内联样式
class
style
选择器
.class
#id
element
element, element
::after
::before
注意 : 在 uni-app 中不能使用 * 选择器
内置CSS 变量
--status-bar-height
资源上传
uni.chooseImage(OBJECT)
uni.chooseMedia(OBJECT)
uni.uploadFile(OBJECT)
网络请求
uni.request(OBJECT)
0 条评论
下一页
