微信小程序怎么长按复制_微信小程序基于Parser添加长按复制、代码高亮等功能...

功能展示

引入Parser

微信小程序中引入Parser可直接在项目主页查阅。

代码高亮

高亮插件

Prism官网下载prism.js和prism.css，默认只有css代码有渲染样式，注意选择需要渲染的语言。

小程序所用样式下载路径https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+csharp+cpp+dart+erlang+git+go+graphql+http+hpkp+hsts+ini+java+javadoc+javadoclike+javastacktrace+json+kotlin+lua+makefile+markup-templating+nginx+objectivec+php+phpdoc+php-extras+properties+python+rust+sql+swift+yaml

添加代码

Parser-libs-MpHtmlParser.js的parse函数中if (config.highlight)判断分支下，修改正则匹配。

因为本人的后端程序处理代码块在

code here

中，所以正则匹配并提取文章中的代码。$1是class="language-java"

$2是代码整体内容

config.highlight是真正的高亮函数this.data = this.data.replace(/

([\s\S]*?)/g, function($, $1, $2) {

return "

' + config.highlight($2, "') + "";

})

Parser-libs-config.js中添加highlight高亮函数，并且把函数导出。

Parser默认使用js语法来高亮代码，这里稍作修改，对传入的class="language-java"提取出对应语言。

备注：因为后端对提交的文章内容进行了防注入，转换了<>&等符号，所以在高亮时转换回正常符号。const Prism = require('../../utils/prism.js');

var highlight = function (content, attrs) {

content = content.replace(/</g, '

content = content.replace(/>/g, '>');

content = content.replace(/&/g, '&');

//提取出对应语言

var m = attrs.match(/"languages?-(.*)"/i);

var lang = m ? m[1] : 'js'

return Prism.highlight(content, Prism.languages[lang], lang)

}

module.exports = {

// 高亮处理函数

highlight: highlight

...

}

长按复制

代码高亮功能已经是Parser提供的功能了，只是在此基础上修改了符号自己需求的代码。

长按复制功能是考虑到代码段较多，代码展示的区域又是可以滑动的，Parser提供的selectable选项需要手动拖动选择，出于此考虑做了一个增进。MpHtmlParser构造函数：自定义一个数组接收代码内容。//MpHtmlParser构造函数

constructor(data, options = {}, cb) {

...

this._parserCodeContent = [];

}MpHtmlParser的parse函数：代码高亮匹配处保存代码至自定义数组中。// 代码高亮匹配

if (config.highlight) {

var that = this //注意用that接收

this.data = this.data.replace(/

([\s\S]*?)/g, function($, $1, $2) {

that._parserCodeContent.push($2)

return "

' + config.highlight($2, "') + "";

})

}MpHtmlParser的popNode函数：添加是否是pre标签，如果是则在node上添加一个content属性。// 节点出栈处理

popNode(node) {

...

//处理代码长按

if (node.name == 'pre') {

node.content = this._parserCodeContent.shift();

}

...

}trees.wxml中添加pre标签，并且增加data-content等于从上一步node上添加的content属性，和bindlongpress="longPressEvent"长按事件绑定。tree.js的methods函数中添加：长按复制具体实现。longPressEvent: function (e) {

var content = e.currentTarget.dataset.content;

wx.showActionSheet({

itemList: ['复制代码'],

success(res) {

var tabIndex = res.tapIndex;

if (tabIndex == 0) {

wx.setClipboardData({

data: content,

success(res) {

wx.showToast({

title: '代码已复制'

})

}

})

}

}

})

}

大功告成。