towxml
towxml copied to clipboard
sbfkcel
请问可以支持 uni-app 吗
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'
...
};
}
}
...
}
...
@jiangzhaoyong 不专门去主动支持这些第三方的框架。当然理论上来说，是可以支持的。可能需要自己稍加改造。欢迎改造完之后将经验 分享给大家。
将修改过的towxml文件夹复制到uniapp工程的static目录下，运行百度小程序报错
即使加了如下环境判断，运行百度小程序还是报错 // #ifdef MP-WEIXIN Vue.prototype.towxml = require('./static/towxml/index.js'); // #endif
在uni中还支持绑定事件吗?我绑定了点击事件没效果
绑定点击事件没效果是由于,使用uni-app的话, 会导致注册和调用的两个global不一样. 所以最好在wxcomponents里面写个组件来引入towxml, 在组件中绑定事件
使用uniapp时，微信小程序能使用很赞。 跑H5和App报[chunk-vendors.js:11951 [Vue warn]: Error in onLoad hook: "TypeError: md is not a function"] 请问各位又碰见过么？百度好多类似报错，但都不一样。
不能响应事件的问题，是因为 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);
}
};
});
}
感谢
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 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.
分享一下适用于 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/[email protected]"/></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'
分享一下适用于 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/[email protected]"/></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'
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 组件 ，可根据需要自行修改：
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/[email protected]"/></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
import towxml from '../../static/towxml/towxml' 在vue文件里面引入towxml，会报错，import towxml from '../../static/towxml/towxml'我这样引不进来
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组件
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下面也不行，请问解决了吗？
不能响应事件的问题，是因为 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); } }; }); }
大佬, 跪拜感谢🙏
