WeChat小程序開發（6、結合雲開發數據庫完成選項卡功能）

時間 2020-07-26

原文原文鏈接

實驗過程當中遇到的坑：數據庫

一直沒法得到數據庫裏的信息
初始化雲開發環境卻一直顯示此環境ID不存在
選項卡樣式設計問題

首先新建一個小程序，由於選擇「雲開發」會有不少的文件夾，因此選擇不使用雲開發。json

在目錄上新建雲函數文件夾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是一個字符串須要用引號包圍。app

這樣，初步的雲開發環境就配置好了。接下來製做一個具備選項卡功能的頁面，wxml代碼以下：xss

<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:[], flex

而後在點擊雲開發的數據庫新建集合，這裏我取名爲‘test1'，在裏面導入了JSON文檔來插入記錄，JSON文檔內容以下：this

{"_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"}]}

導入成功後，最關鍵的一點是點擊權限數據，選擇全部用戶可讀，僅建立者可讀寫，若是不這樣選擇，那麼將沒法在小程序中得到數據！！！這裏是我載的第二個坑。spa

而後在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;
}