H5、小程序开发笔记（拖拽事件、小程序api、一键复制)

1.是否在微信环境内打开链接

 var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
   
      console.log('在微信浏览器内');
    } else {
   
      console.log('不在微信浏览器内');
      return
    }
    

2.# 小程序隐藏API - onAppRoute(eventListener)

在小程序切换页面或打开页面时会触发onAppRoute 事件，小程序框架通过wx.onAppRoute 可以注册页面切换时的处理程序，一般开发放在app.js的onLunch生命周期中全局注册一次即可，可用于监听页面切换。

onLaunch() {
  wx.onAppRoute((route) => {
    console.log(route);
  });
}

通过对查看route，个人总结如下

数据实例

webviewId: 140,path: "pages/index/index"
query:t
openType:
"navigateBack
page:.
selectCommunity.
openType:"navigateBack"
page: (window:.
path:"pages/index/index'
query:
renderer:"webview"
singlePageData: {windowId: 140，pageid: 140，isNewEngineHomePage: true)
webviewId: 140
ts : 1691459595303

3. 复制功能

 const textToCopy = this.userName;
            const textArea = document.createElement('textarea');
            textArea.value = textToCopy;
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            try {
   
                document.execCommand('copy');
            } catch (err) {
   
                console.error('Failed to copy text:', err);
            } finally {
   
                document.body.removeChild(textArea);
            }

3.拖拽事件

关于拖拽 drag & drop

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

**拖拽对象
**

dataTransfer对象，只能在拖放事件的事件处理程序中访问。重要属性：

• effectAllowed ( none | copy | copyLink | copyMove | link、linkMove | move | all | uninitialized )：设置或返回被拖动元素允许发生的拖动行为。
• dropEffect( none | copy | link | move )：设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。
• dataTransfer.getData(format)：获取DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。

拖拽属性

draggable 属性规定元素是否可拖动。

拖拽事件

• ondragstart:在拖动开始时执行，返回被拖动元素。
• ondragover:返回在何处放置被拖动的数据
• 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式
• ondragenter:在被拖动的元素进入到放置目标时执行
• ondragleave:在被拖动的元素离开放置目标时执行
• ondragend && ondrop:皆指鼠标松开被拖动对象的事件，但是返回的分别为被拖动对象和被拖动元素悬挂的那个元素

源码:

<template>