uniapp官网： zh.uniapp.dcloud.io/component/u…
开发uniapp一般都使用
下载地址：
微信开发者工具（用来编译，看效果）：developers.weixin.qq.com/miniprogram…
hbuilder（用来开发）：www.dcloud.io/hbuilderx.h…
一. 基础概念
1. 什么是 UniApp？它的核心特点是什么？
基于 Vue.js 的跨平台开发框架，通过一套代码编译到多个平台（微信小程序、H5、App 等）。
核心特点：一次开发，多端发布、基于 Vue 语法、组件化开发、丰富的插件市场。
2. UniApp 支持哪些平台？
小程序（微信、支付宝、百度等）、H5、App（iOS/Android）、快应用等。
3. UniApp 和原生开发、其他跨平台框架（如 React Native、Flutter）的区别？
与原生对比：开发效率高，但性能略低；
与 RN/Flutter 对比：UniApp 更偏向 Web 技术栈，后者更接近原生渲染。
二. 核心知识
1. UniApp 的生命周期有哪些？和 Vue 的生命周期有何区别？
应用生命周期**：onLaunch、onShow、onHide（类似小程序）。
页面生命周期**：onLoad、onShow、onReady、onUnload（小程序特有） + Vue 的 created、mounted。
组件生命周期**：同 Vue（如 beforeCreate、mounted）。
2. UniApp 如何实现路由跳转？
API 方式：uni.navigateTo、uni.redirectTo、uni.switchTab（类似小程序）。
标签方式：<navigator> 组件。
注意：App 端支持 uni.$emit 和 uni.$on 跨页面通信。
3. UniApp 的页面传参方式有哪些？
URL 拼接：uni.navigateTo({url: '/page?id=1'})，通过 onLoad(options) 接收。
全局变量：uni.$emit 和 uni.$on（非父子组件通信）。
Vuex 状态管理。
本地存储：uni.setStorageSync。
4. UniApp 的 UI 组件库有哪些？你用过哪些？
官方组件：<view>、<scroll-view>、<swiper> 等（类似小程序标签）。
第三方库：uView、uni-ui、ColorUI。
三. 跨平台兼容性
1. 如何处理多平台样式或逻辑差异？
条件编译：
// #ifdef H5
console.log('仅在H5生效');
// #endif
使用 uni.getSystemInfoSync() 获取平台信息动态判断。
补充：
1. 条件编译语法
UniApp 使用 // #ifdef + 平台标识 + // #endif 实现条件编译，不同平台的代码会在编译时自动过滤。
常用平台标识：
MP-WEIXIN（微信小程序）H5（浏览器环境）APP-PLUS或APP（iOS/Android App）MP-ALIPAY（支付宝小程序）MP-BAIDU（百度小程序）
2. HTML（模板）的条件编译
1. 按平台显示不同 DOM 元素
<template>
<view>
<!-- 仅微信小程序显示 -->
<!-- #ifdef MP-WEIXIN -->
<button>微信专属按钮</button>
<!-- #endif -->
<!-- 仅 H5 显示 -->
<!-- #ifdef H5 -->
<div>H5 独占内容</div>
<!-- #endif -->
</view>
</template>
2. 动态绑定平台专属属性
<template>
<input
<!-- 微信小程序需用 `password` 属性 -->
<!-- #ifdef MP-WEIXIN -->
password
<!-- #endif -->
<!-- App 端用 `type="password"` -->
<!-- #ifdef APP -->
type="password"
<!-- #endif -->
/>
</template>
3. CSS 的条件编译
1. 平台专属样式
/* 通用样式 */
.button {
padding: 10px;
}
/* 仅微信小程序生效 */
/* #ifdef MP-WEIXIN */
.button {
background-color: #07C160;
}
/* #endif */
/* 仅 H5 生效 */
/* #ifdef H5 */
.button {
border: 1px solid #ddd;
}
/* #endif */
2. 解决平台差异性问题
/* 微信小程序的 scroll-view 需要固定高度 */
/* #ifdef MP-WEIXIN */
scroll-view {
height: 100vh;
}
/* #endif */
/* App 端修复 iOS 输入框内边距 */
/* #ifdef APP */
input {
padding: 0 !important;
}
/* #endif */
4. JavaScript 的条件编译
1. 平台专属逻辑
// 通用方法
function showToast(message) {
// 微信小程序用 wx.showToast
// #ifdef MP-WEIXIN
wx.showToast({
title: message,
icon: 'none'
});
// #endif
// H5 和 App 用 uni.showToast
// #ifdef H5 || APP
uni.showToast({
title: message,
icon: 'none'
});
// #endif
}
2. 动态加载不同模块
// 微信小程序使用自定义导航栏
// #ifdef MP-WEIXIN
import weixinCustomNav from './weixin-custom-nav.js';
// #endif
// App 端调用原生插件
// #ifdef APP
const nativeModule = uni.requireNativePlugin('MyNativeModule');
// #endif
5. 平台特定 API 调用
onLoad() {
// 仅 App 端监听返回键
// #ifdef APP
document.addEventListener('backbutton', this.handleBackButton);
// #endif
}
onUnload() {
// #ifdef APP
document.removeEventListener('backbutton', this.handleBackButton);
// #endif
}
6. 多端兼容性最佳实践
1. 封装平台适配工具函数
// utils/platform.js
export function getPlatform() {
// #ifdef MP-WEIXIN
return 'weixin';
// #endif
// #ifdef H5
return 'h5';
// #endif
// #ifdef APP
return 'app';
// #endif
}
// 使用示例
import { getPlatform } from '@/utils/platform.js';
if (getPlatform() === 'weixin') {
console.log('当前是微信小程序');
}
2. 统一处理样式差异（CSS 变量）
/* 全局 CSS 变量 */
:root {
--button-color: #007AFF;
}
/* 微信小程序覆盖变量 */
/* #ifdef MP-WEIXIN */
:root {
--button-color: #07C160;
}
/* #endif */
.button {
background-color: var(--button-color);
}
3. 动态组件按平台加载
<template>
<view>
<!-- 微信小程序用自定义组件 -->
<!-- #ifdef MP-WEIXIN -->
<weixin-custom-component />
<!-- #endif -->
<!-- H5 用普通 HTML -->
<!-- #ifdef H5 -->
<div class="h5-component"></div>
<!-- #endif -->
</view>
</template>
2. UniApp 如何调用原生功能（如摄像头、GPS）？
通过 uni. 开头的 API，如 uni.chooseImage、uni.getLocation。
原生插件：通过 uni.requireNativePlugin 调用（如 Android/iOS 原生模块）。
3. 如何解决小程序和 App 的导航栏差异？
使用 uni.setNavigationBarTitle 动态设置标题。
App 端可通过 pages.json 配置原生导航栏或自定义导航栏。
四. 性能优化
1. UniApp 常见的性能优化手段有哪些？
减少 setData 调用频率（小程序端）。
使用 v-for 时加 key，避免长列表（用 scroll-view 分页）。
图片压缩，使用懒加载 lazy-load。
条件编译减少无用代码。
2. 如何优化 UniApp 的启动速度？
分包加载：在 pages.json 中配置 subPackages。
延迟加载非首屏组件（如 v-if）。
启用 v8 或 hermes 引擎（App 端）。
五. 打包与发布
1. UniApp 如何打包成不同平台的应用？
H5：npm run build:h5。
小程序：npm run build:mp-weixin（需配置微信开发者工具）。
App：通过 HBuilderX 生成原生安装包（或云打包）。
2. 如何解决 App 端的白屏问题？
检查路由路径是否正确。
使用 Splash 启动页或骨架屏。
排查网络请求阻塞（如登录鉴权）。
六. 进阶问题
1. UniApp 如何实现热更新？
App 端：通过 wgt 资源包增量更新（需后台配合）。
小程序端：走各平台自身的更新机制。
2. UniApp 如何与原生交互（如调用 Java/Swift 代码）？
编写原生插件（需按 UniApp 规范封装 Module）。
使用 uni.requireNativePlugin 调用插件。
3. UniApp 3.0 有哪些新特性？
支持 Vue 3.0、组合式 API。
更好的 TypeScript 支持。
性能优化（如虚拟列表）。
七. 实战经验
1. 你遇到过哪些 UniApp 的坑？如何解决的？
小程序 scroll-view 高度问题：动态计算 windowHeight - navbarHeight。
App 端 iOS 日期兼容性：用 new Date('2023/01/01') 替代 new Date('2023-01-01')。
2. 如何调试 UniApp 应用？
H5：Chrome 开发者工具。
小程序：各平台开发者工具。
App：HBuilderX 真机调试 + console.log。
八. WebView 跳转与传参
1. 如何在 UniApp 中打开一个 WebView？
方法：使用 uni.navigateTo 或 <navigator> 组件跳转到配置了 web-view 的页面。
uni.navigateTo({
url: '/pages/webview/webview?url=https://example.com'
});
页面配置（pages.json）：
{
"path": "pages/webview/webview",
"style": { "navigationBarTitleText": "WebView" }
}
2. WebView 如何接收参数（如加载指定URL）？
通过页面 onLoad 接收参数并传递给 <web-view> 组件：
<template>
<web-view :src="url"></web-view>
</template>
<script>
export default {
data() { return { url: '' }; },
onLoad(options) { this.url = decodeURIComponent(options.url); }
};
</script>
3. WebView 传参的注意事项？
URL 长度限制：不同平台对 URL 长度有限制（如微信小程序约 2KB），超长参数需通过 postMessage 或全局变量传递。
安全性：避免直接拼接未编码的 URL（使用 encodeURIComponent）。
九. WebView 通信（UniApp 与 H5 双向交互）
1. UniApp 如何向 H5 页面发送消息？
方法：通过 evalJS 执行 H5 页面中的 JavaScript 代码。
// UniApp 中获取 webview 上下文并调用 H5 方法
const webViewContext = uni.createWebViewContext('webview-id');
webViewContext.evalJS('h5Function("Hello from UniApp")');
2. H5 如何向 UniApp 发送消息？
方法：H5 通过 uni.postMessage 发送消息，UniApp 通过 @message 监听。
uni.postMessage({ data: { action: 'update', value: 123 } });
UniApp 监听：
<web-view src="..." @message="handleMessage"></web-view>
<script>
export default {
methods: {
handleMessage(e) { console.log(e.detail.data); }
}
};
</script>
十. 通信的兼容性问题有哪些？
-
平台差异：
- 微信小程序：需在 H5 中引入
jweixin.js或使用wx.miniProgram.postMessage。 - App 端：直接使用
uni.postMessage。
- 微信小程序：需在 H5 中引入
-
iOS 限制：某些 iOS 版本下
evalJS可能失效，需改用iframe跳转或长轮询。
十一. WebView 原理与性能优化
1. UniApp 的 WebView 底层实现原理是什么？
小程序端：基于各平台原生 WebView 组件（如微信的 <web-view>）。
App 端：Android 为系统 WebView 或 X5 内核（需配置），iOS 为 WKWebView。
H5 端**：直接使用浏览器环境的 iframe 或新窗口。
2. 如何优化 WebView 加载速度？
预加载：在后台提前初始化 WebView。
缓存策略：启用 WebView 缓存（App 端配置 domStorage 和 cache）。
资源压缩：H5 页面启用 Gzip、图片懒加载。
3. WebView 白屏问题如何排查？
-
常见原因：
-
URL 无效或跨域问题（需配置业务域名）。
-
网络请求阻塞（检查 H5 页面资源加载）。
-
内存不足（App 端优化 WebView 实例销毁逻辑）。
-
十二. 打开第三方小程序或 H5
1. 如何从 UniApp 跳转到第三方小程序？
微信小程序：使用 uni.navigateToMiniProgram（需配置 appId 和路径）。
uni.navigateToMiniProgram({
appId: '第三方小程序appId',
path: 'pages/index/index?id=123',
success: () => { console.log('跳转成功'); }
});
支付宝小程序：类似，使用 my.navigateToMiniProgram。
2. 如何直接打开外部 H5 链接（非嵌入 WebView）？
方法：使用 uni.redirectTo 或 uni.navigateTo 跳转到新页面，或调用系统浏览器：
// 打开系统浏览器（App端）
plus.runtime.openURL('https://example.com');
3. 跳转第三方小程序/H5 的权限限制有哪些？
小程序：需在 manifest.json 配置 navigateToMiniProgramAppIdList（微信）。
H5：App 端需配置白名单（如 Android 的 AndroidManifest.xml 允许 http 请求）。
十三. 高级场景与安全
1. 如何实现 WebView 的免登（自动传递用户身份）？
-
方案：
- 通过 URL 携带加密 Token（需服务端支持）。
- 使用
postMessage传递登录态（需 H5 配合监听消息）。
2. WebView 如何防止恶意 URL 注入？
-
措施：
- 服务端校验 URL 合法性（如域名白名单）。
- 前端对参数进行编码（
encodeURIComponent）。 - 禁用
javascript:协议等危险内容。
3. App 端 WebView 如何选择内核？
- X5 内核（腾讯） ：在
manifest.json中配置：
"app-plus": { "webView": { "kernel": "QQ" } }
- 系统 WebView：默认使用，但兼容性较差。
十四. uniapp打包及性能优化
1. 打包成微信小程序
1. 基本步骤
1. 配置微信小程序 AppID
在 manifest.json 中填写微信小程序的 AppID（需在微信公众平台申请）：
"mp-weixin": {
"appid": "你的微信小程序AppID",
"setting": {
"urlCheck": false // 关闭域名校验（开发阶段）
}
}
2. 运行打包命令
npm run dev:mp-weixin # 开发环境
npm run build:mp-weixin # 生产环境
打包后生成的文件在 /dist/dev/mp-weixin 或 /dist/build/mp-weixin。
导入微信开发者工具
打开微信开发者工具 → 导入项目 → 选择生成的 mp-weixin 目录。
上传与发布
在开发者工具中点击 上传 → 登录微信公众平台提交审核。
2. 注意事项
域名配置：在微信公众平台配置服务器域名（request、socket 等合法域名）。
分包加载：优化首屏速度，需在 pages.json 中配置 subPackages。
自定义组件：部分原生组件（如 <map>）需在小程序后台配置权限。
2. 打包成 Android App
1. 使用 HBuilderX 云端打包（推荐）
1. 配置 Android 应用信息
在 manifest.json 中设置：
"app-plus": {
"packagename": "com.yourcompany.app", // 包名（唯一）
"versionCode": "100", // 版本号（整数）
"versionName": "1.0.0" // 版本名称
}
2. 生成签名证书（Keystore）
使用 JDK 的 keytool 生成：
keytool -genkey -alias youralias -keyalg RSA -keysize 2048 -validity 36500 -keystore your.keystore
3. 云端打包
在 HBuilderX 中：
顶部菜单 → 发行 → 原生 App-云端打包 → 选择 Android。
上传 Keystore 并填写密码。
勾选所需权限（如摄像头、定位）。
4. 下载 APK/AAB
打包完成后下载安装包（APK 直接安装，AAB 需上传 Google Play）。
2. 本地打包（高级）
步骤：
生成 Android 原生工程：npm run build:app-plus。
用 Android Studio 打开 /dist/build/app-plus 目录进一步修改。
适用场景：需要集成原生插件或深度定制。
3. 注意事项
权限控制：在 manifest.json 中按需声明权限（如 <uses-permission android:name="android.permission.CAMERA"/>）。
适配 AndroidX：如需兼容 AndroidX，在 manifest.json 中配置：
"app-plus": {
"android": {
"compileSdkVersion": 30,
"supportAndroidX": true
}
}
三、打包成 iOS App
1. 使用 HBuilderX 云端打包
1. 配置 iOS 应用信息
在 manifest.json 中设置：
"app-plus": {
"packagename": "com.yourcompany.app", // Bundle ID（需与苹果开发者后台一致）
"versionCode": "100",
"versionName": "1.0.0"
}
2. 申请苹果开发者账号
需支付年费（$99）并创建 App ID、证书（.p12） 和 描述文件（.mobileprovision） 。
3. 云端打包
在 HBuilderX 中：
发行 → 原生 App-云端打包 → 选择 iOS。
上传证书和描述文件。
选择设备类型（iPhone/iPad）。
下载 IPA
打包完成后下载 IPA 文件，通过 TestFlight 或 App Store Connect 发布。
2. 本地打包（Xcode 工程）
步骤：
-
生成 Xcode 工程：
npm run build:app-plus。 -
用 Xcode 打开
/dist/build/app-plus/ios目录，配置签名后编译。
适用场景：需要调试原生代码或使用私有 SDK。
3. 注意事项
证书问题：确保证书和 Bundle ID 匹配，描述文件包含设备 UDID（测试阶段）。
隐私权限：在 manifest.json 中声明权限（如 NSCameraUsageDescription）。
iOS 14+ 适配：如需使用相册或摄像头，需在 Info.plist 中添加隐私描述。
4. 通用优化建议
减少包体积
启用代码压缩：在 manifest.json 中配置：
"app-plus": {
"optimization": {
"treeShaking": true // 摇树优化
}
}
使用分包加载（subPackages）。
1. 适配多端样式
使用条件编译处理平台差异：
/* #ifdef MP-WEIXIN */
.button { padding: 10rpx; }
/* #endif */
2. 调试技巧
Android 真机调试：adb logcat 查看日志。
iOS 真机调试：Xcode → Window → Devices and Simulators。
五、常见问题
1. 微信小程序白屏
原因：域名未配置或 vuex 数据过大。
解决：检查合法域名，优化 setData 数据量。
2. Android 安装失败
错误：INSTALL_FAILED_INVALID_APK
解决：重新生成签名证书或检查 minSdkVersion 兼容性。
3. iOS 审核被拒
原因：未提供隐私政策或权限说明。
解决：在 App Store Connect 中补充隐私信息。
总结
| 平台 | 关键步骤 | 输出文件 | 发布渠道 |
|---|---|---|---|
| 微信小程序 | 配置 AppID → 打包 → 导入开发者工具 | .wxapkg | 微信公众平台 |
| Android | 配置包名 → 云端/本地打包 → 签名 | .apk 或 .aab | 应用商店/直接安装 |
| iOS | 配置 Bundle ID → 云端/本地打包 → 签名 | .ipa | App Store/TestFlight |
