uni-app
创始人
2024-02-09 17:15:38
0
  1. 路由传参
uni.navigateTo({ url: `@/pages/me/name=${'James'}&age=${18}` })url有长度限制,太长的字符串会传递失败,并且不规则的字符格式也可能导致传递失败,
所以对于复杂参数建议使用encodeURI、decodeURI 进行转码处理,然后传递.
  1. 绝对路径
项目中文件,样式文件都建议使用@绝对路径
import add from '@/common/add.js'
@import url('@/common/uni.css') 
  1. 代码目录
    static下的目录,js文件不会被webpack编译,里面如果有es6的代码,不经过转换直接运行,在手机设备上会报错.
    所以less,scss等资源同样不要放在static目录下,建议这些公共的资源放在common目录下.

  2. 设置导航名

uni.setNavigationBarTitle({title: '......'
})
  1. 两列的布局可以使用 uni-grid 组件

  2. 文字左右横线 样式

第三方直接登录

  1. view标签自带一个点击属性 hover-class
.btn-active {opacity: 0.7;
}
  1. 背景图充满全屏
filter: blur(3px)  背景图片模糊度,数值越大越模糊
  1. v-for跟v-if 一起使用
    v-for循环跟v-if在同一个标签时,可以把v-for提出来用 block 标签进行包裹着循环
    这里如果用template标签,很可能会报错

  2. 文字悬浮在图片上
    外层定位,需要改成相对定位: position: relative;
    需要悬浮的文字需要设置成绝对定位: position: absolute;
    参考: https://www.bilibili.com/video/BV1NY4y1q7Cv/?p=37&spm_id_from=pageDriver&vd_source=03cb065581da9959d84a1d21186a3ddb

  3. 项目代码中配置代理

manifest.json源码视图中:
"h5":{"devServer":{"proxy":{"/douyu":{"target":"https://m.douyu.com","changeOrigin":true,"secure":true,"pathRewrite":{"^/douyu":""}}}}
}组件中:
data() {return {// 条件编译: uniapp开发的代码需要能够编译到 H5 APP 小程序 3种不同的平台, 不可避免的会有一些代码 针对某些平台有效的// 条件编译 利用特殊的格式, 让uniapp识别出代码是给哪个平台编写的// #ifndef H5url: 'https://m.douyu.com/api/room/list',// #endif// #ifdef H5// 此url地址是代理写法, 而代理写法是针对于浏览器的, 不适用于 手机端和小程序url: '/douyu/api/room/list',// #endif}
},
  1. 回到顶部

goToTop() {uni.pageScrollTo({scrollTop: 0,duration: 300,success: () => {this.showGoTop = false}})
}
  1. 超长文本,只显示两行,超出部门显示 …
.title {overflow: hidden;text-overflow: ellipsis;line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
  1. 生命周期
    uni-app 生命周期分3类:
    (1) 应用级别: App.vue中
    (2) 页面级别: 模仿微信小程序(页面中也可以写Vue中的几个生命周期) https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
    (3) 组件级别: Vue组件 https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle

  2. easycom组件规范, uniapp中直接搜easycom
    https://uniapp.dcloud.net.cn/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83
    uni-app中要求小写的,eg:
    vue中组件名要求大驼峰命名,eg:

  3. Hbuilder x 中编辑代码
    安装插件prettier,设置保存自动格式化
    写代码时,没有弹出提示, alt + / 可以弹出代码提示
    clog 是console.log() 的快捷键

  4. 处理日期

const date = new Date(val)
const year = date.getFullYear()
const month = (date.getMonth()+1).toString().padStart(2,0)
const day = date.getDay().toString().padStart(2,0)
  1. 页面通信
    参考官网: https://uniapp.dcloud.net.cn/tutorial/page.html#%E9%A1%B5%E9%9D%A2%E9%80%9A%E8%AE%AF

  2. 条件注释实现跨端兼容

以 ifdef 开头,以#endif结尾
页面中:
...
JS中:
// #ifdef MP-WEIXIN...
// #endif样式文件中:
/* #ifdef MP-WEIXIN */...
/* #endif */
  1. 页面跳转
    (1)navigateTo, redirectTo 只能打开非 tabBar 页面。(redirectTo会销毁当前页面,再去跳转. navigateTo不会,并且跳转之后的页面有返回按钮)
    (2)switchTab 只能打开 tabBar 页面(会销毁已经打开过了的非 tabBar 页面)
    (3)reLaunch 可以打开任意页面
    页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar
    不能在 App.vue 里面进行页面跳转
    参考官网: https://uniapp.dcloud.net.cn/component/navigator.html#navigator
跳转至详情页(非tabBar页面)
跳转至联系我们页(tabBar页面)
跳转至详情页(非tabBar页面)


goDetail(){uni.navigateTo({url:'/pages/detail/detail?id=' + '123' + '&name=' + '哈哈'})
},
goContact(){uni.switchTab({url:'/pages/contact/contact'})
},
goDetailByRedirect(){uni.redirectTo({url:'/pages/detail/detail'})
}
  1. 应用生命周期函数
    onLaunch 当uni-app初始化完成时触发(全局只触发一次)
    onShow 当uni-app启动,或从后台进入前台显示
    onHide 当uni-app从前台进入后台
    onError 当uni-app报错时触发

  2. 接口请求
    header 中 content-type 默认为 application/json
    参考: Form Data 格式传参: https://www.jianshu.com/p/17f22797b52a
    解决了问题: jscn-app代码 ‘修改密码’ 功能,需要采用 Form Data 格式传参
    在request.js中,设置: config.header[‘Content-Type’] = ‘application/x-www-form-urlencoded’
    data不要用 JSON.stringify去转换,否则会把{}传到后台了.

  3. HBuilderX 每次提交代码git pull / git push 都需要输入账号密码
    解决办法: 在终端中输入 git config --global credential.helper store 即可
    参考了: https://blog.csdn.net/li22356/article/details/114024676

相关内容

热门资讯

23.99万起,搭载华为乾崑,... 2025年4月23日,深蓝汽车旗下全新中大型豪华SUV——深蓝S09预售发布会在上海车展期间正式启幕...
小屏党再也不必妥协!一加13T... 一、前言:单手的神!击穿性能、续航痛点这些年用户苦大屏机已久,厂商们不断堆料虽然配置诚意十足,但逐渐...
事关“收款码”!宁波多地发布预... 最近一段时间我市多地反诈中心接连发布紧急预警提醒市民注意“代转账(付款)”陷阱切莫成了电诈“工具人”...
演员孙俪:中年人没有脆弱的时间... 在电视剧行业,“孙俪”两个字,几乎是品质的代名词。她所塑造的角色,总能在观众心中留下深刻印记。从《甄...
破解科技成果和中小企业需求信息... 每经记者 张蕊    每经编辑 张益铭 “我们希望借助科研院校的力量,提升我们的技...
光大证券:稳就业放在“四稳”之... 格隆汇4月26日|光大证券首席经济学家高瑞东发布4月25日政治局会议精神学习体会。高瑞东认为,短期政...
北京博睿宏远数据科技股份有限公... 公司代码:688229 公司简称:博睿数据北京博睿宏远数据科技股份有限公司2024年年度报告摘要第一...
今日启用!青岛都市圈再添一高标... 青岛都市圈铁路建设项目迎来新进展今日(4月26日)上午9时11分随着G4865次列车驶出日照站客运设...
山东国瓷功能材料股份有限公司2... 证券代码:300285 证券简称:国瓷材料 公告编号:2025-021山东国瓷功能材料股份有限公司...
重点发力中国中央空调市场 P... 转自:新华财经新华财经上海4月26日电(记者 杨有宗)26日,记者从PROFROID全球品牌发布会获...
反复炒作无人机作战 台军有何图... 本文转自【看台海】;近日,台军盛行着一股所谓“无人机制胜论”。民进党当局除了加紧扩充无人机装备外,更...
恒烁半导体(合肥)股份有限公司... 公司代码:688416 公司简称:恒烁股份恒烁半导体(合肥)股份有限公司2024年年度报告摘要第一节...
走马观花的意思是什么 走马观花的意思是什么走马观花,指骑在奔跑的马上看花。原形容事情如意,心境愉快。后多指粗略地观察一下。...
天价离婚!女方分走超3亿 4月25日晚间,鼎信通讯(维权)(SH603421,股价6.09元,市值39.72亿元)发布公告称,...
每斤售价超百元!青岛这种大樱桃... 4月25日,记者在胶州市洋河镇樱之语大樱桃园内看到,露天樱桃花正烂漫绽放,而智能温室大棚内,颗颗红亮...
读者出版传媒股份有限公司202... 公司代码:603999 公司简称:读者传媒本公司董事会及全体董事保证本公告内容不存在任何虚假记载、误...
伊朗南部阿巴斯港港口发生爆炸 总台记者获悉,当地时间26日,伊朗南部阿巴斯港港口发生爆炸。目前爆炸原因不明。(总台记者 李健南)©...
烽火通信科技股份有限公司 (上接1007版)证券代码:600498 证券简称:烽火通信 公告编号:2025-023转债代码:...
开源证券给予江苏金租买入评级,... 开源证券04月26日发布研报称,给予江苏金租(600901.SH,最新价:5.21元)买入评级。评级...
第三品牌杀入A0级纯电赛道 李... 本报记者 方超 石英婧 上海报道在新能源渗透率持续提升大背景下,A0级纯电小车市场正成为巨头竞逐的新...