2021-04-08 10:30发布
一、 准备
1.在新建的项目,在pages同级文件夹，创建一个components文件夹，（文件夹位置随意，也可在pages中，使用时正确导入位置信息就OK了），用来放我们所有的自定义组件.（component意思为组件）
2.在components文件夹下创建文件夹用来存放组件（文件夹名字与组件最好一致，不容易混乱）
二、注册组件
三、自定义组件添加属性
四、自定义组件添加其他组件
一个组件需要包括json、wxml、wxss、js四个文件组成，下面我们先看看一个简单的入门：
{{innerText}}
编写JS文件，组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的
// components/component/component.jsComponent({ /** * 组件的属性列表 */ properties: { innerText: { type: String, value: 'hello world' }, myProperties:String }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { }})
设置字体的颜色
/* components/component/component.wxss */.inner{color: red;}
完成对组件的初始化，包括设置属性列表，初始化数据，以及设置相关的方法。
使用已注册自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
{ "usingComponents": { "component": "/components/component/component" }}
在page页面下添加声明过的自定义组件：
这里是插入到组件slot中的内容
上方的是一个最简单的自定义组件。
1.对于基础库的1.5.x版本， 1.5.7 也有部分自定义组件支持。
2.因为WXML节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
3.自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
4.自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
5.旧版本的基础库不支持自定义组件，此时，引用自定义组件的节点会变为默认的空节点。
1.微信小程序内置的组件（view,from ,button等）不能满足我们的需要时，就可以自己定义
2.微信小程序自定义组件这个功能是从小程序基础库版本 1.6.3 开始支持的，低版本需做兼容处理。
3.微信小程序中的组件到底是什么？按照笔者的理解来说就是开发者自己封装一个模块，然后可以在其他页面和其他组件中去引用。（例如：开发者自己做一个导航栏组件，在不同页面用到时就可以直接导入组件，不需要重新写）
4.组件在开发的时候用的比较多，且功能通用或者重复的模块和业务逻辑分离，可以使项目实现高内聚低耦合。
一 准备
二注册组件
新建时,Component与Page的区别：
Component可以直接创建组件文件，
选择Page时，需要.json文件中加上
{
"component": true
}
1
2
3
"component": true,
"usingComponents": {}
4
(并且js文件是不一样的需要一个一个创建)
(是在.json中进行自定义组件声明,也就是告诉开发者这是一个组件)
这样components中的组件文件就创建好了，
3.接着在创建一个引用组件的页面，并且在
"usingComponents": {
中引入组件，如图：（此处有俩个自定义组件mybox与myborder）
"mybox":"/components/mybox/mybox",
"myborder":"/components/myborder/myborder"
5
6
三自定义组件添加属性
在主页面中引用组件，直接写定义的组件名字，
innerText ,outtersize把数据传递给组件
在组件的js文件的properties中添加属性
/**
* 组件的属性列表
*/
properties: {
innerText:{
type:String,
value:"mybox我是内部文本"
},
outtersize:{
type:Number,
value:200
7
8
9
10
11
12
13
14
组件的wxml中写好框架，并且导入数据属性
wxss中可以定义组件的样式
.outter{
width: 200px;
height: 200px;
background: red;
.inner{
width: 100px;
height: 100px;
background: blue;
主页面只是调用了组件即可实现效果，如图：
四自定义组件添加其他组件
在引用组件时我们要是不在组件的标签中写入其他的内容,是不会显示标签的，但我们要加其他标签属性时，就需要在组件添加其他组件，这时要用到卡槽-------
1.在组件wxml中插入卡槽，并且为了确定是哪个卡槽，用name属性标记
2.在引用页面中使用卡槽
如果要使用多个slot需要在组件js文件Component中添加
options: {
multipleSlots: true
即声明使用多个
注意：为了实现项目的高内聚，低耦合。
自定义组件（最好不要）读取外面的样式，组件样式要写在组件的wxss文件中
1.创建自定义组件
在微信小程序的界面创建一个新的文件夹components来放置自定义组件，然后新建一个文件夹，这里叫做mycom,右键点击新建的文件夹选择新建component，名字和文件夹也最好一致，和创建微信的小程序page页面差不多，页面也会有四个文件
这四个文件夹用来写你的自定义组件内容，和page页面相似
2.在需要的页面xxx.json或全局app.json配置文件中引入自定义组件
"mycom":"/components/mycom/mycom"
//xxx.json的引入的属性名就是在wxml页面上组件的标签名，可以自己定义。
{ "usingComponents": { "mycom":"/components/mycom/mycom" } } //xxx.json的引入的属性名就是在wxml页面上组件的标签名，可以自己定义。
3.将mycom显示到wxml视图上
这样就完成了简单的自定义组件创建和引用。
————————————————
版权声明：本文为CSDN博主「其实也没有」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lb191258514/article/details/115640537
Step 1步骤一：
在需要使用这个组件的页面所对应的 json 文件中，添加自定义组件声明。
例如在个人认证页面调用引入自定义组件
Step 2步骤二：
在页面对应的 wxml 文件中使用即可
今天主要介绍了自定义组件的创建及调用
1.创建文件夹，确定自定义组文件所在文件夹位置
2.创建自定义组件的组文件
3.json组件配置，开启组件属性，即将 component 字段设为 true
4.wxml组件模板编写
5.wxss组件样式编写
6.组件定义，使用 Component 构造器（properties 属性列表、data 数据、methods 方法）
7.调用自定义组件（①json添加自定义组件声明；②wxml模板文件调用）
常简单的API，掌握js和css就够了。确实适合快速开发常见的简单需求，但复杂需求看起来还是很难实现的。说是前端开发有优势，其实没那么明显，后端开发者也很容易上手
1、附近的小程序商家通过附近的小程序功能提高商家小程序的曝光度，用户可以非常直观地在小程序界面查看门店商家的地理位置、门店信息、联系电话、经营时间等信息。2、微信搜索入口目前小程序支持通过搜索找到小程序。用户可以通过对小程序的名称、功能等关键...
it行业薪资高吸引人，你可以去做专业的职业培训，选择小白相对于比较好入行板块去学习，或者按自己的兴趣来，最主要还是自己得努力认真学
优势1、小程序开发成本比较低，适合于试错2、小程序流量获取比较容易，成本低，可以快速验证需求3、轻量化，主张用完即走；4、推广上，小程序比app好推；5、相结合可以会达到优势最大化。就像拼多多，有自己的App，但也有自己的小程序。劣势1、微信限制太多，...
在学习小程序开发之前，大家需要有Web前端开发经验或是具有JavaScript语言基础。然后才能进一步学习小程序基础知识，如配置、样式、组件、生命周期等等知识技能，学习的重点还包括了微信小程序的各类组件和数据渲染使用方法。要想真正学好小程序开发，还需要...
1、安装 computed;2、作为 behavior 引入;3、把 Page({}) 修改为 Component({});4、把基础版本库改到2.61 以上，详情-> 本地设置 -> 基础版本库;5、然后就可以愉快的使用computed属性了，使用方法和组件Component 组件用法一致;6、computed 属性只能计算一层...
小程序和APP各有特色，并不能取代APP，它们适用于不同需求的客户。我们可以看出，对于功能比较简单，中小型的APP，小程序基本可以作为替代品，但如果是一些功能繁多的APP，小程序还无法实现个性化定制。从命名的小程序就可以看出，它强调的是小，无法取代大型...
个人认为无法代替，毕竟有些无法替代的功能。他的很多优点其实各类小程序也都具备，而且小程序还能基于平台，带来很多流量。
就是如何把radio改成2个1打开微信小程序开发工具，打开已新建的或新建一个项目2新建一个页面文件wxml，插入一个radio-group，然后内嵌四个radio3保存代码并查看左侧模拟器，可以查看到一组单选按钮4在对应页面的JS文件中，定义单选按钮组change事...
一、首先找到第一次发起网络请求的地址，将服务器返回set-cookie当全局变量存储起来wx.request({ ...... success: function(res) { console.log(res.header); //set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domai...
需求，商品详情结算提交订单后，可更改默认收货地址，在收货地址修改后，返回提交订单页，且刷新订单页的地址基础数据问题：选择收货地址返回后，从详情页传递的商品id以及商品数量都取不到了。// 获取当前小程序的页面栈 let pages = getCurrentPages()...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 孩纸的天真你不懂 的问题《微信小程序如何创建自定义组件》','http://www.shouhuola.com/q-35591.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
一、 准备
1.在新建的项目,在pages同级文件夹，创建一个components文件夹，（文件夹位置随意，也可在pages中，使用时正确导入位置信息就OK了），用来放我们所有的自定义组件.（component意思为组件）
2.在components文件夹下创建文件夹用来存放组件（文件夹名字与组件最好一致，不容易混乱）
二、注册组件
三、自定义组件添加属性
四、自定义组件添加其他组件
创建一个组件
一个组件需要包括json、wxml、wxss、js四个文件组成，下面我们先看看一个简单的入门：
{{innerText}}
编写JS文件，组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的
// components/component/component.js
Component({
/**
* 组件的属性列表
*/
properties: {
innerText: {
type: String,
value: 'hello world'
},
myProperties:String
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
设置字体的颜色
/* components/component/component.wxss */
.inner{color: red;}
完成对组件的初始化，包括设置属性列表，初始化数据，以及设置相关的方法。
使用自定义组件
使用已注册自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
{
"usingComponents": {
"component": "/components/component/component"
}
}
在page页面下添加声明过的自定义组件：
上方的是一个最简单的自定义组件。
注意事项：
1.对于基础库的1.5.x版本， 1.5.7 也有部分自定义组件支持。
2.因为WXML节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
3.自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
4.自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
5.旧版本的基础库不支持自定义组件，此时，引用自定义组件的节点会变为默认的空节点。
1.微信小程序内置的组件（view,from ,button等）不能满足我们的需要时，就可以自己定义
2.微信小程序自定义组件这个功能是从小程序基础库版本 1.6.3 开始支持的，低版本需做兼容处理。
3.微信小程序中的组件到底是什么？按照笔者的理解来说就是开发者自己封装一个模块，然后可以在其他页面和其他组件中去引用。（例如：开发者自己做一个导航栏组件，在不同页面用到时就可以直接导入组件，不需要重新写）
4.组件在开发的时候用的比较多，且功能通用或者重复的模块和业务逻辑分离，可以使项目实现高内聚低耦合。
一 准备
1.在新建的项目,在pages同级文件夹，创建一个components文件夹，（文件夹位置随意，也可在pages中，使用时正确导入位置信息就OK了），用来放我们所有的自定义组件.（component意思为组件）
2.在components文件夹下创建文件夹用来存放组件（文件夹名字与组件最好一致，不容易混乱）
二注册组件
新建时,Component与Page的区别：
Component可以直接创建组件文件，
选择Page时，需要.json文件中加上
{
"component": true
}
1
2
3
{
"component": true,
"usingComponents": {}
}
1
2
3
4
(并且js文件是不一样的需要一个一个创建)
(是在.json中进行自定义组件声明,也就是告诉开发者这是一个组件)
这样components中的组件文件就创建好了，
3.接着在创建一个引用组件的页面，并且在
"usingComponents": {
}
1
2
3
中引入组件，如图：（此处有俩个自定义组件mybox与myborder）
{
"usingComponents": {
"mybox":"/components/mybox/mybox",
"myborder":"/components/myborder/myborder"
}
}
1
2
3
4
5
6
三自定义组件添加属性
在主页面中引用组件，直接写定义的组件名字，
innerText ,outtersize把数据传递给组件
1
在组件的js文件的properties中添加属性
/**
* 组件的属性列表
*/
properties: {
innerText:{
type:String,
value:"mybox我是内部文本"
},
outtersize:{
type:Number,
value:200
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
组件的wxml中写好框架，并且导入数据属性
1
2
3
4
wxss中可以定义组件的样式
.outter{
width: 200px;
height: 200px;
background: red;
}
.inner{
width: 100px;
height: 100px;
background: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
主页面只是调用了组件即可实现效果，如图：
四自定义组件添加其他组件
在引用组件时我们要是不在组件的标签中写入其他的内容,是不会显示标签的，但我们要加其他标签属性时，就需要在组件添加其他组件，这时要用到卡槽-------
1.在组件wxml中插入卡槽
2.在引用页面中使用卡槽
如果要使用多个slot需要在组件js文件Component中添加
options: {
multipleSlots: true
}
1
2
3
即声明使用多个
注意：为了实现项目的高内聚，低耦合。
自定义组件（最好不要）读取外面的样式，组件样式要写在组件的wxss文件中
1.创建自定义组件
在微信小程序的界面创建一个新的文件夹components来放置自定义组件，然后新建一个文件夹，这里叫做mycom,右键点击新建的文件夹选择新建component，名字和文件夹也最好一致，和创建微信的小程序page页面差不多，页面也会有四个文件
这四个文件夹用来写你的自定义组件内容，和page页面相似
2.在需要的页面xxx.json或全局app.json配置文件中引入自定义组件
{
"usingComponents": {
"mycom":"/components/mycom/mycom"
}
}
//xxx.json的引入的属性名就是在wxml页面上组件的标签名，可以自己定义。
{ "usingComponents": { "mycom":"/components/mycom/mycom" } } //xxx.json的引入的属性名就是在wxml页面上组件的标签名，可以自己定义。3.将mycom显示到wxml视图上
1
这样就完成了简单的自定义组件创建和引用。
————————————————
版权声明：本文为CSDN博主「其实也没有」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lb191258514/article/details/115640537
Step 1步骤一：
在需要使用这个组件的页面所对应的 json 文件中，添加自定义组件声明。
例如在个人认证页面调用引入自定义组件
Step 2步骤二：
在页面对应的 wxml 文件中使用即可
今天主要介绍了自定义组件的创建及调用
1.创建文件夹，确定自定义组文件所在文件夹位置
2.创建自定义组件的组文件
3.json组件配置，开启组件属性，即将 component 字段设为 true
4.wxml组件模板编写
5.wxss组件样式编写
6.组件定义，使用 Component 构造器（properties 属性列表、data 数据、methods 方法）
7.调用自定义组件（①json添加自定义组件声明；②wxml模板文件调用）
相关问题推荐
常简单的API，掌握js和css就够了。确实适合快速开发常见的简单需求，但复杂需求看起来还是很难实现的。说是前端开发有优势，其实没那么明显，后端开发者也很容易上手
1、附近的小程序商家通过附近的小程序功能提高商家小程序的曝光度，用户可以非常直观地在小程序界面查看门店商家的地理位置、门店信息、联系电话、经营时间等信息。2、微信搜索入口目前小程序支持通过搜索找到小程序。用户可以通过对小程序的名称、功能等关键...
it行业薪资高吸引人，你可以去做专业的职业培训，选择小白相对于比较好入行板块去学习，或者按自己的兴趣来，最主要还是自己得努力认真学
优势1、小程序开发成本比较低，适合于试错2、小程序流量获取比较容易，成本低，可以快速验证需求3、轻量化，主张用完即走；4、推广上，小程序比app好推；5、相结合可以会达到优势最大化。就像拼多多，有自己的App，但也有自己的小程序。劣势1、微信限制太多，...
在学习小程序开发之前，大家需要有Web前端开发经验或是具有JavaScript语言基础。然后才能进一步学习小程序基础知识，如配置、样式、组件、生命周期等等知识技能，学习的重点还包括了微信小程序的各类组件和数据渲染使用方法。要想真正学好小程序开发，还需要...
1、安装 computed;2、作为 behavior 引入;3、把 Page({}) 修改为 Component({});4、把基础版本库改到2.61 以上，详情-> 本地设置 -> 基础版本库;5、然后就可以愉快的使用computed属性了，使用方法和组件Component 组件用法一致;6、computed 属性只能计算一层...
小程序和APP各有特色，并不能取代APP，它们适用于不同需求的客户。我们可以看出，对于功能比较简单，中小型的APP，小程序基本可以作为替代品，但如果是一些功能繁多的APP，小程序还无法实现个性化定制。从命名的小程序就可以看出，它强调的是小，无法取代大型...
个人认为无法代替，毕竟有些无法替代的功能。他的很多优点其实各类小程序也都具备，而且小程序还能基于平台，带来很多流量。
就是如何把radio改成2个1打开微信小程序开发工具，打开已新建的或新建一个项目2新建一个页面文件wxml，插入一个radio-group，然后内嵌四个radio3保存代码并查看左侧模拟器，可以查看到一组单选按钮4在对应页面的JS文件中，定义单选按钮组change事...
一、首先找到第一次发起网络请求的地址，将服务器返回set-cookie当全局变量存储起来wx.request({ ...... success: function(res) { console.log(res.header); //set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domai...
需求，商品详情结算提交订单后，可更改默认收货地址，在收货地址修改后，返回提交订单页，且刷新订单页的地址基础数据问题：选择收货地址返回后，从详情页传递的商品id以及商品数量都取不到了。// 获取当前小程序的页面栈 let pages = getCurrentPages()...