1.長按保存圖片
借助html2canvas插件生成圖片锉试，微信瀏覽器自帶保存圖片功能實(shí)現(xiàn)
①安裝插件: 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中也包含圖片（在項(xiàng)目最后一頁，生成圖片時(shí)dom不在可視區(qū)域內(nèi)）绎秒，dom結(jié)構(gòu)的圖片不可使用懶加載
2.weixin-js-sdk配置問題
從后臺請求獲取微信配置信息辕漂，簽名不合法呢灶，需要回傳當(dāng)前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 => {
})
}
微信配置信息從后臺請求，需要一定的響應(yīng)時(shí)間钉嘹，weixin-js-sdk未配置完成就執(zhí)行分享操作鸯乃，則會默認(rèn)講頁面參數(shù)分享出去，為了用戶安全跋涣，進(jìn)入頁面后立即替換頁面鏈接缨睡，借助sessionStorage存貯參數(shù)，如果無參數(shù)則跳轉(zhuǎn)至微信授權(quán)頁
router.beforeEach((to, from, next) => {
if (to.query.channel) {
window.sessionStorage.setItem('query', JSON.stringify(to.query))
window.location.replace(to.path) // 清除參數(shù),也可以用router.replace(to.path)陈辱，但是在anriod中頁面加載時(shí)會刷新奖年，ios用戶則無感知
} else {
if (JSON.parse(sessionStorage.getItem('query')) {
next()
} else {
window.location.replace('https://open.weixin.qq.com/........')
}
}
}
3. vue/cli3打包優(yōu)化，聯(lián)合nginx配置
vue/cli3默認(rèn)打包之后沛贪，js和css的體積過大陋守，影響資源加載速度震贵，解決方案，打包成.gz文件水评，相應(yīng)的需要修改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的文件進(jìn)行壓縮
deleteOriginalAssets: false, //是否刪除原文件
})]
}
}
}
}
4. vue/cli3打包后link預(yù)告加載js文件
在打包好后的文件中index.html文件中猩系，會有l(wèi)ink引入js文件，并有屬性ref="preload"之碗，即告訴瀏覽器這個(gè)文件是一定會加載的蝙眶，如果想去掉這個(gè)preload,在vue.config.js中配置
chainWebpack: config => {
config.plugins.delete('preload')
}
5.一個(gè)非常簡單的css,文本溢出省略
p{width: 500px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}
省略號的顏色和p顏色相同
