(记)在remax，小程序中画布的使用

最新推荐文章于 2021-08-24 10:31:44 发布
最新推荐文章于 2021-08-24 10:31:44 发布
阅读量359 收藏
点赞数 1
分类专栏： remax 小程序 文章标签： 小程序 html html5 reactjs javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41163341/article/details/109239596
版权

demo1

import * as React from 'react';
import { View, Button, Canvas, Image } from 'remax/wechat';
import { authorize, saveImageToPhotosAlbum, getSetting, showToast, getImageInfo, openSetting, canvasToTempFilePath, createCanvasContext, reLaunch, showLoading } from 'remax/wechat';
import { getCompanyId } from '../../../api/company'
import { postActivityListMiniCode } from '../../../api/activity'
import { useQuery } from 'remax';
export default () => {
  const query = useQuery();
  const [openStatus, setopenStatus] = React.useState(true);
  const [Imgurl, setImgUrl] = React.useState({});
  const [saveShare, setSaveShare] = React.useState(false);
  const [codeImg, setCodeImg] = React.useState('')
  // 保存图片
  const saveShareImg = () => {
    const { companyId, activityId } = query
    // 获取用户是否开启用户授权相册
    if (!openStatus) {
      openSetting({
        success: (result) => {
          if (result) {
            if (result.authSetting["scope.writePhotosAlbum"] === true) {
              setopenStatus(true);
              saveImageToPhotosAlbum({
                filePath: Imgurl.tempFilePath,
                success () {
                  showToast({
                    title: '图片保存成功',
                    icon: 'none',
                    duration: 2000
                  })
                  setSaveShare(true)
                  setTimeout(() => {
                    reLaunch({
                      url: `/pages/home/activities/index?id=${companyId}&activityId=${activityId}`,
                    })
                  }, 500);
                },
                fail () {
                  showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            }
          }
        },
        fail: () => { },
        complete: () => { }
      });
    } else {
      getSetting({
        success (res) {
          // 如果没有则获取授权
          if (!res.authSetting['scope.writePhotosAlbum']) {
            authorize({
              scope: 'scope.writePhotosAlbum',
              success () {
                setopenStatus(true)
                saveImageToPhotosAlbum({
                  filePath: Imgurl.tempFilePath,
                  success () {
                    showToast({
                      title: '图片保存成功',
                      icon: 'none',
                      duration: 2000
                    })
                    setSaveShare(true)
                    setTimeout(() => {
                      reLaunch({
                        url: `/pages/home/activities/index?id=${companyId}&activityId=${activityId}`,
                      })
                    }, 500);
                  },
                  fail () {
                    showToast({
                      title: '保存失败',
                      icon: 'none'
                    })
                  }
                })
              },
              fail () {
                // 如果用户拒绝过或没有授权，则再次打开授权窗口
                setopenStatus(false)
                showToast({
                  title: '请设置允许访问相册',
                  icon: 'none'
                })
              }
            })
          } else {
            setopenStatus(true)
            saveImageToPhotosAlbum({
              filePath: Imgurl.tempFilePath,
              success () {
                showToast({
                  title: '图片保存成功',
                  icon: 'none',
                  duration: 2000
                })
                setSaveShare(true)
                setTimeout(() => {
                  reLaunch({
                    url: `/pages/home/activities/index?id=${companyId}&activityId=${activityId}`,
                  })
                }, 500);
              },
              fail () {
                showToast({
                  title: '保存失败',
                  icon: 'none'
                })
              }
            })
          }
        },
        fail (err) {
          console.log(err)
        }
      })
    }
  };
  // 开始绘制
  const drawGoodsPoster = (companyUrl, url) => {
    const ctx = createCanvasContext('shareImg')
    let bgImg = 'https://static.chexx01.cn/images/omc/2901ccce-4bcc-4077-891e-3c0c5f14b17b.png'
    showLoading({ title: '生成中...', icon: 'none' }).catch();
    getImageInfo({
      src: bgImg,
      success (res) {
        const img_width = res.width
        const img_height = res.height
        let bgPicturePath = res.path
        ctx.drawImage(bgPicturePath, 0, 0, img_width, img_height);
        ctx.draw(true);
        drawUser(companyUrl, ctx)
        drawCode(url, ctx)
        setTimeout(() => {
          canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 548,
            height: 920,
            destWidth: 548,
            destHeight: 920,
            canvasId: 'shareImg',
            success: function (res) {
              const data = res
              setImgUrl({ ...data })
              showToast({
                title: '生成成功',
              })
            },
            fail: function () {
              showToast({
                title: '生成失败',
                icon: 'none'
              })
            },
          })
        }, 2000)
      }
    })
  }
  // 公司头像
  const drawUser = (companyUrl, ctx) => {
    getImageInfo({
      src: companyUrl,
      success (res) {
        ctx.save()
        const avatarurl_width = 130;
        const avatarurl_heigth = 130;
        const avatarurl_x = 211;
        const avatarurl_y = 389;
        ctx.beginPath();
        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
        ctx.restore();
        ctx.draw(true);
      }
    })
  }
  // 二维码
  const drawCode = (url, ctx) => {
    console.log(url, 'url');
    getImageInfo({
      src: url,
      success (res) {
        console.log(res, '进啦了');
        ctx.save()
        const avatarurl_width = 220;
        const avatarurl_heigth = 220;
        const avatarurl_x = 163.5;
        const avatarurl_y = 680;
        ctx.beginPath();
        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
        ctx.restore();
        ctx.draw(true);
      }
    })
  }
  React.useEffect(() => {
    const { scene, companyId, activityId } = query
    if (scene) {
      let sceneData = decodeURIComponent(scene)
      let id = sceneData.split('&')[0].split('=')[1]
      let activityId = sceneData.split('&')[1].split('=')[1]
      let codeData = {
        page_path: '/packageA/pages/home/activities/index',
        activity_id: activityId,
        company_id: id
      }
      console.log(codeData)
      postActivityListMiniCode(codeData).then(res => {
        const { url } = res.data
        setCodeImg(url)
        getCompanyId({ id: companyId }).then(res => {
          const { cover } = res.data
          drawGoodsPoster(cover[0].url, url)
        })
      })
    } else {
      let codeData = {
        // 活动路径
        page_path: 'pages/home/activities/index',
        activity_id: activityId,
        company_id: companyId,
        is_hyaline: true
      }
      console.log(codeData)
      postActivityListMiniCode(codeData).then(res => {
        const { url } = res.data
        console.log(url);
        setCodeImg(url)
        getCompanyId({ id: companyId }).then(res => {
          const { cover } = res.data
          drawGoodsPoster(cover[0].url, url)
        })
      })
    }
  }, [query])

  return (
    <View style={'width: 100vw;height: 100vh;overflow: hidden;background: rgba(0, 0, 0, 0.8);'}>
      <View style={'width:100%;height:80%;margin: 35px 0;text-align: center;'}>
        <Image src={Imgurl.tempFilePath ? Imgurl.tempFilePath : ''} style={'height:100%;width:80%;border-radius: 5PX;'} />
      </View>
      <Canvas canvasId={'shareImg'} style={'width:548px;height:920px;position: absolute;top:-1000px'}>
      </Canvas>
      <Button onClick={() => {
        saveShareImg();
      }} style={saveShare ? 'left:10px;background: #ff9d02;color: #fff;width:95%;position: fixed;bottom: 10px' : 'left:10px;background: #ff9d02;color: #fff;width:95%;position: fixed;bottom: 10px'} disabled={saveShare}>保存到手机</Button>
    </View>
  )
}

demo2

import * as React from 'react';
import { View, Button, Canvas, Image } from 'remax/wechat';
import { authorize, saveImageToPhotosAlbum, getSetting, showToast, getImageInfo, downloadFile, openSetting, canvasToTempFilePath, createCanvasContext } from 'remax/wechat';
import { useQuery } from 'remax';
import red_img from './image/red.png';
import black_img from './image/black.png';
import styles from './index.less';
import Loading from '../Loading/index'
import { getHubDetail, getHubCreateMiniCode } from '../../api/hub'
export default (props) => {
  const canvas_width = 1080;
  const canvas_height = 487;
  const car_height = 754
  const black_height = 149
  const red_width = 596
  const red_height = 177
  const bottom_height = 579
  const core_width = 249
  const core_height = 249
  const red = red_img
  const black = black_img
  const [openStatus, setopenStatus] = React.useState(true);
  const [saveShare, setSaveShare] = React.useState(false);
  const [firstShow, setFirstShow] = React.useState(false);
  const [LoadingShow, seLoadingShow] = React.useState(false);
  const [Imgurl, setImgUrl] = React.useState({});
  const [MiniCode, setMiniCode] = React.useState({})
  const [detail, setDetail] = React.useState({});
  const OriginalPrice = (ctx) => {
    getImageInfo({
      src: black,
      success (res) {
        const img_width = res.width
        const img_height = res.height
        var clip_left, clip_top,
          clip_width, clip_height;

        clip_height = img_width * (black_height / canvas_width);
        if (clip_height > img_height) {
          clip_height = img_height;
          clip_width = clip_height * (canvas_width / black_height);
          clip_left = (img_width - clip_width) / 2;
          clip_top = 0;
        } else {
          clip_left = 0;
          clip_top = (img_height - clip_height) / 2;
          clip_width = img_width
        }
        ctx.drawImage(black, clip_left, clip_top, clip_width, clip_height, 0, 1232, canvas_width, black_height);
        ctx.setFontSize(50)
        ctx.setFillStyle("#fff")
        ctx.fillText(`出厂价：${detail.car_param.price}万`, 70, 1320)
        //线条
        ctx.setStrokeStyle('#fff')
        ctx.beginPath()
        //加粗
        ctx.setLineCap('butt')
        ctx.setLineWidth(4)
        ctx.moveTo(60, 1305)
        ctx.lineTo(485, 1305)
        ctx.stroke()
        ctx.draw(true);
      }
    })
  }
  const price = (ctx) => {
    getImageInfo({
      src: red,
      success (res) {
        const img_width = res.width
        const img_height = res.height
        var clip_left, clip_top,
          clip_width, clip_height;

        clip_height = img_width * (red_height / red_width);
        if (clip_height > img_height) {
          clip_height = img_height;
          clip_width = clip_height * (red_width / red_height);
          clip_left = (img_width - clip_width) / 2;
          clip_top = 0;
        } else {
          clip_left = 0;
          clip_top = (img_height - clip_height) / 2;
          clip_width = img_width
        }
        ctx.drawImage(red, clip_left, clip_top, clip_width, clip_height, 484, 1195, red_width, red_height);
        ctx.setFontSize(100)
        ctx.setFillStyle("#fff")
        ctx.fillText(`${detail.price}万`, 670, 1320)
        ctx.draw(true)
      }
    })
  }
  const titleUser = (ctx) => {
    ctx.setFontSize(55)
    ctx.setFillStyle("#fff")
    ctx.fillText(`${detail.sales_info.username}`, 365, 201)
    const bg_x = 360
    const bg_y = 320
    const bg_w = 200
    const bg_h = 60
    const bg_r = 30
    ctx.save()
    ctx.beginPath()
    ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5)
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
    ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
    ctx.clip()
    ctx.fillStyle = '#fff'
    ctx.fillRect(bg_x, bg_y, bg_w, bg_h)
    ctx.restore()
    ctx.setFillStyle("#0078FF")
    ctx.font = 'normal bold 40px sans-serif';
    ctx.fillText('销售顾问', 375, 365)
    ctx.setFillStyle("#fff")
    ctx.draw(true)
    ctx.setFontSize(46)
    ctx.fillText(`${detail.sales_info.mobile}`, 365, 285)
  }
  const avatarUser = (ctx) => {
    downloadFile({
      url: detail.sales_info.avatar,
      success: function (res) {
        ctx.save()
        const avatarurl_width = 260;
        const avatarurl_heigth = 260;
        const avatarurl_x = 59;
        const avatarurl_y = 137;
        ctx.beginPath();
        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(res.tempFilePath, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
        ctx.restore();
        ctx.draw(true);
      }
    })
  }
  const carCompany = (ctx) => {
    downloadFile({
      url: detail.cover,
      success (res) {
        const img_width = res.width
        const img_height = res.height;
        var clip_left, clip_top,
          clip_width, clip_height;

        clip_height = img_width * (car_height / canvas_width);
        if (clip_height > img_height) {
          clip_height = img_height;
          clip_width = clip_height * (canvas_width / car_height);
          clip_left = (img_width - clip_width) / 2;
          clip_top = 0;
        } else {
          clip_left = 0;
          clip_top = (img_height - clip_height) / 2;
          clip_width = img_width
        }
        ctx.drawImage(res.tempFilePath, clip_left, clip_top, clip_width, clip_height, 0, 487, canvas_width, car_height);
        ctx.draw(true);
        price(ctx)
      }
    })
  }
  const miniCode = (ctx) => {
    downloadFile({
      url: MiniCode.url,
      success (res) {
        const bg_x = 750
        const bg_y = 1600
        const bg_w = core_width
        const bg_h = core_height
        const bg_r = 10
        ctx.save()
        ctx.beginPath()
        ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5)
        ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
        ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
        ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
        ctx.clip()
        ctx.drawImage(res.tempFilePath, bg_x, bg_y, bg_w, bg_h)
        ctx.restore()
        ctx.draw(true);
      }
    })
  }
  const topImg = (ctx) => {
    getImageInfo({
      src: 'https://static.chexx01.cn/image/qrcode/top.png',
      success (res) {
        const img_width = res.width
        const img_height = res.height
        var clip_left, clip_top,
          clip_width, clip_height;

        clip_height = img_width * (canvas_height / canvas_width);
        if (clip_height > img_height) {
          clip_height = img_height;
          clip_width = clip_height * (canvas_width / canvas_height);
          clip_left = (img_width - clip_width) / 2;
          clip_top = 0;
        } else {
          clip_left = 0;
          clip_top = (img_height - clip_height) / 2;
          clip_width = img_width
        }
        ctx.drawImage(res.path, clip_left, clip_top, clip_width, clip_height, 0, 0, canvas_width, canvas_height);
        titleUser(ctx)
        //用户头像
        avatarUser(ctx)
        ctx.draw(true);
      }
    })
  }
  const bottomImg = (ctx) => {
    getImageInfo({
      src: 'https://static.chexx01.cn/image/qrcode/bottom.png',
      success (res) {
        const img_width = res.width
        const img_height = res.height
        var clip_left, clip_top,
          clip_width, clip_height;

        clip_height = img_width * (bottom_height / canvas_width);
        if (clip_height > img_height) {
          clip_height = img_height;
          clip_width = clip_height * (canvas_width / bottom_height);
          clip_left = (img_width - clip_width) / 2;
          clip_top = 0;
        } else {
          clip_left = 0;
          clip_top = (img_height - clip_height) / 2;
          clip_width = img_width
        }
        ctx.drawImage(res.path, clip_left, clip_top, clip_width, clip_height, 0, 1360, canvas_width, bottom_height);
        ctx.setFontSize(60)
        ctx.setFillStyle("#fff")
        ctx.fillText('基本信息', 62, 1455)
        ctx.setFontSize(45)
        ctx.fillText(`${detail.title}`, 62, 1550)
        ctx.fillText(`${detail.take_year.slice(0, 4)}年/${detail.mileage}万公里/${detail.emission_standards}`, 62, 1620)
        ctx.draw(true);
        //小程序
        miniCode(ctx)
      }
    })
  }
  const saveShareImg = () => {
    // 获取用户是否开启用户授权相册
    if (!openStatus) {
      openSetting({
        success: (result) => {
          if (result) {
            if (result.authSetting["scope.writePhotosAlbum"] === true) {
              setopenStatus(true);
              saveImageToPhotosAlbum({
                filePath: Imgurl.tempFilePath,
                success () {
                  showToast({
                    title: '图片保存成功',
                    icon: 'none',
                    duration: 2000
                  })
                  setSaveShare(true)
                },
                fail () {
                  showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            }
          }
        },
        fail: () => { },
        complete: () => { }
      });
    } else {
      getSetting({
        success (res) {
          // 如果没有则获取授权
          if (!res.authSetting['scope.writePhotosAlbum']) {
            authorize({
              scope: 'scope.writePhotosAlbum',
              success () {
                setopenStatus(true)
                saveImageToPhotosAlbum({
                  filePath: Imgurl.tempFilePath,
                  success () {
                    showToast({
                      title: '图片保存成功',
                      icon: 'none',
                      duration: 2000
                    })
                    setSaveShare(true)
                  },
                  fail () {
                    showToast({
                      title: '保存失败',
                      icon: 'none'
                    })
                  }
                })
              },
              fail () {
                // 如果用户拒绝过或没有授权，则再次打开授权窗口
                setopenStatus(false)
                showToast({
                  title: '请设置允许访问相册',
                  icon: 'none'
                })
              }
            })
          } else {
            setopenStatus(true)
            saveImageToPhotosAlbum({
              filePath: Imgurl.tempFilePath,
              success () {
                showToast({
                  title: '图片保存成功',
                  icon: 'none',
                  duration: 2000
                })
                setSaveShare(true)
              },
              fail () {
                showToast({
                  title: '保存失败',
                  icon: 'none'
                })
              }
            })
          }
        },
        fail (err) {
          console.log(err)
        }
      })
    }
  };

  const query = useQuery();
  const { detailId } = query;
  React.useEffect(() => {
    getHubDetail({ id: detailId }).then(res => {
      if (res.status === 200) {
        const { sales_info } = res.data
        sales_info.mobile = `${sales_info.mobile.slice(0, 3)}****${sales_info.mobile.slice(7, 11)}`
        res.data.sales_info = sales_info
        const data = res.data
        setDetail({ ...data })
      }
    });
    getHubCreateMiniCode({
      mini_type: 'customer',
      detail_type: 'hub',
      detail_id: parseInt(detailId)
    }).then((res) => {
      if (res.status === 200) {
        const data = res.data
        setMiniCode({ ...data })
      }
    })
  }, [query]);
  const made = () => {
    setFirstShow(true)
    if (Object.keys(detail).length !== 0 && Object.keys(MiniCode).length !== 0) {
      seLoadingShow(true)
      const ctx = createCanvasContext('shareImg');
      showToast({
        title: '绘制中...',
        icon: 'none'
      })
      //底部
      bottomImg(ctx)
      topImg(ctx)
      //底部
      bottomImg(ctx)
      //原价
      OriginalPrice(ctx)
      //车
      carCompany(ctx)
      avatarUser(ctx)
      //小程序
      miniCode(ctx)
      setTimeout(() => {
        canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 1080,
          height: 1939,
          destWidth: 1080,
          destHeight: 1939,
          canvasId: 'shareImg',
          success: function (res) {
            seLoadingShow(false)
            const data = res
            setImgUrl({ ...data })
            showToast({
              title: '绘制成功',
            })
          },
          fail: function () {
            seLoadingShow(false)
            showToast({
              title: '绘制失败',
              icon: 'none'
            })
          },
        })
      }, 2000)
    } else {
      showToast({
        title: '网络错误请重试',
        icon: 'none'
      })
    }
  };
  return (
    <View style={'width: 100vw;height: 100vh;overflow: hidden;'}>
      {
        firstShow ?
          <View style={'width:100%;height:80%;margin: 10px 0;text-align: center;'}>
            {
              LoadingShow ? <Loading />
                :
                <Image src={Imgurl.tempFilePath ? Imgurl.tempFilePath : ''} style={'height:100%;width:80%;border-radius: 5PX;'} />
            }
          </View> : <View style={'height:80%;margin: 10px 0;color: #808695;display: flex;justify-content: center;align-items: center;'}>
            请点击下面，生成分享图
          </View>
      }
      <View style={'border-top: 1PX solid #E7E7E7;width:100%;text-align: center;margin-top:13%'}>
        {
          Imgurl.tempFilePath ?
            <Button onClick={() => {
              saveShareImg();
            }} style={saveShare ? 'background: #808695;color: #fff; width:95%;left:10px; position: fixed;bottom: 10px' : 'left:10px;background: #0078ff;color: #fff;width:95%;position: fixed;bottom: 10px'} disabled={saveShare}>保存到手机</Button>
            :
            <Button onClick={() => {
              made();
            }} style={'background: #0078ff;color: #fff;width:95%;left:10px;position: fixed;bottom: 10px;'}>生成分享图片</Button>
        }
      </View>
      <Canvas canvasId={'shareImg'} style={'width:1080px;height:2000px;position: absolute;top:-3000px'} />
    </View >
  );
}
oldfour_0830_9674
关注
专栏目录
小程序动态生成canvas海报
光
04-22 5602
先做出wxml，再根据wxml动态画canvas有很多好处：提升体验（渲染快）、便于升级迭代（后期瓜皮改需求）、方便维护等。 文章目录先睹为快canvas海报1、优雅地授权 (Be elegant.)1.1、封装1.2、使用2、动态获取wxml显示信息3、绘制canvas (Be patient.)3.1、获取素材3.2、开始绘制3.3、存入缓存3.4、存入本地 先睹为快 通过本篇博客你可以...
干货 | React 中的 Canvas 动画
携程技术
12-09 1266
作者简介掺水的酱油，携程软件技术专家，关注大前端及移动端相关技术。移动端硬件性能越来越好的今天，页面的交互也越来越丰富，Web 体验在不断向原生应用靠拢，加入了越来越多的手势与动画。除了...
uniapp 生成商品分享通用海报源码详解
神夜空间
08-24 1240
uniapp 生成商品分享通用海报源码，使用canvas生成海报，圆片加圆角，标题换行显示两排 多余点点，兼容H5端和小程序端。 组件显示代码 <template> <view> <uni-popup ref="popup" type="center" class="poster-alert"> <view class="poster"><image :src="poster" @longpress="saveImg">
小程序利用Canvas绘制图片和竖排文字
weixin_34124939的博客
05-14 566
引言 闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照Canvas的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。 # 广告 宣传一下自己的小程序，有喜欢三国杀的可以关注一下，有什么问题也可以加我微信一起讨论。 扫码体验小程序 扫码...
『教程』微信小游戏开发（教程+Demo+跳坑）canvas
热门推荐
Dreawer微信小程序联盟
12-13 4万+
社区里有一群canvas爱好者，比jsh5css，安静的小智，jeffer等同学他们在canvas方面都有着自己的学习心得和见解。但是极乐叔发现在小程序开发学习过程中还是有很多小伙伴折戟在canvas上，为此我们在社区首页教程内专门开了一个canvas学习栏目，但是觉得仍然不够，canvas在全网的知识还是太少，所以今天集中一下全网的资料，方便以后遇到问题的同学，能够从中找到可能的参考。 假
remax：使用真正的React构建跨平台小程序
02-05
真正的React-静态静态编译的方案，在Remax中使用React没有任何限制，包括React Hooks。你可以把Remax理解为针对小程序的React Native。 多端支持-使用Remax把代码转换到多个小程序平台。 TypeScript-完整的...
react-Remax让你在小程序开发中使用真正的React完整的JSX甚至是最新的HooksAPI
08-14
总结来说，Remax 是一个能够让开发者在小程序环境中使用React、JSX和Hooks的框架，它降低了小程序开发的学习曲线，提高了开发效率。通过这个框架，你能够利用React的现代特性，同时享受到多平台小程序的广泛覆盖和...
myChat:基于remax与anna-remax-ui 开发的小程序
05-05
使用 Remax 开发微信小程序。 Getting Start 安装依赖 npm install 调试项目 # 执行调试命令 $ npm run dev or yarn dev 使用小程序开发者工具打开项目下的 dist 目录 构建 # 执行构建命令 $ npm run build or $ ...
小程序开发框架选型，7大小程序开发框架，哪一个更适合你？
05-06
Remax允许开发者使用React组件构建小程序，支持多种平台，提供了良好的开发体验和性能，并支持TypeScript和Hooks。Remax的目标是简化跨平台开发，但同样需要处理小程序的特殊限制。 08 总结 在选择小程序开发框架时...
校内交友论坛小程序源码.zip
06-08
1. **前端框架**：很可能使用了Remax，一个轻量级且跨平台的小程序开发框架，如文件名“remax-forum-app-main”所示。Remax允许开发者用React语法编写小程序，提高了开发效率和代码复用性。 2. **页面结构**：源码...
remax-chart:从此 Remax 也有 ECharts 图表:chart_increasing:套件啦
05-17
remax-chart 从此 RemaxJS 也有 ECharts 图表:chart_increasing:套件啦~ 支持平台 平台 是否支持 Web √ 微信小程序 √ 支付宝小程序 √ 头条小程序 x 快速上手 # 安装依赖 npm i remax npm i remax-chart # or use yarn yarn add remax yarn add remax-chart const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320],
图表：AT＆T社区开发团队使用的各种图表
02-12
图表：AT＆T社区开发团队使用的各种图表
使用Remax开发小程序中需注意的地方和学习的知识
Charles_Tian的博客
08-31 3655
前言： 以前开发小程序（微信小程序为主）都是使用微信小程序开发的那一套，从React跳转到此多多少少有些不适应，因此Remax（https://remaxjs.org/）由此而生，它是使用真正的 React 构建跨平台小程序 写在前面： 在开发时，尽量使每个页面的事件名、样式名、变量名统一。 比如有搜索功能的页面，声明搜索函数名时，可统一命名为：handleSearch； 搜索框的变量名统一为：searchValue； 返回的数组数据统一为dataList； 获取数据名的api名虽然不一样，但它的
(记)在remax,小程序,react hooks中使用实时通信
写点什么好
10-23 330
1.创建一个wxsocket.js import { connectSocket, onSocketOpen, onSocketClose, sendSocketMessage, onSocketMessage, getNetworkType, closeSocket, onNetworkStatusChange } from 'remax/wechat'; class Websocket { constructor({ heartCheck, isReconnectio
推荐一个很好用小程序开发库remax.js
小楼一夜听春雨
06-28 2748
作为一名沉迷于用react方式开发前端的我，在面对小程序的开发风格时，很是不适，于是在网上搜了相关的第三方封装的库，react这方使用比较多的就是taro，taro有点全家桶的感觉，但是它虽然使用的是react方式，却并不是真正的react，当我在使用react hooks编程时，会更加感觉到它是一个假的react，当时我处于急需将小程序开发上线，特别想有一款类似于全家桶的，但仅仅是用了一下下taro我就放弃了，我还是转向了一个真正使用react开发小程序的库—remax.js，这是蚂蚁团队成员开发的一款真
rollup打包工具的使用（remax组件库）
写点什么好
09-22 1437
1.安装依赖 { "name": "tengUI", "version": "1.0.0", "main": "/teng/bundle.js", "license": "MIT", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "rollup-dev": "rollup --config --watch", "rollup-build": "rollup -
小程序开发框架介绍---remax 小程开发框架学习笔记
小Y的博客
03-14 639
小程开发框架： 1、小程原生开发 2、vue-mpvue 已经长时间没有更新 3、Taro-京东开发的框架 4、Remax-阿里出的开发框架，更新频繁，一直在解决问题 学习Remax开发框架 学习基础： 1、react基出知识 2、小程序的基础知识 3、TS基础知识 学习目标： 1、remax开发小程序（仅指微信小程） 2、基于实例开发 3、完整的开发流程 4、包括微信广告、用户统计 ...
初探Remax微信小程序
weixin_30869099的博客
08-29 1068
1.创建项目 npx degit remaxjs/template-wechat my-app cd my-app && npm install 2.运行项目 npm run dev 3.在微信开发者工具中，打开项目的dist目录，我们可以看到项目运行效果 水文，本文借鉴自官网 转载于:https://www.cnblogs.com/smart-girl/p/1...
useState修改对象的字段
写点什么好
09-22 1万+
首先定义一个空对象 const [dataSelect, setDataSelect] = React.useState({}) 给这个对象附上不同值，但不会把原来的覆盖的掉 const select = (e, item, type) => { const data = { ...dataSelect } if (type == 'price') { setSelectNO(e) data.min_price = item.min_price
微信小程序remax轮播图制作
最新发布
07-08
微信小程序开发中，可以使用Remax框架来制作轮播图。Remax是一个类React的小程序框架，可以方便地使用React语法进行开发。 首先，你需要安装Remax和相关的依赖。可以通过npm命令来安装： ``` npm install remax @remax/wechat ``` 然后，创建一个轮播图组件，可以命名为`Swiper`。在该组件中，可以使用`swiper`组件和`swiper-item`组件来实现轮播图的效果。例如： ```jsx import React from 'react'; import { Swiper, SwiperItem } from 'remax/wechat'; const images = [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg', ]; const SwiperComponent = () => { return ( <Swiper indicatorDots autoplay circular indicatorColor="#999" indicatorActiveColor="#333" > {images.map((image, index) => ( <SwiperItem key={index}> <image src={image} mode="aspectFill" /> </SwiperItem> ))} </Swiper> ); }; export default SwiperComponent; ``` 在上面的代码中，`images`数组存储了轮播图的图片链接。`Swiper`组件设置了一些属性，如`indicatorDots`表示显示指示点，`autoplay`表示自动播放，`circular`表示循环播放等。 最后，将`SwiperComponent`导出，然后在需要使用轮播图的页面中引入并使用该组件即可。 希望以上信息对你有帮助！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值