Giters

sbfkcel / towxml

微信小程序HTML、Markdown渲染库

Home Page:https://github.com/sbfkcel/towxml/wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

请问可以支持 uni-app 吗

G233 opened this issue · comments

commented

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

commented

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

commented

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

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

commented

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

commented

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

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

image

commented

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

commented

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

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

commented

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

commented

我的也是 点击事件没用

commented

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

commented

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

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

commented

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

commented

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

commented

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

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

commented

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

commented

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

保存到项目 /wxcomponents/towxml 下

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

image

在需要使用的页面的 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 组件放到里面即可。

commented

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 组件 ，可根据需要自行修改：

image

在需要使用的页面的 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'
commented

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 组件 ，可根据需要自行修改：
image
在需要使用的页面的 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

commented

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

commented
commented

uniapp vue2版本支持接入吗

commented
commented

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

commented

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

commented
commented

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

大佬, 跪拜感谢🙏

commented
commented

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