uniapp面试题

简述Uniapp 中组件的创建以及使用和传参方式 ？

创建组件：在components目录下创建一个新的文件夹，并在该文件夹内创建两个文件：.vue文件（包含组件的模板、
样式和逻辑）和.js文件（如果需要的话，包含组件的配置）。
注册组件：在需要使用该组件的页面的.vue文件中，首先需要在components选项中注册组件。
在模板中使用组件：注册后，就可以在页面的模板中通过标签的形式使用自定义组件了，并且可以传递参数。
传参：
    属性绑定（Props）：如上例所示，通过:propName="value"的方式将父组件的数据绑定到子组件的props上，
    这是最常见的传参方式。
    事件（Events）：子组件可以通过$emit触发事件，并传递参数，父组件通过监听这些事件处理函数接收参数
    和执行相应逻辑。

简述uniAppim是什么 ？

uniapp im： 主要是指将腾讯云即时通讯（Tencent Cloud Instant Messaging，TCIM）集成到uni-app项目中，
以便在跨平台应用中实现即时消息传递、群聊、音视频通话等功能。腾讯云IM提供了一套完整的SDK和服务，
支持多种平台，包括iOS、Android、Web以及微信小程序等，这与uni-app的跨平台特性相契合。

注册与配置：首先，在腾讯云官网注册并创建即时通讯服务实例，获取到AppID、AppKey等必要配置信息。

安装SDK：对于原生应用（iOS、Android）部分，需要在对应的原生项目中集成腾讯云IM的SDK。而在H5、
小程序等平台，通常直接使用腾讯云提供的JS SDK。

初始化IM SDK：在uni-app的入口文件或需要使用IM功能的页面中，使用腾讯云IM提供的JS SDK进行初始化配置。
这通常包括设置登录凭证、监听登录状态变化等。

实现登录与消息收发：通过调用IM SDK的接口实现用户的登录、发送消息、接收消息等功能。在uni-app中，
可以利用Vue.js的语法和生命周期钩子来组织这部分逻辑。

界面与交互设计：设计并实现聊天界面、联系人列表、消息提示等UI组件，并结合IM SDK的事件回调来处理用户交互。

跨平台适配：利用uni-app的平台差异化API处理各端的特殊需求或差异，确保IM功能在所有目标平台上都能良好运行。

简述uniAPP 打包 iOS 的基础的方法流程 ？

准备工作
    安装HBuilderX：确保你安装了最新版的HBuilderX，这是uni-app官方推荐的开发工具。
    注册Apple Developer账号：要发布iOS应用至App Store，你需要拥有一个Apple Developer账号，
    并加入开发者计划。
创建或选择uni-app项目
    打开HBuilderX，选择“文件” > “新建” > “项目”，然后选择“uni-app”创建新项目，或打开已有的uni-app项目。
开发与调试
    在开发环境中完成应用的编码、界面设计和功能测试。HBuilderX支持实时预览，可以快速查看效果。
配置iOS证书与描述文件
    登录Apple Developer官网，创建App ID，生成开发与发布证书，以及相应的 provisioning profiles（描述文件）。
    在HBuilderX中，进入项目设置（项目右键 -> “项目配置”或项目面板的齿轮图标），选择“manifest.json” 
    -> “源码模式” -> “plus -> ios”进行配置，上传或选择本地的证书与描述文件。
构建iOS项目
    在HBuilderX中，选择“发行” -> “原生App-云端打包”。
    选择iOS平台，填写应用相关信息，包括应用标识、版本号等。
    选择证书与描述文件（确保与第4步中配置的一致）。
    点击“打包”，HBuilderX将会在云端进行构建。
下载ipa文件与安装测试
    打包完成后，会生成一个.ipa文件下载链接，下载到本地。
    将ipa文件通过TestFlight、Diawi等第三方服务分发给测试者，或使用苹果开发者账户直接安装到真机进行测试。
上架App Store
    登录App Store Connect（https://appstoreconnect.apple.com/），创建新的应用记录，填写应用信息、
    上传截图、描述等。
    选择构建版本，上传在第5步中生成的ipa文件。
    提交审核，等待苹果团队的审核结果。审核通过后，应用将上架App Store。
注意事项
    确保遵循苹果的App Store审查指南，避免因违反规定导致审核失败。
    在正式发布前，务必在真实设备上进行充分的测试，以确保应用的稳定性和兼容性。
    云端打包有一定的免费次数限制，超出后可能需要购买付费服务或在本地进行构建。

uniApp跨域问题怎么解决 ？

HBuilderX配置：在HBuilderX中，打开项目设置，选择“运行配置” -> “运行基础配置”，在“代理设置”中
添加你的代理规则。例如，如果你的后端API地址是http://api.example.com/data，可以设置代理转发规则。

项目内配置：在uni-app项目根目录下，可以创建或修改vue.config.js（如果是Vue CLI项目）或
webpack.config.js（如果手动配置Webpack），使用Webpack的devServer.proxy配置代理。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};
后端设置CORS
    最根本的解决跨域问题的方法是让后端服务器支持CORS（跨源资源共享）。后端开发者需要在响应头中添加
    适当的CORS头，如Access-Control-Allow-Origin、Access-Control-Allow-Methods等，允许特定源的请求。
注意：
    跨域问题是浏览器出于安全考虑实施的策略，开发时遇到的跨域问题通常不会在打包后的原生应用中出现。
    在开发阶段解决跨域问题主要是为了开发便利，生产环境的具体解决方案还需根据部署情况和后端配置来定。

uniapp小程序的导航栏等UI相对单一，平台接口也较少，App端能自由定制这些UI吗？

App端定制UI
    自定义导航栏：在uni-app中，对于App端，你可以通过编写原生插件或者使用条件编译来实现自定义导航栏。
    例如，可以针对App端编写特定的样式和布局，利用uni-app的平台判断语法（如
    <template v-if="$platform=== 'app'">...</template>）来区分不同平台的实现。
    使用原生组件/插件：对于需要高度定制化的UI组件，可以开发或使用现有的原生插件，这些插件可以直接调用原
    生能力，实现与平台更紧密集成的界面效果。uni-app支持npm包引入，可以方便地集成第三方UI库或原生插件。
    自定义主题与样式：uni-app支持通过全局样式和scss等预处理器来自定义样式，你可以通过覆盖默认样式来调整
    UI的外观，以适应项目的视觉需求。
平台接口使用
    条件编译：uni-app支持条件编译，你可以根据运行平台编写特定的代码逻辑，利用平台差异API来调用App端
    特有的功能，比如硬件访问、系统通知等。
    原生插件开发：对于App端特有的功能接口，如果uni-app提供的API不能满足需求，可以开发原生插件来扩展
    功能。uni-app提供了详细的原生插件开发指南，帮助开发者接入自定义的原生代码。
    使用5+（Plus）API：对于H5+ App（即使用 uni-app 打包的原生App），可以使用5+（Plus）API来访问
    更多原生功能，包括但不限于高级UI组件、设备硬件访问等，进一步增强App端的定制性和功能丰富度。

已有小程序项目，如何迁移到uni-app？

创建新UniApp项目
    打开HBuilderX，选择“文件”>“新建”>“项目”，然后选择“uni-app”项目类型，填写项目名称和路径，
    创建一个新的UniApp项目。
拷贝原有项目文件
    将原小程序项目的源代码（主要是pages、utils、components等目录下的文件）拷贝到新创建的UniApp项目
    的相应目录下。
    注意：如果原项目中有使用到wxss样式，可能需要稍作调整，因为UniApp使用的是更通用的css语法，
    但大部分情况下两者是兼容的。
适配API
    替换API：由于UniApp提供了统一的API集，可能需要将原小程序中的wx.* API替换为uni.* API。
    大部分API命名相似，只需简单替换前缀即可，但也需查阅文档确认是否有参数或行为上的差异。
    条件编译：如果原项目有平台特定的代码，可以在UniApp中使用条件编译来保持这部分代码的平台兼容性，
    例如使用#ifdef MP-WEIXIN来标记微信小程序特有的代码段。
调整页面结构和样式
    页面结构：检查并调整页面结构，确保使用Vue.js的单文件组件（.vue）格式。这可能需要将原本的
    wxml和wxss分离的文件合并到.vue文件中。
    样式调整：虽然大多数CSS样式在UniApp中可以直接使用，但可能需要根据Vue的 scoped样式或全局样式
    进行适当调整。
测试与调试
    使用HBuilderX内置的模拟器或真机预览功能，测试迁移后的项目在各个平台的表现，确保功能正常且样式
    适配无误。
编译与发布
    一切就绪后，选择目标平台进行编译，并按照各自平台的要求进行打包和提交审核。

uniApp中如何进行微信支付？

可以使用uni.requestPayment方法进行微信支付，通过设置支付参数来实现支付功能。

注册微信支付商户号
    首先，你需要在微信支付商户平台注册并获取商户号、API密钥等信息。

获取支付参数
    在服务器端，你需要根据微信支付的接口文档，组装预支付订单信息，并调用微信支付的统一下单接口。
    成功后，微信会返回一个包含prepay_id的预支付交易会话标识。

配置uni-app项目
    manifest.json：在项目的manifest.json文件中，确保微信平台的配置已经完善，特别是支付相关的
    白名单设置。
编写支付逻辑
    在uni-app的页面中，编写调用微信支付的逻辑。你需要先在服务器端获取到预支付的参数，然后通过
    uni.requestPayment方法发起支付请求。

async function pay(orderInfo) {
  try {
    // orderInfo应包含从服务器获取的预支付参数，如timeStamp、nonceStr、package、signType、paySign等
    const result = await uni.requestPayment({
      provider: 'wxpay', // 微信支付
      timeStamp: orderInfo.timeStamp,
      nonceStr: orderInfo.nonceStr,
      package: orderInfo.package,
      signType: orderInfo.signType,
      paySign: orderInfo.paySign,
      success: function (res) {
        console.log('支付成功', res);
        // 支付成功后的处理逻辑
      },
      fail: function (err) {
        console.log('支付失败', err);
        // 支付失败后的处理逻辑
      },
      complete: function () {
        // 支付完成后的处理逻辑，无论成功或失败都会执行
      }
    });
  } catch (error) {
    console.error('支付异常', error);
  }
}
用户授权与唤起支付
    在实际场景中，需要确保用户已经授权小程序获取微信支付权限。如果用户未授权，你可能需要先引导用户进行授权操作。

注意事项
    安全性：确保支付参数的传输过程加密安全，避免明文传输敏感信息。
    服务器端实现：微信支付的大部分逻辑，如生成签名、调用统一下单接口等，需要在服务器端完成，客户端主要负责发起支付请求。

简述uniApp适用于哪些场景 ？

快速原型开发：
    由于其一套代码多端运行的特性，UniApp非常适合需要快速构建跨平台应用的场景，尤其是对开发速度有较
    高要求的项目。开发者可以迅速完成一个功能完备的原型，支持后续在不同平台上进行测试和调整。
轻量级应用开发：
    对于不需要大量原生功能介入，强调快速迭代、轻量级内容展示的应用，如小型工具类、内容展示类、
    电商轻应用等，UniApp是一个高效的选择。它能有效减少多平台开发的工作量和维护成本。
多平台统一发布：
    如果你的业务需要覆盖微信小程序、支付宝小程序、百度小程序、H5、iOS App、Android App等多个平台，
    UniApp提供了一站式解决方案，帮助开发者维护统一的代码库，同时发布到多个平台，大大提高了开发效率
    和一致性。
中低复杂度应用：
    对于功能较为丰富但并非极其复杂的应用，如社交、教育、生活服务类应用等，UniApp提供了足够的性能和
    丰富的插件生态，能够满足大部分需求。通过原生插件和条件编译，可以进一步扩展其功能和优化性能。
企业级应用内部系统：
    企业内部的管理系统、协作工具等，往往需要在不同设备和平台上无缝运行，UniApp的跨平台能力特别适合
    这类应用场景，便于统一管理和快速部署。

简述uniApp怎么实现多端开发的 ？

安装与初始化： 
    首先，你需要在开发环境中安装 HBuilderX，这是DCloud官方推荐的开发工具，它对UniApp提供了良好的支持。
    在HBuilderX中创建一个新的UniApp项目，或者通过CLI命令行工具初始化项目。
使用Vue.js开发： 
    UniApp基于Vue.js，因此你可以使用Vue的语法和组件化开发方式来编写代码。这意味着你可以利用Vue的模板、
    指令、组件等特性快速构建界面和逻辑。
统一的API和组件： 
    UniApp提供了一套跨平台的API和UI组件库，这些API和组件在不同平台上表现一致或自动适配，使得开发者可以
    编写一次代码就能运行在多个平台上。例如，对于网络请求、文件操作、界面导航等常用功能，UniApp都提供了
    统一的接口。
条件编译与平台差异化处理： 
    虽然UniApp追求代码复用，但在某些场景下，不同平台可能需要特定的处理。这时可以使用条件编译来实现。
    通过在代码中添加平台判断语句（如<template v-if="$platform === 'mp-weixin'">...</template>），
    可以让部分代码仅在特定平台生效，从而实现差异化功能。
预览与调试： 
    在开发过程中，HBuilderX提供了实时预览功能，可以快速在模拟器或真实设备上查看效果。同时，
    它也支持平台特定的调试工具，帮助你定位和解决问题。
编译发布： 
    当开发完成后，选择对应的平台进行编译，UniApp会自动将你的代码转换为目标平台的原生代码或特定格式。
    之后，你可以按照各平台的要求进行打包和提交审核。

uniapp如何优化性能？

网络与资源加载
    懒加载：对图片、组件、路由等使用懒加载策略，减少初次加载时的资源请求量。
    资源压缩：确保图片、CSS、JavaScript等资源在发布前进行压缩，减小文件大小。
    缓存策略：利用浏览器缓存或本地存储（如uni-app的本地存储uni.storage）缓存静态资源和数据，
    减少重复加载。
渲染与布局优化
    组件复用：尽量重用组件，减少DOM操作和渲染次数。
    v-if与v-show：合理选择使用v-if（条件渲染，适合不经常变化的条件）和v-show（切换显示，适合频繁
    切换状态）。
    列表渲染优化：在列表渲染时使用key指定唯一标识，避免不必要的渲染。对于大数据列表，考虑使用
    虚拟滚动技术减少DOM节点数量。
    样式优化：避免使用昂贵的CSS选择器，减少使用!important，使用Flex布局代替复杂的浮动布局以
    提高渲染性能。
原生性能优化
    原生插件：对于高性能需求的功能，考虑使用原生插件或自定义原生插件，直接调用原生API以提高性能。
    分包加载：利用uni-app的分包加载特性，将应用拆分成多个较小的包，优化首屏加载速度。
代码层面优化
    避免内存泄漏：注意清理不再使用的定时器、监听器等，减少不必要的数据计算、避免造成内存泄漏。
    代码分割：利用动态导入（import()）进行代码分割，按需加载代码模块。
    性能监控：使用uni-app提供的性能监控工具或第三方工具，定期检查和优化性能瓶颈。

如何在uniapp中使用WebSocket进行实时通信？

可以uni-app提供的uni.connectSocket API来创建一个WebSocket连接，并通过uni.onSocketOpen、
uni.onSocketMessage等事件监听器来处理连接打开、消息接收等事件。
创建WebSocket连接：
    在需要使用WebSocket通信的页面或组件的生命周期钩子（如onLoad）中，调用uni.connectSocket
    方法创建WebSocket连接。你需要提供一个包含协议、地址和端口的URL。
export default {
  onLoad() {
    // 创建WebSocket连接
    uni.connectSocket({
      url: 'wss://your-websocket-server-url', // 替换为你的WebSocket服务器地址
      header: {
        'content-type': 'application/json'
      },
      protocols: ['protocol1'] // 可选，协议数组
    });
  }
};
监听连接打开事件：
    使用uni.onSocketOpen监听WebSocket连接成功的事件。
export default {
  onLoad() {
    // 监听WebSocket连接打开事件
    uni.onSocketOpen((res) => {
      console.log('WebSocket连接已打开', res);
      // 发送初始化数据或订阅消息等操作
      uni.sendSocketMessage({
        data: JSON.stringify({
          action: 'subscribe',
          topic: 'someTopic'
        })
      });
    });
  }
};
发送消息：
    使用uni.sendSocketMessage方法向服务器发送消息。
export default {
    methods: {
    sendMessage(messageContent) {
        uni.sendSocketMessage({
        data: JSON.stringify(messageContent)
        });
    }
    }
}
监听消息接收事件：
    使用uni.onSocketMessage监听接收到服务器消息的事件
export default {
  // ...之前的代码...

  onShow() {
    // 监听WebSocket消息接收事件
    uni.onSocketMessage((res) => {
      console.log('收到服务器消息', res.data);
      // 根据消息内容处理逻辑
    });
  }
};
关闭和重连WebSocket：
    使用uni.closeSocket关闭连接，以及在需要时通过再次调用uni.connectSocket重新建立连接。

注意事项
    确保WebSocket服务器地址正确无误，并且服务器已启动并支持WebSocket协议。
    WebSocket连接和消息收发都是异步操作，需要在合适的生命周期钩子或事件处理函数中调用。
    考虑到网络不稳定或应用切换到后台等情况，可能需要实现重连逻辑以保持连接稳定性。
    由于跨平台的特性，uni-app的WebSocket API在不同平台的表现可能有细微差别，建议查阅官方文档了解详细信息。

uniApp中如何实现页面的分享到朋友圈功能？

可以使用uni.showShareMenu方法开启页面的分享功能，然后使用uni.share方法设置分享的标题、路径等。

配置manifest.json
{
  "mp-weixin": {
    "config": {
      "permission": {
        "scope.share": {
          "desc": "您的分享权限申请理由"
        }
      }
    }
  }
}

设置分享菜单：页面的onLoad生命周期中调用uni.showShareMenu来显示分享菜单。
onLoad() {
  uni.showShareMenu({
    withShareTicket: true // 是否包含shareTicket，默认false
  });
}

// 设置分享的标题、路径等
export default {
  onShareTimeline() {
    // 用于分享到朋友圈
    return {
      title: '分享的标题',
      query: {}, // 可以携带额外参数
      imageUrl: '图片URL', // 分享的图片链接
      success: () => {
        console.log('分享成功');
      },
      fail: () => {
        console.log('分享失败');
      }
    };
  },

  onShareAppMessage(res) {
    // 用于普通分享给朋友或微信群
    if (res.from === 'button') {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    return {
      title: '分享的标题',
      path: '分享的路径', // 分享的路径，可以带参数
      imageUrl: '图片URL',
      success: () => {
        console.log('分享成功');
      },
      fail: () => {
        console.log('分享失败');
      }
    };
  }
}
注意事项
    分享到朋友圈 (onShareTimeline) 和普通分享 (onShareAppMessage) 的配置有所不同，请根据需要分别设置。
    图片URL需要是合法的在线图片链接，且图片尺寸和格式需要符合微信的要求。
    分享功能在微信小程序中受到微信平台的严格限制，需要在微信公众平台的小程序管理后台配置相应的分享信息。