uniapp学习心得

已于 2025-05-06 11:06:05 修改
阅读量732 收藏 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 775
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群 平台能力不受限 在跨端的同时，
Uniapp深入学习与实践全记录：从零到项目上线的完整历程
最新发布
2301_81662258的博客
06-24 916
指标项数值页面平均加载时间1.2s包体大小2.3MBAPI请求成功率99.8%崩溃率0.01%
UniApp的学习
xu298024的博客
04-23 1701
特点：Vue.js 的 API 简洁明了，学习曲线较为平缓，使得开发者能够快速上手。Vue.js 提供了响应式的数据绑定机制，当数据发生变化时，视图会自动更新，极大地简化了开发流程。Vue.js 支持组件化开发，将 UI 拆分成独立可复用的组件，提高了代码的复用性和可维护性。Vue.js 使用虚拟 DOM 技术，通过比较虚拟 DOM 和真实 DOM 的差异，最小化了 DOM 操作，提升了渲染性能。Vue.js 提供了丰富的指令和过滤器，用于处理 DOM、事件、样式等各种操作，增强了开发的灵活性和可扩展性。
uni-app学习
fallsTheDust的博客
07-24 2534
学习要求 核心内容： 掌握 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 1063
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 620
为何学习前端开发。
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 764
一、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 313
项目部署 一、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 238
目录结构 创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看 这个结构其实是跟 vue的 页面一样 template 标签下 只能有一层 可以在这一层里面 进行多层编辑 <template> <view class="content"> </view> </template> JS部分 同样与vue的界面结构相似 uniapp支持 vue的全部生命周期 并且新增 应用生命周期及页面生命周期 应用
uniapp入门学习
2301_76674436的博客
06-05 779
从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然如果你有学过石头哥的小程序课程，再来学习uni就可以很快的入门的。uniapp的开发规范和小程序相似，所以如果你跟着石头哥学过小程序，再来学uniapp就能很快的入门。当然了，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习这门uniapp入门课即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值