react+antd的开发过程中经常会用到Modal+Form的组合来实现新增、编辑的功能。使用过程中常会遇到this.formRef.current为空的问题。

Read More

vue中防止样式污染可以在style中设置scoped来处理，而react中没有直接对应的功能。查阅资料后得知，webpack中包含了CSS modules这个工具来解决该问题。

Read More

canvas支持直接获取和修改画布中每一个像素点的信息，这些信息全部被存放在ImageData对象中。

一、ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

• width：图片宽度，单位是像素。
• height：图片高度，单位是像素。
• data：图片所有像素点信息，是一个一维数组，元素类型是Uint8ClampedArray。储存像素信息的方式是自图片的左上角开始，从左往右、由上自下依次存入每个像素点的RGBA四个值。这个数组包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1。

Read More

一、动画

动画通过每帧放出不同的画面来实现，而每帧的需要的操作如下：

1. 清空上一帧绘制的内容。
2. 如果需要保存当前canvas状态（笔刷样式、变形）的话就将其保存一下。
3. 绘制这一帧需要画的内容。
4. 如果之后需要恢复之前保存的状态的话就恢复一下。

由于动画需要按时切换显示的内容，所以会使用到和时间相关的函数：

• setInterval(callback, delay)
• setTimeout(callback, delay)
• requestAnimationFrame(callback)

由于setTimeout和setInterval有可能被其他语句耽误，通常使用requestAnimationFrame方法。

本博客banner的动画也是使用这个方法制作的，大致步骤如下：

Read More

一、状态保存&恢复

在对画布进行变形前，最好使用save将初始状态保存起来。把画布和坐标回到初始状态有利于之后的绘制。

• ctx.save()将canvas的所有状态保存在栈中，包括
  • 当前应用的变形
  • 这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled
  • 当前的裁切路径
• ctx.restore()将最后保存的状态弹出

Read More

简单地说：初始状态的canvas是一张透明的画布，我们能用不同方法在canvas上画图。

1

<canvas width="1440" height="720"></canvas>

canvas标签的特性只有宽和高可以设置。css中也可以改变它的宽高，但是默认保持原始宽高比。如果在css中强行同时设置宽高的话canvas标签和里面的画面会被拉伸，所以建议使用特性设置宽高。另外，虽然绘制过程中可以作出矢量图，但在浏览器渲染结束以后得到的是位图，这时通过样式放大的图将不会再具有矢量图的特性，马赛克严重。

• 兼容性：目前canvas基本得到了所有较新版本主流浏览器的支持，详见Can I Use Canvas? ，如果遇到了不兼容的浏览器的话，这里也有解决方案：

1
2
3
4

<canvas width="1440" height="720">
	<div>被canvas标签包裹的内容只有当浏览器不支持canvas时会显示，其余时候自动隐藏。</div>
    <div>可以使用一张静态图片代替</div>
</canvas>

• **</canvas>**是必须的：如果没有写结束标签，那么<canvas>之后的所有内容都会被当做替代内容隐藏。

Read More

一、创建订单

1. 判断缓存中有没有token
   • 没有的话跳转到授权页面获取
2. 有token再创建订单，获取订单编号

流程：获取用户信息(getUserInfo) → 获取用户登录信息(wx.login) → 获取token → 获取订单编号

二、准备预支付

Read More

微信小程序和原生web语法不同的地方&小技巧

一、wxml

1. swiper 标签存在默认宽高（100% * 150px）。
2. image 标签也存在默认宽高（320px * 240px），可以进行设置全局的样式width: 100%;和特性mode="widthFix"来当作普通img标签使用。

二、wxss

1. 不支持通配符选择器（*）

2. wxss支持变量，语法（设置主题颜色）：

   • 定义：--themeColor: #eb4450;
   • 使用：color: var(--themeColor);

3. 如果使用了less，并且使用了类似calc(100vh - 70rpx)的语句的话，自动生成的wxss会计算错误，变成calc(30vh)。想要原来的代码的话应该使用字符串：~'calc( 100vh - 70rpx )'

三、wxs

相当于页面js中分出来的模块文件

需要使用module.exports导出模块中的数据，然后在引入wxs的wxml中使用module特性定义引入的对象名：

Read More

一、应用钩子函数

在app.js中App方法中编写

1. onLaunch 在页面第一次启动时触发，只会触发一次，可用来获取用户信息等数据。
2. onShow 在页面切换到前台时触发，一定会在onLaunch后触发。可以重置数据或页面效果。
3. onHide 在页面隐藏到后台时触发。可以取消设置的定时器等。
4. onError 当应用报错时触发。可以从方法中获取错误参数。
5. onPageNotFound 当应用第一次启动，找不到入口页面时触发。可以在发生事件时跳转到其他页面（比如404）。

二、页面钩子函数

Read More

自定义组件

文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

一、创建自定义组件

1. 在根目录中新建文件夹components/组件名/

2. 创建好文件夹后可以在微信开发者工具中快速新建组件需要的各个文件。

   

3. 在需要引入该组件的页面的文件夹中打开对应json，引入需要的组件(这里是Tabs组件)：

   1 2 3 4 5

   { "usingComponents": { "Tabs": "../../components/Tabs/Tabs" } }

4. 在页面的wxml中使用组件：

   1	<Tabs></Tabs>

Read More