uni-app入门(一)--介绍

朱雀 2021-11-04 15:04 586阅读 0赞

**目录**

框架介绍

开发规范

目录结构

生命周期

应用生命周期

页面生命周期

路由

路由跳转

页面栈

运行环境判断

开发环境和生产环境

页面样式与布局

尺寸单位

样式导入

内联样式

选择器

全局样式与局部样式

CSS变量

固定值

Flex布局

背景图片

字体图标

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

# 框架介绍 #

## 开发规范 ##

为了实现多端兼容，综合考虑编译速度、运行性能等因素，`uni-app` 约定了如下开发规范：

*  页面文件遵循 [Vue 单文件组件 (SFC) 规范][Vue _ _SFC_]
 *  组件标签靠近小程序规范，详见[uni-app 组件规范][uni-app]
 *  接口能力（JS API）靠近微信小程序规范，但需将前缀 `wx` 替换为 `uni`，详见[uni-app接口规范][uni-app 1]
 *  数据绑定及事件处理同 `Vue.js` 规范，同时补充了App及页面的生命周期
 *  为兼容多端运行，建议使用flex布局进行开发

## 目录结构 ##

一个uni-app工程，默认包含如下目录及文件：

┌─components            uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─hybrid                存放本地网页的目录，详见
    ├─platforms             存放各平台专用页面的目录，详见
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
    ├─wxcomponents          存放小程序组件的目录，详见
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
    └─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

提示：

*  `static` 目录下的 `js` 文件不会被编译，如果里面有 `es6` 的代码，不经过转换直接运行，在手机设备上会报错。
 *  `css`、`less/scss` 等资源同样不要放在 `static` 目录下，建议这些公用的资源放在 `common` 目录下。
 *  HbuilderX 1.9.0+ 支持在根目录创建 `ext.json` 、`sitemap.json` 文件。

## 生命周期 ##

### 应用生命周期 ###

注意因为表格显示有问题，这里我就直接截的图，表格中的链接请看官方文档：[uni-app官方文档][uni-app 2]

`uni-app` 支持如下应用生命周期函数：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

**注意**

*  应用生命周期仅可在App.vue中监听，在其他页面监听无效
 *  onlaunch里进行页面跳转，如遇白屏报错，请参考[https://ask.dcloud.net.cn/article/35942][https_ask.dcloud.net.cn_article_35942]

### 页面生命周期 ###

uni-app 支持如下页面生命周期函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

onPageScroll 参数说明：

![20190809093021602.png][]

`onTabItemTap` 参数说明：

![20190809093035793.png][]

**注意**

*  onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
 *  如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用[plus.nativeObj.view][]放一个区块盖住原先的tabitem，并拦截点击事件。
 *  onTabItemTap在App端，从HBuilderX 1.9 的自定义组件编译模式开始支持。

`onNavigationBarButtonTap` 参数说明：

![20190809093354964.png][]

`onBackPress` 回调参数对象的说明

![20190809093406101.png][]

## 路由 ##

`uni-app`路由全部交给框架统一管理，开发者需要在[pages.json][]里配置每个路由页面的路径及页面样式，不支持 `Vue Router`。

### 路由跳转 ###

`uni-app` 有两种路由跳转方式：使用[navigator][]组件跳转、调用[API][]跳转。

### 页面栈 ###

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

文档：[页面栈][Link 1]

## 运行环境判断 ##

### 开发环境和生产环境 ###

`uni-app` 可通过 `process.env.NODE_ENV` 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

*  在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
 *  cli模式下，是通行的编译环境处理方式

if(process.env.NODE_ENV === 'development'){
        console.log('开发环境')
    }else{
        console.log('生产环境')
    }

**快捷代码块**

HBuilderX 中敲入代码块 `uEnvDev`、`uEnvProd` 可以快速生成对应 `development`、`production` 的运行环境判定代码。

// uEnvDev
    if (process.env.NODE_ENV === 'development') {
        // TODO
    }
    // uEnvProd
    if (process.env.NODE_ENV === 'production') {
        // TODO
    }

**判断平台**

平台判断有2种场景，一种是在编译器判断，一种是在运行期判断。

*  编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。详见：[条件编译][Link 2]

// #ifdef H5
        alert("只有h5平台才有alert方法")
    // #endif

如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

*  运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 `uni.getSystemInfoSync().platform` 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 `uni.getSystemInfoSync().platform` 返回值均为 devtools）。

switch(uni.getSystemInfoSync().platform){
        case 'android':
           console.log('运行Android上')
           break;
        case 'ios':
           console.log('运行iOS上')
           break;
        default:
           console.log('运行在开发者工具上')
           break;
    }

如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

## 页面样式与布局 ##

### 尺寸单位 ###

`uni-app` 支持的通用 css 单位包括 px、rpx

*  px即屏幕像素
 *  rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大

vue页面支持普通H5单位，但在nvue里不支持：

*  rem 默认根字体大小为 屏幕宽度/20 (微信小程序、头条小程序、App、H5)
 *  vh viewpoint height，视窗高度，1vh等于视窗高度的1%
 *  vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%

nvue还不支持百分比单位。

App端，在pages.json里的titleNView或页面里写的 plus api中涉及的单位，只支持px。**注意此时不支持px**

nvue中，uni-app 模式（[nvue 不同编译模式介绍][nvue]）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：

*  px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）
 *  wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同

下面对 `rpx` 详细说明：

设计师在提供设计图时，一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题，`uni-app` 在 App 端、H5 端都支持了 `rpx`。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。`uni-app` 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

`设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx`

换言之，页面元素宽度在 `uni-app` 中的宽度计算公式：

`750 * 元素在设计稿中的宽度 / 设计稿基准宽度`

**举例来说：**

*  若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 \* 100 / 750，结果为：100rpx。
 *  若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 \* 100 / 640，结果为：117rpx。
 *  若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 \* 200 / 375，结果为：400rpx。

**Tips**

*  注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
 *  如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。
 *  rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
 *  设计师可以用 iPhone6 作为视觉稿的标准。
 *  如果设计稿不是750px，HBuilderX提供了自动换算的工具，详见：[https://ask.dcloud.net.cn/article/35445][https_ask.dcloud.net.cn_article_35445]。
 *  App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。
 *  早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，[详见][Link 3]

### 样式导入 ###

使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。

**示例代码：**

### 内联样式 ###

框架组件上支持使用style、class属性来控制组件的样式

*  style:静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。

*  class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上，样式类名之间用空格分隔

### 选择器 ###

目前支持的选择器有：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

注意：

*  在uni-app中不能使用 \* 选择器。
 *  page 相当于 body 节点，例如：

page {
      background-color:#ccc;
    }

### 全局样式与局部样式 ###

定义在App.vue中的样式为全局样式，作用与每个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。

**注意：**App.vue中通过@import语句可以导入外联样式，一样作用于每一个页面

### CSS变量 ###

uni-app提供内置CSS变量

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6][]

**注意：**

*  var(\--status-bar-height)此变量在微信小程序环境为固定 25px ，在5+App里为手机实际状态栏高度
 *  当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置，此时可以使用一个高度为 var(--status-bar-height) 的view放在页面顶部，避免页面内容出现在状态栏
 *  由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用--window-bottom，不管在哪个端，都是固定在tabbar上方。
 *  目前nvue还不支持css变量

**代码块**

快速书写css变量的方法是：在css中敲hei，在候选助手中即可看到3个css变量。（HBuilderX 1.9.6以上支持）

示例：

<template>
        <view>
            <view class="status_bar">
                
            </view>
            <view> 状态栏下的文字 </view>
        </view>
    </template>    
    <style>
        .status_bar {
            height: var(--status-bar-height);
            width: 100%;
        }
    </style>

<template>
        <view>
            <view class="toTop">
                
            </view>
        </view>
    </template>    
    <style>
        .toTop {
            bottom: calc(var(--window-bottom) + 10px)
        }
    </style>

### 固定值 ###

uni-app 中以下组件的高度是固定的，不可修改：

![20190809144502384.png][]

### Flex布局 ###

为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档[A Complete Guide to Flexbox][]、[阮一峰的flex教程][flex]等。

### 背景图片 ###

`uni-app` 支持使用在 css 里设置背景图片，使用方式与普通 `web` 项目相同，需要注意以下几点：

*  支持 base64 格式图片。
 *  支持网络路径图片。
 *  使用本地路径背景图片需注意：

1.  图片小于 40kb，`uni-app` 会自动将其转化为 base64 格式；
2.  图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
3.  本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

.test2 {
         background-image: url('~@/static/logo.png');
     }

### 字体图标 ###

`uni-app` 支持使用字体图标，使用方式与普通 `web` 项目相同，需要注意以下几点：

*  支持 base64 格式字体图标。
 *  支持网络路径字体图标。
 *  网络路径必须加协议头 `https`。
 *  从 [http://www.iconfont.cn][http_www.iconfont.cn] 上拷贝的代码，默认是没加协议头的。
 *  `uni-app` 本地路径图标字体支持情况：

1.  字体文件小于 40kb，`uni-app` 会自动将其转化为 base64 格式；
2.  字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
3.  字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

@font-face {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }

**示例：**

<template>
        <view>
            <view>
                <text class="test"></text>
                <text class="test"></text>
                <text class="test"></text>
            </view>
        </view>
    </template>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
        }
        .test {
            font-family: iconfont;
            margin-left: 20rpx;
        }
    </style>

## <template/>和</block> ##

`uni-app` 支持在 template 模板中嵌套 `<template/>` 和 `<block/>`，用来进行 [列表渲染][Link 4] 和 [条件渲染][Link 5]。

`<template/>` 和 `<block/>` 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

**代码示例**

<template>
        <view>
            <template v-if="test">
                <view>test 为 true 时显示</view>
            </template>
            <template v-else>
                <view>test 为 false 时显示</view>
            </template>
        </view>
    </template>

<template>
        <view>
            <block v-for="(item,index) in list" :key="index">
                <view>{
       {item}} - {
       {index}}</view>
            </block>
        </view>
    </template>

小程序组件支持

`uni-app` 支持在 5+App 和小程序中使用**小程序组件**。

**平台差异说明**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 7][]

此文档要求开发者对各端小程序的**自定义组件**有一定了解，没接触过小程序**自定义组件**的可以参考：

*  [微信小程序自定义组件][Link 6]
 *  [百度小程序自定义组件][Link 7]
 *  [支付宝小程序自定义组件][Link 8]
 *  [头条小程序自定义组件][Link 9]

**目录结构**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 8][]

**使用方式**

在 `pages.json` 对应页面的 style -> usingComponents 引入组件：

{
        "pages": [
            {
                "path": "index/index",
                "style": {
                    "usingComponents": {
                        // #ifdef APP-PLUS || MP-WEIXIN
                         "custom": "/wxcomponents/custom/index"
                        // #endif
                        // #ifdef MP-BAIDU
                         "custom": "/swancomponents/custom/index"
                        // #endif
                        // #ifdef MP-ALIPAY
                         "custom": "/mycomponents/custom/index"
                        // #endif
                    }
                }
            }
        ]
    }

在页面中使用

<view>
        
        <custom name="uni-app"></custom>
    </view>

**注意事项**

*  小程序组件需要放在项目特殊文件夹 `wxcomponents`（或 mycomponents、swancomponents）。
 *  HBuilderX 建立的工程 `wxcomponents` 文件夹在 项目根目录下。
 *  vue-cli 建立的工程 `wxcomponents` 文件夹在 `src` 目录下。
 *  注意数据和事件绑定的差异，使用时应按照 vue 的数据和事件绑定方式
    
     *  属性绑定从 attr="\{ \{ a \}\}"，改为 :attr="a"；从 title="复选框\{ \{ item \}\}" 改为 :title="'复选框' + item"
     *  事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
     *  阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
     *  wx:if 改为 v-if
     *  wx:for="\{ \{ list \}\}" wx:key="\{ \{ index \}\}" 改为\`v-for="(item,index) in list"
     *  原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：*this.$emit('left-click')* 修改为 *this.$emit('leftClick')*（HBuilderX 1.9.0+ 不再需要修改此项）

详细的小程序转uni-app语法差异可参考文档[https://ask.dcloud.net.cn/article/35786][https_ask.dcloud.net.cn_article_35786]。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20211104/7c42d451602443d2a10a385ef53aad5e.png
[Vue _ _SFC_]: https://vue-loader.vuejs.org/zh/spec.html
[uni-app]: https://uniapp.dcloud.io/component/README
[uni-app 1]: https://uniapp.dcloud.io/api/README
[uni-app 2]: https://uniapp.dcloud.io/frame
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20211104/006b7bc9799d463991075035e40b4091.png
[https_ask.dcloud.net.cn_article_35942]: https://ask.dcloud.net.cn/article/35942
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20211104/5bc2f1f6b4f74f0fb0e8f4c86c6f88ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20211104/dc87419fd7f240a2896223268d5681f1.png
[20190809093021602.png]: /images/20211104/37d6020aa178447b9dc1dfb99e1b914a.png
[20190809093035793.png]: /images/20211104/6705726be9084dc18bd8a67fb4f56356.png
[plus.nativeObj.view]: http://www.html5plus.org/doc/zh_cn/nativeobj.html
[20190809093354964.png]: /images/20211104/06299fbcefba40439377a1ff94b93d64.png
[20190809093406101.png]: /images/20211104/5cfd5d317e0c492788ed7a67f1fb6572.png
[pages.json]: https://uniapp.dcloud.io/collocation/pages?id=pages
[navigator]: https://uniapp.dcloud.io/component/navigator
[API]: https://uniapp.dcloud.io/api/router
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20211104/96459ca28efe4123b420a6664699e1e8.png
[Link 1]: https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%88
[Link 2]: https://uniapp.dcloud.io/platform
[nvue]: https://ask.dcloud.net.cn/article/36074
[https_ask.dcloud.net.cn_article_35445]: https://ask.dcloud.net.cn/article/35445
[Link 3]: http://ask.dcloud.net.cn/article/36130
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5]: /images/20211104/19e3d30dc2974ef08d1464fb90c1a14b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6]: /images/20211104/217eb162791b4bf68d09c75dbb88ecd3.png
[20190809144502384.png]: /images/20211104/2519dce95fc843b398b220e67f367b11.png
[A Complete Guide to Flexbox]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[http_www.iconfont.cn]: http://www.iconfont.cn/
[Link 4]: https://uniapp.dcloud.io/use?id=%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93
[Link 5]: https://uniapp.dcloud.io/use?id=%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 7]: /images/20211104/7a121fadff564eadb8aa8ce3aec3fde8.png
[Link 6]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[Link 7]: https://smartprogram.baidu.com/docs/develop/framework/custom-component/
[Link 8]: https://docs.alipay.com/mini/framework/custom-component-overview
[Link 9]: https://developer.toutiao.com/docs/framework/custom_component_intro.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 8]: /images/20211104/29f2dc6d193749b4be04030a9585a18c.png
[https_ask.dcloud.net.cn_article_35786]: https://ask.dcloud.net.cn/article/35786