铜九铁十，万字总结快速上手uni-app开发（下篇）

橙海LEI
222 阅读7分钟

前言

大家好，我是橙海LZ。

在上篇文章中，对小兔鲜儿项目的页面部分做了总结分享，这篇文章对uni-app开发内容以外的部分做了延伸总结。

阅读该篇文章可以了解到：

  1. 发布上线流程
  2. 常见跨端兼容场景
  3. 原生App打包
  4. uniCloud云开发
  5. 一些心得分享

发布上线

举个场景，比如要发布到微信小程序平台，那么需要先打包构建项目代码

pnpm run build:mp-weixin

image.png

image.png

打包完成以后，项目根目录下会新增dist文件夹，找到里面build/mp-weixin文件夹，导入到微信开发者工具中（其他平台基本同理）。

image.png

点击上传 image.png

填写信息

image.png

登录微信公众平台，就可以看到刚刚上传的版本，后续根据实际业务做审核/上线即可。

image.png

跨端兼容

条件编译

条件编译处理多端差异 | uni-app官网 (dcloud.net.cn)

在登录页中，H5端是无法使用uni.login这个API的，该API是基于如wx.login等小程序平台的登录接口做的封装。

image.png

所以在H5中，需要单独写一套登录逻辑

image.png

写条件编译语句时，输入#会自动带出条件编译的提示 image.png

页面效果如下：

image.png

同样在微信登录的代码逻辑里，也需要加上条件编译

image.png

可以全局搜索wx或uni开头的API按需加上条件编译语句，一般来说只要有APP/H5场景都需要考虑下跨端兼容情况

image.png

打包至H5端

pnpm run build:h5

image.png

dist/build目录下会新增H5端打包后的内容

image.png

通过Live Server这个vscode插件，在本地启动服务来运行这个打包编译好的项目

image.png

项目运行起来后，会看到控制台报错了，内容是无法加载对应的资源

image.png

原因是资源路径出现问题无法查询到，应该改为.assets/xxx的形式

image.png

在manifest.json文件中，设置H5专有属性，并配置应用基础路径

image.png

重新运行项目，可以看到页面能够正常展示了

image.png

样式兼容

页面样式与布局 | uni-app官网 (dcloud.net.cn)

image.png

还有比如H5端是单页面应用（内部需要使用scoped做样式隔离），App端通过WebView渲染，组件样式也会被隔离。

小程序本质上个多页面应用，并不存在这个问题，但是由于一套代码多端使用，当打包至H5/原生App端时，样式会出现问题，比如骨架屏。

image.png

打开IOS端，能看到后面的骨架屏样式展示效果是不对的

image.png

拿首页的骨架屏举例，这里需要抽离PageSkeleton.vue中的样式，作为外部样式引入（由于首页还用到了轮播图，所以还需要引入轮播图的样式），来防止触发scoped样式隔离。

image.png

可以看到H5端和原生App端首页骨架屏的样式都恢复了

image.png image.png

App端渲染的页面内容不是在<page>标签中，而是在<div id="app"></div>中，所以针对App端，需要对最外层容易的样式做下兼容

image.png

原生APP打包

Android

这里通过mumuPro安卓模拟器来操作下，打开「设置-关于手机」，可以通过多次点击版本号来开启「开发者模式」

image.png

其他品牌手机也类似，比如小米

image.png

打开HBuilderX，点击「运行」

image.png

将项目运行到安卓模拟器上

image.png

效果如下，页面展示上也没有问题

4.gif

如果真机运行过程遇到问题，可以在「真机运行常见故障排除指南」中找找有没有解决方式

image.png

在打包成应用包前，在manifest.json文件中设置下打包后的应用图标

image.png

在manifest.json文件中获取uni-app应用的唯一标识，后续用来云端打包安卓应用

image.png

进入开发者中心，找到需要打包的应用

image.png

生成Android云端打包证书

image.png

生成好以后，界面会更新成这样

image.png

回到HBuilderX中，准备打包

image.png

选择下配置

image.png

如果没有安装过「App云打包」插件，在打包时会自动提示，安装下即可

image.png

等待打包完成即可

image.png

HBuilderX中还可以查看打包的状态

image.png

image.png

打包完成后安装到模拟器/手机中

image.png image.png

打开查看下效果，那么安卓通过云端打包的基本流程就完成了

image.png

IOS

mac电脑上安装下Xcode这个工具，作为IOS端的模拟器

image.png

安装好以后，在HBuilderX中选择运行到模拟器基座

image.png

这里需要安装下IOS平台，否则运行到基座时无法找到模拟器设备（痛失7G容量T T） image.png

正常能够找到IOS设备的情况 image.png

运行效果：

5.gif

但是IOS打包需要付费申请证书，这点不如Android方便了，所以IOS端的打包就不演示了～

image.png

问题记录

在Mac电脑上如果是M系列的芯片，在运行项目到Android/IOS基座时可能会碰到下面的报错

image.png

如果遇见这个编译错误情况，需要安装两个包来处理

pnpm add @esbuild/darwin-arm64 -D
pnpm add @esbuild/darwin-x64 -D

安装好以后，报错问题可能还是存在，提示版本不匹配之类情况，那么需要根据不同的报错情况，修改package.json中包的版本来匹配，然后重新执行pnpm i安装依赖即可

image.png

处理方式可见参考链接。

uniCloud云开发

image.png

H5端的级联选择器，无法使用内置组件picker组件

image.png

所以需使用uni-ui里的组件uni-data-picker组件，这个组件的数据源又需要使用uniCloud。

接下来配置下uniCloud，基本流程如图

image.png

打开登录到服务空间 - uniCloud (dcloud.net.cn)，并创建一个服务空间（根据自己的需求选择云服务器，我选择的阿里云的免费套餐- -）。

创建好服务空间后需要近十分钟左右初始化过程

image.png

进入服务空间，找到云数据库创建空表，「使用openDB表模板创建」的表分类处选择其他，并选择中国城市opendb-city-china

image.png

这个在官方文档也有介绍

image.png

点击创建，创建好以后如下图所示

image.png

回到HBuilderX中，右键项目目录，创建uniCloud云开发环境，并根据自己创建的服务空间配置来选择对应的云服务器

image.png

新建完成好以后，根目录下会新增一个uniCloud文件夹

image.png

右键该文件夹去关联服务空间

image.png

这里会自动带出登录到HBuilderX编辑器账号及登录服务空间账号所属的云服务空间

image.png

关联成功

image.png

右键database目录选择「下载所有DB Schema」

image.png

这样uni-data-picker组件需要的数据源就下载好了

image.png

在地址表单组件中，对地址组件的使用需要做下条件编译

image.png

回到浏览器中会发现项目运行报错了，原因是不能通过命令行来运行项目了

image.png

需要使用 HBuilderX 的编辑器动作来运行调试项目，选择「运行到浏览器」

image.png

就能看到对应的效果了（通过云端获取数据源）

image.png

image.png

心得分享

  1. 当发生和预期不一致的情况时，先重新编译运行项目查看（vscode+微信开发者工具），再去考虑是否是代码侧出了问题，编译器本身也经常出现问题。
  2. uni-app的问题优先去查看DCloud论坛回答
  3. 当页面组件标签出现ts报错时，因为语法的更新tsconfig.json中的配置也要调整

image.png

注意@uni-helper/uni-app-types包的版本需要检查，一开始发现修改上述方式并不生效。

image.png

image.png

相关链接：

uni-helper.js.org/uni-app-typ…

ask.dcloud.net.cn/question/19…

得感谢DCloud论坛热心的开发者们，不然碰到一些棘手的问题还真不好找解决方案，不止uni-app，其他各大开源社区也是因为有了活跃、倡导分享的开发者们，才能让开源环境持续良性循环发展，感谢大家伙～

摘录一些在阅读官方文档时，一些个人觉得需要注意的小细节

image.png

image.png

image.png

image.png

image.png

写到最后

以上就是文章的所有内容。

想了解更详细的内容，可以在原视频或完整代码中了解。

感兴趣的伙伴欢迎点个关注🌟～

感谢你看到这里，如发现文章中的问题或其他感兴趣的内容欢迎指正讨论。^ ^

avatar
文章
阅读
粉丝