云开发(微信-小程序)笔记(十七)---- 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构建数据库与数据导入

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

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

小程序-内容管理

云开发(微信-小程序)笔记(十七)---- cms(内容管理)及案例
感谢大家,点赞,收藏,关注,评论!文章来源地址https://www.toymoban.com/news/detail-444131.html

到了这里,关于云开发(微信-小程序)笔记(十七)---- cms(内容管理)及案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Wagtail-基于Python Django的内容管理系统CMS实现公网访问

    目录 ⛳️推荐 前言 1. 安装并运行Wagtail 1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具 3. 实现Wagtail公网访问 4. 固定Wagtail公网地址 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站 Wagtail是一个用Python编写的开源

    2024年04月17日
    浏览(35)
  • 基于Python Django的内容管理系统Wagtail CMS部署与公网访问

    Wagtail是一个用Python编写的开源CMS,建立在Django Web框架上。 Wagtail 是一个基于 Django 的开源内容管理系统,拥有强大的社区和商业支持。它专注于用户体验,并为设计人员和开发人员提供精确控制。 选择wagtail的原因: 它能快速实现页面的表达,对于我这种对新实现的功能想要

    2024年02月04日
    浏览(47)
  • Wagtail-基于Python Django的内容管理系统CMS如何实现公网访问

    Wagtail是一个用Python编写的开源CMS,建立在Django Web框架上。 Wagtail 是一个基于 Django 的开源内容管理系统,拥有强大的社区和商业支持。它专注于用户体验,并为设计人员和开发人员提供精确控制。 选择wagtail的原因: 它能快速实现页面的表达,对于我这种对新实现的功能想要

    2024年02月05日
    浏览(41)
  • 【页面案例汇总】微信小程序个人信息管理页面

    这个小程序页面包含了用户头像、昵称、性别、手机号和地址等信息,用户可以自行编辑手机号和地址,并保存到本地缓存中。用户信息的获取通过调用小程序内置的 wx.getUserInfo() 方法实现,手机号和地址的保存和读取使用了小程序提供的 wx.setStorageSync() 和 wx.getStorageSync() 方

    2024年04月13日
    浏览(48)
  • 微信小程序学习笔记--商城案例(黑马教程)

    相当于转载黑马教程的教程,原文地址(https://www.escook.cn/docs-uni-shop/) 基于uniapp开发,官网地址(https://uniapp.dcloud.net.cn/) 下载Hbuilder开发工具, 安装sass编译插件, 新建,项目,基于uni-ui模板,生成的项目。 一个 uni-app 项目,默认包含如下目录及文件: 填写微信小程序AppID:m

    2024年02月09日
    浏览(60)
  • 微信小程序+前后端开发学习材料2-(视图+基本内容+表单组件)

    学习来源 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 显示面板指示点indicator-dots 图标组件 实例演示 进度条。组件属性的长度单位默认为px,咱用rpx。 实例演示 这里我用view带了一下,如果不配置进度条外置属性,可以直接 progress percent=\\\"20\\\" show-

    2024年01月18日
    浏览(50)
  • 案例130:基于微信小程序的综合文化信息管理系统

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 管理员模块的实现 会员信息管理 新闻资讯管理 文化展示

    2024年01月19日
    浏览(44)
  • 微信小程序审核,隐私协议中开发者处理信息填写的内容参考

    为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像 为了显示距离,开发者将在获取你的明示同意后,收集你的位置信息。 开发者收集你的地址,用于获取位置信息。 开发者收集你的发票信息,用于维护消费功能。 为了用户互动,开发者将在获取你的

    2024年02月08日
    浏览(59)
  • 案例119:基于微信小程序的宿舍管理系统设计与实现

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 管理员模块的实现 学生信息管理 公告信息管理 宿舍信息

    2024年01月19日
    浏览(54)
  • 案例199:基于微信小程序的快递管理平台的设计与实现

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 管理员后台功能实现 用户管理 平台公告管理 配送员管理

    2024年02月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包