需求描述
在圆梦宝典宫格导航的顶部,新增一个公告栏,滚动播放名言金句,效果如下:
开通微信云开发
要想随时添加修改名言金句,实时获取最新的名言金句,我们需要将名言金句存储在数据库中,通过接口访问获取。(避免每次更新名言金句都需修改微信小程序的源代码,以及重复微信小程序部署发布审核的过程)
与自己搭建后端服务器相比,使用微信云开发省时省力(无需购买服务器、购买域名,备案域名,开通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://tdesign.tencent.com/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"