Uniapp 多端开发经验整理

最新推荐文章于 2025-04-01 17:21:30 发布

XiaoCheng_T

最新推荐文章于 2025-04-01 17:21:30 发布

阅读量1.7k

点赞数 1

分类专栏： uni-app 文章标签： uni-app javascript html

本文链接：https://blog.csdn.net/XiaoCheng_T/article/details/126742022

版权

本文详细阐述了小程序开发中涉及的资质申请、服务器配置、页面结构、分包管理、生命周期管理、跨平台技术选型、SEO优化及权限设置等内容，为开发者提供了全面的实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发准备

小程序

后台配置

小程序个别类目需要行业资质，需要一定时间来申请，根据项目自身情况尽早进行服务类目的设置以免影响上线时间。
必须在后台进行服务器域名配置，域名必须为 https 。否则无法进行网络请求。注意 每月只有 5 次修改机会。

在开发工具中可配置不验证 https，这样可以临时使用非 https 接口进行开发。非 https 真机预览时需要从右上角打开调试功能。

如果有 webview 需求，必须在小程序管理后台配置域名白名单。

开发工具

下载微信开发者工具
设置 → 安全 → 打开“服务端口”。打开后方可用 HbuilderX 运行并更新到微信开发者工具。

APP

证书文件

准备苹果开发账号
ios 证书、描述文件申请方法

证书和描述文件分为开发(Development)和发布(Distribution)两种，Distribution 用来打正式包，Development 用来打自定义基座包。

ios 测试手机需要在苹果开发后台添加手机登录的 Apple 账号，且仅限邮箱方式注册的账号，否则无法添加。

Uniapp

创建 Uni-app 项目

根据文档操作即可，新建时建议先不选择模板，因为模板后期也可以作为插件导入。这里推荐一个 UI 框架 uView，兼容 Nvue 的 Uniapp 生态框架。

路由

配置：路由的开发方式与 Vue 不同，不再是 router，而是参照小程序原生开发规则在 pages.json 中进行配置，注意 path 前面不加"/"。
跳转：路由的跳转方式，同样参照了小程序有 navigator 标签和 API 两种。

需注意：

tabBar 页面仅能通过 uni.switchTab 、</n avigator>方法进行跳转。
如需求特殊可以自定义开发 tabBar，即 pages.json 中不要设置 tabBar，这样也就不需要使用 uni.switchTab 了。
url 前面需要加"/"
navigator 标签：推荐使用有助于 SEO(搜索引擎优化)。
API：常用跳转方式 uni.navigateTo()、uni.redirectTo() 、uni.switchTab()，即可处理大部分路由情况。

**问题点：**小程序页面栈最多 10 层。也就是说使用 uni.navigateTo 最多只能跳转 9 层页面。

解决： 这里不推荐直接使用 uni.redirectTo 取代来处理，会影响用户体验，除非产品设计如此。建议在会出现同页面跳转的页面(例：产品详情 → 点击底部更多产品 → 产品详情 →…)，封装一下页面跳转方法，使用 getCurrentPages() 方法获取当前页面栈的列表，根据列表长度去判断使用什么路由方法。路由方法的选择根据实际情况决定官方文档。

//页面跳转
toPage(url){
   
 let pages=getCurrentPages()
 if(pages.length<9){
   
   uni.navigateTo({
   url})
 }else{
   
   uni.redirectTo({
   url})//根据实际情况选择路由方法
 }
}

分包加载

提前规划好分包，使代码文件更加规整，全局思路更加清晰。可以根据业务流程或者业务类型来设计分包。官方文档

分包加载的使用场景：

主包大小超过 2m。
访问落地页启动较慢(因为需要下载整个主包)。

分包优化：

除页面可以分包配置，静态文件、js 也可以配置分包。可以进一步优化落地页加载速度。

在 manifest.json 中对应平台下配置 “optimization”:{“subPackages”:true} 来开启分包优化。开启后分包目录下可以放置 static 内容。

//manifest.json源码
{
     
   "mp-weixin" : {
     //这里以微信为例，如有其他平台需要分别添加
       "optimization" : {
     
           "subPackages" : true
       }
   }
}

分包预载

通过分包进入落地页后，可能会有跳转其他分包页面的需求。开启分包预载，在落地页分包数据加载完后，提前加载后续分包页面，详见官方文档

生命周期

Uniapp 的页面生命周期建议使用 onLoad、onShow、onReady、onHide 等，也可以使用 vue 生命周期 created、mounted 等，但是组件的生命周期仅支持vue 生命周期的写法。

easycom 组件模式

说明： 只要组件安装在项目的 components 目录下或 uni_modules 目录下，并符合 components/组件名称/组件名称.vue 的目录结构，就可以不用引用、注册，直接在页面中使用。easycom 为默认开启状态，可关闭。可以根据需求配置其他路径规则。详见官方文档
代码举例：

非 easycom 模式

<template>
 <view>
   <goods-list></goods-list>
 </view>
</template>
<script>
import goodsList from '@/component/goods-list'; //引用组件
export default {
     
 components: {
     
   goodsList //注册组件
 }
};
</script>