我们在上一个专栏内容《从零开始三天学会微信小程序开发》中详细介绍了如何创建、调试、发布和开发小程序，介绍了如何引入Bmob后端云和小程序结合，开发能够联网的应用《学生评语大全》，以及如何进行小程序主题的选型和变现。如果大家有什么不理解的地方，还可以回去翻看这一课程的内容。

接下来的中级篇中，我们将继续以案例的形式，讲解如何开发《PPT模版免费下载》这样的小程序，最终的效果如下：

完整的源码下载地址：www.bmobapp.com/shop/detail…

一、引入新的UI模块

微信小程序虽然也提供了不少的组件，可以帮我们实现很多很多界面效果。但很多时候，我们需要实现更复杂的界面效果，如果都需要我们一个个去实现的话，这个工作量将会非常巨大。

所幸的是，市面上已经有不少成熟的小程序UI组件库，比如，我们我们这个课程中引入的vant-weapp库中的tabs组件（如下图所示）：

1、安装nodejs

下载地址：nodejs.org/en/download…

一路next安装，完成之后，node -v如果出现类似于下面的界面，说明安装成功。

2、引入vant-weapp库

在小程序开发工具中，点击终端 -> 新建终端，然后输入下面的命令，如下图所示：

npm i @vant/weapp -S --production

3、构建npm

在小程序开发工具中，点击工具 -> 构建 npm，如下图：

屏幕截图 2024-06-18 104020.png

一切完成之后，我们会在资源管理器中看到node_modules/@vant文件夹，如下图所示：

4、修改app.json

打开app.json文件，找到并去掉"style": "v2",这行代码，如下图所示：

二、使用tabs和tab组件

1、打开index/index.json文件，添加如下的代码，表示要使用vant组件里面的tabs和tab组件。

{
  "usingComponents": {
    "van-tab":"@vant/weapp/tab/index",
    "van-tabs":"@vant/weapp/tabs/index"
  }
}

2、打开index/index.wxml文件，先清空原来的内容，替换为如下面的代码：

<van-tabs>
  <van-tab title="北京">北京是一座历史悠久、文化底蕴深厚的城市，也是中国的首都和政治、文化中心。</van-tab>
  <van-tab title="上海">上海位于中国东部,是中国经济发展最活跃、开放程度最高、 创新能力最强的区域之一。</van-tab>
  <van-tab title="广州">广州是国际大都市、国际商贸中心、国际综合交通枢纽、国家综合性门户城市、国家历史文化名城。</van-tab>
  <van-tab title="深圳"></van-tab>
  <van-tab title="香港"></van-tab>
  <van-tab title="澳门"></van-tab>
</van-tabs>

完成之后，界面效果如下：

三、引入动态tabs名称

我们要完成的是《PPT模版免费下载》这个小程序，tab是从Bmob后端云中动态拉取下来的。

1、数据表设计

为了展示动态的ppt下载分类，我们需要在Bmob后端云中添加一个分类表（category表）。

category表

名称	类型	备注
name	string	分类名称

添加数据之后的category表如下：

2、设置并获取API安全码

打开Bmob后端云，进入应用，点击设置 -> 应用密钥，设置你这个应用的API安全码，并获取 Secret Key。这两个值会在接下来初始化的时候使用到。

3、下载和引入Bmob SDK

打开网址 gitee.com/bmober/hydr… ，下载最新的Bmob SDK，到目前为止最新的版本是Bmob-2.5.30.min.js，如下图：

下载完成之后，把文件拷贝到小程序utils文件夹下面，如下图所示：

打开app.js文件，在最前面添加如下的代码：

const Bmob = require('/utils/Bmob-2.5.30.min.js');
Bmob.initialize('你的Secret Key','你设置的API安全码');
wx.Bmob = Bmob;

4、获取category分类内容

打开 index/index.js文件，添加如下的方法：

  getCategory(){
    const query = wx.Bmob.Query('category')
    query.find().then(res=>{
      this.setData({
        categorys:res
      })
    })
  },

并且在初始化中调用这个方法：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getCategory()
  },

5、修改前端展示的内容

修改index/index.wxml文件如下：

<van-tabs>
  <van-tab  wx:for="{{categorys}}" title="{{item.name}}">这里将来放置分类的内容</van-tab>
</van-tabs>

完成之后，效果如下：

6、完善展示效果

我们会发现，分类名称并没有完整的展示出来，解决这个问题，我们只需要修改<van-tabs>的内容如下即可：

<van-tabs  ellipsis="{{false}}">
  <van-tab  wx:for="{{categorys}}" title="{{item.name}}">这里将来放置分类的内容</van-tab>
</van-tabs>

最终的效果如下：

下一节我们会继续完善这个小程序，本节到此结束。

从零开始三天学会小程序开发中级篇（一）