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

填写招募信息页面

此页面要实现的功能类似于一个留言板的编辑页
其逻辑较为简单，由于此页面代码仅在此页有用，没有将其中的部分代码封装为组件
1.记录用户输入的文字
2.提示用户输入的字符数
3.用户点击预览时，判断输入内容是否为空，若不为空，则跳转至下一页
4.将输入内容存入缓存，在用下一页户发布后再存入数据库

页面的WXML代码为：

<import src="/template/pageHeader/pageHeader.wxml"/>
<view class="container">
      <template is="pageHeader" data="{{imageUrl:imageUrl}}"></template>
      <image class="test-header" src="/images/edit-header.png"></image>
  <view class="form">
      <view class="form-container"> 
         <text class="form-title">个人信息介绍</text>
      </view>
          <view class="question-container">
             <text style="color:#7b7b7b">请向访者简要介绍你的个人情况</text>
             <view class="conts">
                <textarea class="areas" minlength="{{min}}" maxlength="{{max}}" bindinput="inputs" data-param="0"> 
                </textarea>
             </view>
             <text class="currentWordNumber">{{currentWordNumber[0]}}/{{max}}</text>
          </view>   
        <view class="form-container" > 
         <text class="form-title">房源信息介绍</text>
      </view>
          <view class="question-container">
             <text style="color:#7b7b7b">请向受访者简要介绍房源情况</text>
             <view class="conts">
                <textarea  class="areas" minlength="{{min}}" maxlength="{{max}}" bindinput="inputs" data-param="1">
                </textarea>
             </view>
               <text class="currentWordNumber">{{currentWordNumber[1]}}/{{max}}</text>
          </view>     
</view>
 </view>
<view class="button-container">
         <view class="button" bindtap="onPreview">
            <text class="text">预览</text>
         </view>
</view>

页面的JS代码为：

// pages/edit/edit.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    max: 200, //最多字数
    currentWordNumber:[0,0],
    info:[,],
    up_url:'/components/foldableForm/images/upArrow.png',
    down_url:'/components/foldableForm/images/downArrow.png',
    imageUrl:'/images/guide-header/guide-header2.png',

  },
   //字数限制并更新介绍信息
  inputs: function (e) {
    // 获取输入框的内容
    console.log(e)
    var param = parseInt(e.currentTarget.dataset.param);
    var value =e.detail.value;
    var len = e.detail.cursor;
   console.log(param)
    if(param==0) {
      this.data.info[0]=value;
    }
    if(param==1) {
      this.data.info[1]=value;
    }
     //获取输入框内容的长度
     //获取两类信息
    var s='currentWordNumber['+param+']'
    this.setData({
    [s]: len,
    });
    //最多字数限制
    // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
     console.log(this.data)
  },
  onPreview:function(e) {
  var info = this.data.info;
  if(info==null || info[0]== null|| info==null ){
    wx.showModal
    ({
    title: '无法预览',
    content: '您还有信息未填写，请完成后再预览',
    showCancel: false,
    confirmColor: '#54c98c',
    confirmText: "好的",
    success: function (res) {
      if (res.confirm) 
        console.log('用户点击确定')
      }  
    })
  } 
  else{ 
    wx.setStorage({
      key: 'introduction',
      data: info,
      success: function (res){
        wx.showLoading({
          title: '加载中',
        })
        setTimeout(function () {
          wx.hideLoading({
            success(res) {
              wx.navigateTo({
              url: "/pages/preview/preview"
             });
            }
          })
        }, 2000)
      }
    })
   
  } 
  }

在编写代码过程中，印象最深的还是微信组件的层级过高，在拉到底部时，文字会悬浮在头部导航信息上，查阅了一些资料，但是都没能解决这个问题，在此注解，未来有机会再想一想解决的方案。