uni-app常见问题以及解决方案

た入场券 2022-11-14 12:00 616阅读 0赞

## 实现底部安全区域留白？ ##

padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

## 顶部自定义NavBar时适配刘海屏？ ##

uni-app提供的系统参数获取的API`let systemInfo = uni.getSystemInfoSync();`,`systemInfo.statusBarHeight`就是系统的状态栏高度。在设计NAVBAR的时候可以加上一个空白`div`，高度就是为状态栏的高度。

<view class="nav-bar" :style="colorStyle">
    		<view class="status-bar" :style="statusBarStyle"></view>
    		<view class="content" v-if="ids.length === 0">
    			<text @click="backForward" class="back-icon iconfont icon-fanhui"></text>
    			<text class="title">{ { title}}</text>
    		</view>
    		<view class="select" v-else>
    			<text class="txt" @click="cancelSelect">取消</text>
    			<text class="nm">已选择{ { ids.length}}个</text>
    			<text class="txt" @click="selectedAll">{ { chooseText}}</text>
    		</view>
    </view>
    ---------js---------
    computed: { 
    	statusBarStyle() { 
            // 这里我将statusBarHeight存储在了vuex内，为在特殊的navbar自定义时调用
            // 建议在在statusBarHeight + 20高度，以适配刘海屏的影响
    		return `width: 100%;height: ${ this.$store.state.statusBarHeight}rpx;`
    	}
    }

## 监听手势返回操作？并实现重定向效果？ ##

uni-app提供了`onBackPress`方法，回调内参数`event`包含返回事件触发方式,```event.from=backbutton | navigateBack``backbutton```为系实体键触发或者顶部导航栏返回按钮触发，`navigateBack`返回API触发。`onBackPress`并没有提供像Vue内的next方法，可以拦截返回页面，实现重定向的操作。如果想实现重定向的效果，建议在`onUnload`生命周期内通过属性判断是否系统触发还是Api触发，如果由系统触发直接调用`Api`方法跳转到重定向页面，从而实现重定向效果。

## uni-app内文本输入时将页面顶出可视区域？ ##

在`uniapp`内`text`组件自带了`adjust-position`属性，设置为`false`键盘弹出，将不会自动顶起页面。  
![text组件][text]  
`page.json`配置文件内，单个页面可以通过`app-plus`配置`softinputMode：adjustResize`  
![softinputMode][]

## 实现点击按钮震动反馈效果？ ##

/* vibrate 系统震动反馈 1s 用户操作的反馈效果 */
    export function vibrate() { 
    	var UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
    	var impact = new UIImpactFeedbackGenerator();
    	impact.prepare();
    	impact.init(1);
    	impact.impactOccurred();
    }

## 不同状态展示不同的图片时，如果状态类型比较多时，不建议使用三元运算符来切换图片路径？ ##

/* 这里的item就是列表循环中的某一项 */
    <image class="icons" :src="getIcon(item)" mode=""></image>
    
    ------js--------
    
    const faceIcon = require('../../static/imgs/face_icon.png')
    const cryIcon = require('../../static/imgs/cry_icon.png')
    <script>
          export default { 
    			data() { 
                	return { 
                        faceIcon,
                        cryIcon
                    }
                },
               	methods: { 
                  getIcon(item) { 
                    const type = item.type 
                    if (type === 0) { 
                        return this.faceIcon
                    } else { 
                        return this.cryIcon
                    } ......
                    // 当然如果类型过多建议使用swich或其他方法，注意：faceIcon、cryIcon都是图标文件
        	 	  }
    			}
    	  }

## nvue页面开发关于z-index问题？ ##

在`nvue`页面开发过程中，需要注意`view`之间的层级关系，在`nvue`内靠后的`view`的层级越高

[text]: /images/20221022/85695a96e31c4872a38620b5c0184ae1.png
[softinputMode]: /images/20221022/69055c9a4eef4af8a360455383901c1a.png