一、UniApp 核心优势
-
跨平台能力
-
一套代码可编译到 iOS、Android、H5、小程序等多个平台，大幅减少重复开发。
-
通过条件编译处理平台差异：
javascript
复制
下载
// #ifdef H5 console.log("仅在H5平台生效"); // #endif
-
-
基于 Vue.js 生态
-
熟悉 Vue 语法即可快速上手，支持 Vuex 状态管理。
-
注意差异点：如没有 DOM 操作，需改用
uniAPI。
-
-
丰富的组件和插件市场
-
内置
scroll-view、swiper等高性能组件。 -
插件市场（如 uViewUI）可快速集成常用功能。
-
二、关键学习心得
1. 项目结构与配置
-
目录规范：
复制
下载
/components // 公用组件 /pages // 页面文件（需在pages.json注册） /static // 静态资源 /store // Vuex 状态管理
-
重要配置文件：
-
manifest.json：应用名称、图标等原生配置。 -
pages.json：路由、导航栏样式、页面配置。
-
2. 开发调试技巧
-
多端调试：
-
H5：直接浏览器调试。
-
小程序：需下载开发者工具，注意微信的域名白名单限制。
-
App：真机调试必备，使用
uni-app官方调试基座。
-
-
性能优化：
javascript
复制
下载
// 图片懒加载 <image lazy-load mode="widthFix" src="..."></image> // 避免过度使用响应式数据 export default { data() { return { staticData: {}, // 非必要不响应式的数据 __rawData: null // 使用__前缀标记非响应数据 } } }
3. 常见坑与解决方案
-
样式兼容性问题：
-
使用
rpx替代px实现自适应布局。 -
部分 CSS 属性需加前缀（如
-webkit-box-orient）。
-
-
原生功能调用：
javascript
复制
下载
// 调用摄像头 uni.chooseImage({ count: 1, success: (res) => { this.avatar = res.tempFilePaths[0]; } }); -
生命周期注意：
-
App 专有生命周期
onLaunch、onShow。 -
页面返回需用
uni.navigateBack()而非浏览器历史。
-
三、实战经验
1. 多端适配策略
-
API 兼容：
javascript
复制
下载
function getSystemInfo() { return new Promise((resolve) => { // #ifdef APP-PLUS plus.device.getInfo(resolve); // #endif // #ifdef MP-WEIXIN wx.getSystemInfo({ success: resolve }); // #endif }); } -
UI 适配方案：
-
使用 Flex 布局 +
rpx单位。 -
复杂场景通过
uni.getSystemInfoSync()动态计算布局。
-
2. 状态管理优化
-
Vuex 模块化：
javascript
复制
下载
// store/modules/user.js export default { state: { token: '' }, mutations: { SET_TOKEN(state, token) { state.token = token; } } } -
持久化存储：
javascript
复制
下载
uni.setStorageSync('token', res.token); // 同步存储
3. 打包发布要点
-
App 打包：
-
使用 HBuilderX 云打包或本地打包。
-
注意证书配置（Android 用 keystore，iOS 需开发者账号）。
-
-
小程序提审：
-
压缩图片资源，主包不超过 2MB。
-
提前配置合法域名。
-
四、学习资源推荐
-
官方文档：uniapp.dcloud.io（必读）
-
实战课程：
-
B站《UniApp 跨平台开发实战》
-
慕课网《UniApp 商业级应用开发》
-
-
社区：
-
DCloud 论坛
-
GitHub 开源项目（如 uni-starter 模板）
-
五、关键知识点
1. 条件编译
不同平台的代码差异化处理：
javascript
复制
下载
// #ifdef H5
console.log("仅H5平台生效");
// #endif
// #ifdef MP-WEIXIN
wx.login(); // 仅微信小程序执行
// #endif
2. 自适应单位 rpx
自动根据屏幕宽度缩放（750rpx = 100%屏幕宽度）：
css
复制
下载
.container {
width: 750rpx; /* 满屏宽度 */
font-size: 32rpx; /* 约等于16px */
}
3. 基础组件
-
视图容器：
html
复制
下载
运行
<scroll-view scroll-y @scrolltolower="loadMore"> <view v-for="item in list">{{item}}</view> </scroll-view> -
表单组件：
html
复制
下载
运行
<input v-model="text" @confirm="submit" /> <button @click="scanQRCode">扫码</button>
4. 路由导航
javascript
复制
下载
// 跳转页面（类似vue-router）
uni.navigateTo({ url: '/pages/detail?id=1' });
// 接收参数
onLoad(options) {
console.log(options.id); // 输出1
}
5. 平台专有API调用
javascript
复制
下载
// 调用摄像头
uni.chooseImage({
count: 1,
success: (res) => {
this.avatar = res.tempFilePaths[0];
}
});
6. 样式兼容方案
css
复制
下载
/* 解决iOS滚动卡顿 */
scroll-view {
-webkit-overflow-scrolling: touch;
}
/* 安卓按钮点击高亮 */
button {
-webkit-tap-highlight-color: transparent;
}
7. Vuex 模块化
javascript
复制
下载
// store/modules/user.js
export default {
state: { token: '' },
mutations: {
SET_TOKEN(state, token) {
state.token = token;
}
}
}
8. 持久化存储
javascript
复制
下载
// 存数据
uni.setStorageSync('token', 'abc123');
// 取数据
const token = uni.getStorageSync('token');
9. 图片懒加载
html
复制
下载
运行
<image lazy-load mode="widthFix" src="..."></image>
10. 减少响应式数据
javascript
复制
下载
export default {
data() {
return {
__staticList: [], // 非响应式数据（加__前缀约定）
reactiveData: {} // 需要响应式的数据
}
}
}
11. 多平台配置
manifest.json 中配置各平台参数：
json
复制
下载
"mp-weixin": {
"appid": "wx123456",
"requiredBackgroundModes": ["audio"]
}
12. 分包加载
pages.json 中配置分包：
json
复制
下载
"subPackages": [{
"root": "subpackage",
"pages": [{
"path": "pageA",
"style": { ... }
}]
}]
13. 微信小程序白名单
需在 manifest.json 配置域名：
json
复制
下载
"mp-weixin": {
"networkTimeout": {
"request": 10000
},
"permission": {
"scope.userLocation": {
"desc": "需要获取您的地理位置"
}
}
}
14. App端权限处理
Android需在 manifest.json 声明：
json
复制
下载
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CAMERA\"/>"
]
}
一、平台差异与兼容性
1. 条件编译是核心技能
-
问题：不同平台（H5/小程序/App）的API和组件表现不一致
-
解决：
javascript
复制
下载
// #ifdef H5 alert('H5弹窗'); // #endif // #ifdef MP-WEIXIN wx.showToast({ title: '微信Toast' }); // #endif
2. CSS 兼容性坑
-
典型问题：
-
iOS 滚动卡顿
-
Android 按钮点击高亮
-
-
解决方案：
css
复制
下载
/* 修复iOS滚动 */ .scroll-view { -webkit-overflow-scrolling: touch; } /* 去除Android高亮 */ button { -webkit-tap-highlight-color: transparent; }
二、性能优化要点
1. 图片处理
-
错误示范：直接使用大图无优化
-
正确做法：
html
复制
下载
运行
<image lazy-load webp="true" :src="imgUrl" mode="widthFix" ></image>
2. 数据渲染优化
-
长列表必用：
<scroll-view>+ 分页加载javascript
复制
下载
loadData() { if(this.loading) return; this.loading = true; api.getList().then(res => { this.list = [...this.list, ...res.data]; this.loading = false; }) }
三、路由与导航陷阱
1. 页面栈限制
-
小程序限制：最多10层页面栈
-
解决方案：
javascript
复制
下载
// 超过5层时用redirectTo if(getCurrentPages().length >= 5) { uni.redirectTo({ url: '/pages/new' }); } else { uni.navigateTo({ url: '/pages/new' }); }
2. 传参安全
-
危险做法：
javascript
复制
下载
uni.navigateTo({ url: `/detail?id=${敏感数据}` }); -
推荐方案：
javascript
复制
下载
uni.setStorageSync('temp_data', {id: 123}); uni.navigateTo({ url: '/pages/detail' });
四、原生功能开发
1. App端权限处理
-
必须配置：
json
复制
下载
// manifest.json "android": { "permissions": [ "<uses-permission android:name=\"android.permission.CAMERA\"/>" ] } -
动态申请：
javascript
复制
下载
uni.authorize({ scope: 'scope.camera', success: () => { uni.chooseImage() } })
2. 插件使用原则
-
选择标准：
-
查看插件最近更新时间（半年内最佳）
-
优先选DCloud官方认证插件
-
测试Demo再集成
-
五、调试技巧
1. 多端同步调试
bash
复制
下载
# H5 npm run dev:h5 # 微信小程序 npm run dev:mp-weixin
2. 真机调试必备
-
Android：开启USB调试 + HBuilderX真机运行
-
iOS：需苹果开发者账号 + TestFlight
六、学习过程中需要注意的问题
学习 UniApp 时需要注意以下关键点，结合具体场景和解决方案，帮助你高效避坑：
1.1平台差异与兼容性
1. 条件编译是核心技能
-
问题：不同平台（H5/小程序/App）的API和组件表现不一致
-
解决：
javascript
复制
下载
// #ifdef H5 alert('H5弹窗'); // #endif // #ifdef MP-WEIXIN wx.showToast({ title: '微信Toast' }); // #endif
2. CSS 兼容性坑
-
典型问题：
-
iOS 滚动卡顿
-
Android 按钮点击高亮
-
-
解决方案：
css
复制
下载
/* 修复iOS滚动 */ .scroll-view { -webkit-overflow-scrolling: touch; } /* 去除Android高亮 */ button { -webkit-tap-highlight-color: transparent; }
2.1.性能优化要点
1. 图片处理
-
错误示范：直接使用大图无优化
-
正确做法：
html
复制
下载
运行
<image lazy-load webp="true" :src="imgUrl" mode="widthFix" ></image>
2. 数据渲染优化
-
长列表必用：
<scroll-view>+ 分页加载javascript
复制
下载
loadData() { if(this.loading) return; this.loading = true; api.getList().then(res => { this.list = [...this.list, ...res.data]; this.loading = false; }) }
3.1路由与导航陷阱
1. 页面栈限制
-
小程序限制：最多10层页面栈
-
解决方案：
javascript
复制
下载
// 超过5层时用redirectTo if(getCurrentPages().length >= 5) { uni.redirectTo({ url: '/pages/new' }); } else { uni.navigateTo({ url: '/pages/new' }); }
2. 传参安全
-
危险做法：
javascript
复制
下载
uni.navigateTo({ url: `/detail?id=${敏感数据}` }); -
推荐方案：
javascript
复制
下载
uni.setStorageSync('temp_data', {id: 123}); uni.navigateTo({ url: '/pages/detail' });
4.1原生功能开发
1. App端权限处理
-
必须配置：
json
复制
下载
// manifest.json "android": { "permissions": [ "<uses-permission android:name=\"android.permission.CAMERA\"/>" ] } -
动态申请：
javascript
复制
下载
uni.authorize({ scope: 'scope.camera', success: () => { uni.chooseImage() } })
2. 插件使用原则
-
选择标准：
-
查看插件最近更新时间（半年内最佳）
-
优先选DCloud官方认证插件
-
测试Demo再集成
-
扫一扫
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
