Giter VIP home page Giter VIP logo

blog's People

Contributors

immafrady avatar

Stargazers

 avatar

blog's Issues

小程序Canvas转base64

因为小程序的原生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客户端就会报如下图错误:
image

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)
            }
          })
        })
      }

mpvue的组件生命周期与小程序页面生命周期不对应

假设有如此的页面跳转:
A -> B -> A -> B
在小程序的页面栈里,是这样的过程:

  1. A入栈
  2. B入栈
  3. B出栈
  4. B入栈

此时的B经历了两次初始化的过程。

当使用mpvue来构建小程序时,情况有所不同

小程序自身的页面栈的确还是按照原来的方式进行
但mpvue的Vue生命周期则不是

3. B出栈时,对应的页面Vue实例好像并没有使其回收(destroy的生命周期一直没走到)。
image

所以,这会引发几个问题:

  1. 数据残留,当回到B页面时,还保留者上次使用的痕迹
  2. 内存没回收,消耗过大(?)

解决方案:

  1. 手动重置对应的页面需要的Data
  2. 写一个mixin,统一在小程序Unload生命周期里,手动调用this.$destroy()回收内存

如何让首屏SSR的框架支持完全SSR?

之前的官网项目,因为SEO的需求,在规划时就选择了服务端渲染的技术架构。
因为因为以Vue为基础的第三方支持SSR的框架不多,所以选择了早有所闻但又没接触过的Nuxt.js。

不得不说Nuxt的坑还不少,首当其冲就是我们的SEO效果并不好……

虽说有可能是因为需求方时常提出修改文案的要求,甚至一天多改,每隔几小时就要上线一次。不过在渐渐稳定下来的一周后,CTO惊人地发现,好像百度爬虫一次都没有进来过。

CTO焦头烂额,甚至质疑起我到的有没有使用asyncData

image

当然AsyncData肯定是有用的,而且因为我们有个bug就是踩了它的坑😒
在首页点击文章链接,可以正常跳转;但是假如在文章当前页面刷新,又或者是直接请求网址的话,直接服务器报错,说那个地址没有对应的文件🙃

因此发现原来Nuxt的SSR并非纯粹的SSR,而是首屏SSR,后续跳转通过浏览器请求。所以在AsyncData中的请求是区分了环境的……

当然这样来做,好处是有的:兼顾了直接Get页面的抓取,以及服务器压力的缓解。

不过这也可能导致爬虫在网站内做跳转动作时,并不能成功跳过去,因为那是ajax请求,拿到的只有参数而非页面……

=======================

不过在研究了豆瓣和知乎等内容输出网址之后,发现其实解决这个问题的解决方案可能真的很简单……

那就是通过target="_blank"进行跳转,强行新开一个页面,这时的页面绝对是服务端渲染出来的。😂😂

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.