部落商城App开发笔记 2024.11.21 实现进入app就是短视频

130 阅读1分钟

初步效果: 在这里插入图片描述

基于图鸟UI二次开发, 这里静态资源没有加载, 我在本机上安装了一个nginx, 需要启动一下.

 PS C:\dev\nginx-1.26.2> start .\nginx.exe

重新刷新就有数据了. 在这里插入图片描述

先看看目前的页面吧.

首页. 在这里插入图片描述

分类: 在这里插入图片描述

发现. 在这里插入图片描述

消息. 在这里插入图片描述

购物车. 在这里插入图片描述

我的. 在这里插入图片描述

这个项目是有短视频的功能的. 在这里插入图片描述

点击那个有视频图标的图片进去, 就进入了短视频的页面. 在这里插入图片描述

客户想要一进入APP就直接是短视频界面, 这个需求我一开始想的比较复杂, 不过后面想了想又觉得很简单了. 只需要把短视频页面配置为首页就可以了.

在这里插入图片描述 但是从代码结构来看, 这个video.vue并不在pages下面, 无法直接配置.

所以, 我选择简单的方案, 直接把它复制一份到pages下面.

在这里插入图片描述

在这里插入图片描述

接着再来到pages.json, 配置video为第一个. 在这里插入图片描述

代码是:

{
  "path": "pages/home/video",
  "style": {
    "mp-weixin": {
      "disableScroll": true
    },
    "app-plus": {
      "bounce": "none"
    },
    "mp-alipay": {
      "allowsBounceVertical": "NO"
    },
    "mp-baidu": {
      "disableScroll": true
    }
  }
},

重新访问应用, http://localhost:8581/#/![在这里插入图片描述](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9e8e20cd81db4c5695f2bc88fdf4dffc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSmF2YeengeaVmQ==:q75.awebp?rk3s=f64ab15b&x-expires=1771497008&x-signature=min%2FccuSJ3%2BUaFGnwk3YeJPd9xs%3D)

此时, 已经实现了进入app就是短视频了.

总结: 如果你想要完整的源码, 欢迎留言或私信, 如果你想要学习编程, 欢迎报名学习, 一对一包教会.

本文使用 markdown.com.cn 排版