云开发 CloudBase
视频服务与安全产品捉虫活动邀您参加！> HOT
文档中心>云开发 CloudBase>示例教程>小程序>预约点餐小程序开发>步骤4：搭建攻略页面

步骤4：搭建攻略页面

最近更新时间：2024-02-02 14:52:22

我的收藏

本页目录：

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

操作步骤

步骤1：搭建攻略展示页

1. 进入 CMS 内容管理控制台，新建攻略内容模型，数据库名称设置为 glpj。
2. 进入新建的攻略页面，如下设置内容集合：
内容类型
展示名称
数据库字段名
图片
照片
photo
单行字符串
标题
title
日期与时间
时间
time
单行字符串
作者
user
数字
浏览量
lll
富文本
简介
xq
说明：
更多 CMS 内容管理详细操作请参见 搭建轮播图。
3. 这里我们依然通过 wx:for 渲染出列表，并给他点击跳转事件，并将当前文章 ID 编号进行传递。
gltl.wxml
gltl.js
<!--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>

// pages/gltl/gltl.js
wx.cloud.init({
    env: '环境 ID',
    traceUser: true,
  })
  const db=wx.cloud.database()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        rmbs:''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        db.collection("glpj").get().then(res=>{
            console.log(res)
            this.setData({
              rmbs:res.data
            })
             })
    },
    showbs:function(e){
        console.log(e.currentTarget.id)
        wx.navigateTo({
          url:'/pages/glxq/glxq?list_id='+e.currentTarget.id,
      })
    },
    showtl:function(e){
      wx.navigateTo({
        url:'/pages/fbpl/fbpl',
    })
    },
 })   


步骤2：搭建攻略详情及发表评论功能

1. 进入 CMS 内容管理控制台，新建攻略评论内容模型，数据库名称设置为 glplgl。
2. 进入新建的攻略评论页面，如下设置内容集合：
内容类型
展示名称
数据库字段名
单行字符串
用户
user
单行字符串
文字
text
单行字符串
用户名字
username
日期与时间
data
data
单行字符串
plwz
plwz
说明：
更多 CMS 内容管理详细操作请参见 搭建轮播图。
3. 攻略详情页面的逻辑及前端代码如下：
glxq.js
glxq.wxml
// 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,
    })
  },    
})

<!--pages/glxq/glxq.wxml-->
<view class="zpq" id="{{item._id}}">
    <image src="{{rmbs.phpto}}"></image>
</view>
<view class="dd">
    <rich-text class="rich" nodes="{{rmbs.xq}}"></rich-text>
</view>
<view class="fbsj">
    发布时间：{{rmbs.time}}
</view>
<view class="lll">
    <view class="liulanl">
        <view class="lll_zp">
            <image src="../../images/font-ui/liulan.png"></image>
        </view>
        <view class="lll_sz">
            {{rmbs.lll}}+
        </view>
    </view>
</view>
<view class="pl">
    <view class="title_pl">
     <view class="pl_bt">评论</view> 
     <view class="qpl" id="{{rmbs._id}}" bindtap='showbs'>去评论</view>
     </view>
    <view class="pl_box" wx:for="{{rmb}}" wx:for-item="item" wx:key="_id"  >
        <view class="pl_xxl" >
            <view class="pl_tx">
                <image src="../../images/font-ui/nstx.png"></image>
            </view>
            <view class="pl_xx_us">
                <view class="pl_xx_user">
                    {{item.username}}
                </view>
                <view class="pl_xx_time">
                    {{item.data}}
                </view>
            </view>
            <view class="dz">
                <image src="../../images/font-ui/dzz.png"></image>
            </view>
        </view>
        <view class="plxx_xq">
            {{item.text}}
        </view>
    </view>
</view>

4. 在对应的攻略详情页面，单击去评论的时候我们需要获取到用户的 openid 和当前要发布评论的文章 ID。去评论的逻辑及前端代码如下：
xpl.js
xpl.wxml
// 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
            })
        }
    },
})

<!--pages/xpl/xpl.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="wdl_ban" wx:if="{{userid==''}}">
    <view class="wdl">
        <image src="../../images/font-ui/wdl.png"></image>
    </view>
    <view class="text_main">您还未授权登录，请授权登录！</view>
    <button size="mini" type="primary" bindtap='showsq' class="btn_sq">去授权</button>
</view>
<view class="xpl" wx:if="{{userid!=''}}">
    <form bindsubmit="btnSub">
        <view class="top-s">
            <view class="top-text">用户名称：</view>
            <view class="weui-cell__bd">
              <input class="weui-input" name="username" placeholder="输入名称" />
            </view>
        </view>
        <view class="top-s">
            <view class="top-text">评论：</view>
            <view class="weui-cell__bd">
                <textarea bindblur="bindTextAreaBlur" name="text" class="weui-text" auto-height placeholder="自动变高" />
            </view>
        </view>
        <button style="margin: 0 aout;margin-top:40rpx;margin-bottom:40rpx;" type="primary" formType="submit">发表评论</button>
    </form>
</view>

说明：
针对内容安全，微信云开发提供内容安全功能，可对云开发数据库中存储的信息进行内容安全的规则设置，自动进行内容审核并对触发违规的内容进行处理。详情请参见 内容安全。
5. 最终效果如下：




步骤3：搭建发表攻略功能

1. 进入 app.json 页面，添加 weui 框架。
{
    "useExtendedLib": {
        "weui": true
     }
}

2. 然后进入 fbpl.json 页面再次引入 weui 的框架并在 fbpl.wxml 中调用。相关代码如下：
fbpl.json
fbpl.wxml
fbpl.js
{
  "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"
  }
}

<view wx:if="{{userid!=''}}">

<view class="weui-cells__title">发布攻略</view>
<mp-cell prop="name" title="标题" ext-class="">
            <input bindinput="formInputChange" data-field="name" class="weui-input" placeholder="请输标题" />
</mp-cell>
<mp-cell prop="mobile" title="昵称" ext-class=" ">
            <input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入昵称" />
            <view slot="footer" class="weui-vcode-btn"></view>
</mp-cell>
<view class="weui-cells__title">攻略</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell">
          <view class="weui-cell__bd">
            <textarea class="weui-textarea" bindinput="formwtInputChange" placeholder="请输入攻略" name="wt" style="height: 3.3em" />
            <view class="weui-textarea-counter">200</view>
          </view>
        </view>
</view>
<view class="page">
    <view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="4" title="附件上传" tips="最多可上传4张照片"></mp-uploader>
            </mp-cell>
        </mp-cells>
    </view>
</view>
<view class="weui-btn-area">
            <button class="weui-btn" type="primary" formType="submit" bindtap="submitForm">确定</button>
      </view>
    </view>

// pages/fbpl/fbpl.js
wx.cloud.init({
    env: '您的环境ID',
  traceUser: true,
})
const db=wx.cloud.database()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        userid:'',
        files: []
    }, 

    /**
     * 生命周期函数--监听页面加载
     在这里我们在app.js里面的openid
     */
    onLoad: function (options) {
        const app = getApp()
        var  userid = app.globalData.userid
        this.setData({
          userid:userid,
        }) 
        wx.cloud.init({
            traceUser: true
          })

          this.setData({ 
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })
    },
    formInputChange(e) {
        const {
          field
        } = e.currentTarget.dataset
        this.setData({
          [`formData.${field}`]: e.detail.value
        })
      },
      formplInputChange(e) {
        console.log(e)
        this.setData({
          palce: e.detail.value
        })
      },
      formwtInputChange(e) {
        console.log(e)
        this.setData({
          wt: e.detail.value
        })
      },
      submitForm(e) {
            this.setData({
              name: this.data.formData.name,
              phone: this.data.formData.mobile,
              tsbm: this.data.tsbmun,
            })
            if(this.data.wt.length>10 && this.data.openid!='')
            {
              db.collection('glpj').add({
                // data 字段表示需新增的 JSON 数据
                data: {
                  title: this.data.name,
                  user: this.data.mobile,
                  xq: this.data.wt,
                  phpto:this.data.files,
                  userid: this.data.openid,
                  time: Date.parse(new Date()),
                  _createTime: Date.parse(new Date()),
                  lll:0,
                }
              })
              wx.reLaunch({
                  url: '../gltl/gltl',
                  success: (res)=> {
                    wx.showToast({
                      title: '完成',
                      success:(res)=>{
                        wx.navigateTo({
                          url: '../index/index',
                        })
                      }
                    })
                  }
                })
            }else{
              wx.showToast({
                title: '描述',
                icon: 'error',
                duration: 2000
              })
            }
      },
    /**
     * 生命周期函数--监听页面显示
     */
    showsq: function () {
      wx.switchTab({
          url: '../my/my',
      })
  }, 
    chooseImage: function (e) {
        var that = this;
        wx.chooseImage({
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                that.setData({
                    files: that.data.files.concat(res.tempFilePaths)
                });
            }
        })
    },
    previewImage: function(e){
        wx.previewImage({
            current: e.currentTarget.id, // 当前显示图片的http链接
            urls: this.data.files // 需要预览的图片http链接列表
        })
    },
    selectFile(files) {
        console.log('files', files)
        // 返回false可以阻止某次文件上传
    },
    uplaodFile(files) {
        console.log('upload files', files)
        console.log('upload files', files)
        // 文件上传的函数，返回一个promise
        return new Promise((resolve, reject) => {
          const tempFilePaths = files.tempFilePaths;
          //上传返回值
          const that = this;
          const object = {};
          for (var i = 0; i < tempFilePaths.length; i++) {
            let filePath = '',cloudPath = ''
            filePath = tempFilePaths[i]
            // 上传图片
            // cloudPath 最好按时间 遍历的index来排序，避免文件名重复
            cloudPath = 'blog-title-image-' + new Date().getTime() + '-' + i + filePath.match(/\\.[^.]+?$/)[0]

            console.log(filePath)
            console.log(cloudPath)
            const upload_task = wx.cloud.uploadFile({
              filePath, 
              cloudPath, 
              success: function(res) {
                console.log(res)
                // 可能会有好几个200+的返回码，表示成功
                if (res.statusCode === 200  || res.statusCode === 204 || res.statusCode === 205) {
                  const url = res.fileID
                  that.data.files.push(url)
                  if (that.data.files.length === tempFilePaths.length) {
                    object.urls = that.data.files;
                    resolve(object)  //这就是判断是不是最后一张已经上传了，用来返回，
                  }
                } else {
                  reject('error')
                }
              },
              fail: function(err) {
                console.log(err)
              }, 
              conplete: () => {

              }
            })
          }
        })
        // 文件上传的函数，返回一个promise
    },
    uploadError(e) {
        console.log('upload error', e.detail)
    },
    uploadSuccess(e) {
        console.log('upload success', e.detail)
    }
});

3. 最终效果如下：


中国站
文档反馈
文档活动
message-icon联系我们
目录