Uni-app开发经验分享（一）-路由、通信和开发中遇到的问题

计划将所有知识点写在一篇文章中，但在写作过程中，发现内容太多，全部分为几篇：

主要介绍了路由、通信和开发中遇到的问题和解决方案；

主要介绍了组件开发和我自己编写的几个组件插件；

主要介绍了画布以及如何实现饼图和柱状图；

主要介绍在线过程和在线过程中可能遇到的问题

uni app基于Vue Js跨平台开发框架，这意味着只要您了解Vue，就可以使用该框架编写一组代码，并将其发布到ios、android、web、各种小程序（微信/支付宝/百度/头条/QQ/订书台/淘宝）、快速App和其他平台。

本文主要分享我使用uni app的经验和总结，因此您可以查阅框架的详细介绍，并通过安装官方网站上提供的开发工具来开发项目。

本文主要关注我在开发中经常使用的方法。示例适用于App，也适用于小程序

App生命周期

启动时

初始化完成时触发：App刚刚打开，但内容看不见。您可以使用此方法给出版本更新提示

在Show上

从后台启动或进入前台：App开始查看内容

打开隐藏

从前台到后台：App在后台（例如打开其他App、电话等）

路线

对于App，每个页面对应一条路线。在uniApp中，路由必须是根目录中的页面。json的pages字段已配置。查看详细信息。注意：页面节点的第一项是App入口页面（即主页）

路线跳跃

官方api地址：

uni。导航到：保留当前页面并跳转到App中的页面。url可以接受参数，类似于router。推入式vue路由器

uni。重定向至：关闭当前页面并跳转至App中的页面。url可以接受参数，类似于router。更换vue路由器

Uni公司。重新启动：关闭所有页面并在App中打开一个页面。url可以接受参数

uni。SwitchTab：跳转到tabBar页面并关闭所有其他非tabBar页。url不能接受参数，

uni。NavigateBack：关闭当前页面并返回上一页或多层页面，类似于路由器。vue路由器中的go（-n）

小心

URL有长度限制。如果字符串太长，它将无法传递。它可以通过窗口通信（如下所述）、全局变量或encodeURI组件来解决

例子：

//第A页

常量数据={

//多个参数

}

uni.navigate收件人({

url:`/pages/pageB/pageB？data=encodeURI组件（JSON.stringify（数据））`

})

//第B页

onLoad（选项）{

const data=JSON.parse（decodeURI组件（option.data））；

}

页面生命周期

加载

监视页面加载。它的参数是从上一页传递的数据，通常用于获取从上一页面传递的参数

在Show上

将显示监控页面。每次页面出现在屏幕上时触发，包括从较低的页面返回当前页面

打开就绪

首次呈现侦听器页面。请注意，如果渲染速度很快，它将在页面进入动画之前触发

打开隐藏

监听页面被隐藏。Uni公司。navigate跳转到下一页或App在后台运行

打开卸载

听页面卸载。执行uni。导航返回当前页面

下拉刷新

侦听用户下拉操作，这些操作通常用于下拉刷新。

到达底部

滚动到页面底部（不滚动到底部）的事件，通常用于下拉下一页的数据

在TabItemTap上

切换switchTab时，单击选项卡或运行uni Triggered。参数为Object

打开BackPress

监控页面返回事件={from:backbutton，navigateBack}。Backbutton表示源是左上角的返回按钮或android返回键；NavigateBack表示源是uni NavigateBack如果您想在回调函数中做出一些逻辑判断，可以动态设置return true以禁止返回上一页，return false以返回上一页面

onBackPress（事件）{

const｛from｝=事件；

if（from===“后退按钮”）{

//逻辑判断

返回true；

}else if（from==='navigateBack'）{

返回false；

}

}

组件生命周期

组件生命周期与vue相同

细节：

信号通信

全局数据

App。vue中定义globalData的相关配置：

//App.vue公司

<脚本>

导出默认值{

全局数据：{

消息：“你好，世界！”

}

}

//用于pa