更新记录

1.0.6（2022-10-28）

加上测试项目

1.0.5（2022-10-28）

调整核心代码，微信小程序使用$scope.xxx方法

1.0.4（2022-10-25）

修改h5的获取方式

平台兼容性

zp-select-component

zp-select-component主体代码脱胎于select-component-vue

为适配uni-app，做了相关优化，目前在App、H5、微信小程序等平台上测试都ok(ps：理论其他小程序也ok)

注: 暂时只支持vue2.x

安装

uni-app插件市场链接 —— https://ext.dcloud.net.cn/plugin?name=zp-select-component

然后在main.js里添加代码：

import 'uni_modules/zp-select-component/index.js'

在main.js添加后如下所示：

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import 'uni_modules/zp-select-component/index.js'  //暂时只支持vue2
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

使用方法

根据id获取单个实例

this.selectComponent("#id")

根据class获取多个实例

this.selectAllComponent(".class")

说明：

1.uni-app也实现了selectComponent和selectAllComponents这两个函数，但截止现在，App暂时无法用，原因是APP平台的结构与其他平台的结构有差异。

2.本插件是为了『小程序转uni-app项目』做的一个polyfill，对selectComponent和selectAllComponents这两个函数进行重写。

2.默认uni-app的selectComponent和selectAllComponents这两个函数，会多加$vm层级，本插件已将其去除，输出结构与微信小程序基本相同。

4.如使用插件后，遇到"TypeError: Cannot read property 'xxx' of undefined"这样的报错，有可能是在onLoad等生命周期里，dom还未生成就调用了selectComponent或selectAllComponents，导致找不到组件而出现引用报错，可以使用this.$nextTick将代码包裹即可。

附上原插件的文档：

select-component-vue

wx's Component selectComponent and selectAllComponents for Vue

selector类似于 CSS 的选择器，但仅支持下列语法。

ID选择器：#the-id class选择器（可以连续指定多个）：.a-class.another-class 子元素选择器：.the-parent > .the-child 后代选择器：.the-ancestor .the-descendant 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant 多选择器的并集：#a-node, .some-other-nodes