拆解一个小程序组件（拆开小程序）

本篇文章给大家谈谈拆解一个小程序组件，以及拆开小程序对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享拆解一个小程序组件的知识，其中也会对拆开小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、京东会员-小程序拆解
• 2、微信小程序之组件
• 3、微信小程序_组件
• 4、微信小程序自定义组件-可清除的input组件
• 5、小程序--组件--视图容器
• 6、微信小程序创建组件以及父传子、子传父内容

京东会员-小程序拆解

一、为什么要有小程序

对于一个互联网产品来说（当然也包括其它产品），对用户进行激励就是为了让用户更多的使用其产品或者服务。这样才能实现产品的价值，目前小程序得益于微信强大的传播作用，是每个电商平台的标配

二、小程序 会员相关

1 、京东小程序会员等级如何划分

京东的会员级别共分为5个等级，分别为：注册会员、铜牌会员、银牌会员、金牌会员、钻石会员。

会员级别的升降均由系统自动处理，无需申请。

会员级别由成长值决定，成长值越高会员等级越高，享受到的会员权益越大。 什么叫做成长值？ 

会员级别图示：

2、会员权益

* 部分商品因重量或体积原因，在一般运费之外，将额外收取运费5元/件。

注：专享礼包为金牌、钻石会员有机会获取此类礼包。     

 免运费券会在【专享礼包-钻石礼包】中发放。

3 、如何获得成长值，从而升级：

成长值是会员升级的重要依据。那么我们可以从平时的登录、购物、购物天数和购物的评价以及晒单来获取不同的成长值。

1、登陆：每天登录一次可以获得5个成长值。

2、购物：购物成长值的获取以结算金额X购物行为评级倍数的计算方式来获取。

3、购物天数：一个月内有三天进行购物，且订单已完成的次月可以获取100成长值。

4、评价：购物完成后，对产品进行评价，评价审核成功后可以获得20个成长值。

5、晒单：在京东中对产品晒单，前5名晒单的客户可以获得20个成长值。

三、 浅析京东小程序会员体系

1、通过以上的信息，可以看到，成长值是京东商城会员的判断标准，成长值的获取和运营指标有关系；

2、成长值获取的方式可以培养用户习惯，例如：每日登录习惯、购物习惯等；

3、从京东的会员权益来看，获取成长值最好的办法还是购物；同时为了培养用户购物后评价的习惯，京东对评价行为也设置了一定的成长值。

总的来说，用户激励指标的设置和平台运营阶段有关，也和平台关注的指标有关。但最本质的还是提升用户留存和活跃度。

微信小程序之组件

一.创建并使用组件的步骤

1.创建一个文件夹存放组件，并在里面创建一个组件文件夹，components，tabs
2.在tabs文件里添加组件模板
3.引用组件，在父组件的json文件中的usingComponents中添加子组件路径，compont

4.使用组件，相当于正常标签进行使用

二.父组件向子组件传参的步骤

父组件给子组件的tabs传入对象

1.父组件的数据

2.子组件做的操作

如果没有传入数据，就会输出默认值value

3.子组件展示对象数据：

三.子组件向父组件传参的步骤

1.先给子组件添加一个点击事件

2.通过this.triggerEvent("自定义事件名称",{传的值})命令保证子组件和父组件同步被修改

3.父组件绑定子组件，定义一个事件名称，用来接收子组件传递的数据

微信小程序_组件

1.基础组件：

什么是组件：
<ul
<li组件是视图层的基本组成单元。</li
<li组件自带一些功能与微信风格的样式。</li
<li一个组件通常包括开始标签
和结束标签
，属性
用来修饰这个组件，内容
在两个标签之内。</li
</ul

2.属性类型
<ul
<liBoolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true
，只有组件上没有写该属性时，属性值才为false
。如果属性值为变量，变量的值会被转换为Boolean类型</li
<liNumber 数字 1
, 2.5</li
<liString 字符串 "string"</li
<liArray 数组 [ 1, "string" ] </li
<liObject 对象 { key: value } </li
<liEventHandler 事件处理函数名 "handlerName"
是 Page中定义的事件处理函数名</li
<liAny 任意属性 </li
</ul

3.共同属性类型

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：
icon 图标, text 文字, progress 进度条

表单(Form)：
button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签.
操作反馈（Interaction）
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频
** 地图 **

map 地图

画布Canvas
canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

微信小程序自定义组件-可清除的input组件

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了在项目中使用方便以及方便其拆解一个小程序组件他项目直接使用，便封装了一个可清除的input自定义组件。

组件需要达到的需求是拆解一个小程序组件：输入框内没有内容时，删除按钮隐藏；当输入框内有内容时，删除按钮显示，点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后，就可以开始着手实现了。

首先，在目标目录下新建一个自定义组件

建好之后，拆解一个小程序组件我们需要来设计布局。根据需求来看，我们只需要三个组件：两个image和一个input。左边一个image提示图标，然后一个input输入框，最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据，提高自定义组件的可扩展性。

最终确定的wxml布局文件如下：

然后，我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在.js文件的properties里的。把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下：

我的属性列表如下：

完成了属性列表的编写之后，接下来我们需要为自定义组件添加监听事件。
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

监听以及触发事件的语法是这样的：

这里我们需要设置的触发事件有，输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数

以上就已经完成了这个可清除input组件的自定义开发了。现在来看怎么使用这个组件。

首先在需要使用此组件的页面.json文件中设置usingComponents属性来引入这个自定义组件

然后，我们就可以在页面中引用这个自定义组件了，引用的方式非常简单，通过我们在上一步设置的标签名称就可以引用了。

最终实现的效果图如下：

项目GitHub地址：
微信小程序酒店类模板
微信小程序捐款类模板

小程序--组件--视图容器

日常记录学习~~

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

cover-image：覆盖在原生组件之上的图片视图，支持嵌套在 cover-view 里

cover-view：覆盖在原生组件之上的文本视图，支持嵌套 cover-view 、 cover-image ，可在 cover-view 中使用 button

原生组件有：map，video，canvas，camera，live-player，live-pusher

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

match-media：media query 匹配检测节点，指定一组 media query 规则，满足时，这个节点才会被展示。

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

movable-area：是movable-view的可移动区域，必须设置width和height属性，不设置默认为10px

movable-view：可移动的视图容器，在页面中可以拖拽滑动，movable-view必须在movable-area组件中使用，并且必须是直接子节点，否则不能移动。

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

page-container：“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面，当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器

参数参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scroll-view：可滚动视图区域，使用竖向滚动时，需要给一个固定高度，组件属性的长度单位默认为px

参数参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
具体使用可看官方案例哦

share-element：共享元素，该组件需与page-container组件结合使用

swiper：滑块视图容器，其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item:仅可放置在swiper组件中，宽高自动设置为100%

这是我们最熟悉的容器啦~

微信小程序创建组件以及父传子、子传父内容

一、小程序创建组件过程

1、首先创建一个components目录，下面放文件(组件文件)

2、创建两个组件文件（Listitem和lunbo）

3、在pages文件夹json文件里面，进入对应的模块内引用Listitem和lunbo组件

4、在wxml文件中使用标签属性来引入组件

自定义组件中和页面中的class名重名，是不会产生冲突的；

页面中的class和自定义组件中的class重名；同样不会产生冲突；

二、父传子：

三、子传父：

子组件绑定事件handle事件（bindtap=“handle”） 关于拆解一个小程序组件和拆开小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 拆解一个小程序组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于拆开小程序、拆解一个小程序组件的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。