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

简介: 云开发(微信-小程序)笔记(十七)---- 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

小程序-内容管理

感谢大家,点赞,收藏,关注,评论!

目录
相关文章
|
13天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
193 7
|
12天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
11天前
|
小程序 搜索推荐 数据挖掘
跳绳打卡小程序开发多钱费用
跳绳打卡小程序通过智能手机即可轻松使用,无需额外设备,只需一根跳绳即可开始您的健康之旅。它结合了便捷性、互动性和个性化设置,让跳绳这项运动变得更加有趣和高效
|
13天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
222 1
|
21天前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
9天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
9天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
10天前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
17天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
98 1
|
19天前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
16 2