小程式如何偵測從微信複製的內容

咔咔
發布: 2020-12-14 13:49:54
原創
2651 人瀏覽過

本文將會帶領大家一起實作小程式的剪下板功能

前言

這兩個天在實現一個功能從微信複製的連接,當打開小程式時可以直接偵測內容並且進行貼上。

實作功能

  • 偵測微信複製的內容。
  • 正規符合所需的內容。

一、小程式實作剪切板功能

實作效果如下

小程式如何偵測從微信複製的內容
實現效果

開啟微信文件可以看到給提供的兩個接口,一個為設定係統剪貼簿的內容,一個為取得系統剪貼簿的內容

小程式如何偵測從微信複製的內容
文件提供的介面

那麼本文將會介紹給大家的就是取得系統剪切板的內容,介面為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><code class="hljs" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #282c34; border-radius: 5px;">wx.getClipboardData({<br/>  success (res){<br/>    console.log(res.data)<br/>  }<br/>})<br/></code>
登入後複製

二、程式碼實作

#下圖就是非常簡單的一個實現,可以看到複製的數據被直接印在了控制台。

小程式如何偵測從微信複製的內容
程式碼實作

那麼接下來要做的事情就是將複製過來的內容進行正規匹配,並匹配出我們只需要的內容。

以下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><code class="hljs" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #282c34; border-radius: 5px;"><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/></code>
登入後複製

然後在需要引入的地方進行引入檔案即可使用。

小程式如何偵測從微信複製的內容
引入檔案

呼叫正規符合所需的數據,傳回的值就是符合完成的結果。

小程式如何偵測從微信複製的內容
傳回的結果

第二步驟做的處理就是當偵測剪切板的內容跟設定後的值一致時不再彈框。

弹框的代码就是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><code class="hljs" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #282c34; border-radius: 5px;">  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;">&#39;检测到视频链接,是否粘贴?&#39;</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;">&#39;#ff9900&#39;</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;">&#39;#ff9900&#39;</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/></code>
登入後複製

坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔,下期见。

以上是小程式如何偵測從微信複製的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板