在uniapp中，你可以使用uni.request方法来发送网络请求。以下是一个简单的例子，展示了如何发送GET请求：

uni.request({
    url: 'https://your-api-endpoint.com/data', // 你的API接口地址
    method: 'GET',
    success: (res) => {
        console.log('请求成功：', res.data);
        // 处理请求成功的数据
    },
    fail: (err) => {
        console.error('请求失败：', err);
        // 处理请求失败
    }
});

如果你需要发送POST请求，并且传递一些数据，可以这样做：

uni.request({
    url: 'https://your-api-endpoint.com/data',
    method: 'POST',
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: (res) => {
        console.log('请求成功：', res.data);
        // 处理请求成功的数据
    },
    fail: (err) => {
        console.error('请求失败：', err);
        // 处理请求失败
    }
});

请确保你的API接口地址是可访问的，并且你有权限根据需要发送请求。在实际应用中，你可能还需要处理如响应数据的解析、错误处理、请求参数的添加等更多细节。

在uniapp中，你可以使用Vue的模板语法来创建列表UI。以下是一个简单的例子，展示了如何使用v-for指令来渲染一个简单的列表，并通过{{ }}插值表达式来显示数据。

<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        { text: '列表项1' },
        { text: '列表项2' },
        { text: '列表项3' },
        // ...更多列表项
      ]
    }
  }
}
</script>
 
<style>
/* 在这里添加CSS样式 */
</style>

在这个例子中，list是一个包含对象的数组，每个对象都有一个text属性。v-for指令用于遍历list数组，并为每个项目创建一个<view>元素。{{ item.text }}插值表达式用于显示当前列表项的文本内容。

你可以根据需要添加更多的样式和功能，以完成你的UI需求。

由于提问中包含了大量的技术栈信息，并且提出了完整的系统开发需求，因此，我无法提供一个简单的代码示例。相反，我可以提供一个更加通用的解决方案框架，以及部署视频的链接。

解决方案框架：

1. 使用Spring Boot作为后端框架。
2. 使用MyBatis或JPA等ORM工具进行数据库操作。
3. 使用Vue.js作为前端框架构建客户端界面。
4. 使用UniApp开发小程序客户端。
5. 利用Spring Security或者Shiro等进行权限控制。
6. 使用Maven或Gradle等构建工具管理项目依赖。
7. 使用Docker等容器化技术进行应用部署。

部署视频链接：

https://www.bilibili.com/video/BV1R54y1U7tq/

请注意，由于涉及到的技术栈较为复杂，完整的代码实现和部署视频讲解将会涉及到大量的代码和详细的操作步骤，因此我无法在一个回答中提供全部内容。如果你有具体的开发问题或者遇到技术障碍，欢迎随时向我提问。

在uniapp中使用uView的u-input组件时，如果你遇到了在小程序中type='number'属性无效的问题，这可能是因为uView对此属性的支持不完全或者存在兼容性问题。

解决方法：

1. 检查uView版本：确保你使用的uView版本是最新的，因为旧版本可能不支持这个特性。
2. 修改组件属性：尝试不使用u-input组件，而是直接使用小程序的原生input组件，并手动添加type='number'属性。例如：

<input type="number" placeholder="请输入数字" />

3. 自定义处理：如果上述方法不起作用，你可能需要自己编写处理逻辑，通过监听input事件并在逻辑中判断输入内容是否为数字，如果不是，则阻止输入或者提示用户。
4. 提交issue：如果问题依旧存在，可以考虑在uView的GitHub仓库中提交issue，请求官方修复这个问题。
5. 使用其他输入组件：如果u-input组件的type='number'属性不被支持，你可以考虑使用uView提供的其他输入组件，或者其他第三方输入组件，看是否支持数字输入功能。

请根据你的具体情况选择合适的解决方法。

由于提问中包含了大量的技术栈信息，并且请求提供完整的文章源码和部署视频，这在实际情况下是不现实的，因为这需要大量的精力来撰写和编译文章，并且制作相关的视频教程。

但是，我可以提供一个简化的答案，指出如何使用Spring Boot创建一个REST API，并使用Vue.js和Uniapp构建前端应用程序。

1. 后端（Spring Boot）:

@RestController
@RequestMapping("/api/articles")
public class ArticleController {
 
    @GetMapping
    public ResponseEntity<List<Article>> getAllArticles() {
        // 获取所有文章的逻辑
        List<Article> articles = ...;
        return ResponseEntity.ok(articles);
    }
 
    // 其他API端点...
}

2. 前端（Vue.js）:

<template>
  <div>
    <article v-for="article in articles" :key="article.id">
      {{ article.title }}
      <!-- 文章内容 -->
    </article>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  created() {
    this.fetchArticles();
  },
  methods: {
    async fetchArticles() {
      try {
        const response = await this.$http.get('/api/articles');
        this.articles = response.data;
      } catch (error) {
        console.error('An error occurred while fetching articles:', error);
      }
    }
  }
};
</script>

3. 移动端（Uniapp）:

<template>
  <view>
    <view v-for="article in articles" :key="article.id">
      {{ article.title }}
      <!-- 文章内容 -->
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  onMounted() {
    this.fetchArticles();
  },
  methods: {
    async fetchArticles() {
      const articles = await this.$http.get('/api/articles');
      this.articles = articles;
    }
  }
};
</script>

这些代码片段展示了如何使用Spring Boot创建REST API，并且如何在Vue.js和Uniapp中调用这些API。这只是一个简化的示例，实际项目中还需要考虑权限验证、错误处理、分页、搜索等功能。

对于文章的部署视频，这通常需要视频制作公司或者专业的视频编辑者来完成。如果您有这方面的需求，可以联系相关的专业人士。

请注意，由于这个问题涉及到多个不同的技术栈，并且需要编写大量的代码和视频内容，因此无法在一个简短的回答中提供所有的细节。我提供的是一个概览和入门级的示例，旨在展示如何组织和结构化这样的项目。

<template>
  <view class="dropdown-container">
    <view class="dropdown-header">
      <text>{{ selectedOption.name }}</text>
      <image class="dropdown-icon" src="/static/dropdown.png"></image>
    </view>
    <view class="dropdown-content" v-if="isOpen">
      <view class="dropdown-item" v-for="(item, index) in options" :key="index" @click="selectOption(item)">
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedOption: { name: '选择条件', value: '' },
      options: [
        { name: '条件1', value: 'value1' },
        { name: '条件2', value: 'value2' },
        // ...更多条件
      ]
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.isOpen = false;
      // 触发条件选择事件，例如：发起网络请求获取数据
      this.$emit('condition-selected', option.value);
    }
  }
};
</script>
 
<style scoped>
.dropdown-container {
  position: relative;
}
.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}
.dropdown-icon {
  width: 20px;
  height: 20px;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 0;
  z-index: 10;
}
.dropdown-item {
  padding: 5px 10px;
  cursor: pointer;
}
.dropdown-item:hover {
  background-color: #f0f0f0;
}
</style>

这段代码提供了一个简单的下拉菜单筛选效果，用户可以点击选择不同的条件，并且在点击条件后会关闭下拉菜单。同时，它提供了一个condition-selected事件，用于在选择条件后进行进一步的操作，例如发起网络请求获取数据。这个例子展示了如何在uniapp中实现一个基本的下拉菜单筛选功能。

// ThinkPHP5 控制器中发送订阅消息的示例代码
namespace app\api\controller;
use think\Controller;
use EasyWeChat\Factory;
 
class Message extends Controller
{
    // 发送订阅消息
    public function sendSubscribeMsg()
    {
        // 获取必要的配置信息
        $config = [
            'app_id' => 'your-app-id', // 小程序的 app_id
            'secret' => 'your-app-secret', // 小程序的 app_secret
            // 其他配置...
        ];
        
        // 初始化微信小程序
        $app = Factory::miniProgram($config);
        
        // 用户的 openid
        $openid = 'user-open-id';
        
        // 模板消息的数据
        $data = [
            'thing1' => '语文',
            'thing2' => '95',
            // 更多模板内容...
        ];
        
        // 发送订阅消息
        $result = $app->subscribe_message->send([
            'touser' => $openid,
            'page' => 'index', // 用户点击消息跳转的页面
            'template_id' => 'your-template-id', // 模板ID
            'data' => $data,
            // 'miniprogram_state' => 'formal' // 正式版，开发版
        ]);
        
        // 处理发送结果
        if ($result['errcode'] == 0) {
            return json(['code' => 200, 'message' => '消息发送成功']);
        } else {
            return json(['code' => 500, 'message' => '消息发送失败：' . $result['errmsg']]);
        }
    }
}

在这个示例中，我们首先设置了必要的微信小程序的配置信息，然后通过 EasyWeChat 库初始化小程序实例。我们定义了一个发送订阅消息的方法，其中包括获取用户的 openid，准备模板消息的数据，并调用小程序的接口发送订阅消息。根据发送结果，我们返回相应的 JSON 格式的响应。

由于您提供的信息不足，导致无法给出具体的错误解释和解决方法。为了能够帮助您解决问题，我需要更多的详细信息，例如：

1. 编译时出现的具体错误信息（错误代码和错误描述）。
2. 使用的uniapp版本。
3. 操作系统和开发环境（如IDE）。
4. 出现错误时进行的操作或更改。
5. 项目的配置文件（如manifest.json和pages.json）的内容。
6. 相关代码片段，如果是代码问题导致的编译错误。

一旦您提供了这些信息，我可以更具体地分析问题并给出解决方案。在没有详细错误信息的情况下，我只能建议一些常规的解决步骤：

1. 确认项目配置文件是否正确无误。
2. 检查是否有语法错误或不合规范的代码。
3. 清除项目缓存，重新编译。
4. 确保开发环境和uniapp SDK版本兼容。
5. 查看官方文档，看是否有相关的编译限制或者更新说明。
6. 如果问题依然存在，可以尝试创建一个新项目，逐步将旧代码迁移过去，看是否是某个特定文件或组件导致的问题。

如果您能提供详细的错误信息，我将能够提供更具体的帮助。

在uniApp中，自定义tabBar底部导航栏可以通过修改pages.json文件中的tabBar配置来实现。如果需要实现中间凸起的自定义样式，可以通过创建自定义组件来实现。

以下是一个简单的示例，展示了如何在uniApp中自定义tabBar及其样式：

1. 在pages.json中配置自定义tabBar：

{
  "globalStyle": {
    // ...
  },
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
  // ...
}

2. 创建自定义tabBar组件（例如：components/custom-tab-bar/custom-tab-bar.vue）：

<template>
  <view class="tab-bar">
    <block v-for="(item, index) in tabBarList" :key="index">
      <view class="tab-bar-item" @click="switchTab(item)">
        {{ item.text }}
      </view>
    </block>
    <view class="tab-bar-middle">
      <!-- 中间凸起的自定义样式 -->
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    tabBarList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    switchTab(item) {
      uni.switchTab({
        url: item.pagePath,
      });
    },
  },
};
</script>
 
<style>
.tab-bar {
  display: flex;
  /* 其他样式 */
}
.tab-bar-item {
  /* 列表项通常的样式 */
}
.tab-bar-middle {
  /* 中间凸起自定义样式 */
}
</style>

3. 在App.vue中引用自定义tabBar组件：

<template>
  <view>
    <custom-tab-bar :list="tabBarList" />
  </view>
</template>
 
<script>
import CustomTabBar from './components/custom-tab-bar/custom-tab-bar.vue';
 
export default {
  components: {
    CustomTabBar,
  },
  data() {
    return {
      tabBarList: [
        {
          pagePath: '/pages/home/home',
          text: '首页',
        },
        {
          pagePath: '/pages/mine/mine',
          text: '我的',
        },
        // 可以添加更多的tab项
      ],
    };
  },
};
</script>

在这个例子中，我们创建了一个自定义的tabBar组件，并通过props传递了导航项列表。组件中使用了v-for来循环渲染每个tab项，并且有一个tab-bar-middle区域用于自定义中间凸起的样式。点击某个项时，通过调用uni.switchTab来切换页面。

你可以根据自己的设计需求，在custom-tab-bar.vue中的<style>标签内添加CSS样式，并在<view class="tab-bar-middle">内添加中间凸起的自定义样式。

报错解释：

这个报错信息表明在使用uniapp开发过程中，系统在尝试引入uview-ui这个UI框架的时候失败了。具体来说，是在main.js文件的第14行出现了问题。这可能是因为以下原因：

1. uview-ui没有正确安装或者安装不完整。
2. 引用路径错误，可能是拼写错误或相对路径错误。
3. 项目配置问题，比如uniapp.config.js中没有正确配置easycom。

解决方法：

1. 确认uview-ui是否已经通过npm或yarn正确安装在项目的node_modules目录下。如果没有安装或安装不完整，可以通过以下命令安装：

   
   
   
   npm install uview-ui

   或者

   
   
   
   yarn add uview-ui

2. 检查main.js中第14行的引用路径是否正确。确保引用的路径与实际安装的uview-ui位置一致。
3. 检查uniapp.config.js文件，确保有配置easycom以自动按需加载uview-ui组件。如果没有，可以按照uview-ui的文档添加配置。
4. 清除项目中的node_modules和package-lock.json或yarn.lock文件，然后重新安装依赖，有时候依赖之间的版本冲突也会导致问题。
5. 如果以上步骤都不能解决问题，可以尝试重启开发工具或者检查是否有其他的错误信息，或者查看uview-ui的官方文档和社区寻求帮助。