微信小程序项目总结(一)

1.margin 0 auto 居中失效

换用flex布局来实现的居中处理，解决了问题

/* 安卓手机居中有问题 */
/* margin: 0 auto;  */
/* 以下代码写在父级容器上  */
display: flex;
justify-content: center;
align-items: center;

2. 二维码的生成

记得给一个div容器

<script src="./qrcode.min.js"></script>
//生成二维码
getQrCode() {
  var qrcode = new QRCode(document.getElementById('qrcode'), {
    text: this.personalList.khUrl,
    width: 60,//图像宽度
    height: 60,//图像高度
    colorDark: '#000000',//前景色
    colorLight: '#ffffff',//背景色
    correctLevel: QRCode.CorrectLevel.H,
    //容错级别 可设置为QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H
  });
},

其中的api

qrcode.clear(); 
qrcode.makeCode('new content');

3.ES6多层解构

对象解构
const testData = { name:‘wy’,age:{tx:‘kq’} }
const { age:{ tx } } = testData
alert(tx)

数组解构
const testData = [ {‘wy’:12}, {‘tx’: 13}]
const [wy, tx] = testData
alert(wy,tx)

4.android系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

5.截图功能的实现

npm 下载

npm install html2canvas
import html2canvas from 'html2canvas';

<script src="./html2canvas.min.js"></script>
//点击生成图片
    generateImage() {
    document.querySelector('#area').scrollTop = 0;//要将页面滑动到顶端才不会有问题
    document.getElementById('area').style.height = 'auto';
    var rect = document.getElementById('appArea').getBoundingClientRect(); // 关键代码
    let height =rect.height +(158 * ((this.state.trList.width - 24) / 321) + 80 > 300 ? 158 * ((this.state.trList.width - 24) / 321) + 80 : 300); // 加上底部新增图片高度(40是margin值)，避免截取不全
    let width = rect.width;
    let userAgent = navigator.userAgent;
    // 苹果手机
    if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
    var scale = 3000000 / height / width > 2 ? 2 : 1;
    console.log(3000000 / height / width, '5000000 / height / width');
    console.log(scale, 'scale');
    } else {
    //取的谷歌浏览器
    var scale = 14000 / height > 2 ? 2 : 1;
    console.log(scale, 'scale');
    }
    html2canvas(document.getElementById('appArea'), {
    // scrollY: 2 * rect.top, // 关键代码
    scale, //图像太长底部出现空白处理
    scrollY: rect.top,
    height,
    width: rect.width,
    }).then((canvas) => {
    canvas.toBlob((blob) => {
      // this.imgUrl = URL.createObjectURL(blob)
      // var aImg = document.createElement("a");
      this.imgUrl = canvas.toDataURL('image/jpeg');
      var img = document.createElement('img');
      img.setAttribute('src', this.imgUrl);
      img.className = 'imgItem';
      img.style.width = '100vw';
      img.style.height = 'auto';
      document.querySelector('.canvasImg').appendChild(img);
      document.querySelector('.imgBox').onclick = () => {
        document.getElementById('area').style.height = '88vh';
        document.querySelector('.canvasImg').removeChild(img);
        document.querySelector('.imgBox').style.display = 'none';
        document.querySelector('.saveBtn').style.display = 'block';
      };
      document.querySelector('.imgBox').style.display = 'block';
      document.querySelector('.saveBtn').style.display = 'none';
    }, 'image/png');
    });
    },    

6.点击按钮莫名页面下拉，导致截图失效(scrollY参数值被改变)

使用了button标签，受到了奇怪的默认事件影响，换成div，或者清除默认事件或者默认样式解决