移动开发面试题 -uniapp和小程序面试题

实际问题：

"safearea": {
"background": "#CCCCCC",
"bottom": {
"offset": "auto"
}
}

iOS安全区解决方案二：不使用原生占位（非App端可以不配置manifest）

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {
"bottom": {
"offset": "none"
}
}

然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配，参考：为iPhoneX设计网站。微信小程序模拟器不支持，以真机为准。

比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距：

<style>
.list {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
style>

注意：使用了pages.json里的原生tabbar，不管manifest里安全区设置如何，在tabbar下方都会留出空隙。

判断是否为刘海屏的方法

使用5+ API （plus.navigator.hasNotchInScreen）可查询当前设备是否为刘海屏。

详情参考：https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hasNotchInScreen

安卓底部虚拟按键背景色修改方式

使用Native.js修改：

var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.GREEN);

3. h5和原生App通讯

1、H5必须用原生，试过很多，只能用原生。[这里是官方的demo链接](https://uniapp.dcloud.io/static/web-view.html)

2、uniapp 中的那个需要做交互的文件必须是 nvue.

3、H5中加入事件监听

4、最重要的一点就是目前页面跳转可以进行实时监听。所以还是有限制的。但是想一些办法绕一下去满足业务吧。

1、H5必须用原生，试过很多，只能用原生。这里是官方的demo链接

2、uniapp 中的那个需要做交互的文件必须是nvue.

<web-view @message="message" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

message(event){
console.log('接收到消息'，event.detail.data)
}

3、H5中加入事件监听

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: '这是我传送的消息'
}
});//传递的消息信息，必须写在 data 对象中。
});
</script>
复制（为作者贡献原力分）

4. h5跳小程序

<template>
<view class="wx" v-html="html"> </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { SystemApi } from '@global/api/SystemApi'

@Component({
name: 'Test',
})
export default class Test extends Vue {
html: any = ''
onReady() {
this.buildHtml()
}

async buildHtml() {
await SystemApi.getWxReady()
this.html = `
`
}
}
</script>

5.weex、nvue 和 vue区别

1.区别

weex(we except，自己的理解)支持原生和 vue并写，原生渲染，但是组件库不完善，仅支持编写app。

nvue嵌入了weex引擎，又有uniapp丰富的组件库，相当于dcloud写的weex升级版。

在uniapp中支持使用nvue和vue编写多端应用，唯一的不同是nvue使用原生的（和weex及react native类似）的渲染方式。

vue是使用webview的方式渲染，性能可能有些差距。

nvue样式方面: 布局只支持flex布局，然后css有限制。

nvue数据共享方面: 支持vuex，支持uni.store，支持globalData。支持和vue页面相互通讯。

2.什么时候使用

套用uniapp官方文档的一句话：

如果您熟悉weex或react native开发，那么nvue是您的更优选择，能切实提高您的开发效率，降低成本。

如果您是web前端，不熟悉原生放置，那么建议您仍然以vue页面为主，在App端某些vue页面表现不佳的场景下使用nvue作为强化补充。具体场景及其他使用注意见官方文档：

https://uniapp.dcloud.io/use-weex?id=%e4%bb%8b%e7%bb%8d

知识点：

1.uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？

通过 #ifdef、#ifndef 的方式 H5 ： H5 MP-WEIXIN ：微信小程序

2.uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分

3.uniapp上传文件时用到api是什么格式是什么？

    uni.uploadFile({
        url: '要上传的地址',
        fileType:'image',
        filePath:'图片路径',
        name:'文件对应的key',
        success: function(res){
            console.log(res)
        },
})