通过微信开发者工具 商城模板 创建新小程序

mini-program/components/webp-image/index.js

@@ -0,0 +1,86 @@
+/*
+ * @Author: rileycai
+ * @Date: 2022-03-14 14:21:26
+ * @LastEditTime: 2022-03-14 15:23:04
+ * @LastEditors: rileycai
+ * @Description: webp-image组件对t-image包裹了一层，主要实现图片裁剪、webp压缩功能
+ * @FilePath: /tdesign-miniprogram-starter/components/webp-image/index.js
+ */
+const systemInfo = wx.getSystemInfoSync();
+Component({
+  externalClasses: ['t-class', 't-class-load'],
+  properties: {
+    loadFailed: {
+      type: String,
+      value: 'default',
+    },
+    loading: {
+      type: String,
+      value: 'default',
+    },
+    src: {
+      type: String,
+      value: '',
+    },
+    mode: {
+      type: String,
+      value: 'aspectFill',
+    },
+    webp: {
+      type: Boolean,
+      value: true,
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    thumbHeight: 375,
+    thumbWidth: 375,
+    systemInfo,
+  },
+  lifetimes: {
+    ready() {
+      const { mode } = this.properties;
+      // 获取容器的真实宽高，设置图片的裁剪宽度
+      this.getRect('.J-image').then((res) => {
+        if (res) {
+          const { width, height } = res;
+          this.setData(
+            mode === 'heightFix'
+              ? {
+                  thumbHeight: this.px2rpx(height) || 375,
+                }
+              : {
+                  thumbWidth: this.px2rpx(width) || 375,
+                },
+          );
+        }
+      });
+    },
+  },
+  methods: {
+    px2rpx(px) {
+      return (750 / (systemInfo.screenWidth || 375)) * px;
+    },
+    getRect(selector) {
+      return new Promise((resolve) => {
+        if (!this.selectorQuery) {
+          this.selectorQuery = this.createSelectorQuery();
+        }
+        this.selectorQuery.select(selector).boundingClientRect(resolve).exec();
+      });
+    },
+    onLoad(e) {
+      this.triggerEvent('load', e.detail);
+    },
+    onError(e) {
+      this.triggerEvent('error', e.detail);
+    },
+  },
+});

mini-program/components/webp-image/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "tdesign-miniprogram/image/image"
+  }
+}

mini-program/components/webp-image/index.wxml

@@ -0,0 +1,14 @@
+<wxs src="./utils.wxs" module="Utils" />
+<t-image
+  t-class="J-image"
+  src="{{Utils.getSrc({src, thumbWidth: thumbWidth || 0, thumbHeight: thumbHeight || 0, systemInfo, webp, mode})}}"
+  t-class="t-class"
+  t-class-load="t-class-load"
+  mode="{{ mode }}"
+  lazy="{{ lazyLoad }}"
+  show-menu-by-longpress="{{showMenuByLongpress}}"
+  error="{{loadFailed}}"
+  loading="{{loading}}"
+  binderror="onError"
+  bindload="onLoad"
+/>

mini-program/components/webp-image/utils.wxs

@@ -0,0 +1,140 @@
+var isString = function (value) {
+  return typeof value === 'string';
+};
+
+var isNumber = function (value) {
+  return typeof value === 'number';
+};
+
+var getFileExt = function (src) {
+  var fileUrl = src.split('?')[0];
+  var splitUlr = fileUrl.split('/');
+  var filepath = splitUlr[splitUlr.length - 1];
+  return filepath.split('.')[1] || 'jpg';
+};
+
+function isUrl(url) {
+  // NOCC:ToolNameCheck(非敏感词)
+  var urlReg = getRegExp(
+    '/[(http(s)?)://(www.)?a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/',
+    'ig',
+  );
+
+  return urlReg.test(url);
+}
+
+function rpx2px(rpx, screenWidth) {
+  // px / systemWidth = rpx / 750
+  var result = (rpx * (screenWidth || 375)) / 750;
+
+  return Math.round(result);
+}
+
+function imageMogr(url, options) {
+  if (!isString(url) || !url) return '';
+
+  if (
+    url.indexOf('qlogo.cn') !== -1 ||
+    url.indexOf('wxfile://') === 0 ||
+    url.indexOf('http://tmp/wx') === 0 ||
+    url.indexOf('imageMogr2') !== -1
+  ) {
+    //qlogo.cn域名或者本地图片不做转换
+    return url;
+  } //强制转https
+
+  if (url.indexOf('http://') === 0) {
+    url = url.replace('http://', 'https://');
+  } else if (url.indexOf('//') === 0) {
+    url = 'https:' + url;
+  }
+
+  if (!options) return url;
+
+  var width = Math.ceil(options.width),
+    height = Math.ceil(options.height),
+    format = options.format,
+    _optionsQuality = options.quality,
+    quality = _optionsQuality === undefined ? 70 : _optionsQuality,
+    _optionsStrip = options.strip,
+    strip = _optionsStrip === undefined ? true : _optionsStrip,
+    crop = options.crop;
+  var isValidWidth = isNumber(width) && width > 0;
+  var isValidHeight = isNumber(height) && height > 0;
+  var imageMogrStr = '';
+  var size = '';
+
+  if (isValidWidth && isValidHeight) {
+    size = ''.concat(width, 'x').concat(height);
+  } else if (isValidWidth) {
+    size = ''.concat(width, 'x');
+  } else if (isValidHeight) {
+    size = 'x'.concat(height);
+  }
+
+  if (size) {
+    //缩放或者裁剪
+    imageMogrStr += '/'.concat(crop ? 'crop' : 'thumbnail', '/').concat(size);
+
+    if (crop) {
+      //裁剪目前需求只有以图片中心为基准
+      imageMogrStr += '/gravity/center';
+    }
+  }
+
+  if (isNumber(quality)) {
+    //质量变换
+    imageMogrStr += '/quality/'.concat(quality);
+  }
+
+  if (strip) {
+    //去除元信息
+    imageMogrStr += '/strip';
+  }
+
+  var ext = getFileExt(url);
+
+  // gif 图片不做格式转换，否则会损坏动图
+  if (ext === 'gif') {
+    imageMogrStr += '/cgif/1';
+  } else if (format) {
+    //格式转换
+    imageMogrStr += '/format/'.concat(format);
+  }
+
+  if (format === 'jpg' || (!format && (ext === 'jpg' || ext === 'jpeg'))) {
+    //渐进式 jpg 加载
+    imageMogrStr += '/interlace/1';
+  }
+  if (!imageMogrStr) return url;
+  return ''
+    .concat(url)
+    .concat(url.indexOf('?') !== -1 ? '&' : '?', 'imageMogr2')
+    .concat(imageMogrStr);
+}
+function getSrc(options) {
+  if (!options.src) return '';
+
+  if (options.thumbWidth || options.thumbHeight) {
+    return imageMogr(options.src, {
+      width:
+        options.mode !== 'heightFix'
+          ? rpx2px(options.thumbWidth, options.systemInfo.screenWidth) *
+            options.systemInfo.pixelRatio
+          : null,
+      height:
+        options.mode !== 'widthFix'
+          ? rpx2px(options.thumbHeight, options.systemInfo.screenWidth) *
+            options.systemInfo.pixelRatio
+          : null,
+      format: options.webp ? 'webp' : null,
+    });
+  }
+
+  return '';
+}
+
+module.exports = {
+  imageMogr: imageMogr,
+  getSrc: getSrc,
+};