fastman3-component-share-poster

分享海报组件封装

示例

import { ISharePosterPanelRefType, SharePosterPanel} from "fastman3-component-share-poster";

interface SharePosterDemo extends CommonProps {
  // 父组件要传的 prop 放这
}

const PayDemo: FC<SharePosterDemo> = (props) => {
   const shareref = useRef<ISharePosterPanelRefType>();

   useEffect(() => {
    console.log("SharePosterDemo onload");
    createPosterDom();
    // 等同于 componentWillUnmount()
    return () => {
      console.log("SharePosterDemo unload");
    };
  }, []);
  // string 转成dom
   const getDomByHtmlString = (htmlString:string)=> {
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, "text/html");
    return doc.body.firstChild;
  }
  // 生成海报的dom对象
  const createPosterDom = () => {
    let htmlText = `<div></div>`
    let appDom = document.getElementById('app');
    appDom?.appendChild(getDomByHtmlString(htmlText) as any);
  }
  // 打开海报
   const openPoster = async() => {
    console.log('分享功能');
    // 分享海报功能
    shareref?.current?.open?.({
      posterParams:{
        // posterWrapper 需要生成海报的dom对象
        posterWrapper: document.getElementById("poster-test") as HTMLElement, 
        // true 先生成海报，再点击分享  false 点击时生成海报，然后分享
        isShowPoster:true,  
        /**
         * 海报图片质量，默认为0.7
         */
        quality: 1;
        /**
         * 海报图片缩放比例，默认为0.8
         */
        widthScale: 1;
        /**
         * 画布缩放比例，默认为1
         */
        canvasScale: 1;
      },
      onShareItemCallback(data: any) {
        console.log( data == "wxhy" ? "微信" : data == "wxpyq" ? "朋友圈" : "",)
      },
      completePoster(res){
        console.log("海报生成完成");
      }
    });
  };
  return (
    <View className='sharePosterDemo-page'>
      <AtButton onClick={openPoster}>分享海报</AtButton>
      <SharePosterPanel ref={shareref} />
    </View>
  );
};