WeChat小程序开发（六、结合云开发数据库完成选项卡功能）

实验过程中遇到的坑：

一直无法获得数据库里的信息
初始化云开发环境却一直显示此环境ID不存在
选项卡样式设计问题

首先新建一个小程序，因为选择“云开发”会有很多的文件夹，所以选择不使用云开发。

在目录上新建云函数文件夹cloud，在 project.config.json 文件中的 "description": "项目配置文件" 语句下面添加一行代码： "cloudfunctionRoot":"cloud/", 这时候你就可以观察到cloud文件夹变成了云函数专用文件夹。

点击左上角云开发按钮，配置云开发环境，自我定义云开发的环境名称，而环境ID会自动生成。在app.js中初始化云开发的环境，其中env的值就是你的后台云开发环境的ID，可以在云开发界面里点击设置查看。

//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
      env:‘freeyun-qkjp8’
    })
  },
  globalData: {
    userInfo: null
  }
})

这里我遇见了第一个坑，就是环境ID是一个字符串需要用引号包围。

这样，初步的云开发环境就配置好了。接下来制作一个具有选项卡功能的页面，wxml代码如下：

<view class="all">
    <!-- 选项目录 -->
    <view class="dir" class="dir">
        <block wx:for="{{choice}}" wx:key="{{index}}">
            <view data-id="{{item.choice_id}}" class="dir_item {{focus==item.choice_id?'active':''}}" bindtap="setFocus">{{item.choice_name}}</view>
        </block>
    </view>
    <scroll-view class="content" scroll-y="true">
        <block wx:for="{{choice[focus].info}}" wx:key="{{index}}">
            <view data-id="{{item.child_id}}" class="content_item" bindtap="">{{item.child_name}}</view>
        </block>
    </scroll-view>
</view>

界面分为头部的选项目录和下面的选项内容，点击不同标题切换内容，这里用for循环来实现，首先我们要了解在js文件中定义的choice具体格式是怎么样的：

choice:[
      {
        choice_id:0,
        choice_name:'0',
        info:[
          {
            child_id:'0',
            child_name:'内容00'
          },
          {
            child_id:'1',
            child_name:'内容01'
          },
          {
            child_id:'2',
            child_name:'内容02'
          }
        ]
      },
      {
        choice_id:1,
        choice_name:'1',
        info:[]
      },
      {
        choice_id:2,
        choice_name:'2',
        info:[]
      },
      {
        choice_id:3,
        choice_name:'3',
        info:[]
      }
    ],

如果写在js中的data里，应该是这样定义的，但是我们要通过数据库来实现数据的导入，所以这里写为： choice:[],

然后在点击云开发的数据库新建集合，这里我取名为‘test1'，在里面导入了JSON文档来插入记录，JSON文档内容如下：

{"_id":"94f505805f1c34e1007948a205c6e711","choice_id":0.0,"choice_name":"0","info":[{"child_id":0.0,"child_name":"内容00"},{"child_id":1.0,"child_name":"内容01"},{"child_id":2.0,"child_name":"内容02"},{"child_id":3.0,"child_name":"内容03"},{"child_id":4.0,"child_name":"内容04"},{"child_id":5.0,"child_name":"内容05"}]}


{"_id":"94f505805f1c34e1007948a205c6e721","choice_id":1.0,"choice_name":"1","info":[{"child_id":0.0,"child_name":"内容10"}]}


{"_id":"94f505805f1c34e1007948a205c6e731","choice_id":2.0,"choice_name":"2","info":[{"child_id":0.0,"child_name":"内容20"}]}

{"_id":"94f505805f1c34e1007948a205c6e743","choice_id":3.0,"choice_name":"3","info":[{"child_id":2.0,"child_name":"内容32"}]}

导入成功后，最关键的一点是点击权限数据，选择所有用户可读，仅创建者可读写，如果不这样选择，那么将无法在小程序中获得数据！！！这里是我载的第二个坑。

然后在js文件中通过数据库相关的API来实现数据的获取，这里我把数据库的获取操作直接卸载了 onLoad 函数中，这样一加载页面就可以获得并且加载数据了，js文档代码如下：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    choice: [],
    focus: 0
  },
  setFocus: function (e) {
    console.log('e', e)
    this.setData({
      focus: e.currentTarget.dataset.id
    })
  },



  onLoad: function () {
    let that=this
    const db=wx.cloud.database()
    db.collection('test1').get({
      success:res=>{
        console.log('res.data',res)
        that.setData({
          choice:res.data
        })
      },
      fail:err=>{
        console.log('error',err)
      }
    })

  }
})

我们仔细看 onLoad 函数，这里的 let that = this 是因为如果在 wx.cloud 函数接口中直接使用 this.setData 来改变给page的data是无法实现的，因为在这个API中的this并不是全局的this，所以要在调用API之前定义局部变量 let that = this，实现数据的改变。关于 wx.cloud.database() 的相关应用可查看微信官方文档。

在设计页面样式时我在一个地方也稍微停顿了一会，以下是我的wxss文档代码：

/**index.wxss**/
.all{
  height: 100%;
  width: 100%;
  position: fixed;
}
.dir{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  height: 7%;
}
.dir_item{
  padding: 15rpx;
  width: 25%;
  background-color: aqua;
}
.active{
  background-color: azure;
}
.content{
  width: 100%;
  height: 93%;
}
.content_item{
  width: 100%;
  margin-top: 20rpx;
  background-color: blueviolet;
  font-size: larger;
  padding: 20rpx;
  height: 200rpx;
  color: antiquewhite;
}

这里在,all里的 position：fixed 使得切换目录不会因为手指的下滑而滚动，而真正滚动的只有在 scroll-view 容器中的内容。

结果界面：

遇到的问题：

本来还想实现手指左右滑动的切换页面效果，我选择了swiper组件，但是我发现当我在一个页面滑动时另一个页面实际上也跟着滑动。暂时还没有去寻找解决方法。

WeChat小程序开发（六、结合云开发数据库完成选项卡功能）

猜你喜欢