微信小程序 Canvas 在IOS下,导致无法滑动、页面卡死

最近在写一个活动小程序,其中有一个抽奖组件,测试的时候发现Canvas在Ios下的渲染问题。

如果用户使用苹果设备,按住Canvas绘制区域时滑动页面,会导致页面卡死,只有重启小程序才能恢复。

但是Android用户却没有任何问题。


初步排查

初步排查怀疑是Canvas这种原生组件在绘制的时候出现了问题导致的。

但是查询微信官方文档论坛,发现有人遇到了同样的问题。

原生组件渲染问题的官方回复,后续版本修复原生组件渲染问题的官方回复,后续版本修复

但是这篇提问是在19年5月份发的,微信官方就是10月实现了原生组件同层渲染,来解决这个问题。我检查了下基础库版本,是2.21.2,远超过要求。

基于mpvue+Vant+npm快速构建微信小程序

最近要快速开发个小程序,心想着要是按微信推荐那样开发得累死,所以研究了下如何使用mpvue+Vant+npm快速构建微信小程序。


基础架子

项目地址:mpvue.com

首先用mpvue来拉一个基础的架子,这样方便我们后续集成一些其他的东西。

#安装vue-cli,有可以跳过
npm install -g vue-cli@2.9

#使用vue-cli创建mpvue项目
vue init mpvue/mpvue-quickstart 你的项目名

#安装依赖啥的
cd 你的项目目录
yran
yarn dev
Error:注意:
受微信动态增删改查 wxml 节点信息限制,某些VUE组件用不了。详细可看官方说明~

集成npm

首先在你的项目目录下,新建lib目录,用处存放第三方npm包。

Electron 实现第三方登录

上两篇文章说了,如何在Web端实现Google/Facebook的第三方登录。

这就简单说下 Electron 实现第三方登录。

其实,整个流程中与Web版本最大区别就是,如何获取回调的参数。


Electron 监听回调URL

//注册监听事件
OAuth.webContents.on('did-navigate', (event, url) => {
    let raw_code = /access_token=([^&]*)/.exec(url) || null;
    let access_token = (raw_code && raw_code.length > 1) ? raw_code[1] : null;
    let raw_state = /state=([^&]*)/.exec(url) || null;
    let state = (raw_state && raw_state.length > 1) ? raw_state[1] : null;
    let raw_time = /data_access_expiration_time=([^&]*)/.exec(url) || null;
    let expiration_time = (raw_time && raw_time.length > 1) ? raw_time[1] : null;
    // let error = /\?error=(.+)$/.exec(url);

    //获取到三个参数,即视为登录成功
    //PS:其实还应该验证回调域名是否匹配
    if (access_token && state && expiration_time) {
        //向登录窗体发消息,通知器第三方登录成功,继续走原来的流程
        AuthUI.webContents.send('oauth.success', {
            access_token: access_token,
            state: state,
            expiration_time: expiration_time,
            type: 'facebook'
        });
        //登录成功后销毁窗体
        OAuth.destroy();
    }
});

Electron 注册全局过滤器

Waxy主题:自定义Canvas背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。