开发指南

API 文档

步骤4:搭建攻略页面

最近更新时间:2022-03-31 16:19:44

本文主要围绕攻略页面进行讲解,更多代码细节可参见 攻略列表攻略详情发布评论

操作步骤

步骤1:搭建攻略评论功能

  1. 进入 CMS 内容管理控制台,新建攻略内容模型,数据库名称设置为 glpj
  2. 进入新建的攻略页面,如下设置内容集合:
    内容类型 展示名称 数据库字段名
    图片 照片 photo
    单行字符串 标题 title
    日期与时间 时间 time
    单行字符串 作者 user
    数字 浏览量 lll
    富文本 简介 xq
    说明

    更多 CMS 内容管理详细操作请参见 搭建轮播图

  3. 这里我们依然通过 wx:for 渲染出列表,并给他点击跳转事件,并将当前文章 ID 编号进行传递。
    <!--pages/gltl/gltl.wxml-->
    <view class="banner">
    <!----><image src="https://6363-ccntst-8gsp6zkw250f8e38-1305928500.tcb.qcloud.la/cloudbase-cms/upload/2021-11-25/5hbujycykft9vg9g82xcsw0f6z34v8o5_.jpg"></image>
    </view>
    <view class="miin_baer">
    <view class="title_pl">
    <view class="pl_bt">攻略评论</view>
    <view class="qpl" id="{{rmbs._id}}" bindtap='showtl'>发表</view>
    </view>
    <view class="mian_box" wx:for="{{rmbs}}" wx:for-item="item" wx:key="_id" bindtap='showbs' id="{{item._id}}">
    <view class="min_box_img">
    <image src="{{item.phpto}}"></image>
    </view>
    <view class="mian_text">
    <view class="miam_text_title">
    {{item.title}}
    </view>
    <view class="mian_user">
    <view class="user_logo">
    <image src="../../images/font-ui/nstx.png"></image>
    </view>
    <view class="user_name">
    {{item.user}}
    </view>
    <view class="taolun">
    <image src="../../images/font-ui/pinglun-08.png"></image>
    </view>
    <view class="liulanl">
    <view class="lll_zp">
    <image src="../../images/font-ui/liulan.png"></image>
    </view>
    <view class="lll_sz">
    {{item.lll}}+
    </view>
    </view>
    </view>
    </view>
    </view>
    </view>

步骤2:搭建攻略详情

  1. 进入 CMS 内容管理控制台,新建攻略评论内容模型,数据库名称设置为 glplgl
  2. 进入新建的攻略评论页面,如下设置内容集合:
    内容类型 展示名称 数据库字段名
    单行字符串 用户 user
    单行字符串 文字 text
    单行字符串 用户名字 username
    日期与时间 data data
    单行字符串 plwz plwz
    说明

    更多 CMS 内容管理详细操作请参见 搭建轮播图

  3. 攻略详情页面的逻辑及前端代码如下:
    // pages/glxq/glxq.js
    wx.cloud.init({
    env: '环境 ID',
    traceUser: true,
    })
    const db=wx.cloud.database()
    Page({

    /**
    * 页面的初始数据
    */

    data: {
    list_id:"",
    rmb:""
    },

    /**
    * 生命周期函数--监听页面加载
    */

    onLoad: function (options) {
    this.setData({
    list_id:options.list_id
    })
    console.log( this.data.list_id),
    /**/
    db.collection("glpj").doc(this.data.list_id).get().then(res=>{
    console.log(res)
    this.setData({
    rmbs:res.data
    })
    })
    const _=db.command
    db.collection('glpj').doc(this.data.list_id).update({
    data:{
    lll:_.inc(1)
    }
    })
    db.collection("glplgl").where({plwz:this.data.list_id}).get().then(res=>{
    console.log(res)
    this.setData({
    rmb:res.data
    })
    })
    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */

    onReady: function () {

    },

    /**
    * 生命周期函数--监听页面显示
    */

    onShow: function () {

    },
    showbs:function(e){
    console.log(e.currentTarget.id)
    wx.navigateTo({
    url:'/pages/xpl/xpl?list_id='+e.currentTarget.id,
    })
    },
    })
  4. 在对应的攻略详情页面,单击去评论的时候我们需要获取到用户的 openid 和当前要发布评论的文章 ID。去评论的逻辑及前端代码如下:
    // pages/xpl/xpl.js
    wx.cloud.init({
    env: '环境 ID',
    traceUser: true,
    })
    const db = wx.cloud.database()
    var myDate = new Date();
    Page({

    /**
    * 页面的初始数据
    */

    data: {
    list_id: "",
    userid: '',
    },

    /**
    * 生命周期函数--监听页面加载
    */

    onLoad: function (options) {
    this.setData({
    list_id: options.list_id
    })
    console.log(this.data.list_id)
    const app = getApp()
    var userid = app.globalData.userid
    this.setData({
    userid: userid,
    })
    },
    showsq: function () {
    wx.switchTab({
    url: '../my/my',
    })
    },
    /**
    * 生命周期函数--监听页面初次渲染完成
    */

    onReady: function () {

    },
    btnSub(res) {

    if (res.detail.value.text != '' && res.detail.value.username != '') {
    var {
    text,
    username
    } = res.detail.value;
    db.collection("glplgl").add({
    data: {
    user: this.data.userid,
    text: text,
    plwz: this.data.list_id,
    username: username,
    data: myDate.toLocaleString(),
    _createTime: Date.parse(new Date()),
    }
    }).then(res => {
    wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
    })
    })
    } else {
    wx.showToast({
    title: '请填写信息',
    icon: 'error',
    duration: 2000
    })
    }
    },
    })
    说明

    针对内容安全,微信云开发提供内容安全功能,可对云开发数据库中存储的信息进行内容安全的规则设置,自动进行内容审核并对触发违规的内容进行处理。详情请参见 内容安全

目录