小白学微信小程序——创建自定义组件

最新推荐文章于 2023-06-29 14:23:34 发布
最新推荐文章于 2023-06-29 14:23:34 发布
阅读量355 收藏 1
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46362658/article/details/105613941
版权

1.创建组件
首先创建一个components文件夹，用于放置所有自定义的组件，创建之后的目录结构为在这里插入图片描述
在文档中的Tabs.json中在这里插入图片描述true代表是组件"usingComponents": {}代表还可以引用其他的组件
2.声明组件
要在哪一个页面要使用这个组件，就要在哪一个页面的json文件中声明这个组件。举个例子：我要在demo1这个页面中使用这个组件，我就要在demo1.json这个文件中声明
在这里插入图片描述
在demo.json中输入如下代码，这样声明就结束了
在这里插入图片描述
3.使用组件
在demo1.wxml中直接使用标签 ，就可以使用在Tabs中是定义的内容

Kristen Stewart
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发中的动态数据绑定和动态渲染
wx_linying1029的博客
07-15 714
在这个例子中，我们首先定义了一个input元素和一个button元素，用户可以在input元素中输入内容，并点击button元素来将内容添加到items数组中。通过使用数据绑定语法和指令，我们可以将数据绑定到页面的元素上，实现自动更新的效果。当数据发生变化时，相关的元素会自动更新。除了在wxml中使用动态渲染内容，我们还可以在js文件中动态生成wxml代码，并将其渲染到页面上。希望通过以上的例子和说明，读者能够更加深入地理解动态数据绑定和动态渲染内容的实现方法，从而在微信小程序开发中能够灵活运用。
js 用CreateElement动态创建标签示例
12-03
//定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document.createAttribute(“id”); label_id.nodeValue = id; var label_text = document.createTextNode(value); label_var.setAttr
小程序创建组件
weixin_53052268的博客
07-22 295
从表面看，组件和页面都是由.js.json.wxml.wxss这四个文件组成。1.3全局应用（在app.json文件中配置）根据组件的使用频率和范围，选择合适的方式。1.4全局引用vs局部应用。1.5组件和页面的区别。
动态创建元素(createElement())
qq_32077521的博客
10-21 1286
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> </head>...
微信小程序（组件跳转、规范、层级准备）
peijiajing的博客
11-29 899
课程大纲 （1）路由API跳转小结 （2）hover样式 （3）navigator导航组件跳转 （4）路由跳转规范 （5）页面层级准备 前言 首先简单回顾下路由API跳转: wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch DOM的API：document.createElement 除了使用路由API进行页...
微信小程序图片压缩一半同时通过canvas导出为base64格式
ZZ556464的博客
04-06 367
【代码】微信小程序图片压缩一半同时通过canvas导出为base64格式。
微信小程序——用户反馈组件（截图+源码）.zip
05-04
微信小程序——用户反馈组件（截图+源码）.zip 微信小程序——用户反馈组件（截图+源码）.zip 微信小程序——用户反馈组件（截图+源码）.zip 微信小程序——用户反馈组件（截图+源码）.zip 微信小程序——用户反馈...
微信小程序——自定义tabbar（截图+源码）.zip
05-08
微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义...
详解微信小程序——自定义圆形进度条
01-03
微信小程序 自定义圆形进度条，具体如下： 无图无真相，先上图： 实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。 代码实现： JS代码： Page({ data: {}, onLoad: function (options) { // ...
微信小程序——电影推荐（截图+源码）.zip
04-17
微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip ...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序实现类DOM操作
黎先生的博客
02-02 4418
需求 如图1.1所示，当用户点击 + 添加时，需要新增一个输入框。这有点类似于平时写网站时添加DOM节点操作。但是微信小程序并不支持DOM节点的操作，所以我们可以曲线救国用下面的方式实现类似的DOM节点添加操作。 Figure 1.1 project 代码演示 <view class="input-wrap"> <block wx:for="{{credentialList}...
vue H5页面跳转小程序＜wx-open-launch-weapp＞
qq_39882537的博客
08-11 6144
微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。 官网文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 首先按照官网把公众号的安全域名配好 然后通过config接口注入权限验证配置并申请所需开放标签（wx.config） 然后用小程序跳转按钮：< wx-open-launch-weapp > 官网用例 <wx-o
微信小程序之传递指定的值给函数（“document“取值）
菜二娘的博客
08-03 5972
这几天在普及微信小程序相关知识的时候，发现做H5开发的小伙伴们，在练习做微信小程序的过程中，总是会问我一个相同的问题，"document取值怎么没有效果哈?" 其实这应该是很多小伙伴都有的疑问。 对于这个问题如何快速的去解决呢？其实很简单，H5中使用到document基本上是在js中给对应的标签设置值或者获取对应的值。 1.如何给动态设置值 只需要在js中data下面定义一个变量a,然后在需
18、查看事件
you can you up up up的博客
10-18 444
创建好事件后，用户可以通过以下 3 种方式来查看事件的状态信息： 查看 mysql.event 查看 information_schema.events 切换到相应的数据库后执行 SHOW EVENTS; 以上方式的运行结果基本一致，这里就不一一演示了。下面查看 information_schema.events 表中的事件状态信息。SQL 语句和运行结果如下： mysql> SELECT * FROM information_schema.events limit 1\G ***********
document.createElement 出现的报错---Uncaught TypeError: Illegal invocation
weixin_45044349的博客
02-09 1456
报错代码 var createEle = document.createElement; function render() { // 创建导航并且插入 var nav = createEle('a') } render() 知识点 call、aplay在函数执行的时候，改变this;bind是返回一个新的函数 参考文章 相同点：call、apply和bind都是JS函数的公有的内部方法，他们都是重置函数的this，改变函数的执行环节。 不同点：bind是创建一个新的函数，而cal.
解决小程序问题之U.createEvent
johnrf的博客
07-14 766
解决小程序中（MiniProgramError U.createEvent is not a function TypeError: U.createEvent is function）方案 相信最近又不少小伙伴都遇到这种问题，百度答案千奇百怪，这里提出一些常见的解决方案，而我遇到这个比较多的情况是在写页面跳转时，其他情况看下面讲解 解决方案如下解决小程序中（MiniProgramError U.createEvent is not a function TypeError: U.createEvent
微信小程序初次创建echarts并简单使用的详细过程
qq_44497296的博客
07-16 715
微信小程序初次创建echarts并简单使用的详细过程 首先新建微信小程序 然后创建好新的页面 将ec-canvs文件放在小程序文件的根目录 然后打开微信开发者工具，在home.json中引用组件 在home.wxml中加入wxml固定代码 <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> <
小程序组件实现原理（Web Components）
home of 倒不了的dota
06-29 1385
web components很适合小程序组件的开发，Custom elements可以自定义组件，Shadow DOM 作用域内部的元素始终不会影响到它外部的元素，这为封装提供了便利
微信小程序——自定义底部tabBar
最新发布
01-03
微信小程序可以通过自定义底部tabBar来实现更加个性化的界面效果。下面是一个示例代码，演示了如何自定义底部tabBar： ```javascript // app.json { "tabBar": { "custom": true, "color": "#000000", ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值