微信小程序初步认识与了解

写简易的留言板只需要一个页面内就行了，首先新建一个目录，再创建一个page

如下图：

现在进入目录下进行编辑：

学过html的小伙伴可以这样理解微信小程序的元素：

text 对应的是 html — span 行内元素
view 对应的html ----div 块级元素
block 相当于空组件 一般配合for循环使用
wx:key='this’ this 当前项值 (当数组的每一项都是不同的值时)
js语法都一样，如果学习过vue，再学这个简直就是秒转型。*

先写好界面样式和布局：

home.wxml : wx:for是用来遍历home.js中的数据

<!-- -->
<view class="box">
  <!-- ipt 框 -->
  <input type="text" class="ipt" bindinput="sj" />

  <!-- button按钮 -->
  <button size="mini" bindtap="add">点击提交</button>
</view>

<!-- 渲染与删除 -->
<block>
  <view wx:for="{{arr}}" wx:key='index' class="xr">
  <!-- 渲染-->
    <text> 第{{index+1}}条 ： {{item.title}} </text>
    <!-- 删除 -->
    <button size="mini" bindtap="del" data-index="{{index}}">删除</button>
  </view>
</block>

home.wxss: flex是盒模型布局（弹性盒子）

.box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.ipt {
  width: 70%;
  height: 80rpx;
  border: 1rpx solid #000;
}

.xr {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

home.js: 自带生命周期函数

Page({

	  /**
	   * 页面的初始数据
	   */
	  data: {
	    msgData:'',
	    arr:[],
	  },
  )}

页面展示如图：

以上还属于静态界面，下面开始书写事件函数。

给xml中留言绑定函数： bindinput类似于 h5 中 oninput事件 ，监听输入框的内容。

监听数据并存储：

当用户点击留言：

效果展示

删除操作就留给入坑的同学练手了。
最后有些代码不完全，我重新贴一下：

home.js:

// pages/home/home.js
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  // ipt 中的数据
  sj(e) {
    this.setData({
      msgData: e.detail.value
    })
  },
  // 点击添加
  add() {
    let arr=this.data.arr;
    arr.push({
      title:this.data.msgData,
    })
    // console.log(list)
    this.setData({
      arr: arr,
    })
  },
  // 删除
  del(e){
    let id=e.currentTarget.dataset.index;
    let arr=this.data.arr;
    arr.splice(id,1);
    this.setData({
      arr: arr,
    })
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

版权声明： 本文编写参考于，CSDN博主「壹之形」的原创文章，如有不妥请联系。
原文链接：https://blog.csdn.net/qq_41648900/article/details/92400033