微信随心笔记

img中data-src与src的区别

主要的应用是在延迟加载，把图片延迟加载，当浏览到的时候读取data-src，然后他就自动引导到src这个属性，可能说的不太正确，大体是这个意思。但是你要明确图片路径时还是用src而不是data-src（data-src 有延迟加载 src是实时加载）

data-*（也就是是data-src,data-info等等前面带data的），是存放数据的地方，仅仅是存放数据的地方，不对对页面有任何的影响，

微信所有的img标签里,都有自定义的data-ratio,data-w.这两个属性是关键.

//data-w:是图片的natural width.
//data-ratio:是图片的高/宽值.
<img data-src="http://mmsns.qpic.cn/mmsns/yvia9lE3NdzrSMQ18VrVqjEUU5BeMx9WuDsSBp7Exm83L9IJdjpUXLQ/0" style="vertical-align: middle; box-sizing: border-box; width: 141px !important; height: 81.7359px !important; visibility: visible !important;" data-ratio="0.5796875" data-w="640" data-type="jpeg" class="img_loading" src="http://mmsns.qpic.cn/mmsns/yvia9lE3NdzrSMQ18VrVqjEUU5BeMx9WuDsSBp7Exm83L9IJdjpUXLQ/0?wx_lazy=1">

2.js设定img的width=data-w，heigth= width*data-ratio。
3.不过，在第2步设定宽高之前，请保证img的src属性有有效的值，不然，第2步会无效，在这里我们添加一个base64的小点作为占位图（如下）:

src="https://img-blog.csdnimg.cn/2022010707314369824.gif";

4.再给img添加一些样式：

.img_loading {
        background-color: #e3dcdc;
        border: 1 px solid #e3dcdc;
        background-size: 22px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url(loading.gif);
}

5.当对应的img的图片加载完成后，替换掉占位图，去掉class img_loading 就好了

crossorigin="anonymous" 微信强制性跨域请求，如果报错显示‘no access-control-allow-origin’，去掉这个属性就可以了

6.微信开发者寻找视频路径

选择视频，寻找到他的div，找到src

src="/cgi-bin/readtemplate?t=tmpl/video_tmpl&amp;vid=wxv_2114974017144094724"></iframe>

7、微信从a数组取字符串在b数组使用（增加数组以及取用数据的函数）

      let _data={popScale:_this.data.popScale,popPrice:_this.data.popPrice,popNote:_this.data.popNote,surplusDateChange:_this.data.surplusDateChange,endDateChange:_this.data.endDateChange,jiesuanType:_this.data.jiesuanType};
      _this.data.newPopMsg.push(_data)  //增加数组
      console.log(_this.data.newPopMsg);


  getPopScale:function(e){
    let _this = this;
    this.setData({
      popScale: e.detail.value //当前value的值
    })
  },


  onChangeShare:function(e)
  {
    let _this = this
    let _index=e.currentTarget.dataset.index; // 建立名为index的索引名字
    console.log(_index);
    _this.data.sub_newPopMsg_list[_index].shareSelect = e.detail.value; //获取到自己想要获取的数组的值
    _this.setData({
      newPopMsg:_this.data.newPopMsg, //更新数组
      sub_newPopMsg_list:_this.data.sub_newPopMsg_list // 更新数组
    })
  },

//wxml
//picker 是下拉组件 sub_newPopMsg_list建立的数组 range-key下拉组件里面的值
 <picker class="picker" mode="selector" range="{{newPopMsg}}" range-key="popNote" data-index="{{index}}" value="{{sub_newPopMsg_list[index].popNote}}" bindchange="onChangeShare">
     {{sub_newPopMsg_list[index].shareSelect == selectDefault ? "请选择": newPopMsg[sub_newPopMsg_list[index].shareSelect].popNote}} //如果前面成立就是请选择否则就是value的值
</picker>