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

小程序-内容管理

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

目录
打赏
0
0
0
0
2
分享
相关文章
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
525 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
138 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
311 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
239 12
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
1312 11
技术小白如何利用DeepSeek半小时开发微信小程序?
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
【一步步开发AI运动小程序】十八、如何识别用户上传图片中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】为小程序提供人体、运动及姿态检测的AI能力,本地引擎支持10余种运动,无需后台服务,具备快速、低成本等优势。本文介绍如何通过Canvas方案读取用户上传图片的像素数据,实现人体检测与姿态分析功能,代码简单高效,适合快速集成。更多内容欢迎交流!

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问