HbuilderX

下载地址

移动端开发技术演进

  1. 原生开发
    • Android 开发 Java语言/Kotlin语言
    • iOS 开发 ObjectC语言/swift语言
    • 缺点：开发成本高 、开发周期长
    • 优点：开发出来的App性能体验较好
  2. Hybrid混合开发
    • 项目中会存在大量的活动页
    • 非核心业务，就会采用H5进行开发
    • 通过[JSBridge](
    • )的方式，将H5页面桥接至原生App里面 ``` 滴滴打车

  3. 核心业务 【采用原生，保证体验】 例如: 地图、地图中车辆移动

  4. 非核心业务 【采用H5，保证效率】 例如：行程单、积分商城 ```

  5. 跨平台开发

    一套代码，多端运行，例如：手机web、小程序、Android 、iOS

    • 进一步提高开发效率
    • 进一步降低开发成本

跨端技术方案汇总

  1. Vue技术栈

    • [uniapp](

    • ) DCloud团队

      终极跨端解决方案，一套代码，跨10端

    • weex 阿里系框架

  2. React技术栈

    • [Taro](

    • ) 京东团队

      终极跨端解决方案，一套代码，跨10端

    • ReactNative

      Andriod、iOS应用跨端开发 [文档](

)

  1. Dart语言技术栈

    • [Flutter ](
    • )

      Andriod、iOS、web应用跨端开发

  2. PC桌面应用跨端

    • [Electron](
    • )

uniapp介绍及跨端实现

  1. 内置组件的使用，跟小程序几乎一样
    • View、Text
    • Swiper、picker
  2. 动态交互语法，全面采用vue语法
    • v-for
    • {{}}
    • methods
    • created

uniapp项目创建

  1. 参考群图片创建uniapp项目
  2. .vue文件扮演的角色
    • 扮演的页面，内部需要使用onLoad、onShow系列的生命周期
    • 扮演的公共组件，内部需要使用created系列生命周期
  3. 注意平台差异性
    • 全局配置的角度 [参考](
    • )
    • API的调用方面 [参考](
    • )
  4. 通过条件编译做不同平台适配
    [文档](

  5. )

    1. #ifndef H5
    2. 这里的代码，只会在H5平台生效
    3. #endif

  6. uniapp跨端适配可能会遇到的问题
    [文档](

  7. )

uniapp目录结构

  • pages 存放项目页面
  • components 封装公共组件
  • static 静态资源
  • App.vue 根组件
  • main.js 入口文件，做全局的模块引入
  • manifest.json 项目打包配置
  • pages.json 应用表现配置（底部菜单、主题颜色…）
  • uni.scss 全局样式文件

uniapp开发流程

  1. 按需进行全局配置
    例如:底部菜单
  2. 进行页面布局
    • upx
    • Flex布局
    • 组件库
  3. 使用vue语法，做交互
    • 数据对接
    • 功能交互

组件库

  1. colorUI 倾向于布局
    • 下载核心代码
    • 将colorui文件夹引入项目中
    • 使用组件
  2. uview 倾向于交互
    • [文档](
    • )