微信小程序小白前端入门学习记录-友邻小程序（四）

预览页面

页面实现的功能为
1.向用户展示招募表单的形式
2.发布后上传缓存中留言板内容和发布时间

有关招募表单信息的部分在后续都会时常复用，所以将其封装为了组件

<view class="container">
  <view class="form-header form-header1">
     <view class="avatar-container avatar-position">
        <image src="{{userInfo.avatarUrl}}" class="avatar"/>
     </view>
        <text class="userNickName">{{userInfo.nickName}}</text>
        <text class="userAddress">{{userInfo.province}}  {{userInfo.city}}  发布于{{time}}</text>
  </view>
   <view class="introduction-container">
   <view class="introduction-header">
      <image src="/images/block.png" class="block"></image>
      <text class="title">个人情况介绍</text>
   </view>
    <text class="introduction">{{introduction[0]}}</text>
   </view>
 <view class="introduction-container">
   <view class="introduction-header">
      <image src="/images/block.png" class="block"></image>
      <text class="title">房源情况介绍</text>
   </view>
    <text class="introduction">{{introduction[1]}}</text>
   </view>
   <view class="form-bottom "></view>
</view>

在组件内部的Js方法方法中并无内容，属性一栏有WXML{{}}中出现的变量声明

页面的Js代码为：

// pages/preview/preview.js
const db = wx.cloud.database();
var app = getApp();
const util = require('../../utils/util.js');
var time = util.formatTime(new Date());
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageUrl:'/images/guide-header/guide-header3.png',
    userInfo: null,
    introduction:[],
    time:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx.getStorage({
      key:'introduction',
      success:function(res){
        that.setData({
          introduction:res.data,
          time:time
        })
      }
    })
    //直接获取前页面存下的缓存
    this.hasGottenUserInfo()
  },
  hasGottenUserInfo: function() {
    wx.getSetting({
      success: (data) => {
        if (data.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            lang:"zh_CN",
            success: (data) => {
              this.setData({
                userInfo: data.userInfo
              })
            }
          })
         
        }
      }
    })
  },
  //直接通过微信接口获取用户的部分信息
  onPublish:function(){
  var that=this
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading({
        success(res) {
          that.introductiondb();
        }
      })
    }, 2000)
  },

  introductiondb:function(){
  //上传至数据库
    db.collection('leaflets').add({
      data: {
      personalIntro:this.data.introduction[0],
      houseIntro:this.data.introduction[1],
      date:time
      },
      success(res){
      wx.setStorageSync('formId', res._id)
      //将表单的Id存入缓存
      console.log(res._id);
        wx.showToast({
          icon: 'none',
          title: '新增记录成功'
        })
      wx.navigateTo({
       url: "/pages/share/share"
        });
      },
      fail(res) {
      wx.showToast({
        icon: 'none',
        title: '新增记录失败'
      })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
  }

WXML

<import src="/template/pageHeader/pageHeader.wxml"/>
<view class="container">
      <template is="pageHeader" data="{{imageUrl:imageUrl}}"></template>
      <previewForm userInfo="{{userInfo}}" introduction="{{introduction}}" time="{{time}}" class="leaflets"></previewForm>
<view class="button-container">
         <view class="button" bindtap="onPublish">
            <text class="text">发布</text>
         </view>
</view>
</view>