小程序组件使用方法（小程序组件使用方法视频）

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

本文目录一览：

• 1、小程序自定义组件
• 2、小程序的 iview Weapp 组件库的使用
• 3、微信小程序组件化开发
• 4、微信小程序－vant-weapp日历组件的使用（年月日）

小程序自定义组件

新手在第一次自定义组件的时候，首先写出来需要定义的组件的内容和布局，防止不熟练而出错。

一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。

二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。

三、在新建的文件夹内新建一个Component文件 命名也是自定义。

四、在xxx里面把事先写好的ml和ss以及js文件复制进去。

1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样  {{}}是插值表达式。这里可以直接使用js里面定义的数据。

eg:
1、组件自定义的属性列表写在 properties里面。需要写成对象的形式 

eg:
2、组件的方法列表写在 methods里面

eg:
五、在需要引用自定义组件页面文件的xxx.json里面引用。

注意：引用的时候，不可以以./开头。前面命名可以自命名，不必和后面名字一样。
六、在需要引用的页面里的的xxx.wxml里写已经命名好的组件。

组件的名字为自定义命名。

eg:
因为组件是自己写的，并非微信提供的官方组件，所以如果想要获取触发事件的话 ，需要写一个同步组件回传数据

触发自定义事件用triggerEvent。在需要调用的方法内写this.triggerEvent(“自定义属性名”，‘需要更新的数据’)

eg:

然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”
利用data-active="变量名"属性添加需要变化的变量
eg:

xxx.wxml内写法：
注意：想要在页面中使用自定义的组件属性时，必须要现在定义组件的文件夹内的js文件中，先去定义属性，然后才可以引入使用。

小程序的 iview Weapp 组件库的使用

iview 这个 UI 框架想必大家都很熟了小程序组件使用方法，这个搞 Vue 框架的基本素养。下面来看看小程序版的。
商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果小程序组件使用方法，总的来看还是不错的。

还有个常用的动作面板。
从底部弹出的模态框小程序组件使用方法，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：
总的来讲 iview 还比较好看的。
更多用法去参考： https://weapp.iviewui.com/

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

微信小程序组件化开发

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件：
新建一个components目录，在里边创建自定义组件

组件的组成：

使用组件：

一个简单的示例：
创建comp，代表页面；创建components/xxxx，代表组件。

创建组件：

使用组件：

注意：json文件中不能写注释啥的。这里的注释是为了解释清楚，在开发中不能写注释。

组件的注意事项：

组件的样式细节：

如何控制页面和组件的样式相互影响：

组件和页面相互通信

this.triggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项

预留一个设备，以有利于对以后进行扩展。
好处：

例子：
在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。

单个插槽的使用很简单：

多个插槽的使用稍微复杂，要设置几个东西：

component构造器中可以写哪些东西，如下

微信小程序－vant-weapp日历组件的使用（年月日）

话不多说小程序组件使用方法，记录一下这个框架小程序组件使用方法的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp
Github源码小程序组件使用方法： https://github.com/youzan/vant-weapp
中文文档： https://youzan.github.io/vant-weapp/#/intro

1：打开微信开发者工具小程序组件使用方法，填写自己的appid和项目名称，选择不使用云服务，新建一个项目。

2：右击在选择在终端打开

进入项目的根目录底下，注意，一定要进入根目录哦，使用cd ../返回上一级目录~

3：小程序已经支持使用 npm 安装第三方包，
这里通过 npm 安装

这里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的区别

使用npm i vant-weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径

使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径（推荐，因为这个可以直接抄文档，不需要改变引入路径的~）

4：在微信开发工具执行npm 构建，点击工具里面，构建npm

构建过程需要等待一会儿，不要捉急

构建完会生成一个miniprogram_npm文件夹
如果构建完如果编译报错，再构建一次就好小程序组件使用方法了

日历文档参照一下

5：使用vant-weapp日历组件
我这里对日期的处理，是需要这样的格式YYYY-MM-dd
所以在对选中的日期做了一些处理和判断~

wxml

js

json 关于小程序组件使用方法和小程序组件使用方法视频的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序组件使用方法的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序组件使用方法视频、小程序组件使用方法的信息别忘了在本站进行查找喔。

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