年度账单项目

1.长按保存图片

借助html2canvas插件生成图片，微信浏览器自带保存图片功能实现
①安装插件: yarn add html2canvas
②页面引入:import html2canvas from 'html2canvas'
③使用：

let _this = this
html2canvas(document.getElementById('imageTofile'), {  // 要生成图片的dom
   useCORS:  true
}).then(canvas => {
   let url = canvas.toDataURL('image/jpeg', 0.7)
   _this.htmlUrl = url // 
   console.log('生成图片')
}

注意：由于在生成图片的dom中也包含图片（在项目最后一页，生成图片时dom不在可视区域内），dom结构的图片不可使用懒加载

2.weixin-js-sdk配置问题

从后台请求获取微信配置信息，签名不合法，需要回传当前url,要编码

wxSet () {
    let _this = this
    getWxConfig({
        params: ''\"" + encodeURIComponent(window.loacation.href.splip('#')[0]) + "\"",
        headers: { 'content-type': 'application/json' }
    }).then(res => {
        _this.$wx.config({
            debug: false,
            appId: res.data.data.appId,
            timestamp: res.data.data.timestamp,
            nonceStr: res.data.data.nonceStr,
            signature: res.data.data.signatrue,
            jsApiList: [ 'updateAppMessageShareData', 'updataTimelineShareData']
        })
    }).catch(error => {
    })
}

微信配置信息从后台请求，需要一定的响应时间，weixin-js-sdk未配置完成就执行分享操作，则会默认讲页面参数分享出去，为了用户安全，进入页面后立即替换页面链接，借助sessionStorage存贮参数，如果无参数则跳转至微信授权页

router.beforeEach((to, from, next) => {
    if (to.query.channel) {
        window.sessionStorage.setItem('query', JSON.stringify(to.query))
        window.location.replace(to.path) // 清除参数,也可以用router.replace(to.path)，但是在anriod中页面加载时会刷新，ios用户则无感知
    } else {
        if (JSON.parse(sessionStorage.getItem('query')) {
          next()  
        } else {
           window.location.replace('https://open.weixin.qq.com/........')
        }
    }
}

3. vue/cli3打包优化，联合nginx配置

vue/cli3默认打包之后，js和css的体积过大，影响资源加载速度，解决方案，打包成.gz文件，相应的需要修改nginx配置
打包生成.gz文件的配置:
①安装插件：yarn add compression-webpack-plugin -D
②在vue.config.js中配置：

    const CompressionPlugin = require('compression-webpack-plugin')
    module.exports = {
        configureWebpack: config => {
            if (process.env.NODE_ENV == 'production' ) {
                return {
                    plugins: [new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 10240, // 对超过10k的文件进行压缩
                        deleteOriginalAssets: false, //是否删除原文件
                    })]
                }
            }
        }
    }

4. vue/cli3打包后link预告加载js文件

在打包好后的文件中index.html文件中，会有link引入js文件，并有属性ref="preload"，即告诉浏览器这个文件是一定会加载的，如果想去掉这个preload,在vue.config.js中配置

chainWebpack: config => {
    config.plugins.delete('preload')
}

5.一个非常简单的css,文本溢出省略

p{width: 500px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}

省略号的颜色和p颜色相同

最后编辑于：2019.12.24 16:33:45