请问可以支持 uni-app 吗

G233 commented 4 years ago

uniapp 没有这种插件，作者考虑适配一下吗

sbfkcel commented 4 years ago

理论上任何第三方的框架都是支持的呢。构建出来当成自定义组件使用即可。

anyfar commented 4 years ago

uniapp 没有这种插件，作者考虑适配一下吗

uniapp 使用流程

1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径

例如 "decode": "/towxml/decode", 改成 "decode": "./decode",

7、将修改过的towxml文件夹复制到uniapp工程的static目录下 8、接下来将towxml引入工程即可，下面的操作可以根据习惯进行添加 8.1 在main.js 挂载

...
import App from './App'

Vue.prototype.towxml = require('./static/towxml/index.js')
...

8.2 在需要使用towxml的页面添加

...
<script>
    import towxml from '../../static/towxml/towxml'

    export default {
        ...
        components: {
            towxml
        },
        ...
        methods: {
            getWxml(str){
                let content = this.towxml(str,'html',{
                    base: 'https://www.xxx.com'
                    ...
                };
            }
        }
        ...
    }
...

sbfkcel commented 4 years ago

已加入到 wiki https://github.com/sbfkcel/towxml/wiki 感谢 @anyfar

jiangzhaoyong commented 4 years ago

在uni中还支持绑定事件吗?我绑定了点击事件没效果

sbfkcel commented 4 years ago

@jiangzhaoyong 不专门去主动支持这些第三方的框架。当然理论上来说，是可以支持的。可能需要自己稍加改造。欢迎改造完之后将经验分享给大家。

JacFang commented 4 years ago

将修改过的towxml文件夹复制到uniapp工程的static目录下，运行百度小程序报错

即使加了如下环境判断，运行百度小程序还是报错 // #ifdef MP-WEIXIN Vue.prototype.towxml = require('./static/towxml/index.js'); // #endif

sbfkcel commented 4 years ago

我先把这个主题打开，看有没其它人有遇到类似的问题。

thinkmoon commented 3 years ago

在uni中还支持绑定事件吗?我绑定了点击事件没效果

绑定点击事件没效果是由于,使用uni-app的话, 会导致注册和调用的两个global不一样. 所以最好在wxcomponents里面写个组件来引入towxml, 在组件中绑定事件

xieyingchao commented 3 years ago

uniapp 怎么把解析结果绑定到页面标签上？我绑定了不显示

zhouyupeng commented 3 years ago

我的也是点击事件没用

txl910514 commented 3 years ago

uni-app 就只能在小程序里面用

sbfkcel commented 3 years ago

uni-app就只能在小程序里面用

官方暂时不考虑这些第三方框架，可自行移植。

Daimes commented 3 years ago

你好现在打包生成的不再是vue文件，需要配置什么吗

Jopfree commented 2 years ago

使用uniapp时，微信小程序能使用很赞。跑H5和App报[chunk-vendors.js:11951 [Vue warn]: Error in onLoad hook: "TypeError: md is not a function"] 请问各位又碰见过么？百度好多类似报错，但都不一样。

ununian commented 2 years ago

不能响应事件的问题，是因为 global 不正确，自己改一下就好，全局搜索 global._events 替换一下例如

initObj = (obj,option)=>{
        const result = {
                theme:option.theme || 'light',
                _e:{}
            },
            events = global._events = {},
            base = option.base;

        // 主题保存到全局
        global._theme = result.theme;

        // 事件添加到全局中，各个组件在触发事件时会从全局调用
        if(option.events){
            for(let key in option.events){
                events[key] = option.events[key];
            };
        };

改成

initObj = (obj,option)=>{
      const globalData = getApp().globalData;
        const result = {
                theme:option.theme || 'light',
                _e:{}
            },
            events = globalData._events = {},
            base = option.base;

        // 主题保存到全局
        global._theme = result.theme;

        // 事件添加到全局中，各个组件在触发事件时会从全局调用
        if(option.events){
            for(let key in option.events){
                events[key] = option.events[key];
            };
        };

    attached: function () {
            const _ts = this;

            config.events.forEach(item => {
                _ts['_' + item] = function (...arg) {
                    if (global._events && typeof global._events[item] === 'function') {
                        global._events[item](...arg);
                    }
                };
            });
        }

改成

    attached: function () {
            const _ts = this;
      const globalData = getApp().globalData;

            config.events.forEach(item => {
                _ts['_' + item] = function (...arg) {
                    if (globalData._events && typeof globalData._events[item] === 'function') {
                        globalData._events[item](...arg);
                    }
                };
            });
        }

Daimes commented 2 years ago

感谢

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2021年11月17日(星期三) 中午12:05 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [sbfkcel/towxml] 请问可以支持 uni-app 吗 (#116)

不能响应事件的问题，是因为 global 不正确，自己改一下就好，全局搜索 global._events 替换一下例如 initObj = (obj,option)=>{ const result = { theme:option.theme || 'light', _e:{} }, events = global._events = {}, base = option.base; // 主题保存到全局 global._theme = result.theme; // 事件添加到全局中，各个组件在触发事件时会从全局调用 if(option.events){ for(let key in option.events){ events[key] = option.events[key]; }; };

改成 initObj = (obj,option)=>{ const globalData = getApp().globalData; const result = { theme:option.theme || 'light', _e:{} }, events = globalData._events = {}, base = option.base; // 主题保存到全局 global._theme = result.theme; // 事件添加到全局中，各个组件在触发事件时会从全局调用 if(option.events){ for(let key in option.events){ events[key] = option.events[key]; }; }; attached: function () { const _ts = this; config.events.forEach(item => { ts['' + item] = function (...arg) { if (global._events && typeof global._events[item] === 'function') { global._eventsitem; } }; }); }

改成 attached: function () { const _ts = this; const globalData = getApp().globalData; config.events.forEach(item => { ts['' + item] = function (...arg) { if (globalData._events && typeof globalData._events[item] === 'function') { globalData._eventsitem; } }; }); }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

yan129 commented 2 years ago

作者大佬，如何使用hljs主题啊，不生效

girl-girl commented 1 year ago

请教一下 uniapp部分数学公式解析不出来咋解决呀

LuckyHookin commented 1 year ago

分享一下适用于 uniapp vue3 的适配： towxml.zip

保存到项目 /wxcomponents/towxml 下

目录下有一个 htmltowxml 组件，可根据需要自行修改：

在需要使用的页面的 page.json 里配置使用 htmltowxml：

{
            "path": "pages/xxx/xxx",
            "style": {
                "navigationBarTitleText": "xxx",
                "enablePullDownRefresh": false,
                "mp-weixin": {
                    "usingComponents": {
                        "htmltowxml": "/wxcomponents/towxml/htmltowxml"
                    }
                }
            }

使用：

<htmltowxml :value="contentT" class="ql-editor" @click="onClick" />

export default {
        data() {
            return {
                contentT: '<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
            }
        },
methods: {
            onClick(e){
                console.log(e)
            }
        },}

.ql-editor {
  padding: 0 !important;
}

以后有更新的话，只需要重复上面大哥说的 1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径

再把 htmltowxml 组件放到里面即可。

zhanlangorz commented 1 year ago

module 'wxcomponents/towxml/parse/highlight/languages/c-like.js' is not defined, require args is './languages/c-like'

分享一下适用于 uniapp vue3 的适配： towxml.zip

保存到项目 /wxcomponents/towxml 下

目录下有一个 htmltowxml 组件，可根据需要自行修改：

在需要使用的页面的 page.json 里配置使用 htmltowxml：
{
          "path": "pages/xxx/xxx",
          "style": {
              "navigationBarTitleText": "xxx",
              "enablePullDownRefresh": false,
              "mp-weixin": {
                  "usingComponents": {
                      "htmltowxml": "/wxcomponents/towxml/htmltowxml"
                  }
              }
          }
使用：
<htmltowxml :value="contentT" class="ql-editor" @click="onClick" />
export default {
      data() {
          return {
              contentT: '<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
          }
      },
methods: {
          onClick(e){
              console.log(e)
          }
      },}
.ql-editor {
  padding: 0 !important;
}
以后有更新的话，只需要重复上面大哥说的 1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径

再把 htmltowxml 组件放到里面即可。

你好，请问一下，按这个流程做完出现这个错误，是什么原因？

 module 'wxcomponents/towxml/parse/highlight/languages/c-like.js' is not defined, require args is './languages/c-like'

thinkmoon commented 1 year ago

module 'wxcomponents/towxml/parse/highlight/languages/c-like.js' is not defined, require args is './languages/c-like'
分享一下适用于 uniapp vue3 的适配： towxml.zip 保存到项目 /wxcomponents/towxml 下目录下有一个 htmltowxml 组件，可根据需要自行修改：在需要使用的页面的 page.json 里配置使用 htmltowxml：
{
            "path": "pages/xxx/xxx",
            "style": {
                "navigationBarTitleText": "xxx",
                "enablePullDownRefresh": false,
                "mp-weixin": {
                    "usingComponents": {
                        "htmltowxml": "/wxcomponents/towxml/htmltowxml"
                    }
                }
            }
使用：
<htmltowxml :value="contentT" class="ql-editor" @click="onClick" />
export default {
        data() {
            return {
                contentT: '<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
            }
        },
methods: {
            onClick(e){
                console.log(e)
            }
        },}
.ql-editor {
  padding: 0 !important;
}
以后有更新的话，只需要重复上面大哥说的 1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径再把 htmltowxml 组件放到里面即可。
你好，请问一下，按这个流程做完出现这个错误，是什么原因？
 module 'wxcomponents/towxml/parse/highlight/languages/c-like.js' is not defined, require args is './languages/c-like'

微信开发者工具新版的bug，亲测回退版本可以解决 @zhanlangorz

mxluomx commented 1 year ago

import towxml from '../../static/towxml/towxml' 在vue文件里面引入towxml，会报错，import towxml from '../../static/towxml/towxml'我这样引不进来

zhanlangorz commented 1 year ago

已收到!

forezp commented 4 months ago

uniapp vue2版本支持接入吗

zhanlangorz commented 4 months ago

已收到!

Yyxxxxxxxx commented 4 months ago

uniapp 没有这种插件，作者考虑适配一下吗

uniapp 使用流程

1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径

例如 "decode": "/towxml/decode", 改成 "decode": "./decode",

7、将修改过的towxml文件夹复制到uniapp工程的static目录下 8、接下来将towxml引入工程即可，下面的操作可以根据习惯进行添加 8.1 在main.js 挂载
...
import App from './App'

Vue.prototype.towxml = require('./static/towxml/index.js')
...
8.2 在需要使用towxml的页面添加
...
<script>
  import towxml from '../../static/towxml/towxml'

  export default {
      ...
      components: {
          towxml
      },
      ...
      methods: {
          getWxml(str){
              let content = this.towxml(str,'html',{
                  base: 'https://www.xxx.com'
                  ...
              };
          }
      }
      ...
  }
...

打包过后的towxml必须要放置在staic目录下吗，我尝试放在了pages文件下的一个文件夹当中，想要以分包的形式把towxml分出去减少主包体积，但是在页面当中import时提示找不到towxwml组件

henushang commented 3 months ago

uniapp 没有这种插件，作者考虑适配一下吗

uniapp 使用流程

1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径

例如 "decode": "/towxml/decode", 改成 "decode": "./decode",

7、将修改过的towxml文件夹复制到uniapp工程的static目录下 8、接下来将towxml引入工程即可，下面的操作可以根据习惯进行添加 8.1 在main.js 挂载
...
import App from './App'

Vue.prototype.towxml = require('./static/towxml/index.js')
...
8.2 在需要使用towxml的页面添加
...
<script>
    import towxml from '../../static/towxml/towxml'

    export default {
        ...
        components: {
            towxml
        },
        ...
        methods: {
            getWxml(str){
                let content = this.towxml(str,'html',{
                    base: 'https://www.xxx.com'
                    ...
                };
            }
        }
        ...
    }
...
打包过后的towxml必须要放置在staic目录下吗，我尝试放在了pages文件下的一个文件夹当中，想要以分包的形式把towxml分出去减少主包体积，但是在页面当中import时提示找不到towxwml组件
uniapp 没有这种插件，作者考虑适配一下吗

uniapp 使用流程

1、准备工作，安装必要工具（git/npm等） 2、新建空目录（用于构建towxml），命令行输入 git clone https://github.com/sbfkcel/towxml.git 3、上一步执行完毕后，在目录下会增加一个towxml目录，cd towxml ，输入 npm install 4、上一步结束后，根据需要修改配置文件，（详见wiki文档）或直接进入下一步 5、输入 npm run build 构建towxml，结束后会在桌面上生成构建好的towxml 6、（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径

例如 "decode": "/towxml/decode", 改成 "decode": "./decode",

7、将修改过的towxml文件夹复制到uniapp工程的static目录下 8、接下来将towxml引入工程即可，下面的操作可以根据习惯进行添加 8.1 在main.js 挂载
...
import App from './App'

Vue.prototype.towxml = require('./static/towxml/index.js')
...
8.2 在需要使用towxml的页面添加
...
<script>
    import towxml from '../../static/towxml/towxml'

    export default {
        ...
        components: {
            towxml
        },
        ...
        methods: {
            getWxml(str){
                let content = this.towxml(str,'html',{
                    base: 'https://www.xxx.com'
                    ...
                };
            }
        }
        ...
    }
...
打包过后的towxml必须要放置在staic目录下吗，我尝试放在了pages文件下的一个文件夹当中，想要以分包的形式把towxml分出去减少主包体积，但是在页面当中import时提示找不到towxwml组件

放到了static下面也不行，请问解决了吗？

zhanlangorz commented 3 months ago

已收到!

sbfkcel / towxml