sbfkcel / towxml

微信小程序HTML、Markdown渲染库
https://github.com/sbfkcel/towxml/wiki
2.53k stars 321 forks source link

在Taro 3中使用towxml #203

Open spiritree opened 3 years ago

spiritree commented 3 years ago

步骤

1. 构建towxml

参考3.0 构建Towxml

2. 同步构建完的towxml到项目中

image

修改 decode.json 转换为相对路径

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

在页面中配置文件 index.config.ts 引入

export default {
  usingComponents: {
    'to-wxml': '../../components/towxml/towxml',
  },
};

在页面中引用

import { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import towxml from 'src/components/towxml/index';

const html = `<p>awdawd</p>`;

export default function RichText() {
  const [res, setRes] = useState<any>(null);

  useEffect(() => {
    const result = towxml(html, 'html');
    setRes(result);
  }, []);

  return (
    <View>
      {/* @ts-ignore */}
      <to-wxml nodes={res} />
    </View>
  );
}
justseeseesee commented 3 years ago

使用之后,微信开发者工具会内存泄露,导致电脑卡死

3463135482 commented 3 years ago

image 代码没有高亮显示是什么情况?

image image

ghost commented 2 years ago

步骤

1. 构建towxml

参考3.0 构建Towxml

2. 同步构建完的towxml到项目中

image

修改 decode.json 转换为相对路径

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

在页面中配置文件 index.config.ts 引入

export default {
  usingComponents: {
    'to-wxml': '../../components/towxml/towxml',
  },
};

在页面中引用

import { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import towxml from 'src/components/towxml/index';

const html = `<p>awdawd</p>`;

export default function RichText() {
  const [res, setRes] = useState<any>(null);

  useEffect(() => {
    const result = towxml(html, 'html');
    setRes(result);
  }, []);

  return (
    <View>
      {/* @ts-ignore */}
      <to-wxml nodes={res} />
    </View>
  );
}

按照示例写 。还是不可以

lynzz commented 2 years ago

步骤

1. 构建towxml

参考3.0 构建Towxml

2. 同步构建完的towxml到项目中

image 修改 decode.json 转换为相对路径

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

在页面中配置文件 index.config.ts 引入

export default {
  usingComponents: {
    'to-wxml': '../../components/towxml/towxml',
  },
};

在页面中引用

import { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import towxml from 'src/components/towxml/index';

const html = `<p>awdawd</p>`;

export default function RichText() {
  const [res, setRes] = useState<any>(null);

  useEffect(() => {
    const result = towxml(html, 'html');
    setRes(result);
  }, []);

  return (
    <View>
      {/* @ts-ignore */}
      <to-wxml nodes={res} />
    </View>
  );
}

按照示例写 。还是不可以

conifg/index.js 要 copy 下包吧

copy: {
    patterns: [
      // {
      //   from: "src/subPackages/prod/components/wemark",
      //   to: "dist/subPackages/prod/components/wemark"
      // }
      {
        from: "src/components/towxml",
        to: "src/components/towxml"
      }
    ],
    options: {}
  },
lynzz commented 2 years ago

我这出现的情况,是直接显示 markdown 源码了,这是为啥

image
lynzz commented 2 years ago

知道了,数据在服务端的没有 encode 导致的

CS-liujf commented 1 year ago

使用之后,微信开发者工具会内存泄露,导致电脑卡死

请问后来还有这个问题吗

justseeseesee commented 1 year ago

后来更新了开发者工具,使用修改后的Taro-parse来显示的markdown文件,好像没直接用towxml

sbfkcel commented 1 year ago

大家使用Taro一般用于公司业务还是个人业务?如果我提供Taro版本的支持,但会像征性收费是否合适?

justseeseesee commented 1 year ago

个人开发,就是好奇试了一下,个人觉得如果公司业务收费是合适的,但是愿意付费的应该不多吧。

CS-liujf commented 1 year ago

大家使用Taro一般用于公司业务还是个人业务?如果我提供Taro版本的支持,但会像征性收费是否合适?

有个人业务,但不排除公司,如果收费的话,请问是一次性的吗,从我个人角度来说不太希望定价超过30(请原谅我说话比较直接)

justseeseesee commented 1 year ago

开源不易,直接点挺好,目测这个定价你是自费,不找公司报销了啊。

CS-liujf commented 1 year ago

主要是我想做个东西“创业”,其实说创业也不准确,就想做个东西然后学校里推广一下

sbfkcel commented 1 year ago

我想的也不是要真的收多少钱,大概就是随意打赏的那种吧!5、10、15... 这种随意,土豪的就打赏多一点。这样开源本身也才有点存在感。

真的赚钱不太能指望开源。

joket1999 commented 1 year ago

我想的也不是要真的收多少钱,大概就是随意打赏的那种吧!5、10、15... 这种随意,土豪的就打赏多一点。这样开源本身也才有点存在感。

真的赚钱不太能指望开源。

其实一杯咖啡钱或者一包烟钱,大伙都比较愿意给的

huangwei9527 commented 1 year ago

我想的也不是要真的收多少钱,大概就是随意打赏的那种吧!5、10、15... 这种随意,土豪的就打赏多一点。这样开源本身也才有点存在感。

真的赚钱不太能指望开源。

建议参考vue-admin这种项目,项目开源,技术支持收费。

free-booter commented 5 months ago

步骤

1. 构建towxml

参考3.0 构建Towxml

2. 同步构建完的towxml到项目中

image 修改 decode.json 转换为相对路径

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

在页面中配置文件 index.config.ts 引入

export default {
  usingComponents: {
    'to-wxml': '../../components/towxml/towxml',
  },
};

在页面中引用

import { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import towxml from 'src/components/towxml/index';

const html = `<p>awdawd</p>`;

export default function RichText() {
  const [res, setRes] = useState<any>(null);

  useEffect(() => {
    const result = towxml(html, 'html');
    setRes(result);
  }, []);

  return (
    <View>
      {/* @ts-ignore */}
      <to-wxml nodes={res} />
    </View>
  );
}

按照示例写 。还是不可以

conifg/index.js 要 copy 下包吧

copy: {
    patterns: [
      // {
      //   from: "src/subPackages/prod/components/wemark",
      //   to: "dist/subPackages/prod/components/wemark"
      // }
      {
        from: "src/components/towxml",
        to: "src/components/towxml"
      }
    ],
    options: {}
  },

为什么我会出现这种报错呢?按照步骤来的 Component is not found in path "towxml/towxml" (using by "custom-tab-bar/index")(env: macOS,mp,1.06.2402040; lib: 3.4.4) Component is not found in path "towxml/towxml" (using by "comp")(env: macOS,mp,1.06.2402040; lib: 3.4.4) Component is not found in path "towxml/towxml" (using by "pages/index/index")(env: macOS,mp,1.06.2402040; lib: 3.4.4)