小程序部分小节

1.wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

2.两端文本对齐

view{
  text-align: justify;
  font-size: 24rpx;
  width: 80rpx;
  height: 100%;
  border-bottom:2rpx solid transparent;
  padding-top: 12rpx;
  color: #424b52;
}
view::after{
  width: 100%;
  display: inline-block;
  content: ''; 
}

3.去掉button的默认样式

button{
  display: block;
  border-radius: 0;
  padding: 0;
}
button::after {
    border-radius: 0;
    border: none;
    padding: 0;
}

4.input输入框监听

<input name="phone" type='number'  bindinput="mobileInputEvent" maxlength="11"/>
mobileInputEvent: function (e) {
  this.setData({
  phone: e.detail.value
  })

  console.log(e.detail.value)
}

// --------------------------------------------------------前台短信验证码功能
function invokeSettime() {
  if ($page.data.countdown == 0) {
    $page.setData({
      isDisabled: false,
      codeTxt: '获取验证码',
      countdown:60
    })
    return;
  }
  $page.setData({
    isDisabled: true,
    codeTxt: "(" + $page.data.countdown + ")s重新发送",
  })
  $page.data.countdown--;
  timer1 = setTimeout(invokeSettime, 1000);
}

5.点击父容器不触发子容器的事件

父盒子 hover-stop-propagation='true'

6.分享事件

<view><button class='userShare' open-type="share"  hover-class="none" id="{{item.ID}}" data-sharetitle="{{item.Headline}}" data-shareimg="{{item.Cover}}"></button></view>
onShareAppMessage: function(res) { //用户点击右上角分享
    console.log(res);
    // wx.showShareMenu({
    //   withShareTicket: true
    // });
    if (res.from === 'button') {
      return app.setShareData({
        title: res.target.dataset.sharetitle,
        path: '/pages/index/index?reqUrl=/pages/grassSharing_info/grassSharing_info&Url=https://mp.weixin.qq.com/&openid=' +
          icom.storage("OpenID") + '&ID=' + res.target.id + '',
        imageUrl: res.target.dataset.shareimg
      });
    } else {
      return app.setShareData();
    }

  },

7.文本过滤

/**
  * 发送点击监听
 */
     sendClick: function(e) {
       if (e.detail.value.replace(/[\r\n]/g, "").replace(/\ +/g, "") == "") {
         icom.alert('请输入文字');
         //输入了空格和回车过滤
         $page.setData({
           inputVal: "" //清空搜索框内容
         });
         return;
       }
     },