Uniapp 使用技巧

1 扫描二维码 （h5）

uniapp中实现h5扫描二维码功能

这里的reqrcode.js文件在asset/第三方JS文件中

<script>
var qrcode = require("../../common/js/reqrcode");
export default {
  data() {
    return {
      scanWord:'' //二维码数据
    };
  },
  methods: {
    scan() {
      let _this = this;
        //调用相机扫描邀请码
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          let temPaths = res.tempFilePaths[0];
          //首先对二维码进行扫描解析获取数据
          qrcode.decode(temPaths);
          qrcode.callback = function (flag) {
            //识别二维码失败
            if (flag == "error decoding QR Code") {
              uni.showToast({
                title: "识别二维码失败，请重新上传！",
                duration: 2000,
                icon: "none",
              });
              return;
            } else {
              //识别二维码成功 
              _this.scanWord=img
            }
          };
        },
        fail: function (res) {
          console.log("temPaths:error", res);
        },
      });
    },
  },
};
</script>

注意 ：如果是下载下来的 reqrcode.js ， 要暴露需要用到的方法才行正常引用

2 图片地址转换成base64格式

uniapp图片文件转base64

上传图片转换 / 选择照片 均可

<script>
export default {
  data() {
    pic:[] //存放转换后的base64 图片
  },

  methods: {
    //上传照片
    upload() {
      uni.chooseImage({
        sourceType: ["camera", "album"],
        sizeType: "compressed",
        count: 1,
        success: (res) => {
          this.urlTobase64(res.tempFilePaths[0]);
        },
      });
    },

    // 转base64码
    urlTobase64(url) {
      let _this = this;
      uni.request({
        url: url,
        method: "GET",
        responseType: "arraybuffer",
        success: (res) => {
          let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
          base64 = "data:image/jpeg;base64," + base64; //不加上这串字符，在页面无法显示的哦
          _this.pic.push(val);
        },
      });
    },
  },
};
</script>

3 压缩图片 （压缩base64图片）

JavaScript 实现base64图片压缩

此方法放在util下，封装成公共方法

/**
base64String: 需要转换的base64 图片
w: 压缩后的图片的宽度
quality: 图片的压缩比例
*/
function compress(base64String, w, quality) {
	var getMimeType = function (urlData) {
		var arr = urlData.split(",");
		var mime = arr[0].match(/:(.*?);/)[1];
		// return mime.replace("image/", "");
		return mime;
	};
	var newImage = new Image();
	var imgWidth, imgHeight;
	var promise = new Promise((resolve) => (newImage.onload = resolve));
	newImage.src = base64String;
	return promise.then(() => {
		imgWidth = newImage.width;
		imgHeight = newImage.height;
		var canvas = document.createElement("canvas");
		var ctx = canvas.getContext("2d");
		if (Math.max(imgWidth, imgHeight) > w) {
			if (imgWidth > imgHeight) {
				canvas.width = w;
				canvas.height = (w * imgHeight) / imgWidth;
			} else {
				canvas.height = w;
				canvas.width = (w * imgWidth) / imgHeight;
			}
		} else {
			canvas.width = imgWidth;
			canvas.height = imgHeight;
		}
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
		var base64 = canvas.toDataURL(getMimeType(base64String), quality);
		return base64;
	});
}

export default {
    compress
}

注意: 此方法是一个异步方法，所以可以用then方法

 compress(base64String, 800, 0.5).then(function (val) {
            imgb.src = val;
  });

4 防止处理多次点击

uniapp: 防止按钮多次点击多次触发事件

1. 此方法放在util下，封装成公共方法

// 防止处理多次点击
function noMultipleClicks(methods, info) {
    // methods是点击后需要执行的函数， info是函数需要传的参数
    let that = this;
    if (that.noClick) {
        // 第一次点击
        that.noClick= false;
        if((info && info !== '') || info ==0) {
            // info是执行函数需要传的参数
            methods(info);
        } else {
            methods();
        }
        setTimeout(()=> {
            that.noClick= true;
        }, 2000)
    } else {
        //  这里是重复点击的判断
    }
}
//导出
export default {
    noMultipleClicks,      // 禁止多次点击
}

2. man.js 文件引入

import util from './common/js/util.js'
Vue.prototype.$noMultipleClicks = util.noMultipleClicks;

3. 在实际页面中引用，不带参数,直接传一个方法就行

// 记得在data中挂载   noClick:true
data() {
    return {
        noClick:true,
    }
},

<view class="bottom-btn-box">
    <view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
</view>

methods:{
    commitWork(){
        //balabala
    }           
}

4. 在实际页面中引用，带参数,传一个方法和一个参数就行

// 记得在data中挂载   noClick:true
data() {
    return {
        noClick:true,
    }
},
<view class="bottom-btn-box">
  <view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
</view>

methods:{
    goPay(item) {
       console.log(item)
        //balabala
    }           
}

5 使用application/x-www-form-urlencoded 格式 传参数

参考文献：

axios中post请求 json 和 application/x-www-form-urlencoded

使用 application/x-www-form-urlencoded 格式

vue qs.stringfy()处理对象数组arrayFormat和allowDots