0%

跨平台开发介绍

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 1.6k 阅读时长 ≈ 1 分钟

HbuilderX

下载地址

移动端开发技术演进

  1. 原生开发

    • Android Java、Kotlin 语言
    • iOS ObjectC、Swift 语言
    • 性能体验更好
    • 开发成本比较高

  2. Hybrid 混合开发

    • 核心功能
    • 非核心功能
    • 例如:京东
      • 核心功能:首页、分类、个人中心 采用原生
      • 非核心功能:积分商城、宣传页 采用 H5 前端 web-view
    • 原生页面与 web 页面之间的交互
      JSBridge

  3. 跨平台开发

    一套代码、多端运行

    • 打包 iOS
    • 打包 Andriod
    • 打包 H5

    • 打包小程序

      • 微信小程序
      • 支付宝小程序
      • 百度小程序

    • 优点:极大降低开发成本

    • 缺点:性能体验比原生开发稍差，但是，目前的硬件状态下，体验几乎一样了

跨端技术方案汇总

  1. vue 技术栈

    • uniapp DCloud 跨 13 端，iOS、Android、web、小程序
      文档

  2. React 技术栈

    • Taro 京东团队 iOS、Android、web、小程序
      文档
    • ReactNative FaceBook iOS、Android
      文档

  3. Flutter 谷歌团队

  4. Electron 使用前端技术开发桌面应用
    文档

uniapp 介绍及跨端实现

  1. 内置组件的使用，跟小程序几乎一样
    • view
    • image
    • text
    • button
  2. 动态交互语法，全面采用 vue 语法
    • v-for
    • v-if
    • v-model
    • ….

uniapp 项目创建

  1. 参考群图片创建 uniapp 项目
  2. .vue 文件扮演的角色
    • 扮演的页面，内部需要使用 onLoad、onShow 系列的生命周期
    • 扮演的公共组件，内部需要使用 created 系列生命周期

  3. 注意平台差异性

  4. 通过条件编译做不同平台适配

    条件编译 解决各端差异 - uni-app 官网 (dcloud.io)

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

  5. uniapp 跨端适配可能会遇到的问题

    uni-app 跨端开发注意 - uni-app 官网 (dcloud.io)

uniapp 目录结构

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

在 uniapp 中使用 setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <view>
    首页{{ num }}
    <button @click="handleNum">按钮</button>
  </view>
</template>

<script setup>
import { ref } from "vue";
const num = ref(10);
const handleNum = () => {
  num.value++;
};
</script>

<style lang="scss"></style>

uniapp 开发流程

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

  2. 进行页面布局

    • upx 作用跟 rpx 一样

      需要保证设计图宽度为 750px 1px=1upx

    • Flex 布局

    • 组件库

  3. 使用 vue 语法，做交互

    • 数据对接
    • 功能交互

组件库

  1. colorUI 倾向于布局
    GitHub - weilanwl/ColorUI: 鲜亮的高饱和色彩，专注视觉的小程序组件库

    • 下载核心代码
    • 将 colorui 文件夹引入项目中
    • 使用组件

  2. uni-ui

    • 从插件市场一键导入 uni-ui - DCloud 插件市场
    • 重启项目
    • 直接在项目页面中通过 u 快捷键调用组件
    • 在自己的编辑器新建一个 HelloUniApp 模板项目，参考 uni-ui 组件库运行效果

拓展组件文档 (dcloud.net.cn)

赏包辣条吃吧