微信网页开发踩坑(2)

自定义字体大小导致页面错乱

• 项目使用rem布局,当用户修改了手机系统字体大小或者微信浏览器字体大小,会使页面样式错乱,因此禁止用户缩放字体参考链接

// reset_font_size.js
(function () {
  if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
    handleFontSize()
  } else {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', handleFontSize)
      document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
    }
  }

  function handleFontSize () {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', {
      'fontSize': 0
    })

    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function () {
      WeixinJSBridge.invoke('setFontSizeCallback', {
        'fontSize': 0
      })
    })
  }
})()

移动端1px四角边框

业务场景，如图所示

.qrcode_wrapper {
        background: linear-gradient(to left, #f30b03, #f30b03) left top no-repeat, linear-gradient(to bottom, #f30b03, #f30b03) left top no-repeat, linear-gradient(to left, #f30b03, #f30b03) right top no-repeat, linear-gradient(to bottom, #f30b03, #f30b03) right top no-repeat, linear-gradient(to left, #f30b03, #f30b03) left bottom no-repeat, linear-gradient(to bottom, #f30b03, #f30b03) left bottom no-repeat, linear-gradient(to left, #f30b03, #f30b03) right bottom no-repeat, linear-gradient(to left, #f30b03, #f30b03) right bottom no-repeat;
        background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
        <!--transform: scale(.5);-->
        <!--zoom: .5;-->

        #qrcode_img {
          width: 200px;
          height: 200px;
        }

        .qrcode_desc {
          font-size: 13px;
          color: #f30b03;
          text-align: center;
        }
      }

• transform: scale(.5)会占用缩放前的空间,对其他元素布局产生影响
• zoom: .5;由于使用rem布局,zoom缩放在移动端无效
• 暴力解法：1.1px（如果有大佬有好的解法，欢迎指正）

Html2canvas图片绘制问题

import VueHtml2Canvas from 'vue-html2canvas'
//必须和vue-html2canvas结合使用！否则报错
// index.js?d1e0:1 Uncaught ReferenceError: regeneratorRuntime is not defined
import regeneratorRuntime from 'regenerator-runtime' 

打包文件中background-image为本地文件时路径不正确

• 微信网页开发项目由于自定义分享等需求项目为多页应用,打包后dist目录结构与默认dist结构不相同,因此需要单独配置ExtractTextWebpackPlugin的publicPath,根据目录结构自由调整。参考链接

// 默认生成文件目录结构
dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

// 本项目多页应用生成项目目录结构
dist
├── page1
    └── page1.html
├── page2
    └── page2.html
└── static
    ├── css
        ├── page1
            └── page1.css
        ├── page2
            └── page2.css
    ├── img
    └── js

// 修改build/util.js下的配置
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../../' // 根据项目结构自行配置
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

Charles抓https显示unknown解决方法