侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

小程序开发之多端框架: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;


  • 上一条:
    git开发规范之分支命名、commit规范
    下一条:
    在uni_app中开发小程序之常用功能示例代码汇总
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 在go语言中以邮件标题中获取SPF和DMARC,来判断是否为垃圾邮件之垃圾邮件过滤器功能实现(0个评论)
    • 在go语言中使用attr字段标签提取XML属性数据示例(0个评论)
    • 在laravel中介绍一个生成假数据的PHP库:FakerPHP(0个评论)
    • 在laravel框架中对环境配置文件的加载过程步骤浅析(0个评论)
    • Laravel 10.12版本发布(0个评论)
    • 在go语言中如何记录每个HTTP请求到你的Web服务器、日志记录器?(0个评论)
    • 在Go语言中如何查找一个IP地址的网络地址?(0个评论)
    • ELK + Filebeat 搭建日志系统流程步骤(0个评论)
    • 在laravel中以curl的方式请求京东联盟api获取数据流程步骤(0个评论)
    • 在go语言中使用gin框架-中间件gin.BasicAuth()实现账号密码方式认证示例(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客