请问可以支持 uni-app 吗

Question

请问可以支持 uni-app 吗

G233 opened this issue 5 years ago · 33 comments

G233 commented 5 years ago

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

Answer 1 · 2020-02-09T23:34:39.000Z

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

Answer 2 · 2020-02-10T11:20:16.000Z

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'
					...
				};
			}
		}
		...
	}
...

Answer 3 · 2020-02-10T11:50:28.000Z

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

Answer 4 · 2020-04-15T04:53:53.000Z

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

Answer 5 · 2020-04-16T03:12:25.000Z

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

Answer 6 · 2020-07-02T03:39:33.000Z

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

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

Answer 7 · 2020-07-02T06:54:07.000Z

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

Answer 8 · 2020-08-12T07:21:27.000Z

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

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

Answer 9 · 2021-04-16T14:04:12.000Z

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

Answer 10 · 2021-05-08T08:22:01.000Z

我的也是点击事件没用

Answer 11 · 2021-05-08T08:54:48.000Z

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

Answer 12 · 2021-05-09T02:02:46.000Z

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

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

Answer 13 · 2021-05-10T10:58:01.000Z

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

Answer 14 · 2021-10-19T02:09:41.000Z

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

Answer 15 · 2021-11-17T04:04:49.000Z

不能响应事件的问题，是因为 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);
					}
				};
			});
		}

Answer 16 · 2021-11-20T14:49:22.000Z

感谢

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 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._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); } }; }); } — 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.

Answer 17 · 2022-04-09T03:20:41.000Z

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

Answer 18 · 2023-01-05T15:16:22.000Z

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

Answer 19 · 2023-02-20T07:11:42.000Z

分享一下适用于 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 组件放到里面即可。

Answer 20 · 2023-03-14T11:46:56.000Z

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'

Answer 21 · 2023-03-14T12:17:53.000Z

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

Answer 22 · 2023-06-21T02:18:36.000Z

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

Answer 23 · 2023-06-21T02:19:04.000Z

已收到!

Answer 24 · 2024-02-27T02:12:42.000Z

uniapp vue2版本支持接入吗

Answer 25 · 2024-02-27T02:13:06.000Z

已收到!

Answer 26 · 2024-03-03T16:54:58.000Z

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组件

Answer 27 · 2024-03-30T17:53:42.000Z

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下面也不行，请问解决了吗？

Answer 28 · 2024-03-30T17:54:17.000Z

已收到!

Answer 29 · 2024-08-16T02:29:05.000Z

不能响应事件的问题，是因为 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);
					}
				};
			});
		}

大佬, 跪拜感谢🙏

Answer 30 · 2024-08-16T02:29:37.000Z

已收到!

Answer 31 · 2024-08-22T11:38:32.000Z

在uniapp+ts环境下，怎么引入towxml？

Answer 32 · 2024-09-27T03:55:59.000Z

你好，请问一下，按这个流程做完出现这个错误，是什么原因？
 module 'wxcomponents/towxml/parse/highlight/languages/c-like.js' is not defined, require args is './languages/c-like'
微信开发者工具新版的bug，亲测回退版本可以解决 @zhanlangorz

请问类似的 Error: module 'wxcomponents/towxml/parse/highlight/languages/json.js' is not defined, require args is './languages/json' 回退到哪个版本的开发者工具可以

Answer 33 · 2024-09-27T03:56:36.000Z

已收到!