[uni-app]小兔鲜-03多端打包上线

news2024/9/29 23:39:15

小程序打包

打包上线流程

打包命令: pnpm build:mp-weixin
效果预览: 把打包后的文件导入微信开发者工具 (dist\build\mp-weixin)
代码上传: 点击微信开发者工具的上传按钮, 上传代码,
审核发布: 登录微信公众平台, 提交审核, 审核后发布
辅助工具: 有些团队会使用开发辅助工具 miniprogran-ci 上传代码

H5打包

条件编译: 让代码按条件编译到不同平台, 保证代码只在可以兼容的平台生效

// #ifdef MP-WEIXIN
// 获取code
let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})

// 微信登录
const onGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  const encryptedData = ev.detail!.encryptedData!
  const iv = ev.detail!.iv!
  const res = await postLoginWxMin({
    encryptedData,
    iv,
    code,
  })
}
// #endif
</script>

<template>
  <view class="viewport">
  
    <view class="login">
      <!-- 网页端表单登录 -->
      <!-- #ifdef H5 -->
      <input class="input" type="text" placeholder="请输入用户名/手机号码" />
      <input class="input" type="text" password placeholder="请输入密码" />
      <button class="button phone">登录</button>
      <!-- #endif -->

      <!-- 小程序端授权登录 -->
      <!-- #ifdef MP-WEIXIN -->
      <button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
        <text class="icon icon-phone"></text>
        手机号快捷登录
      </button>
      <!-- #endif -->
          
    </view>
  </view>
</template>

语法: 通过特殊注释, 以 #ifdef 或 #ifndef 加平台名称开头，以 #endif 结尾。
支持vue, js, ts, css, scss,packag.json等文件
开发中可能有多处代码要进行平台兼容性处理, 可用通过wx. 和 open-type关键词快速搜索

实现效果: 小程序端使用微信授权登录, h5端使用账号密码登录

配置相对路径: 默认情况下, 打包h5使用的是绝对路径, 很多时候网站并不是部署在服务器的根路径下, 所以一般配置成相对路径, 更加灵活

{
  /* 网页端特有配置 */
  "h5": {
    "router": {
      // 基础路径：./ 为相对路径
      "base": "./"
    }
  } 
}

预览h5: 使用Live Server插件打开/dist/build/h5 目录下的 index.html 文件
效果: 默认使用绝对路径加载资源, 配置之后使用相对路径加载资源

安卓打包

真机调试: 本地代码运行到真机预览调试

导入到HBuilderX, 运行到手机或模拟器, 运行到安卓App基座

数据线连接手机, 开启开发者模式

运行测试

如果出现警告,说明编译器版本和SDK版本不一致

常见故障排除指南

数据线(不是充电线)连接手机,部分手机需要安装驱动程序
开启开发者模式, 不同手机步骤可能不同

云打包: 打包成可以安装使用的软件包

登录DCloud账号

获取DCloud AppID, 设置应用名称, 设置App图标

发行->云打包 -> 打开所在目录 -> 右键->安装到手机

Android包名-> uni.net.itheima.orabbit (uni.域名倒写)
云端证书: 详情->DCloud开发者中心->应用管理->我的应用->应用名称->Android云端证书->创建证书

打正式包, 快速安心打包

如果需要上架应用市场, 需要查看各市场上架流程和规则

ios打包

真机预览: ios端的真机预览和打包需要使用mac电脑

导入到HBuilderX
运行到IOS App基座

运行到真机需要证书支持
ios IDP/IEP证书
iOS证书(.p12)和描述文件(.mobileprovision)申请 - DCloud问答
打包ios应用所需的证书和证书profile文件的创建方法 - DCloud问答
ios证书必须有苹果开发者账号, 一年收费几百块

运行到IOS模拟器 App基座

下载Xcode模拟器

ios打包

ios打包和安卓打包流程上一样
只是证书的申请上有区别

跨端兼容

每个端都有自己的特征, uniapp尽可能的磨平这些差异,但是不可能完全磨平, 需要我们自己处理

更多兼容性问题参考官
uniapp跨端注意
uniappCss支持
uniapp条件编译

选择器兼容: 小程序端和APP端不支持 * 选择器, 运行时会报错

跨端项目中不使用 * 选择器 , 使用并集选择器选择标签

页面适口差异: 适口就是可视区域, 专业称为webview, 不同端对适口的计算规则不一样

小程序端和app端的适口计算是一致的:

tabbar页面的适口不包含上下导航部分
普通页面的适口不包含顶部导航部分

h5端的适口就是全部可视区域, 上下导航部分包含在适口内
不同的适口计算规则, 会导致代码跨端编译后, 各端的表现出现差异

问题1: 购物车的猜你喜欢在H5端不能正确的下拉触底加载更多数据

问题原因: 没有给page页面设置高度, page的高度就等于整个页面的高度, 即便内容滑动触底也无法触发加载更多

解决方案: 让page页面继承父容器的高度, 父容器的高度uniapp已经处理好了, 减去了上下导航的高度

page{
 hright:100%
}

问题2: 定位错位的问题

问题原因: 适口计算规则不同, 导致h5页面的定位原点靠下, 内容会被tabber遮挡住
解决方案: 使用uni提供的css变量, uniapp官网->教程->css语法->css变量

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom);
}

h5端是单页面应用, 默认开启 scoped 样式隔离, App端由webview渲染, 组件样式也会默认隔离

问题: 骨架屏样式在小程序端正常, H5和App变形了

原因: 小程序端不存在样式隔离, 骨架屏组件可以继承一些全局的样式, 所以是正常的, 但是在h5和app中, 由于样式隔离,继承不到全局样式, 造成变形
解决: 把骨架屏需要的其他样式,全部抽离出来, 按条件编译, 引入到骨架屏组件

结构差异: app端渲染结构和小程序端渲染结果存在差异的, 我们给page设置的属性在app端不会生效, 因为app端不会渲染page这一层, 所以要做一些兼容性处理

app端调试: 运行到手机或模拟器->显示Webview调试控制台

组件兼容: uniapp内置的组件借鉴的是小程序组件, 不同平台具有差异性, 所以要按需处理

客服功能只能在小程序环境支持, h5端和app端不支持, 所以要通过条件编译语法进行处理

JS API兼容: 非h5端, 不支持window, document等JS API, uni-app扩展了uni对象, 封装了大量支持跨端的JS API, 如果使用了各端专有的API, 如微信支付等, 需要添加条件编译

// #ifdef H5 || APP-PLUS
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // 文件路径
      const tempFilePaths = res.tempFilePaths
      // 上传
      uploadFile(tempFilePaths[0])
    },
  })
  // #endif


 // #ifdef MP-WEIXIN
  uni.chooseMedia({
    // 文件个数
    count: 1,
    // 文件类型
    mediaType: ['image'],
    success: (res) => {
      // 本地路径
      const { tempFilePath } = res.tempFiles[0]
      // 上传
      uploadFile(tempFilePath)
    },
  })
  // #endif