小程序开发-wepy学习

最近工作中在开发小程序，因为是初步接触小程序，也是使用了“古老”的wepy框架，一个小菜鸟在开发中也是对于代码中的实现有很多懵懂的东西，这里把一些日常的坑和技术相关进行总结记录一下~~~~

1.repeat，block,view

循环渲染：wepy的循环渲染组件，必须使用 <repeat>标签或<block>标签否则就不会渲染成功。

（循环的这个点还蛮重要的）

 

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
//view 渲染的结果 会用<view>进行包裹
//<view>0:name</name>

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
//block循环的不会进行包裹
<view>0:</view><view>1</view>

//在wepy中组件循环只能用repeat
//repeat传参不能直接传递item下面的属性，ps:item.sync="item.name"不会进行传递

repeat里面进行子组件循环渲染并进行参数传递
       <repeat
          for="{{list}}"
          key="index"
          index="idx"
          item="item"
        >
          <RecProjectItem
            :item.sync="item"
            :index="idx"
            :currentTypeValue="currentTypeValue"
          />
        </repeat>

 2.computed属性

  computed = {
    showBanner() {
      const filterUrl = this.bannerList.filter(item => item.banner_img_url);
      return Boolean(filterUrl.length && this.dataObj.is_show_banner_img);
    }
  };

 <view

      wx:if="{{showBanner}}"

      class="wrap banner"

    >

 </view>

例如在上述代码中使用了showBanner,来判断是否显示Banner图，在view标签中可以直接使用showBanner来进行判断

3.methods和events

methods：页面中触发的处理事件

events: 子组件触发的处理事件

 

4.this.$apply()在什么时候使用

在wepy项目中经常可以看到this.$apply()，但是有时候都不知道什么时候需要进行使用

（在data里面的数据进行绑定的时候，可以用这个来进行数据绑定）

在data中定义变量data:{name: ''}，然后在自定义方法中使用this.name = 'ml',这时候需要使用this.$apply()来进行数据绑定，不然会报空。

Method里面的方法是不需要的

又说是在异步函数后使用this.name = 'ml'后需要使用this.$apply()

5.长按识别公众号二维码

在需求里面有需求长按识别公众号二维码 以为image标签不能实现，所以我是这样实现得，给image标签上加上@tap="saveImg"，然后给其绑定事件，

    saveImg() {
      wx.previewImage({
        current: this.dataObj.imgurl, // 当前显示图片的http链接
        urls: [this.dataObj.imgurl] // 需要预览的图片http链接列表
      })

通过wx.previewImage也可以实现，但是是先打开二维码 然后再长按识别，看起来虽然实现了，但是总是感觉还有优化的空间。一直以为是不能实现的，后面我看到了

 show-menu-by-longpress="true"这个属性，才发现也就是一个属性的事，轻松实现了！！，在image标签里面加上这一行就实现了

<image
        class="pop-img"
        mode="aspectFit"
        src="{{dataObj.imgurl}}"
        show-menu-by-longpress="true"
      />