微信小程序 编程小结（不定期更新）

1. 行内文字超出宽度后，显示省略符(…)
   在文字所在的view中，增加如下CSS

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /* 此处区域如果固定显示则用width，如果随文字宽度自动缩减，使用max-width */
      max-width: 280rpx;

2. 解决苹果手机（IPHONE X等型号）下方有功能条遮挡内容问题
   IPHONE X 的下方有一条横条，在其它型号的手机中并没有，如果统一提升下边距，在没有横条的手机上看就会很不友好。
   所以苹果出了一个只有苹果手机才会识别的样式，而且只有有横条的型号手机，才会解析出对应高度的样式

 padding-bottom: env(safe-area-inset-bottom);

在页面的下方工具栏或者整体区块中加入该样式，在没有横条的手机中是不认这个样式的，或者解析结果为0
在有横条（IPHONE X等）手机中，会解析出横条对应高度的样式，以解决遮挡问题

3. 在小程序中使用定时器(Interval)时，一定要在离开页面后清理掉不使用的定时器，微信页面跳转后，定时器是不会被清理掉，只有杀小程序进程才可以，所以必须在使用后立即清理掉，不然会积累过多，导致页面异常
4. 文字滚动显示
   微信小程序中没有提供相关的组件和功能函数，想显示动画，只能使用animation配合定时器显示
   因业务需要循环显示文本内容，效果为停顿3秒，滚动0.5秒，头尾相接显示
   相关代码如下：
   WXML代码(样式不影响效果显示，就不贴出来了)

<view animation="{{animationData1}}">
      <view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
        <view class="bottom-item">
          <image class="bottom-item-image" src="{{item.header}}"></image>
          <view class="bottom-item-name">{{item.username}}</view>
          <view class="bottom-item-time">{{item.time}}</view>
          <view class="bottom-item-date">{{item.date}}</view>
        </view>
      </view>

      <!-- 复制一遍动态列表，以达到循环展示的效果 ifcopy如果显示内容条数少于页面当前显示条数，则不复制也不滚动 -->
      <block wx:if="{{iscopy}}">
        <view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
          <view class="bottom-item">
            <image class="bottom-item-image" src="{{item.header}}"></image>
          	<view class="bottom-item-name">{{item.username}}</view>
          	<view class="bottom-item-time">{{item.time}}</view>
          	<view class="bottom-item-date">{{item.date}}</view>
          </view>
        </view>
      </block>

JS代码

itemcount = 0;//这个是全局变量，以下没有定义类型的变量均为全局变量

    if (this.data.list.length > 3) {
            this.setData({
              iscopy: true,
            })

            //单条滚动的时间
            var continueTime = 500;
            //等待时间
            var waitTime = 3000;

            var animation = wx.createAnimation({
              duration: continueTime, //动画时长
              timingFunction: "linear", //线性
            });
            this.animation = animation;

            intervalid = setInterval(() => {
              itemcount++;
              animation.translateY(-54 * itemcount).step();//54单位是像素，这里可以使用获取节点高度，然后用高度变量替换

              //滚动一圈后重置滚动状态
              if (itemcount >= this.data.list.length) {
                itemcount = 0;
                animation.translateY(0).step({
                  duration: 50,
                  timingFunction: 'step-start',
                })
              }

              this.setData({
                animationData: animation.export()
              })
            }, waitTime)
    }

/**
	生命周期函数--监听页面隐藏
   */
  onUnload: function() {
    //清空页面定时器
    clearInterval(intervalid);
  },

5. 获取节点高宽

		var query = wx.createSelectorQuery();
		query.select('.bottom-item').boundingClientRect();
		query.exec((res) => {
			//这里会获取到一个符合条件的数组，然后根据实际情况进行处理
			itemheight = res[0].height;
			itemwidth = res[0].width;
		});

6. 图片截取
   最近的项目中需要用户对上传的图片进行自定义截取操作，原本是打算去网上找找现成的，但是弄了几个后，发现并不是很好用（可能是没找到好用的）
   项目中需求图片缩放比是0.5-20、可以在用户选择图片后自动居中、可以根据不同的功能传入的尺寸，设置截取框的大小
   “自动居中”这个需求并不难，“参数设置截取大小”这个需求也并不难，就是计算多一些，也还好，最头疼的就是放大倍数要到20（也不知道为什么，咱也不敢问），试过好几个现成的组件和方法，当放到到超过5倍之后，一般的手机就会因内存不足，小程序会自动关闭。。。一张手机拍出来的照片，放大到20倍之后，iPhoneX也照样崩，额(⊙o⊙)…
   之后从头开始开发、研究，经历了一周的开发和测试后完成了相关组件，下载地址如下，内附说明文档
   https://download.csdn.net/download/zxc84265137/11270725

7. canvas画图
   这部分内容比较多，就单独开了一章
   https://blog.csdn.net/zxc84265137/article/details/96996031

暂时就想到这些，之后想到了之前的或者之后遇到的问题，会在来更新