微信小程序（页面栈和API跳转）

你的名字 2023-06-17 12:55 96阅读 0赞

## 课程大纲 ##

*  （1）数据操作限制补充
 *  （2）页面栈
 *  （3）API页面跳转—router路由API  
    wx.navigateTo  
    wx.navigateBack  
    wx.redirectTo  
    wx.switchTab  
    wx.reLaunch

## 数据操作限制 ##

*  针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制  
    （1）直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。  
    （2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；  
    （3）不要把data中任意一项的value设为undefined，否则可能会引起一些不可预料的bug。

## 页面栈 ##

*  一个小程序拥有多个页面，且部分页面可能是互相嵌套的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]

## 页面代码案例 ##

*  **“myself我的”页面代码案例**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

## 页面栈 ##

*  页面层级可能会有三层或者更多层，我们把这样的一个页面层级称为页面栈。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  第一个元素为首页，最后一个元素为当前页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]

## 页面栈 ##

*  **分析：**
 *  为了方便理解，我们这样描述页面栈：\[ pageA, pageB, pageC \]，其中pageA在最底下，pageC在最顶部，也就是用户所看到的界面
 *  结合上面案例，比如当前正在浏览公司地址页面local，文件结构如下  
    ![在这里插入图片描述][20191129095225316.png]
 *  则myself为PageA在最底部，local为PageC在最顶部，即当前浏览页
 *  **页面栈最大层级限制**
 *  *注意：*
 *  刚开始开发小程序时，限制页面栈的最大层级为5层，后来接收到很多反馈，于是放大了限制，将其扩充到10层。
 *  所以目前在编写的时候，小程序宿主环境限制页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。

## 页面跳转-路由 ##

*  接下来结合上边\[ pageA, pageB, pageC \]页面栈描述以下几个和导航相关的API
 *  **（1）wx.navigateTo**  
    增加页面栈层级，左上角返回按钮减少页面栈层级，最大层级限制10层
 *  **（2）wx.navigateBack**
 *  返回上一页或多页，参数delta返回层级数量，默认为1，上限为最底层
 *  **（3）wx.redirectTo**
 *  关闭当前页面，本质为页面重定向，页面栈大小不变
 *  **（4）wx.switchTab**
 *  导航页切换
 *  **（5）wx.reLaunch**
 *  关闭所有页面，关闭页面栈所有页面，打开目标页面

## 页面跳转-路由 ##

*  （1）wx.navigateTo
 *  描述：打开新页面，将原来的页面保留在页面栈中。在跳入到下一个页面的时候，目标页面同时进入页面栈中，在这种情况下点击手机的返回按钮才可以跳转到上一个页面。即保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;
 *  案例：wx.navigateTo(\{ url: ‘pageD’ \}) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 \[  
    pageA, pageB, pageC, pageD \]
 *  （1）wx.navigateTo —页面栈\[pageA\]变为\[pageA,pageB\]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  （1）页面栈\[pageA,pageB\]变为页面栈\[pageA,pageB,pageC\]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]

*  （1）wx.navigateTo  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]
 *  假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但两个页面状态是独立的。

## 页面跳转-获取页面栈 ##

*  **拓展：获取获取当前的页面栈**  
    语法：getCurrentPages()  
    作用：可通过 getCurrentPages() 获取当前的页面栈

## 页面跳转-路由 ##

*  （1）wx.navigateTo 验证页面栈同页叠加  
    接下来验证下上述导图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]
 *  接着上面验证，点击公司地址跳到公司地址页面，此时再在公司地址页面中添加跳页按钮，利用wx.navigateTo方法跳到公司信息页面  
    ![在这里插入图片描述][20191129100007733.png]
 *  （1）wx.navigateTo验证页面栈状态独立  
    跟验证页面栈同页叠加步骤类似，在公司信息页面添加操作按钮  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]
 *  跟验证页面栈同页叠加步骤类似，在公司信息页面添加操作按钮  
    页面栈为4层pageD时，在公司信息页面点击隐藏，隐藏红色区域。之后点击返回按钮，再次返回到pageB，会发现该页面栈红色区域为显示状态。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]
 *  （1）wx.navigateTo验证页面栈最大10层限制  
    一直跳页，当页面栈为10，即深度为10时达到最大限制。此时再点击按钮时无法跳页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]
 *  （2）wx.navigateBack
 *  描述：关闭当前页面，返回上一页面或多级页面。  
    可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
 *  案例：退出当前页面栈的最顶层页面，即退出当前页面pageD，此时页面栈变成 \[ pageA, pageB, pageC \]  
    在local.js中设置按钮，点击返回上一页，即返回aboutOur“关于我们”页面  
    ![在这里插入图片描述][20191129100340193.png]
 *  （2）页面栈\[pageA,pageB,pageC\]变为\[pageA,pageB\]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]

## 页面跳转-获取页面栈 ##

*  拓展：案例：获取获取当前的页面栈  
    例如在local.js中获取当前页面栈  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]

## 页面跳转-获取页面栈 ##

*  拓展：结合页面栈返回到上一页或多级页面  
    wx.navigateBack可以结合delta参数实现多级退回  
    ①退回到上一页  
    ![在这里插入图片描述][2019112910045174.png]  
    ②退回到上两页  
    ![在这里插入图片描述][20191129100459661.png]  
    上图这个 API 可以填写的参数只有 delta，表示要返回的页面数。  
    若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。  
    当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。
 *  **拓展：③结合页面栈返回pageA基层页面栈首页**  
    ![\-][-]
 *  假如当前页面为五级页面，使用wx.navigateBack：  
    ①当delta为1，关闭五级页面，当前页面为四级页面，页面栈大小减1；  
    ②当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；  
    以此类推，直到栈底为止，也就是首页。

## 页面跳转-路由 ##

*  （2）wx.navigateBack  
    **wx.navigateBack可以传参决定返回几层。**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]
 *  （3）**wx.redirectTo**
 *  描述：关闭当前页面，跳转到应用内的某个页面。页面重定向，将页面重新定向到一个目标页面，并不能返回到上一个页面。
 *  案例：wx.redirectTo(\{ url: ‘pageE’ \}) 是替换当前页变成pageE，此时页面栈变成 \[ pageA,  
    pageB, pageE \]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转  
    **下图**：假如使用wx.redirectTo从四级页面重定向到二级页面，此时会将关闭四级页面，并使用二级页面替换四级页面，但两个页面状态是独立的。此时的页面栈大小不变  
    注意：wx.redirectTo和wx.navigateTo的区别。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]
 *  当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的10层页面栈。这时应该考虑选择 wx.redirectTo。
 *  wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。
 *  优缺点：这样的跳转可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
 *  验证方法与验证wx.navigateTo跳页API类似
 *  **（4）wx.switchTab**
 *  描述：Tab切换，跳转的页面必须是app.json 中 tabBar 配置的页面。跳转到tabBar页面同时关闭其他非tabBar页面
 *  注意：wx.navigateTo和wx.redirectTo只能打开非tabBar页面，switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
 *  小程序提供了原生的Tabbar支持，我们可以在app.json声明tabBar字段来定义Tabbar页
 *  **（5）wx. reLaunch**
 *  描述：关闭所有页面，打开到应用内的某个页面。即重新启动， 可以打开任意页面。
 *  wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面（此时页面栈变为\[pageA\]仅仅1层）。
 *  案例：wx. reLaunch(\{ url: ‘pageH’ \}) 重启小程序，此时会关闭页面栈所有页面，打开pageH页面。
 *  （6） 跳转tabBar页面
 *  对于跳转到 tab bar 的页面，最好选择**wx.switchTab()**，它会先关闭所有非 tab bar 的页面。
 *  其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar  
    间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
 *  **小结：**  
    wx.navigateTo为打开新页面，会增加页面栈大小，直到页面栈大小为10  
    wx.redirectTo为页面重定向，不会增加页面栈大小  
    wx.navigateBack为页面回退，会减少页面栈大小，直到页面栈大小为1  
    wx.switchTab为跳转tabBar页面专用API  
    wx. reLaunch为重新启动，关闭所有页面，可以打开任意页面

## 路由+生命周期 ##

*  页面路由触发方式及页面生命周期函数的对应关系  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 16]
 *  Tab 切换对应的生命周期  
    案例：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面  
    注意下图：tabBar页面初始化之后不会被销毁。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 17]
 *  **Tab 切换对应的生命周期**
 *  页面路由触发方式及页面生命周期函数的对应关系  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 18]  
    **完毕，有问题留言小编…**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129094303118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129094339365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129094521282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191129094557465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191129094912230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191129095225316.png]: https://img-blog.csdnimg.cn/20191129095225316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/201911290956485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191129095707644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191129095739109.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191129095855831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191129100007733.png]: https://img-blog.csdnimg.cn/20191129100007733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191129100045583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191129100137875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2019112910020846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191129100340193.png]: https://img-blog.csdnimg.cn/20191129100340193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191129100400938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191129100425387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[2019112910045174.png]: https://img-blog.csdnimg.cn/2019112910045174.png
[20191129100459661.png]: https://img-blog.csdnimg.cn/20191129100459661.png
[-]: https://img-blog.csdnimg.cn/20191129100545957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20191129100627349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20191129100743365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20191129101227984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20191129101319163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20191129101349309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70