小程序踩坑

1. wss图片获取: image.png

2.page.json设置:
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置
项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键

3.v-if 和 hidden 的区别:

image.png

4. 页面加载图片自适应:
   <image src="" mode="{{item.mode}}" /> ---image 组件

   
   image.png

5. 弹框 --可以设置添加删除class

6.微信小程序--添加删除class
通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,

image.png

7.微信小程序---数据双向绑定与数据操作

//登录按钮点击事件，调用参数要用：this.data.参数；
//设置参数值，要使用this.setData({}）方法

实现效果点击弹出窗+输入框显示按钮+点击按钮输入框内容清空

<view>
         <button bindtap='orderModal' data-num="1">申请退款</button>
</view>
<view class="order-pop {{_num==1?'showpop':''}}">
      <view class="order-bg"></view>
      <view class="modal">
          <view class="modal-inner">
              <view class="modal-text">
                  申请退货
              </view>
              <view class="modal-info">
                请输入短信验证码完成退货申请验证码已发至*******0345手机
              </view>
              <view class="modal-input">
                  <input value="{{inputValue}}" placeholder="" bindinput="codeInput" />
                  <view class="btn-ico {{codeAll ?'showico':''}}" bindtap="hideClose"></view>
              </view>
          </view>
          <view class="modal-buttons">
              <view class="modal-button"  bindtap='orderModal' data-num="0">取消</view>
              <view class="modal-button {{codeAll ?'sure':''}}">确认</view>
          </view>
      </view>
    </view>

js部分:

Page({
  data: {
    codeAll: false,
    inputValue: '',
  },
  orderModal: function(e){
    this.setData({
      _num: e.target.dataset.num
    })
  },
  codeInput: function(e){
    this.setData({
      inputValue: e.detail.value
    });
    if (this.data.inputValue.length === 0) {
      this.setData({
        codeAll: false
      });
    } else {
      this.setData({
        codeAll: true
      });
    }
  },
  hideClose: function(e){
    this.setData({
      inputValue: '',
      codeAll: false
    })    
  }
})

image.png
image.png