【代码片段】日常积累

平时写的方法或样式，待分类整理

1.微信分享功能

1-1.uni中使用

manifest.json中勾选

uni.share({
    provider: '', // 分享服务供应商（weixin|qq|sinaweibo）
    scene: scene, // 分享形式
    type: type,
    href: '',
    title: title,
    imageUrl: this.shareObj.imageUrl,
    summary: this.shareObj.summary,
    success(res) {},
    fail({errMsg}) {},
    complete(res) {}
})

1-2.summary分行功能：

// 使用\r\n换行
{
  summary: `第一行\r\n第二行`
}

1-3.iOS分享图片过大，将图片压缩

toShare({ provider, scene, type }) {
  let href = ''
  let that = this;
  const { href, title, imageUrl, summary } = this.shareObj
  //获取图片后压缩
  uni.downloadFile({
    url: imageUrl,
    success: function(images) {
      that.compress(images.tempFilePath, (img) => {
        that.share(provider, scene, type, href, title, img, summary)
      })
    },
    fail(error) {
      uni.hideLoading();
    }	
  })
},
compress(img, cb) {
  plus.io.resolveLocalFileSystemURL(img, (entry) => {
    entry.file((file) => {
      console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
      // 如果大于20Kb进行压缩
      if(file.size > 20000) {
        plus.zip.compressImage({
          src: img,
          dst: img.replace('.png', '_s.png').replace('.PNG', '_s.PNG').replace('.jpg','_s.jpg').replace('.JPG','_s.JPG'),
          width: '40%',
          height: '40%',
          quality: 10,
          overwrite: true,
          format: 'jpg'
        }, (event) => {
          console.log('压缩后图片信息:' + JSON.stringify(event));
          cb && cb(event.target);
        }, function(err) {
          console.log('Resolve file URL failed: ' + err.message);
        });
      }else{
        //else小于20kb跳过压缩，直接返回现有的src
        cb && cb(img);
      }
    });
  }, (e) => { // 返回错误信息
    console.log('Resolve file URL failed: ' + e.message);
  });
},
share(provider, scene, type, href, title, img, summary) {
  uni.share({
    provider: provider,
    scene: scene,
    type: type,
    href: href,
    title: title,
    imageUrl: img,
    summary: summary,
    success(res) {
      console.log(res)
    },
    fail({errMsg}) {
      this.$refs.uToast.show({
        title: '请安装微信客户端',
        type: 'warning'
      })
    },
    complete(res) {
      console.log(res)
    }
  })
}

2.apple支付

<script>
    let iapChannel = null,
        productId = 'HelloUniappPayment1',
        productIds = ['HelloUniappPayment1', 'HelloUniappPayment6'];
    export default {
        data() {
            return {
                title: 'request-payment',
                loading: false,
                disabled: true,
                priceList: [{
                    value: 'HelloUniappPayment1',
                    text: '支付1元',
                    checked: true
                }, {
                    value: 'HelloUniappPayment6',
                    text: '支付6元',
                    checked: false
                }]
            }
        },
        onLoad: function() {
            plus.payment.getChannels((channels) => {
                console.log("获取到channel" + JSON.stringify(channels))
                for (var i in channels) {
                    var channel = channels[i];
                    if (channel.id === 'appleiap') {
                        iapChannel = channel;
                        this.requestOrder();
                    }
                }
                if(!iapChannel){
                    this.errorMsg()
                }
            }, (error) => {
                this.errorMsg()
            });
        },
        methods: {
            requestOrder() {
                uni.showLoading({
                    title:'检测支付环境...'
                })
                iapChannel.requestOrder(productIds, (orderList) => { //必须调用此方法才能进行 iap 支付
                    this.disabled = false;
                    console.log('requestOrder success666: ' + JSON.stringify(orderList));
                    uni.hideLoading();
                }, (e) => {
                    console.log('requestOrder failed: ' + JSON.stringify(e));
                    uni.hideLoading();
                    this.errorMsg()
                });
            },
            requestPayment(e) {
                this.loading = true;
                uni.requestPayment({
                    provider: 'appleiap',
                    orderInfo: {
                        productid: productId
                    },
                    success: (e) => {
                        uni.showModal({
                            content: "感谢您的赞助",
                            showCancel: false
                        })
                    },
                    fail: (e) => {
                        uni.showModal({
                            content: "支付失败,原因为: " + e.errMsg,
                            showCancel: false
                        })
                    },
                    complete: () => {
                        console.log("payment结束")
                        this.loading = false;
                    }
                })
            },
            applePriceChange(e) {
                productId = e.detail.value;
            },
            errorMsg(){
                uni.showModal({
                    content: "暂不支持苹果 iap 支付",
                    showCancel: false
                })
            }
        }
    }
</script>

productId需要去https://appstoreconnect.apple.com/配置内购id

2.webpack

2.1为什么开发时webpack生成很慢

因为loader中使用this.callback与webpack通信

this.callback(
  // 当无法转换原 内容时，为 Webpa ck 返回一个 Error
  err: Error I null, 
  // 原内容转换后的内容
  content: string I Buffer, 
  // 用于通过转换后的 内容得出原内容的 Source Map ，以方便调试
  sourceMap?: SourceMap, 
  // 如果本次转换为原 内容生成了 AST 语法树，则可以将这个 AST 返回，以方便之后需要 AST Loader 复用该 AST ，避免重复生成 AST ，提升性能
  abstractSyntaxTree?: AST
);

Source Map的生成很耗时，通常只有在开发环境下才会生成Source Map，在其他环境下不生成，以加速构建。因此webpack为loader提供了this.sourceMap以用来判断当前构建环境下的用户是否需要生成Source Map。

2.文件下载时或responseType:Blob时，如果返回json中携带错误信息，如何在error中获取？

2.1Why

接口返回了正常的错误对象，包含错误码和错误信息，但是因为是blob数据类型，无法获取

Blob {
  size: 17,
  type: "application/json"
}

需要转化为json格式

let { data } = error
const reader = new FileReader()
reader.onload = funtion() {
  try {
    let result = JSON.parse(this.result)
  }catch (error) {
    // 解析不成功，说明是正常的文件，下载
    ...
  }
}
reader.readAsText(data) // 解析返回结果

监听DOM内容变化

使用MutationObserver

const observer = new MutationObserver(this.update);

// 监听此组件的变化
observer.observe([el], {
  childList: true,
  subtree: true
})

vue限定prop类型

export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

栈溢出的原因

1.失控递归（忽略基准型）

2.递归处理的数据过大，超出栈空间

public static <AnyType> void printList(Iterator<AnyType> itr) {
  if ( !itr.hasNext() ) {
    return;
  }
  
  System.out.println( itr.next() );
  printList(itr);
}

递归的不恰当应用，打印链表

上述程序使用尾递归，

最后更新： 2022年11月07日 05:11

wsw