小程序的自定义组件—第三方组件

自定义组件

定义

不是创建page，而是创建component，一个小程序组件，也可以在组件中使用自身的data（wxml,wxss,js,json)

//组件名.js
Component({ //构造一个组件
  
  properties:{ //组件的属性列表 可以在调用的时候传入属性值
    title:{ //属性名
      type:String,//类型
      value: {默认值 类似id:1,title:'默认'}
      就可以在外面调用的地方传入 title = " " 的属性值
    }
  }
  
  data:{ //组件数据
  	msg:'..'
	}
          
  methods:{ //组件方法
    show(){
  		this.data.msg/this.properties.title
  		this.setData({msg:...}) // properties 不可修改
		}
  }
})

注册
全局注册 app.json , 到处可用(page,component)（ 一般取都是用全局注册 ）
在app主程中使用
创建一个component的文件夹 再创建一个component 在里面自定义组件
然后再全局注册

"usingComponents":{
  "使用时的组件名":"components/comp1/comp1"
}

局部注册 pagename.json ，当前页面可以

"usingComponents":{....}

**第三方组件 ** （ 小程序不识别 modules 目录） 小程序需要拿到dist里面的代码

npm init -y 初始化一次

npm i 包名 —— production

勾选使用npm模块

**1.**把modules 里面的 组件名—picker 里面的后缀为dist的文件 拷贝出来

然后使用自定义组件的注册方法

2.小程序开发工具-构建npm -> miniprograme_npm

​ 小程序会指向这个miniprograme_npm目录，二不是node_modules

可以引入无需路径
{
“usingComponents”: {
“miniprogram-picker”: “miniprogram-picker”
}
}

一定要是miniprograme_npm名称么，可否自定义？
miniprograme_npm是自动产生，可以定义
定义xxx目录： 无需执行小程序开发工具-构建npm， 手动从node_modules里面copy到xxx目录

可以引入需要路径
{
“usingComponents”: {
“miniprogram-picker”: “components/miniprogram-picker”
}
}