微信小程序生成图片和保存图片

生成图片这个功能需要使用 Canvas ,先将要保存的图片使用 Canvas 画出来,然后调用相关方法保存到手机上。文中使用或是未使用的有关小程序中 Canvas 的 api 可以在 小程序Canvas相关Api 这里查看。

为了使用方便,我将这个需求的实现做成了一个组件,便于项目的其他地方复用,也遇到了一些因为使用自定义组件带来的问题


进击的学霸...大约 4 分钟微信小程序
微信小程序中 e.target 和 e.currentTarget 的区别

部分摘抄自 官方文档

target currentTarget
定义 触发事件的组件的一些属性值集合 当前组件的一些属性值集合
dataset 事件源组件上由 data- 开头的自定义属性组成的集合 当前组件上由 data- 开头的自定义属性组成的集合

进击的学霸...小于 1 分钟微信小程序
微信小程序中使用 npm 包

现在的前端开发中我们已经习惯了使用 npm 包,但是微信小程序的目录结构显然与我们开发的普通 Vue 项目是不一样的,那么如果我要在微信小程序中使用一个 npm 包的话,我们应该如何操作呢,其实也很简单


进击的学霸...小于 1 分钟微信小程序
微信小程序中调用组件的方法

在小程序中组件的使用是很方便的,但是有的时候我们想要强制调用组件的某个方法来刷新值或者进行其他的操作,而组件并未直接向外部暴露出方法来,该怎么办呢

首先给要调用方法的组件的 wxml 元素上添加一个 ID ,然后在 js 中先定义一个变量,onload 的时候给变量赋值组件的实例,这样组件的实例就在当前 page 中都可以用了,调用组件中 methods 中的方法即可

let iptNumberComponent
iptNumberComponent = this.selectComponent('#ipt-quantity')
iptNumberComponent.updated()

进击的学霸...小于 1 分钟微信小程序
微信小程序中的 onLaunch 和 onLoad 异步加载

小程序的 onLaunch 和页面级的 onLoad 异步执行,这两个的执行顺序是不一定的,在 onLaunch 中请求还未返回的时候, onLoad 可能就执行了,需要加判断

封装一个全局方法,便于其他页面使用,我们的业务逻辑是只有当用户执行到下单或分享等必须操作时才需要用户登录,用户登录需要先授权个人信息,如果用户授权过个人信息,下次进入的时候就直接登录,登录成功后会赋值 getUserInfoFlagtrue


进击的学霸...大约 2 分钟微信小程序
小程序开发笔记

自带组件 swiper 样式修改

轮播图的点的样式相关类名如下所示,稍作修改便可实现一些设计上的简单的效果了

wx-swiper-dots wx-swiper-dots-horizontal wx-swiper-dot wx-swiper-dot-active

引入 iconfont

小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64,然后引用。字体转换网站


进击的学霸...大约 2 分钟微信小程序
小程序项目搭建

小程序项目基础搭建,方便快速开发原生小程序,使用脚手架的同学随意


进击的学霸...大约 2 分钟微信小程序