本文主要围绕攻略页面进行讲解，更多代码细节可参见 攻略列表、攻略详情 、 发布评论 和 发布攻略。
操作步骤
步骤1：搭建攻略展示页
- 进入 CMS 内容管理控制台，新建攻略内容模型，数据库名称设置为 glpj。
- 进入新建的攻略页面，如下设置内容集合：
内容类型 展示名称 数据库字段名 图片 照片 photo 单行字符串 标题 title 日期与时间 时间 time 单行字符串 作者 user 数字 浏览量 lll 富文本 简介 xq 说明更多 CMS 内容管理详细操作请参见 搭建轮播图。
- 这里我们依然通过 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：搭建攻略详情及发表评论功能
- 进入 CMS 内容管理控制台，新建攻略评论内容模型，数据库名称设置为 glplgl。
- 进入新建的攻略评论页面，如下设置内容集合：
内容类型 展示名称 数据库字段名 单行字符串 用户 user 单行字符串 文字 text 单行字符串 用户名字 username 日期与时间 data data 单行字符串 plwz plwz 说明更多 CMS 内容管理详细操作请参见 搭建轮播图。
- 攻略详情页面的逻辑及前端代码如下：
// 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,
})
},
}) - 在对应的攻略详情页面，单击去评论的时候我们需要获取到用户的 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
})
}
},
})说明针对内容安全，微信云开发提供内容安全功能，可对云开发数据库中存储的信息进行内容安全的规则设置，自动进行内容审核并对触发违规的内容进行处理。详情请参见 内容安全。
- 最终效果如下：
步骤3：搭建发表攻略功能
- 进入 app.json 页面，添加 weui 框架。
{
"useExtendedLib": {
"weui": true
}
} - 然后进入 fbpl.json 页面再次引入 weui 的框架并在 fbpl.wxml 中调用。相关代码如下：
{
"usingComponents": {
"mp-uploader": "weui-miniprogram/uploader/uploader",
"mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell",
"mp-form-page": "weui-miniprogram/form-page/form-page",
"mp-form": "weui-miniprogram/form/form",
"mp-toptips": "weui-miniprogram/toptips/toptips",
"mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
"mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog"
}
} - 最终效果如下：
