一文带你熟悉uni-app开发多平台项目的整体流程

txm
647 阅读5分钟

如今前端领域技术五花八门，随之的技术框架也越来越多，暗示着前端开发需要学习了解技术越来越广。今天我们来聊聊跨平台框架之Uni-App。

这里笔者就不把Uni-App来拿和其他跨平台框架进行对比了，直接分析一下如果使用Uni-App开发一个应用。不过，笔者希望有兴趣的小伙伴也了解学习下其他跨平台框架（像Taro、Weex、RN、Flutter等），毕竟技多不压身嘛~

前言

使用 uni-app 开发项目需要满足开发者的两个条件：

  1. 熟悉 Vue
  2. 熟悉原生微信小程序

uni-app 非常简单，只需会上面两种技术就完全可以独立负责一个项目的所有前端工作

开车啦~

项目初始化工作

  • 初始化项目

    1. 命令行创建项目
    2. 使用HBuilderX工具创建项目

  • 规划好项目目录结构

    1. components - 存放项目公共的组件
    2. pages - 存放项目的业务组件
    3. static - 存放静态资源
    4. common - 存放一些公共的 css、js 和请求封装等
    5. store - 存放项目中需要共享的状态
    6. ...

  • 在 manifest.json 中配置好各个平台的系统配置

项目中比较重要的点

  • 封装 uni.request 请求
  • 在 uni-app 中使用 阿里图标
  • 各平台布局兼容性，建议：采用Flex布局
  • 了解常见的uni-app官方提供的组件在不同平台下的兼容性
  • 跨域问题
  • 父子组件通信
  • 引入CSS预处理器
  • 引入Vuex
  • 上拉刷新、下拉加载
  • 授权
  • 微信登录与支付
  • 支付宝支付
  • 项目优化
  • 真机调试
  • 打包上线各平台
  • ...

运行软件&开发工具安装

  1. 代码编写软件：HBuilder X
  2. 微信小程序运行软件：微信开发者工具
  3. 支付宝小程序运行软件：支付宝开发者工具
  4. H5 运行环境：浏览器
  5. Android 运行软件：安卓模拟器（推荐大家windows平台使用“雷电模拟器”）
  6. IOS 运行软件：苹果模拟器

如何运行各端

傻瓜式运行！！！点击HBbuilderX工具上的顶部工具栏，点击 运行，选中自己想要的那个平台即可。

微信小程序端

申请公司企业级微信小程序账号

  1. 第一步：打开 微信公众平台 进行小程序账号注册
  2. 登录注册时填写的邮箱，点击链接激活小程序
  3. 填写小程序相关信息
  4. 选择企业注册，填写企业名称、上传营业执照等等...
  5. 申请成功后，腾讯会向公司账户进行小额打款并进行电话确认
  6. 进行微信认证，需支付300元。1~2天即可认证成功

微信小程序的版本

  • 开发版
  • 体验版
  • 线上版

如果要发体验版本的话，建议点击工具状态栏上的发行，选择微信小程序，再上传到微信后台。这样子打包体积会小一点！

支付宝小程序端

申请公司企业级支付宝小程序账号

  1. 第一步：打开 支付宝平台，选择账号密码登录下方的免费注册 进行小程序账号注册
  2. 登录注册时填写的邮箱，点击链接激活小程序
  3. 具体不细说了，账号申请都是需要填写什么就填写什么，按照步骤来即可申请成功。

如果要发体验版本的话，建议点击工具状态栏上的发行，选择支付宝小程序，再上传到支付宝后台。这样子打包体积会小一点！

H5端

  • 如何将打包静态资源部署到服务器

将打包好的dist目录静态资源，存放到自己的服务器上即可。推荐给没有服务器的小伙伴，一个是http-server，一个是natapp！

Android端

  • 申请安卓证书
  1. 确保电脑按照了Java环境
  2. 生成签名证书
keytool -genkey -alias test -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

-alias test: 表示证书的别名 -keyalg RSA: 采用RSA算法 -validity 36500: 证书的有效天数 keystore test.keystore: 生成的证书文件 输入完上面这条命令后，回车，要求输入一些信息，输入即可。注意: 使用管理员的cmd窗口。

  1. 点击工具栏上的发行，选择原生APP云打包

在弹出框中依次输入：Android包名、证书别名、证书私钥密码、证书文件即可。点击打包，等待几分钟即可打包成功，生成APK文件。

  • 申请各大安卓发布平台开发者账号

申请各大发布平台基本都是差不多的，这里我不做过多解释~

  • 将apk包提交到发布平台审核

平台申请好了，创建应用，然后上传打包的APK就可以等待审核啦~

IOS端

  • 申请苹果开发者账号
    • 账号类型分为个人、公司、企业
  • 申请苹果证书
    • 申请发布证书、AppID、Profiles文件
    • 在HBuilder X 上要填写4个字段
  • 在HBuilderX上进行“云端APP打包”，生成.ipa安装包文件
  • 使用XCode上架你的应用
    • 用Xcode中的“Application Loader”，上传.ipa文件到苹果开发平台
  • 在苹果开发平台上填写应用信息和选择刚上传的ipa文件，提交应用审核

总结

通过这整个了解，相信小伙伴们对uni-app开发项目的整体流程基本清楚了。当掌握好流程，熟练Vue框架的各种用法，即可在公司单挑一个项目并完成所有平台的工作。

avatar
文章
阅读
粉丝