云开发（微信-小程序）笔记（十七）---- cms(内容管理)及案例

云开发（微信-小程序）笔记（十六）---- 评论

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

小程序-内容管理

感谢大家，点赞，收藏，关注，评论！