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

前言

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

實作功能

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

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

實作效果如下

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

那麼本文將會介紹給大家的就是取得系統剪切板的內容，介面為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>

登入後複製