共享博客小程序如何检测从微信复制的内容
““
本文将会带领大家一起实现小程序的剪切板功能
”前言
这俩天在实现一个功能从微信复制的连接，当打开小程序时可以直接检测内容并且进行粘贴。
实现功能
- 检测微信复制的内容。
- 正则匹配需要的内容。
一、小程序实现剪切板功能
实现效果如下
实现效果打开微信文档可以看到给提供的俩个接口，一个为设置系统剪贴板的内容，一个为获取系统剪贴板的内容
文档提供的接口那么本文将会给大家介绍的就是获取系统剪切板的内容，接口为wx.getClipboardData
先根据文档来熟悉一下此接口的使用规则。
接口使用规则以上就是关于剪切板的使用规则，并且在文档中也给提供了使用方法，知道了这些内容就可以来到自己的项目进行验证了。
此处的过程只是为了给新接触小程序的伙伴一些开发经验。
<span style="display: block; background: url(https://files.mdnice.com/point.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span>wx.getClipboardData({<br> success (res){<br> console.log(res.data)<br> }<br>})<br>二、代码实现
下图就是非常简单的一个实现，可以看到复制的数据被直接打印在了控制台。
代码实现那么接下来要做的事情就是将复制过来的内容进行正则匹配，匹配出我们只需要的内容。
以下js代码在utils目录下新建一个文件即可。
正则代码<span style="display: block; background: url(https://files.mdnice.com/point.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">var</span> t = {};<br><br>t.handleUrl = <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span>(<span class="hljs-params" style="line-height: 26px;">t</span>) </span>{<br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">var</span> e = <span class="hljs-regexp" style="color: #98c379; line-height: 26px;">/(http://|https://)((w|=|?|.|/|&|-)+)/g</span>;<br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span> !!(t = t.match(e)) && t[<span class="hljs-number" style="color: #d19a66; line-height: 26px;">0</span>];<br>}, <span class="hljs-built_in" style="color: #e6c07b; line-height: 26px;">module</span>.exports = t;<br>然后在需要引入的地方进行引入文件即可使用。
引入文件调用正则匹配需要的数据，返回的值就是匹配完成的结果。
返回的结果第二步做的处理就是当检测剪切板的内容跟设置后的值一致时不再弹框。
弹框的代码就是showModel这个接口，可以自行查看文档哈！
完整代码如下。
<span style="display: block; background: url(https://files.mdnice.com/point.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span> onShow: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;">res</span>) </span>{<br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">let</span> that = <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">this</span>;<br> wx.getClipboardData({<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">success</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;">res</span>) </span>{<br> <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 匹配地址</span><br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">let</span> result = util.handleUrl(res.data);<br> <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 如果地址相同则不在显示</span><br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">if</span>(result == that.data.prase_address){<br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span>;<br> }<br> wx.showModal({<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">title</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">'检测到视频链接，是否粘贴？'</span>,<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">content</span>: result,<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">showCancel</span>: <span class="hljs-literal" style="color: #56b6c2; line-height: 26px;">true</span>,<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//是否显示取消按钮</span><br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">cancelText</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">"取消"</span>,<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//默认是“取消”</span><br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">cancelColor</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">'#ff9900'</span>,<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//取消文字的颜色</span><br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">confirmText</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">"粘贴"</span>,<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//默认是“确定”</span><br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">confirmColor</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">'#ff9900'</span>,<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//确定文字的颜色</span><br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">success</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;">res</span>) </span>{<br> <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">if</span> (res.cancel) {<br> } <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">else</span> {<br> that.setData({<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">prase_address</span>: result,<br> })<br> }<br> },<br> })<br> },<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">fail</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;">res</span>) </span>{ },<br> <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">complete</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;">res</span>) </span>{<br> },<br> })<br> },<br>坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔，下期见。
”文章推荐
-
揭秘：魏则西离去真正的原因（派代网）
魏则西事件一发酵，随即而来的除了各种的惋惜外，更多的是不断的声讨。 各大新闻媒体争相报道，愤声力讨百度与莆田系医院的不该...
前端问答
1周前 (03-13) 55 -
拒绝做微商被屏蔽拉黑，方法我有！（派代网）
很多做微商的朋友最深刻的领悟就是，在自己刷遍朋友圈后基本变得没朋友，想做好微商绝对不是每天几十次的刷屏，刷成交单，你是能...
前端问答
1周前 (03-13) 36 -
【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）
授人以鱼不如授人以渔。做电商会有很多的困惑...
前端问答
1周前 (03-13) 20 -
寻洲：微商警戒线，你知道几个？
据统计，现在做微商的人数已经超过3千万，并且这个数字还在不断上升。微商是一个大市场，是一块肥肉，大家都想吃。但是如果你存...
前端问答
1周前 (03-13) 22 -
拒绝做微商被屏蔽拉黑，方法我有！（）
很多做微商的朋友最深刻的领悟就是，在自己刷遍朋友圈后基本变得没朋友，想做好微商绝对不是每天几十次的刷屏，刷成交单，你是能...
前端问答
1周前 (03-13) 18