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

最新推荐文章于 2023-03-21 23:41:51 发布

原创最新推荐文章于 2023-03-21 23:41:51 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在微信小程序中创建、注册自定义组件，并涵盖全局和局部注册、属性与数据管理、以及第三方模块的导入方法。重点讲解了miniprogram-picker组件的部署流程和路径配置选项。

自定义组件

定义

不是创建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 不可修改
		}
  }
})

"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”
}
}