minijson使用_微信小程序使用lottie

喜大普奔~~微信小程序官方已经宣布支持lottie了。

一、通过npm安装lottienpm install --save lottie-miniprogram

二、微信小程序npm 构建npm init

npm init执行之后，一直按回车即可。

一直按回车，出现ok字样后，打开微信开发者工具 ，依次点击  工具一>构建npm即可

如图提示构建完成后，我们的小程序目录会多出一个 文件夹：miniprogram_npm。

三、制作lottie要使用的json包

不会AE也不怕，阿里爸爸提供了一个在线制作lottiejson的网站：https://design.alipay.com/emotion

普通开发者也可以做出精美的动画。通过上面那个连接制作完动画后，导出为json即可。

如果有服务器的，可以将json文件保存到服务器，这样就可以减轻小程序的体积了。

四、小程序使用lottie

1.index.wxml(我这里加了个按钮，点击按钮才显示动画，具体用法看应用场景)点我预览动画

2.index.js

详细的说明已经写到下面代码里的注释了，就不再多说了，看码说话!import lottie from 'lottie-miniprogram'//引入lottie npm包Page({  data: {     },  onLoad() {      },  onReady() {      },  click() {//按键点击事件    wx.createSelectorQuery().select('#canvas').node(res => {      const canvas = res.node      const context = canvas.getContext('2d')      canvas.width = 300//设置宽高，也可以放到wxml中的canvas标签的style中      canvas.hight = 300      lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象      lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂        loop: true,//是否循环播放(选填)        autoplay: true,//是否自动播放(选填)        path:'https://cdn.你的域名.com/aaa.json',//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中        rendererSettings:{          context//es6语法：等同于context:context(必填)        }             })    }).exec()  }})

四、效果预览：

上传不了视频，就上传张截图吧