小程序开发之多端框架：taro

微信(小程序)  /  管理员 发布于 3个月前   102

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 

微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。

当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，

这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

特性：多端转换支持

Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。

更多知识，请上官方文档：

https://taro-docs.jd.com/docs/

快速开始

安装

$ yarn global add @tarojs/cli

项目初始化

$ taro init myApp

下面是一个简单的海报示例demo

import { useEffect } from "react";
import { Canvas, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
const Index = () => {
  // 分享海报长度坐标等定义
  // 海报的宽高
  const w = 750;
  const h = 500;
  // 二维码的边长
  const qrCodeSide = 234;
  // 二维码圆心位置
  const qrCenter = {
    x: 381,
    y: 962
  };
  const rpx2px = (arg) => {
    const info = Taro.getSystemInfoSync()
    const width = info.screenWidth
    return arg * width / 750
  }
  // 获取图片对象
  const getImage = async (url) => {
    const off = Taro.createOffscreenCanvas({ type: '2d' })
    const image = off.createImage()
    await new Promise((resolve, reject) => {
      image.onload = resolve  // 绘制图片逻辑
      image.src = url
    })
    return image
  }
  // 保存图片，使用 canvas 绘制
  const saveImg = async () => {
    const query = Taro.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        getImage('https://www.ylq918.com/img/avatar.jpg').then(image => {
          canvas.width = res[0].width
          canvas.height = res[0].height
          ctx.fillStyle = 'white'
          ctx.font = `bold ${rpx2px(80)}px serif`
          ctx.fillText('你好世界', rpx2px(215), 50)
          ctx.fillStyle = 'red'
          ctx.fillRect(20, 20, 150, 100);
          ctx.beginPath(); //开始路径
          ctx.moveTo(190, 190); //起始点
          ctx.lineTo(160, 190); //开始
          ctx.lineTo(190, 160);
          ctx.fill(); //闭合填充
          ctx.drawImage(
            image,
            0, 420,
            375, 200
          )
        })
      })
    // 绘制背景
    // 延迟执行才能绘制成功
    // setTimeout(() => {
    //   Taro.canvasToTempFilePath({
    //     x: 0,
    //     y: 0,
    //     width: w,
    //     canvasId: 'share',
    //     fileType: 'jpg',
    //     success(res) {
    //       // setTimeout(() => {
    //       //   Taro.saveImageToPhotosAlbum({
    //       //     filePath: res.tempFilePath,
    //       //     success() {
    //       //     }
    //       //   });
    //       // }, 300);
    //     }
    //   });
    // }, 300);
  };
  useEffect(() => {
    saveImg()
  }, [])
  return (
    <>
      <Canvas
        type="2d" id="myCanvas"
        style={{ width: w, height: h }}
      ></Canvas>
    </>
  );
};
export default Index;