uniapp学习心得

已于 2025-05-06 11:06:05 修改
阅读量731 收藏 28
点赞数 9
CC 4.0 BY-SA版权
文章标签： uni-app
于 2025-05-06 10:50:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SS_dujiadaoban/article/details/147729680

一、UniApp 核心优势

  1. 跨平台能力

    • 一套代码可编译到 iOS、Android、H5、小程序等多个平台，大幅减少重复开发。

    • 通过条件编译处理平台差异：

      javascript

      复制

      下载

      // #ifdef H5
console.log("仅在H5平台生效");
// #endif

  2. 基于 Vue.js 生态

    • 熟悉 Vue 语法即可快速上手，支持 Vuex 状态管理。

    • 注意差异点：如没有 DOM 操作，需改用 uni API。

  3. 丰富的组件和插件市场

    • 内置 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。

    • 提前配置合法域名。

四、学习资源推荐

  1. 官方文档：uniapp.dcloud.io（必读）

  2. 实战课程：

    • B站《UniApp 跨平台开发实战》

    • 慕课网《UniApp 商业级应用开发》

  3. 社区：

    • 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. 插件使用原则

  • 选择标准：

    1. 查看插件最近更新时间（半年内最佳）

    2. 优先选DCloud官方认证插件

    3. 测试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. 插件使用原则

  • 选择标准：

    1. 查看插件最近更新时间（半年内最佳）

    2. 优先选DCloud官方认证插件

    3. 测试Demo再集成

Uni-app的学习
alovelypeach的博客
07-24 773
uni-app基础配置 pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/message/message" }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationBarTitleTe
2021 不会还有人不会uniapp吧[狗头]
CS_DGD的博客
05-24 1818
UniAPP 快速入门学习 一、UniAPP 介绍 （1）什么是 UniAPP ？ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯。 （2）为什么要选择 UniAPP ？ 开发者/案例数量更多 几十万应用、uni 统计月活12亿、70+ 微信 / QQ群 平台能力不受限 在跨端的同时，
Uni-App 全栈开发学习总结
最新发布
NightSpirit23333的博客
05-16 685
通过本指南的系统学习，开发者可全面掌握UniApp从历史发展到未来趋势的完整知识体系。建议按照"环境搭建→基础语法→项目实战→性能优化→架构设计"的路径循序渐进，同时关注官方动态保持技术敏感度。在开发实践中，需特别注意：多端差异的早期识别与处理状态管理的合理分层设计性能监控体系的持续建设安全防护机制的全面实施随着UniApp X等新一代技术的推出，跨端开发将进入"一次开发，原生体验"的新纪元。开发者应主动拥抱变化，将本指南作为知识底座，持续拓展技术边界，在万物互联时代占据先发优势。
UniApp的学习
xu298024的博客
04-23 1699
特点：Vue.js 的 API 简洁明了，学习曲线较为平缓，使得开发者能够快速上手。Vue.js 提供了响应式的数据绑定机制，当数据发生变化时，视图会自动更新，极大地简化了开发流程。Vue.js 支持组件化开发，将 UI 拆分成独立可复用的组件，提高了代码的复用性和可维护性。Vue.js 使用虚拟 DOM 技术，通过比较虚拟 DOM 和真实 DOM 的差异，最小化了 DOM 操作，提升了渲染性能。Vue.js 提供了丰富的指令和过滤器，用于处理 DOM、事件、样式等各种操作，增强了开发的灵活性和可扩展性。
uni-app学习
fallsTheDust的博客
07-24 2530
学习要求 核心内容： 掌握 uniapp 的路由配置  掌握将 uniapp 项目运行在微信开发者工具或者手机上的方法  掌握 uniapp 的生命周期  掌握 uniapp 组件的使用 考核： 模拟实现一个跨平台项目 一、什么是uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vu
uniapp学习心得体会
06-27
uniapp学习心得体会
uniapp学习心得：跨平台开发
m0_74035719的博客
04-23 1060
UniApp是一个基于Vue.js开发的跨平台应用开发框架，可以用于快速构建同时运行在多个平台（包括iOS、Android、Web等）的应用程序。相比于传统的原生开发和其他跨平台框架，选择学习UniApp具有许多优势。为什么选择学习UniApp？跨平台性：UniApp可以将同一套代码运行在多个平台上，极大地提高了开发效率，减少了重复开发的工作量。Vue.js生态：UniApp基于Vue.js，继承了Vue.js丰富的生态系统和易学易用的特点，对于已经熟悉Vue.js的开发者来说学习曲线相对较低。性能优势。
我的UniApp开发心得
06-21
【标题】：“我的UniApp开发心得” 在移动应用开发领域，UniApp是一个备受开发者青睐的框架，它允许我们使用一套代码实现多平台的部署，包括iOS、Android、H5甚至是小程序。这个标题“我的UniApp开发心得”揭示了...
uniapp前端开发学习心得
Yolo1027的博客
06-25 618
为何学习前端开发。
uni-app的学习
m0_72474345的博客
11-28 355
uni-app的学习
uni-app学习（一）
shijie
07-17 1083
创建uni-app 通过vue-cli创建uni-app： 全局安装vue-cli npm install -g @vue/cli 创建uni-app vue create -p dcloudio/uni-preset-vue my-project 运行并发布uni-app npm run dev : %PLATFORM% npm run build : %PLATFORM% 其中%PLA...
Uni-app的学习Ⅰ（简单介绍、环境搭建、项目介绍）
胡图图不糊涂的博客
09-23 763
一、uni-app的介绍 uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vue和微信小程序的开发经验，可快速上手uni-app 为什么要去学习uni-app? 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用
Uniapp入门学习
zkbilian的博客
09-27 506
1.新手如何接触uniapp开发环境 1.首先先下载使用工具 HBuilderX下载正式开发版 2.小程序开发必下微信开发者平台工具 备注：如果想运行多个平台请看官网配置，我现在运行个小程序就够了 2.接下来如何创建项目 先打开HBuilderX工具查找左上角文件-新建-项目 选择默认模板直接创建 3.然后你得明白每个目录文件夹的含义 比如说这个page，你得知道他是个存放各种ui界面的文件名，还有static是存放静态图片或者视频的文件名，具体请看开发规范 4.接下来教你一个简单的运行项目 pa
uniapp简单学习
grand_brol的博客
11-22 311
项目部署 一、Vscode 1、全局安装Vue-cli npm install -g @vue/cli 2、 创建 uni-app 项目 vue create -p dcloudio/uni-preset-vue my-project 3、选择项目模板 4、运行项目 npm run dev:%PLATFORM% 5、发布项目 npm run build:%PLATFORM% 6、%PLATFORM% 可取值如下 值 平台 h5 h5 mp-alipay 支付宝小程序 mp-b
Uniapp学习【1-基础】
YhWyl527的博客
08-10 237
目录结构 创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看 这个结构其实是跟 vue的 页面一样 template 标签下 只能有一层 可以在这一层里面 进行多层编辑 <template> <view class="content"> </view> </template> JS部分 同样与vue的界面结构相似 uniapp支持 vue的全部生命周期 并且新增 应用生命周期及页面生命周期 应用
uniapp入门学习
2301_76674436的博客
06-05 777
从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然如果你有学过石头哥的小程序课程，再来学习uni就可以很快的入门的。uniapp的开发规范和小程序相似，所以如果你跟着石头哥学过小程序，再来学uniapp就能很快的入门。当然了，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习这门uniapp入门课即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值