# mcake2202

**Repository Path**: team-2202/mcake2202

## Basic Information

- **Project Name**: mcake2202
- **Description**: 跨平台开发

> 一套代码，跨多端运行（Android 、iOS、web、小程序）

+ 优点：开发成本低、开发效率高
+ 缺点：性能稍差（随着硬件的发展，性能已经可以媲美原生开发）

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-08-08
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## HbuilderX

[下载地址]([HBuilderX-高效极客技巧 (dcloud.io)](https://www.dcloud.io/hbuilderx.html))

## 移动端开发技术演进

1. 原生App
   
   + Android 开发     Java语言、Kotlin语言
   + iOS开发              ObjectC语言、Swift语言
   + 缺点：开发成本高、开发周期长
   + 优点：性能更好

2. Hybrid 混合开发
   
   + 非核心功能使用h5开发
   + 核心功能采用原生开发
   + [JsBrige桥接]([Android原生和H5、JS交互，使用JsBridge - 简书 (jianshu.com)](https://www.jianshu.com/p/2e78a77760d8))
   
   > 滴滴打车:
   > 
   > 1. 核心功能
   >    + 打车功能
   >    + 地图实现显示车辆
   > 2. 非核心功能
   >    + 行程单
   >    + 积分商城

3. 跨平台开发

> 一套代码，跨多端运行（Android 、iOS、web、小程序）

+ 优点：开发成本低、开发效率高
+ 缺点：性能稍差（随着硬件的发展，性能已经可以媲美原生开发）

## 跨端技术方案汇总

1. vue技术栈
   
   + [uniapp ]([什么是 uni-app - uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/README))   （Android 、iOS、web、小程序）
   + DCloud 团队

2. React技术栈
   
   + [Taro]([Taro | 多端统一开发解决方案 (jd.com)](https://taro.jd.com/))   京东团队    （Android 、iOS、web、小程序）
   + [ReactNative]([React Native 中文网 · 使用React来编写原生应用的框架](https://reactnative.cn/))

3. Flutter
   
   + Dart 语言       为了解决JS本身的设计缺陷
   + [Flutter]([Flutter 中文资源主页 | Flutter中文文档网站_教程_入门_社区资源](https://flutter.cn/))

4. Electron  开发跨端桌面应用
   
   + [文档]([Electron | 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。 (electronjs.org)](https://www.electronjs.org/))

## uniapp介绍及跨端实现

1. 内置组件的使用，跟小程序几乎一样
   
   + view
   + image
   + text

2. 动态交互语法，全面采用vue语法
   
   + v-if
   + v-for
   + v-model

## uniapp项目创建

1. 参考群图片创建uniapp项目

2. .vue文件扮演的角色
   
   + 扮演的页面，内部需要使用onLoad、onShow系列的生命周期
   + 扮演的公共组件，内部需要使用created系列生命周期

3. 注意平台差异性
   
   + 全局配置的角度 [参考]([pages.json - uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/collocation/pages?id=tabbar))
   + API的调用方面 [参考]([发起请求 - uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/api/request/request))

4. 通过条件编译做不同平台适配
   
   [文档]([条件编译 解决各端差异 - uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/platform))
   
   ```
   #ifndef H5
   这里的代码，只会在H5平台生效
   #endif
   ```

5. uniapp跨端适配可能会遇到的问题
   
   [文档]([uni-app 跨端开发注意 - uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/matter))

## uniapp目录结构

+ components   公共组件
+ pages    存放项目页面
+ static    静态资源
+ App.vue     根组件
+ main.js      项目入口文件
+ menifest.json  项目配置文件（App打包相关配置、路由模式配置...）
+ pages.json    应用配置（底部菜单、导航栏....）
+ uni.scss   全局样式文件

## uniapp开发流程

1. 按需进行全局配置
   
   例如:底部菜单

2. 进行页面布局
   
   + upx   
   + Flex布局
   + 组件库

3. 使用vue语法，做交互
   
   + 数据对接
   + 功能交互

## 组件库

1. colorUI     倾向于布局
   
   [文档]([GitHub - weilanwl/ColorUI: 鲜亮的高饱和色彩，专注视觉的小程序组件库](https://github.com/weilanwl/ColorUI))
   
   + 下载核心代码
   + 将colorui文件夹引入项目中
   + 使用组件

2. uview    倾向于交互
   
   + [文档]([uView - 多平台快速开发的UI框架 - uni-app UI框架 (uviewui.com)](https://www.uviewui.com/))