微信小程序总结

总结一下最近在小程序中学到的一些东西吧，小程序这东西，如果过一段时间不写，再来写的话，很多东西容易忘，所以自己先总结一下吧，从哪里开始呢。。。

连续空格

\r\t\

给data中的对象数据赋值

this.setData({
  ['formFields.name']: e
})

小程序输入框的双向绑定

  vegeInput(e){
    this.setData({
      vague:e.detail.value
    })
  },

组件之间的传值(多个值的时候)

//父组件
 <view class='td'>
 <text data-item="{{item}}" bindtap='editHandle'>修改</text>\r\t\r\t\r\t
 <text data-item="{{item}}" bindtap='delHandle'>删除</text>
 </view>
 js：
  editHandle(e) {
    var data = e.currentTarget.dataset.item;
    let param = {
      handleName:"菜品修改",
      title:"修改",
      ...data
    };
    wx.navigateTo({
      url: "../vegePrice-add/vegePrice-add?data=" + JSON.stringify(param)
    })
  },
 //子组件
 onLoad: function(options) {
  var data = JSON.parse(options.data);
 }

导航左上角返回页面不对的问题

  onUnload: function() {
    wx.switchTab({
      url: '/pages/home/home',
    })
    // wx.reLaunch({
    //   url: '/pages/home/home'
    // })
  }

小程序设置背景图三种方式(在线，base64，image)，实战开发中，在线麻烦，base64是一大堆字符串，所以我常用的还是image标签

 wxss:
 .login_bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -1
}

tab切换

传送门:https://blog.csdn.net/qq_42816550/article/details/98336722

实时搜索

searchInput(e){
    var _this = this;
    this.setData({
      ['searchForm.search']: e.detail.value
    });
    var valueTemp = this.data.searchForm.search;
    if (this.data.timer) {
      clearTimeout(this.data.timer);
    }
    if (valueTemp) {
      this.data.timer = setTimeout(() => {
        _this.getData()
      }, 300)
    } else {
      // 输入框中的内容被删为空时触发，此时会清除之前展示的搜索结果
      _this.getData()
    }
  },

上传图片

传送门：https://blog.csdn.net/qq_42816550/article/details/99179373

加载更多，小程序中的分页(上拉加载分两种情况)

//第一种，页面上拉触底事件的处理函数
需要现在json中设置
{
  "usingComponents": {},
  "navigationBarTitleText": "查看明细",
  "onReachBottomDistance": 0
}
js部分如下:
  /**
   * 页面上拉触底事件的处理函数
   */
 onReachBottom: function() {
    this.data.page++;
    //do something
 }
 //第二种scroll-view触底,绑定scroll-view自带的bindscrolltolower事件
 wxml:
 <scroll-view  wx:else scroll-y="{{true}}" style='height:calc(100vh - 136rpx)' bindscrolltolower="loadMore"></scroll-view>
 js:
   loadMore() {
		let _this = this;
		if (_this.data.pageLoad) {
  			_this.data.page ++;
  			_this.getData();
		}else{
  			wx.showToast({
    			title: '暂无更多数据',
   				icon:"none"
  			})
		 }
 	},

在父组件中修改公用组件的样式(样式穿透)

Component({
  options: { styleIsolation: 'apply-shared' },//实现该样式穿透
  /**
   * 组件的属性列表
   */
  properties: {
    propArray: {
      type: Array,
    },
  },
  ................
}

微信小程序input为数字键盘

text：不必解释
number：数字键盘（无小数点）
idcard：数字键盘（无小数点、有个 X 键）
digit：数字键盘（有小数点）
注意：number 是无小数点的，digit 是有小数点的

rich-text的使用

<rich-text nodes="{{content}}"></rich-text>

this.setData({
          content: res.data.data.content.replace(/(\r\n)|(\n)/g, "<br/>")
        })