1.cms(内容管理)
1-1.cms内容管理
云开发 --> 更多 --> 内容管理 --> 点击开通(可能需要1~7分钟)
一个云开发对应一个内容管理(cms),如果开通失败,就创建新的开发环境去开通内容管理(cms),如果还不行的话,就需要重新注册新的小程序(一个小程序可以开通两个云开发环境)
1-2.CMS(可视化管理后台)的进入
云开发 --> 更多 --> 内容管理 -->点击访问地址
其中:内容模型的作用有数据库的创建,数据库字段的创建。
1-3.cms的小建议与注意事项
cms里面的数据自动同步到数据库中,数据库中的数据同步到cms里面就需要创建相同集合和字段名的数据库。
标题建议使用单行字符串,正文等建议使用多行字符串。
枚举类型相当于是选择,如做单选题,选项就是枚举类型。
需要进行时间排序就选择毫秒时间,不需要时间排序就选择时间字符串。
2.简易新闻案例
富文本官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
2-1.cms构建数据库与数据导入
2-2.编写app.json文件,创建两个页面
"pages": [ "pages/cms/cms", "pages/cms-1/cms-1",
2-3.编写cms.js文件
// pages/cms/cms.js Page({ //生命周期函数--监听页面加载 onLoad(options) { wx.cloud.database().collection('news') .get() .then(res =>{ console.log('请求数据成功!',res) this.setData({ list: res.data }) }) .catch(res =>{ console.log('请求数据失败! ',res) }) }, //跳转新闻详情页 gocms(e){ // console.log(e.currentTarget.dataset.id) wx.navigateTo({ url: '/pages/cms-1/cms-1?id='+ e.currentTarget.dataset.id, }) }
2-4.编写cms.json文件
{ "usingComponents": {}, "navigationBarTitleText": "首页" }
2-5.编写cms.wxml文件
<!--pages/cms/cms.wxml--> <view class="item" wx:for="{{list}}" wx:key="index" bindtap="gocms" data-id="{{item._id}}"> <view>{{item.title}}</view> <view>{{item.time}}</view> </view>
2-6.编写cms.wxss文件
/* pages/cms/cms.wxss */ .item{ padding: 15rpx; border-bottom: 1px solid gainsboro; }
2-7.编写cms-1.js文件
// pages/cms-1/cms-1.js Page({ /** * 生命周期函数--监听页面加载 */ onLoad(options) { wx.cloud.database().collection('news').doc(options.id).get() .then(res => { console.log('详情页请求成功',res) this.setData({ data: res.data }) }) .catch( res => { console.log('详情页请求失败',res) }) }
2-8.编写cms-1.json文件
{ "usingComponents": {}, "navigationBarTitleText": "新闻详情" }
2-9.编写cms-1.wxml文件
<!--pages/cms-1/cms-1.wxml--> <view class="title">{{data.title}}</view> <view class="time">发布时间:{{data.time}}</view> <!---富文本组件--> <rich-text nodes="{{data.content}}"></rich-text>
2-10.编写cms-1.wxss文件
/* pages/cms-1/cms-1.wxss */ .title{ font-size: 40rpx; } .time{ font-size: 28rpx; color: gray;
2-11.效果图(视频)
https://live.csdn.net/v/208963
小程序-内容管理
感谢大家,点赞,收藏,关注,评论!