简介

  1. uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
  2. uni-app作为跨平台一种解决方案，有预感坑会非常多，了解如何写代码和解决bug即可；官方文档很杂乱，可能是因为杂乱关系，部分文档未能及时更新，没办法保证全部API可以使用；官方推荐的教学视频，也不推荐看，理由是视频录制时间为19～20年，跟现在版本差别很大，硬要看也不是不行，尽量选年份离现在比较近的
  3. 学习前需要的知识点
    • html+css+js
    • vue
    • 微信小程序
    • 后端（不会也没关系）
    • scss（另一个名字sass）

生命周期

应用生命周期

注意：应用生命周期仅在App.vue中监听，在其他页面监听无效

页面生命周期

组件生命周期

项目规范

兼容页面要点

  1. rpx单位
  2. 长列表用nvue的list组件，app端瀑布流用nvue的waterfall组件等
  3. 尽量使用class选择器
    • 许多页面在开发后期要用到nvue组件才能实现
    • 官方建议部分组件用nvue页面，例如map、video组件
  4. 尽量写兼容性高的代码
  5. flex布局 + 定位布局

nvue注意要点

  1. 部分页面功能实现，只有nvue才能办到，尽管限制很多，但还是得用
  2. nvue控制显示隐藏，只支持v-if，不支持v-show
  3. nvue只能使用flex布局，不支持其他布局方式
  4. 布局不支持百分比、媒体查询、背景图
  5. 文本内容，必须放在组件内
  6. css选择器支持超少，只能使用class选择器
  7. class进行绑定时，只支持数组语法
  8. App.vue定义的全局js，不会在nvue页面生效，globalData和vuex能生效
  9. nvue没有层概念，页面定位后，z-index不起作用，实际是后面的元素在上面
  10. 上面缺点，官方总有一天会支持，可在weex文档查询

    nvue和weex关系：uni-app是逻辑和渲染分离的。渲染层，在app端提供了两套排版引擎：小程序方式的webview渲染和weex方式的原生渲染。两种渲染引擎根据需求自己选择。vue文件走的webview渲染，nvue走的原生渲染
    Weex文档地址：https://doc.weex.io/zh/docs/api/weex-variable.html

目录规范

  1. 官方目录规范
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    ┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
    │─components            符合vue组件规范的uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─hybrid                App端存放本地html文件的目录
    ├─platforms             存放各平台专用页面的目录
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
    ├─uni_modules           存放[uni_module](/uni_modules)。
    ├─wxcomponents          存放小程序组件的目录
    ├─nativeplugins         App原生插件
    ├─unpackage             非工程代码，一般存放运行或发行的编译结果
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息
    ├─pages.json            配置页面路由、导航条、选项卡等页面类信息
    └─uni.scss              这里是uni-app内置的常用样式变量
  2. 个人目录规范（待定）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    components  组件目录
      uni-ui  官方ui
      stencil 模版组件
      feature 功能组件
    static  资源目录
    pages   页面目录
    data    测试数据目录
    mixins  配置目录
    common  公共目录

项目训练

  1. 新建uni-app项目 > 默认模板 > vue3版本
  2. 项目名随意，仅用来学习

全局样式配置

  1. 项目内新建common文件夹 > css文件夹 > ulan-cms.scss
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    /* 文字尺寸 */
    $ulan-font-size-md: 24rpx;
    $ulan-font-size-base: 28rpx;
    $ulan-font-size-lg: 32rpx;
    $ulan-font-size-hg: 36rpx;
    $ulan-font-size-mx: 48rpx;

    /* 文字颜色 */
    $ulan-text-color-red: #ed1c24;
    $ulan-text-color-grey: #333333;
    $ulan-text-color-deep-grey: #666666;
    $ulan-text-color-shallow-grey: #999999;
    $ulan-text-color-white: #FFFFFF;

    /* 背景颜色 */
    $ulan-bg-color-white: #FFFFFF;
    $ulan-bg-color-pink: #FFC0CB;
    $ulan-bg-color-red: #fe023b;
    $ulan-bg-color-yellow: #FFFF00;
    $ulan-bg-color-orange: #FFA500;
    $ulan-bg-color-blue: #0000FF;
    $ulan-bg-color-deep-sky-blue: #00BFFF;
    $ulan-bg-color-black: #000000;
    $ulan-bg-color-white-smoke: #F5F5F5;
    $ulan-bg-color-mask-white: rgba(255, 255, 255, 0.3);	//遮罩颜色

    /* 图标尺寸 */
    $ulan-icon-size-mi: 20rpx;
    $ulan-icon-size-sm: 40rpx;
    $ulan-icon-size-md: 50rpx;
    $ulan-icon-size-base: 80rpx;
    $ulan-icon-size-lg: 120rpx;
    $ulan-icon-size-hg: 160rpx;
    $ulan-icon-size-mx: 200rpx;

    /* 边框半径 */
    $ulan-border-radius-mi: 8rpx;
    $ulan-border-radius-base: 12rpx;
    $ulan-border-radius-hg: 40rpx;
    $ulan-border-radius-circle: 100rpx;

    /* 边框颜色 */
    $ulan-border-color-theme: #3fc1c9;
    $ulan-border-color-deep-sky-blue: #00BFFF;
    $ulan-border-color-red: #fe023b;
    $ulan-border-color-grey: #333333;
    $ulan-border-color-deep-grey: #666666;
    $ulan-border-color-shallow-grey: #999999;
    $ulan-border-color-white-smoke: #F5F5F5;

    /* 内容边距 */
    $ulan-padding-size-md: 10rpx;
    $ulan-padding-size-base: 20rpx;
    $ulan-padding-size-lg: 30rpx;
    $ulan-padding-size-hg: 40rpx;

    /* 水平间距 */
    $ulan-spacing-row-mi: 8rpx;
    $ulan-spacing-row-sm: 10rpx;
    $ulan-spacing-row-base: 12rpx;
    $ulan-spacing-row-lg: 20rpx;

    /* 垂直间距 */
    $ulan-spacing-col-mi: 6rpx;
    $ulan-spacing-col-sm: 8rpx;
    $ulan-spacing-col-base: 12rpx;
    $ulan-spacing-col-lg: 20rpx;
    $ulan-spacing-col-mx: 30rpx;

    /* 透明度 */
    $ulan-opacity-disabled: 0.3;	// 组件禁用态的透明度

    /* 行为相关颜色 */
    $ulan-type-primary: #2979ff;
    $ulan-type-primary-light: #ecf5ff;
    $ulan-type-primary-disabled: #a0cfff;
    $ulan-type-primary-dark: #2b85e4;

    $ulan-type-warning: #ff9900;
    $ulan-type-warning-disabled: #fcbd71;
    $ulan-type-warning-dark: #f29100;
    $ulan-type-warning-light: #fdf6ec;

    $ulan-type-success: #19be6b;
    $ulan-type-success-disabled: #71d5a1;
    $ulan-type-success-dark: #18b566;
    $ulan-type-success-light: #dbf1e1;

    $ulan-type-error: #fa3534;
    $ulan-type-error-disabled: #fab6b6;
    $ulan-type-error-dark: #dd6161;
    $ulan-type-error-light: #fef0f0;

    $ulan-type-info: #909399;
    $ulan-type-info-disabled: #c8c9cc;
    $ulan-type-info-dark: #82848a;
    $ulan-type-info-light: #f4f4f5;

    /* 文章场景相关 */
    $ulan-post-color-title: #2C405A;	// 文章标题颜色
    $ulan-post-font-size-title: 40rpx;
    $ulan-post-color-subtitle: #555555;	// 二级标题颜色
    $ulan-post-font-size-subtitle: 36rpx;
    $ulan-post-color-paragraph: #3F536E;	// 文章段落颜色
    $ulan-post-font-size-paragraph: 32rpx;
  2. 打开uni.scss文件，导入ulan-cms.scss，@表示根目录
    1
    2
    /* 引入全局样式 */
    @import '@/common/css/ulan-cms.scss';
  3. pages/index/index.vue，<style lang="scss">添加scss语法，修改title字体大小
    1
    2
    3
    4
    .title {
      font-size: $ulan-font-size-base;
      color: #8f8f94;
    }
  4. 运行到浏览器 > Chrome，如果你的写法没问题但报错了，控制台选停止运行，再点击运行

导出与导入js

  1. 我跟老师学习uni-app过程，老师为了图方便，在main.js文件写成全局配置js，我试了下Vue.prototype.导入名，结果是使用不了，原因是输入prototype，ide没有任何提示，我猜想是prototype不能使用了
  2. 无所谓了，换个局部方式导出与导入js，common/js/helper.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const random = (min, max) => {
      if (min >= 0 && max > 0 && max >= min) {
        let gab = max - min + 1;
        return Math.floor(Math.random() * gab + min);
      } else {
        return 0;
      }
    }
    export default {
      random
    }
  3. pages/index/index.vue，试着打印随机数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    import Helper from '@/common/js/helper.js'
    export default {
      ...
      onLoad() {
        let number = Helper.random(1, 10);
        console.log(number);
      },
      ...
    }

uni-ui组件

  1. 官方插件市场搜索”uni-ui”，点击”使用HBuilderX导入插件”，安装插件到项目中，你会得到uni_modules文件夹
  2. uni-ui文档，链接：https://uni-app.dcloud.io/component/uniui/uni-card.html
  3. 复制代码到pages/index/index.vue内，重新运行本地服务器，查看是否有效果
    1
    2
    3
    4
    5
    6
    7
    8
    <template>
      <view class="content">
        ...
        <uni-card>
          <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
        </uni-card>
      </view>
    </template>

pages.json全局配置

  1. 用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabBar
  2. pages.json文档，链接：https://uni-app.dcloud.io/collocation/pages.html
  3. 配置项列表
  4. 试着修改标题与颜色
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
      "pages": [
        //pages数组中第一项表示应用启动页，参考：https://uni-app.dcloud.io/collocation/pages
        {
          "path": "pages/index/index",
          "style": {
            "navigationBarTitleText": "首页",
            "navigationBarBackgroundColor": "#aa96da",
            "navigationBarTextStyle": "#FFF"
          }
        }
      ],
      ...
    }

tabBar页面

  1. 对准pages文件夹鼠标右键选”新建页面”，分别创建consult、connect、me页面
  2. 关于tabBar图标获取，可以去阿里图标收集，点击”下载”后修改颜色，未选中颜色#bfbfbf，选中颜色#3fc1c9，这样”未选中”与”选中”图片就有了，建议存放在static/images/tabBar中
  3. 上面工作完成后，配置下pages.json，主要添加3个页面，以及设置下tabBar页面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    {
      "pages": [ //pages数组中第一项表示应用启动页，参考：https://uni-app.dcloud.io/collocation/pages
        {
          "path": "pages/index/index",
          "style": {
            "navigationBarTitleText": "Hi, 幽蓝",
            "navigationBarBackgroundColor": "#3fc1c9",
            "navigationBarTextStyle": "white"
          }
        },
        {
          "path": "pages/consult/consult",
          "style": {
            "navigationBarTitleText": "聊天",
            "navigationBarBackgroundColor": "#3fc1c9",
            "navigationBarTextStyle": "white"
          }
        }, {
          "path": "pages/connect/connect",
          "style": {
            "navigationBarTitleText": "联系",
            "navigationBarBackgroundColor": "#3fc1c9",
            "navigationBarTextStyle": "white"
          }
        }, {
          "path": "pages/me/me",
          "style": {
            "navigationBarTitleText": "我的",
            "navigationBarBackgroundColor": "#3fc1c9",
            "navigationBarTextStyle": "white"
          }
        }
      ],
      "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
      },
      "uniIdRouter": {},
      "tabBar": {
        "color": "#bfbfbf",
        "selectedColor": "#3fc1c9",
        "backgroundColor": "#fff",
        "borderStyle": "white",
        "height": "120rpx",
        "list": [{
          "pagePath": "pages/index/index",
          "iconPath": "static/images/tabBar/icon_home.png",
          "selectedIconPath": "static/images/tabBar/icon_home_active.png",
          "text": "主页"
        },
          {
            "pagePath": "pages/consult/consult",
            "iconPath": "static/images/tabBar/icon_consult.png",
            "selectedIconPath": "static/images/tabBar/icon_consult_active.png",
            "text": "聊天"
          },
          {
            "pagePath": "pages/connect/connect",
            "iconPath": "static/images/tabBar/icon_connect.png",
            "selectedIconPath": "static/images/tabBar/icon_connect_active.png",
            "text": "联系"
          },
          {
            "pagePath": "pages/me/me",
            "iconPath": "static/images/tabBar/icon_me.png",
            "selectedIconPath": "static/images/tabBar/icon_me_active.png",
            "text": "我的"
          }
        ]
      }
    }

swiper轮播图

  1. uni-ui插件自带swiper功能，具体详情可在官方文档查看
  2. 老师似乎没有分享图片资源，只能看到演示页面，我通过浏览器插件获取图片，存放在static/images/index
  3. 官方项目自带easycom，传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue。就可以不用引用、注册，直接在页面中使用
  4. 鼠标右键components文件夹，新建组件，选择模版勾选使用scss的模版组件，并勾选创建同名目录，最后输入文件名banner
  5. pages/index/index.vue导入组件，只需要写标签即可，不需要你写import导入，其他组件也是以同样方式导入，不会在重复写index.vue了
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <template>
      <view class="page">
        <!-- 轮播图 -->
        <banner></banner>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {

        };
      },
      onLoad() {

      },
      methods: {

      }
    }
    </script>

    <style lang="scss">
    // index页面全局配置
    .page {
      background-color: $ulan-bg-color-white-smoke;
      color: $ulan-text-color-deep-grey;
      font-size: $ulan-font-size-base;
    }
    </style>
  6. banner图会缩在屏幕左侧，右侧留下一堆空白，你需要用scss修正
  7. swiper标签用来配置轮播图功能，功能实现则交给script标签完成，先给图片.banner-item设置宽度100%撑开容器，mode="widthFix"则是宽度不变，高度自动变化，保持原图宽高比不变；考虑到nvue兼容，选择器只用class，以及scss不使用嵌套class写法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <template>
      <view class="banner">
        <swiper class="swiper" circular :indicator-dots="indicatorDots" :indicator-color="'#FFFFFF'"
                :indicator-active-color="'#3fc1c9'" :autoplay="autoplay" :interval="interval" :duration="duration">
          <swiper-item>
            <view class="swiper-item uni-bg-red">
              <image src="@/static/images/index/banner.jpg" class="banner-item" mode="widthFix">
              </image>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item uni-bg-green">
              <image src="@/static/images/index/banner.jpg" class="banner-item" mode="widthFix">
              </image>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item uni-bg-blue">
              <image src="@/static/images/index/banner.jpg" class="banner-item" mode="widthFix">
              </image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </template>

    <script>
    export default {
      name: "banner",
      data() {
        return {
          indicatorDots: true,
          autoplay: true,
          interval: 3000,
          duration: 400
        };
      }
    }
    </script>

    <style lang="scss" scoped>
    .swiper {
      height: 320rpx;
    }

    .banner-item {
      width: 100%;
    }
    </style>

flex弹性布局

  1. 传统页面布局：display属性 + position属性 + float属性
  2. 容器的属性
    属性 说明
    flex-direction 属性决定主轴排列方向
    flex-wrap 如果一条轴线排不下，如何换行
    justify-content 定义主轴(X轴)上的对齐方式，flex-wrap非nowrap才有效果
    align-items 定义交叉轴(Y轴)上的对齐方式，flex-wrap非nowrap才有效果
    align-content 定义多根轴线上的对齐方式，flex-wrap非nowrap才有效果，如果项目只有一根轴线，该属性不起作用 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
  3. 项目的属性
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

导航图标

  1. 主要练习flex布局，布局分两行，每行4个图标+文字；部分图标比较大，可以用box-sizing: border-box，它可以使内边距向内缩放，不会影响到其他元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <template>
      <view class="nav-wrap">
        <view class="nav-item">
          <image class="nav-icon" src="@/static/images/index/about.png"></image>
          <text>公司简介</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon nav-case-size" src="@/static/images/index/case.png"></image>
          <text>公司案例</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon" src="@/static/images/index/news.png"></image>
          <text>新闻中心</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon" src="@/static/images/index/service.png"></image>
          <text>服务范围</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon" src="@/static/images/index/photo.png"></image>
          <text>相册展示</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon nav-video-size" src="@/static/images/index/video.png"></image>
          <text>视频展示</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon" src="@/static/images/index/message.png"></image>
          <text>在线留言</text>
        </view>
        <view class="nav-item">
          <image class="nav-icon nav-phone-size" src="@/static/images/index/telphone.png"></image>
          <text>电话咨询</text>
        </view>
      </view>
    </template>

    <script>
    export default {
      name: "nav-icon",
      data() {
        return {

        };
      }
    }
    </script>

    <style lang="scss" scoped>
    .nav-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0 20rpx;
      background-color: $ulan-bg-color-white;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      width: 160rpx;
      margin: 20rpx 0;
    }

    .nav-icon {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 10rpx;
    }

    // 修改部分图标太大问题
    .nav-case-size {
      box-sizing: border-box;
      padding: 2rpx 2rpx;
    }

    // 修改部分图标太大问题
    .nav-video-size,
    .nav-phone-size {
      box-sizing: border-box;
      padding: 3rpx 3rpx;
    }
    </style>

成功案例

  1. 成功案例后，我还要写视频、相册组件，它们都具有相同的样式，我尝试过在index.vue写公共class类，然而并没有生效，原因是我没有在index.vue使用公共class类，而是在其他组件中使用，理所当然不会生效，查了下官方文档，可以在App.vue写公共class类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <style lang="scss">
    /*每个页面公共css */
    .index-block {
      display: flex;
      flex-direction: column;
      background-color: $ulan-bg-color-white;
      margin-top: 20rpx;
    }

    .index-block-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      padding: 0rpx 30rpx;
    }

    .index-title-left {
      border-left-color: $ulan-border-color-theme;
      border-left-width: 6rpx;
      border-left-style: solid;
      padding-left: 10rpx;
      color: $ulan-text-color-deep-grey;
      font-size: $ulan-font-size-lg;
    }

    .index-title-right {
      border-top: 2rpx $ulan-border-color-shallow-grey solid;
      border-right: 2rpx $ulan-border-color-shallow-grey solid;
      width: 16rpx;
      height: 16rpx;
      transform: rotate(45deg);
    }

    .index-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0rpx 30rpx;
    }
    </style>
  2. 实现右箭头，要么用图标，要么文字>，然而老师用边框线+动画旋转实现右箭头，没想到还有这种操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <template>
      <view class="index-block">
        <view class="index-block-title">
          <view class="index-title-left">成功案例</view>
          <view class="index-title-right">
            <text></text>
          </view>
        </view>
        <view class="index-content">
          <view class="case-item">
            <image class="case-thumb" src="@/static/images/index/case-demo.jpg"></image>
            <text class="case-title">案例展示一</text>
          </view>
          <view class="case-item">
            <image class="case-thumb" src="@/static/images/index/case-demo.jpg"></image>
            <text class="case-title">案例展示二</text>
          </view>
          <view class="case-item">
            <image class="case-thumb" src="@/static/images/index/case-demo.jpg"></image>
            <text class="case-title">案例展示三</text>
          </view>
          <view class="case-item">
            <image class="case-thumb" src="@/static/images/index/case-demo.jpg"></image>
            <text class="case-title">案例展示四</text>
          </view>
        </view>
      </view>
    </template>

    <script>
    export default {
      name: "case-exhibit",
      data() {
        return {

        };
      }
    }
    </script>

    <style lang="scss" scoped>
    .case-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 330rpx;
    }

    .case-thumb {
      width: 330rpx;
      height: 250rpx;
    }

    .case-title {
      padding: 20rpx 0;
    }
    </style>

新闻中心

  1. 有时候标题名太长了，文字会挤在一起，推荐设置超出部分以…形式隐藏
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    <template>
      <view class="index-block">
        <view class="index-block-title">
          <text class="index-title-left">新闻中心</text>
          <view class="index-title-right"></view>
        </view>
        <view class="index-content">
          <view class="news-item">
            <view class="news-thumb">
              <image class="news-img" src="@/static/images/index/news-demo.jpg"></image>
            </view>
            <view class="news-info">
              <text class="news-title">测试新闻测试新闻测试新</text>
              <view class="news-more">
                <text class="news-datetime">2021-2-1 10:25</text>
                <text class="news-view">30</text>
              </view>
            </view>
          </view>
        </view>
        <view class="index-content">
          <view class="news-item">
            <view class="news-thumb">
              <image class="news-img" src="@/static/images/index/news-demo.jpg"></image>
            </view>
            <view class="news-info">
              <text class="news-title">测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻</text>
              <view class="news-more">
                <text class="news-datetime">2021-2-1 10:25</text>
                <text class="news-view">30</text>
              </view>
            </view>
          </view>
        </view>
        <view class="index-content">
          <view class="news-item">
            <view class="news-thumb">
              <image class="news-img" src="@/static/images/index/news-demo.jpg"></image>
            </view>
            <view class="news-info">
              <text class="news-title">测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻</text>
              <view class="news-more">
                <text class="news-datetime">2021-2-1 10:25</text>
                <text class="news-view">30</text>
              </view>
            </view>
          </view>
        </view>
        <view class="index-content">
          <view class="news-item">
            <view class="news-thumb">
              <image class="news-img" src="@/static/images/index/news-demo.jpg"></image>
            </view>
            <view class="news-info">
              <text class="news-title">测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻</text>
              <view class="news-more">
                <text class="news-datetime">2021-2-1 10:25</text>
                <text class="news-view">30</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>

    <script>
    export default {
      name: "news-centre",
      data() {
        return {

        };
      }
    }
    </script>

    <style lang="scss" scoped>
    .news-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .news-thumb {
      width: 200rpx;
    }

    .news-img {
      width: 200rpx;
      height: 160rpx;
    }

    .news-info {
      padding-left: 15rpx;
    }

    .news-title {
      font-size: $ulan-font-size-base * 1.1;
      color: $ulan-text-color-grey;
      overflow: hidden;
      text-overflow: ellipsis;
      // 下面3个必须写，可以实现2行文字
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .news-more {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      color: $ulan-text-color-shallow-grey;
      width: 480rpx;
      margin-top: 10rpx;
    }

    .news-view {
      padding-right: 10rpx;
    }
    </style>

视频

  1. video组件官方文档有说，直接拿来用就行了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <template>
      <view class="index-block">
        <view class="index-block-title">
          <view class="index-title-left">视频展示</view>
          <view class="index-title-right">
            <text></text>
          </view>
        </view>
        <view class="index-content">
          <view class="video-item">
            <video id="myVideo" class="video-size"
                   src="https://img.cdn.aliyun.dcloud.net.cn/guide/uni-app/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
                   enable-danmu danmu-btn controls></video>
          </view>
        </view>
      </view>
    </template>

    <script>
    export default {
      name: "video-exhibit",
      data() {
        return {

        };
      }
    }
    </script>

    <style lang="scss" scoped>
    .video-size {
      width: 690rpx;
    }
    </style>

  2. 这里遇到一个问题，视频下半部分被tabBar挡住了，下面是官方文档说明

    tabbar在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量–window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(–window-bottom) + 10px)

  3. 小程序端跑了一下发现没问题，也就是说，这是H5端的问题，我的思路是给每个页面添加个view空组件，再用官方提供的解决方法，设置下高度顶上去，这样tabBar就不会挡住内容了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <view class="page">
        <!-- 轮播图 -->
        <banner></banner>
        <!-- 导航图标 -->
        <nav-icon></nav-icon>
        <!-- 成功案例 -->
        <case-exhibit></case-exhibit>
        <!-- 新闻中心 -->
        <news-centre></news-centre>
        <!-- 视频展示 -->
        <video-exhibit></video-exhibit>
        <!-- 防止tabBar挡住页面内容 -->
        <view class="h5-tabbar-bottom"></view>
      </view>
    </template>

  4. App.vue设置下公共样式，这里-120rpx是我试出来的，H5端不会挡住就行了，小程序端也看了下没问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style lang="scss">
    /*每个页面公共css */

    ...

    // 防止tabBar挡住页面内容
    .h5-tabbar-bottom {
      padding-bottom: calc(var(--window-bottom) - 120rpx);
    }
    </style>

相册

  1. 最大的问题是如何让相册，水平方向滑动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <template>
      <view class="index-block">
        <view class="index-block-title">
          <view class="index-title-left">相册展示</view>
          <view class="index-title-right">
            <text></text>
          </view>
        </view>
        <scroll-view scroll-x>
          <view class="photo-wrap">
            <view class="photo-item">
              <image class="photo-size" src="@/static/images/index/photo-demo.jpg"></image>
              <text class="photo-title">相册展示</text>
            </view>
            <view class="photo-item">
              <image class="photo-size" src="@/static/images/index/photo-demo.jpg"></image>
              <text class="photo-title">相册展示</text>
            </view>
            <view class="photo-item">
              <image class="photo-size" src="@/static/images/index/photo-demo.jpg"></image>
              <text class="photo-title">相册展示</text>
            </view>
            <view class="photo-item">
              <image class="photo-size" src="@/static/images/index/photo-demo.jpg"></image>
              <text class="photo-title">相册展示</text>
            </view>
          </view>
        </scroll-view>
      </view>

    </template>

    <script>
    export default {
      name: "photo-exhibit",
      data() {
        return {

        }
      }
    }
    </script>

    <style lang="scss" scoped>
    .photo-wrap {
      display: inline-flex;
      padding: 0 20rpx 20rpx 20rpx;

    }

    .photo-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 340rpx;
      margin: 0 10rpx;
    }

    .photo-size {
      width: 340rpx;
      height: 270rpx;
    }

    .photo-title {
      line-height: 60rpx;
    }
    </style>

条件编译

  1. common/css/mixin/ulan-mixin.scss，在uni.scss引入
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* nvue默认是flex布局 */
    @mixin ullan-flex($flexDirection:row, $flexWrap:wrap, $justifyContent:space-between, $alignItems:center){
      /* #ifndef APP-PLUS-NVUE */
      display: flex;
      /* #endif */
      flex-direction: $flexDirection;
      flex-wrap: $flexWrap;
      justify-content: $justifyContent;
      align-items: $alignItems;
    }

    @mixin ulan-border($width:3rpx, $style:solid, $color:#999999){
      border-width: $width;
      border-style: $style;
      border-color: $color;
    }

    @mixin ulan-margin($top:0rpx, $right:0rpx, $bottom:0rpx, $left:0rpx){
      margin-top: $top;
      margin-right: $right;
      margin-bottom: $bottom;
      margin-left: $left;
    }

    @mixin ulan-padding($top:0rpx, $right:0rpx, $bottom:0rpx, $left:0rpx){
      padding-top: $top;
      padding-right: $right;
      padding-bottom: $bottom;
      padding-left: $left;
    }

    @mixin ulan-container-size($widht:750rpx, $height:0) {
      width: $widht;
      @if $height == 0 {
        /* #ifndef APP-PLUS-NVUE */
        height: auto;
        /* #endif */
      }@else {
        height: $height;
      }
    }
  2. common/css/ulan-common.scss，在uni.scss引入
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* 设置其他平台元素跟nvue元素一样的特性 */
    /* #ifndef APP-PLUS-NVUE */
    view, input, image, scroll-view, swiper, swiper-item, text, textarea, video {
      position: relative;
      box-sizing: border-box;
    }
    image {
      display: inline-block;
    }
    /* #endif */


    /*  #ifdef APP-PLUS-NVUE */
    view {
      flex-direction: row;
    }
    /* #endif */
  3. 按照uni-app规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。在C语言中，通过#ifdef、#ifndef的方式，为windows、mac等不同os编译不同的代码。uni-app参考这个思路，为uni-app提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现
  4. 写法：以#ifdef或#ifndef加%PLATFORM%开头，最后以#endif结尾。
    • #ifdef：if defined 仅在某平台存在
    • #ifndef：if not defined 除了某平台均存在
    • %PLATFORM%：平台名称

留言页面

  1. pages/consult/consult.vue，主要练习form表单的使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    <template>
      <view class="page">
        <view class="banner">
          <image class="banner-size" src="@/static/images/message/banner.jpg" mode="widthFix"></image>
        </view>
        <view class="form-container">
          <form @submit="formSubmit">
            <!-- 姓名输入框 -->
            <view class="form-item">
              <text class="form-left">姓名</text>
              <view class="form-right">
                <input class="uni-input" name="name" placeholder="请输入姓名">
              </view>
            </view>
            <!-- 电话输入框 -->
            <view class="form-item">
              <text class="form-left">电话</text>
              <view class="form-right">
                <input class="uni-input" name="phone" placeholder="请输入电话">
              </view>
            </view>
            <!-- 行业下拉选项 -->
            <view class="form-item">
              <text class="form-left">行业</text>
              <view class="form-right">
                <picker @change="bindPickerChange" :value="index" :range="array">
                  <view class="uni-input">{{array[index]}}</view>
                </picker>
              </view>
            </view>
            <!-- 性别单选 -->
            <view class="form-item form-item-radio">
              <text class="form-left">性别</text>
              <view class="form-right">
                <radio-group class="radio-container" @change="changeSex">
                  <label class="uni-list-cell uni-list-cell-pd radio-list" v-for="(item, index) in sex"
                         :key="item.value">
                    <view>
                      <radio :value="item.value" :checked="index === current" />
                    </view>
                    <view>{{item.name}}</view>
                  </label>
                </radio-group>
              </view>
            </view>
            <!-- 平台多选 -->
            <view class="form-item form-item-radio">
              <text class="form-left">平台</text>
              <view class="form-right">
                <checkbox-group class="radio-container" @change="checkboxChange">
                  <label class="uni-list-cell uni-list-cell-pd radio-list" v-for="(item, index) in platform"
                         :key="item.value">
                    <view>
                      <checkbox :value="item.value" :checked="item.checked" />
                    </view>
                    <view>{{item.name}}</view>
                  </label>
                </checkbox-group>
              </view>
            </view>
            <!-- 留言 -->
            <view class="form-item form-item-radio">
              <text class="form-left">留言</text>
              <view class="form-right">
                <textarea name="" id="textarea" class="textarea" rows="10" placeholder="给我留言..."></textarea>
              </view>
            </view>
            <!-- 提交 -->
            <button form-type="submit" type="primary">提交留言</button>
            <!-- 防止tabBar挡住页面内容 -->
            <view class="h5-tabbar-bottom"></view>
          </form>
        </view>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {
          array: ['金融', '计算机', '医疗', '个体经营', '政府部门', '其他'],
          index: 0,
          current: 0,
          sex: [{
            value: 'man',
            name: '男',
            checked: true
          }, {
            value: 'woman',
            name: '女'
          }],
          platform: [{
            value: 'H5',
            name: 'H5',
            checked: true
          }, {
            value: 'MiniProgram',
            name: '小程序'
          }, {
            value: 'APP',
            name: 'APP'
          }]
        };
      },
      methods: {
        formSubmit() {},
        bindPickerChange(e) {
          this.index = e.detail.value;
        },
        changeSex() {},
        checkboxChange() {}
      }
    }
    </script>

    <style lang="scss">
    .page {
      color: $ulan-text-color-deep-grey;
      font-size: $ulan-font-size-lg;
    }

    .banner {
      width: 750rpx;
    }

    .banner-size {
      width: 750rpx;
    }

    .form-item {
      @include ulan-flex;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid $ulan-border-color-white-smoke;
    }

    .form-item-radio {
      align-items: flex-start;
    }

    .form-left {
      width: 150rpx;
      text-align: right;
      margin-right: 30rpx;
    }

    .form-right {
      flex: 1;
    }

    .radio-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .radio-list {
      display: flex;
      flex-direction: row;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }

    .textarea {
      width: 470rpx;
      height: 200rpx;
      border: 4rpx solid $ulan-border-color-white-smoke;
    }
    </style>

uni-icons组件

  1. pages/connect/connect.vue，我尝试导入阿里字体图标，然而失败了，网上搜到的教程，以及询问群友的方法，通通无法使用，最后某人说用官方提供的icons库，试了以下可以用了！
  2. 官方插件市场搜索”uni-icons”，点击”使用HBuilderX导入插件”，安装插件到项目中，此前我安装过”uni-ui”，它会提示我是否替换，我全都替换了，然后可以直接使用了
  3. uni-icons文档，链接：https://uni-app.dcloud.io/component/uniui/uni-icons.html
    1
    2
    3
    4
    5
    <!--基本用法-->
    <uni-icons type="qq" size="30"></uni-icons>

    <!--换成星星图标-->
    <uni-icons type="star" size="30"></uni-icons>

联系页面

  1. 这个页面的图标来源于”uni-icons”库，点击拨打电话，它是通过点击事件触发官方提供的api，实现通话效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    <template>
      <view class="page">
        <view class="banner">
          <image class="banner-size" src="../../static/images/connect/banner.jpg" mode="widthFix"></image>
        </view>
        <view class="connect-wrap">
          <!-- 电话 -->
          <view class="connect-item">
            <view class="connect-left">
              <uni-icons class="connect-icon" type="phone-filled" size="24" color="#5E6D82"></uni-icons>
              <text>12345678910</text>
            </view>
            <text class="connect-right-color" @tap="callPhone">拨打电话</text>
          </view>
          <!-- qq -->
          <view class="connect-item">
            <view class="connect-left">
              <uni-icons class="connect-icon" type="qq" size="24" color="#5E6D82"></uni-icons>
              <text>123456</text>
            </view>
          </view>
          <!-- 邮箱 -->
          <view class="connect-item">
            <view class="connect-left">
              <uni-icons class="connect-icon" type="email-filled" size="24" color="#5E6D82"></uni-icons>
              <text>123456@qq.com</text>
            </view>
          </view>
          <!-- 位置 -->
          <view class="connect-item">
            <view class="connect-left">
              <uni-icons class="connect-icon" type="location-filled" size="24" color="#5E6D82"></uni-icons>
              <text>广东深圳</text>
            </view>
            <text>地图</text>
          </view>
        </view>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {

        };
      },
      methods: {
        // 点击拨打电话
        callPhone() {
          uni.makePhoneCall({
            phoneNumber: "12345678910"
          })
        }
      }
    }
    </script>

    <style lang="scss">
    .page {
      background-color: $ulan-bg-color-white-smoke;
      color: $ulan-text-color-deep-grey;
      font-size: $ulan-font-size-lg;
      height: 100vh;
    }

    .banner {
      width: 750rpx;
    }

    .banner-size {
      width: 750rpx;
    }

    .connect-wrap {
      padding: 20rpx;
    }

    .connect-item {
      @include ulan-flex;
      height: 120rpx;
      margin-bottom: 20rpx;
      padding: 30rpx 30rpx;
      background-color: $ulan-text-color-white;
    }

    .connect-left {
      @include ulan-flex;
      // margin-left: 30rpx;
    }

    .connect-icon {
      margin-right: 20rpx;
    }

    .connect-right-color {
      // margin-right: 30rpx;
      color: #3490de;
    }
    </style>

我的页面

  1. 我的页面非常简单，但是我想实现点击”关于我们”跳转到其他网站，这里又又又失败了，微信小程序端似乎没问题，但是H5、Andorid、ios端都失败了，难道是不兼容吗，还是得换其他方式写？
  2. pages/me/me.vue，有趣点在点击”关于我们”可以向web页面发送地址
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    <template>
      <view class="page">
        <view class="header">
          <view class="header-img">
            <image class="header-img-size" src="@/static/images/me/header.jpg" mode=""></image>
          </view>
          <text class="nickname">幽蓝</text>
        </view>

        <view class="cells">
          <!--向web页面发送地址-->
          <navigator url="/pages/web/web?url=https://diyulan.me" class="cell">
            <uni-icons class="header-icon" type="info" size="30" color="#5E6D82"></uni-icons>
            <text class="title">关于我们</text>
          </navigator>
          <view class="cell">
            <uni-icons class="header-icon" type="person-filled" size="30" color="#5E6D82"></uni-icons>
            <text class="title">客服帮助</text>
          </view>
        </view>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {

        };
      }
    }
    </script>

    <style lang="scss">
    .page {
      color: $ulan-text-color-deep-grey;
      font-size: $ulan-font-size-lg;
    }

    .header {
      @include ulan-flex(column);
      background-color: #3fc1c9;
      @include ulan-padding(50rpx, 0, 80rpx, 0);
    }

    .header-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50px;
    }

    .header-img-size {
      @include ulan-container-size(120rpx, 120rpx);
      border-radius: 50px;
      /* #ifdef MP-ALIPAY */
      background-size: cover;
      /* #endif */
    }

    .nickname {
      color: #FFF;
      font-size: $ulan-font-size-base*1.2;
      margin-top: 20rpx;
    }

    .cells {}

    .cell {
      @include ulan-flex(row, center, flex-start);
      height: 90rpx;
      padding-left: 30rpx;
      border-bottom: 2rpx $ulan-border-color-white-smoke solid;
    }

    .header-icon {
      margin-right: 20rpx;
      font-size: 46rpx;
    }
    </style>
  3. pages/web/web.vue，用来测试web-view组件，src属性设置成动态获取，通过me页面点击触发，向web页面发送url，随后被onLoad生命周期函数给接收，通过this指向web页面，修改它的url，最终展示出嵌套的页面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <template>
      <view>
        <web-view :src="url"></web-view>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {
          url: ""
        };
      },
      onLoad(option) {
        this.url = option.url || "";
      }
    }
    </script>

    <style lang="scss">

    </style>

总结

  1. 视频后半部分，主要讲后端提供接口，前端发送请求获取接口数据，从这里开始我没继续做了，而是看完对接流程，以及是如何实现。建议学了下Node.JS，它是一门后端语言，是用javaScript语法实现接口，能帮助你理解前后端通信。