immafrady / blog Goto Github PK
View Code? Open in Web Editor NEW个人博客
个人博客
因为小程序的原生Canvas缺少toDataURL
方法,所以必须要找到第三方解决方案。
一开始搜到的是很多人推荐的第三方库upng转码:
参考
canvas = wx.createCanvasContext(canvasID)
// 1. 绘制图片至canvas
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
// 绘制完成后执行回调,API 1.7.0
canvas.draw(false, () => {
// 2. 获取图像数据, API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: imgWidth,
height: imgHeight,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
}
})
})
这个方法虽然能在Android和微信开发者工具上完美运行,可是一到iOS客户端就会报如下图错误:
ArrayBuffer length minus the byteOffset is not a multiple of the element size
这个问题困扰了好一会儿,甚至还想让后台改一下传值的方式(base64 -> url)
后来发现了原生带一个读取文件后,以base64形式解码的方法,顺利解决了这个问题
saveSign () {
return new Promise((resolve, reject) => {
// 首先把canvas转成临时文件,并获取地址
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.width,
height: this.height,
canvasId: 'canvas',
success: res1 => {
const fsm = wx.getFileSystemManager()
// 读取地址,并解码成base64
fsm.readFile({
filePath: res1.tempFilePath,
encoding: 'base64',
success: res2 => {
resolve(res2.data)
},
fail: err2 => {
reject(err2)
}
})
},
fail: err1 => {
reject(err1)
}
})
})
}
假设有如此的页面跳转:
A -> B -> A -> B
在小程序的页面栈里,是这样的过程:
当使用mpvue来构建小程序时,情况有所不同
小程序自身的页面栈的确还是按照原来的方式进行
但mpvue的Vue生命周期则不是
当3. B出栈
时,对应的页面Vue实例好像并没有使其回收(destroy
的生命周期一直没走到)。
所以,这会引发几个问题:
解决方案:
this.$destroy()
回收内存之前的官网项目,因为SEO的需求,在规划时就选择了服务端渲染的技术架构。
因为因为以Vue为基础的第三方支持SSR的框架不多,所以选择了早有所闻但又没接触过的Nuxt.js。
不得不说Nuxt的坑还不少,首当其冲就是我们的SEO效果并不好……
虽说有可能是因为需求方时常提出修改文案的要求,甚至一天多改,每隔几小时就要上线一次。不过在渐渐稳定下来的一周后,CTO惊人地发现,好像百度爬虫一次都没有进来过。
CTO焦头烂额,甚至质疑起我到的有没有使用asyncData
当然AsyncData肯定是有用的,而且因为我们有个bug就是踩了它的坑😒
在首页点击文章链接,可以正常跳转;但是假如在文章当前页面刷新,又或者是直接请求网址的话,直接服务器报错,说那个地址没有对应的文件🙃
因此发现原来Nuxt的SSR并非纯粹的SSR,而是首屏SSR,后续跳转通过浏览器请求。所以在AsyncData中的请求是区分了环境的……
当然这样来做,好处是有的:兼顾了直接Get页面的抓取,以及服务器压力的缓解。
不过这也可能导致爬虫在网站内做跳转动作时,并不能成功跳过去,因为那是ajax请求,拿到的只有参数而非页面……
=======================
不过在研究了豆瓣和知乎等内容输出网址之后,发现其实解决这个问题的解决方案可能真的很简单……
那就是通过target="_blank"
进行跳转,强行新开一个页面,这时的页面绝对是服务端渲染出来的。😂😂
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.