新手使用uni-app开发的部分注意事项

Troy丶
3,998 阅读5分钟

前言：您在h5正常运行的代码，跑到模拟器/真机不一定正常，uniapp开发请务必连真机调试，本文仅针对uniapp开发安卓app进行个人总结

1. tabbar的icon(无论是active、还是默认)，使用svg格式的话h5正常显示，但是跑到模拟器/真机不显示。

image.png

2. 使用uni.navigateTo跳转页面可以拼接要带的参数到新页面，在新页面可以使用onLoad(参数)接收

image.png

但是需要注意，在h5页面能够在vue文件里面访问opinion，但是跑到模拟器/手机，或者打包之后opinion可是不能够在onLoad以外的其他的地方获取，所以最好还是把opinion存到data里面。

3. 注意一些app都有的交互习惯，例如

3.1 滑动穿透 (也就是)会在 3.2.2的组件中出现

75db5f8bdd10b613aca9c144f06b6bb9.gif

<view class="pop-box" @touchmove.stop.prevent></view>

3.2 在合理的地方使用onBackPress阻断手机物理按键/手势的返回

onBackPress 回调参数对象说明：

属性类型说明
fromString触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法。支付宝小程序端不支持返回此字段
export default {
	data() {
		return {};
	},
	onBackPress(options) {
		console.log('from:' + options.from)
	    }
    }
3.2.1 例如日历组件(## Calendar)选择的时候返回应该是关闭日历选择
image.png
3.2.2 类似的还有 ## Picker选择组件、## DatetimePicker日期选择器 ## ActionSheet 操作菜单 ## Popup 弹出层等

3.3 其实popUp弹出层右侧的 箭头icon尽量要与出现方向 相同

image.png

3.4 uniapp使用vw、vh、百分比(单位)、rpx单位布局、flex布局

rpx单位不是rem，是一种根据屏幕宽度自适应的动态单位。假如屏幕宽度是750px，然后开发稿是350px，这时候1px = 2rpx 并且你写2rpx之后，届时打包安装到不同手机时，会按照比较展示适应px量

<view class="pop-box" @touchmove.stop.prevent></view>

3.5 下拉刷新，上拉加载更多。（实现思路可以去看uniapp官方）的scroll-view组件

image.png

3.6 在开发uniapp时，要留页面的底部安全区域(例如留出tabbar的空间等)，否则部分ui、或者交互被遮挡

3.7 app不像浏览器，app网络请求失败如果没有提示，使用者会一脸茫然，而不像浏览器能够手动刷新。可以适当加①全局异常捕获提示 ②合理的骨架屏表示加载中 ③友好的交互方便再次请求

4. uniapp在h5和真机调试/模拟器时，布局和执行的代码可以不同

// #ifndef H5
 需要在非h5环境下执行js代码
// #endif 

// #indef H5
   需要在h5环境下执行js的代码
// #endif 

<!-- #ifdef H5 -->
在template里面写标签，需要h5环境执行的代码注释
<!-- #endif -->
<!-- #ifndef H5 -->
在template里面写标签，需要非h5环境执行的代码注释
<!-- #endif -->

5. 在app里面无法直接访问 window、document，但是您使用的组件需要访问时，可以使用render.js进行获取。

renderJs好文

6. 一些关于手机权限的访问，类似相机，语音，都要先判断设备的访问权限是否开启，在进行调用。

7. 根据uniapp官方文档显示，navigateTo, redirectTo 只能打开非 tabBar 页面,switchTab 只能打开 tabBar 页面.

8. easyCom是个好东西，避免了你经常引入、注册公用组件文档

9. 在sass里面如何使用@路径符？

.test{
    background:url("~@/static/icon/a.svg")
}

10. uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

11. 区分清楚什么是组件生命周期，什么是页面生命周期

例如onLoad是什么周期？created是什么周期？在uniapp可以一起使用吗？

页面生命周期

uni-app 支持如下页面生命周期函数：

函数名说明平台差异说明最低版本
onInit监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad百度小程序3.1.0+
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名说明平台差异说明最低版本
beforeCreate在实例初始化之前被调用。详见
created在实例创建完成后被立即调用。详见
beforeMount在挂载开始之前被调用。详见
mounted挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见
  • 上班摸鱼差不多了，有空、有人看再更新
avatar
文章
阅读
粉丝