小程序如何写动态标签的实现方法

web开发中，尤其使用react开发项目时，我们可以很方便的动态定义标签(jsx)

const props = {
 id: '',
 className: '',
 data-a: ''
}
<button {...props} />

动态配置标签的好处一是所有逻辑在JS端控制，二是使得我们的模板非常规范，方便后续维护更新，碎片模板可以很好的控制，三是我们可以根据使用场景很方便的配置props的属性，这样在html结构输出的时候能够得到比较干净的结构

在小程序的开发中，却不能实现类似的功能，导致我们的动态标签通常非常的冗余，多余的属性全部展示在结构生成后

以button为例，我们知道button在小程序中有非常多的属性

如上所示，这里只是列举了一部分的属性

动态模板

我们的button动态模板写下来应该是这样的

配置

Page({
 data: {
  option: {
   ...
  }
 }
})
<button
 size="{{option.size || 'default'}}"
 type="{{option.type || 'default'}}"
 plain="{{option.plain || false}}"
 value="{{option.value || '按钮'}}"
 ...
 ...
/>

调试工具的输出结构

<button bindtap='' size='' type='' plain='' disabled=false open-typ='' hover-class='' .... />

可以看到调试工具中输出的结构就会变得非常冗余，降低了开发效率，这种冗余的模板输出搞久了会吐的好吧。

可以使用模板语法区分不同场景的button，我知道会有很多这样的声音，但那不是动态模板。

解决问题

那要如何解决输出结构不冗余呢，说了这么多终于到了重点，其实真的只是一个很小的技巧，我的开发经历告诉我这是有效的，你也可以试试，将默认值统统换成 ''，改版后的模板如下

<button
 size="{{option.size || ''}}"
 type="{{option.type || ''}}"
 plain="{{option.plain || ''}}"
 value="{{option.value || '按钮'}}"
 ...
 ...
/>

这时你得到的模板就是一段漂亮的结构

<button value='按钮' />

关注我们的开源小程序

https://github.com/webkixi/aotoo-xquery

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

    微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

    本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;" >我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view> <inpu

  • 微信小程序基于slider组件动态修改标签透明度的方法示例

    微信小程序基于slider组件动态修改标签透明度的方法示例

    本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

  • 小程序如何写动态标签的实现方法

    web开发中,尤其使用react开发项目时,我们可以很方便的动态定义标签(jsx) const props = { id: '', className: '', data-a: '' } <button {...props} /> 动态配置标签的好处一是所有逻辑在JS端控制,二是使得我们的模板非常规范,方便后续维护更新,碎片模板可以很好的控制,三是我们可以根据使用场景很方便的配置props的属性,这样在html结构输出的时候能够得到比较干净的结构 在小程序的开发中,却不能实现类似的功能,导致我

  • 微信小程序实现的动态设置导航栏标题功能示例

    微信小程序实现的动态设置导航栏标题功能示例

    本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景 当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的

  • 微信小程序实践之动态控制组件的显示/隐藏功能

    组件有个属性:hidden='' ,值为true/false ,当false的时候说明不隐藏,当true的时候说明隐藏,注意该隐藏是不保留组件位置的. 实现即 .js 配合.wxml 文件 一.在.js 文件下的 Page({}) 里面 的data:{} 里面 创建一个布尔类型的属性 二.在.wxml文件下构建一个view组件 验证: 1.false,不隐藏的时候 2.true,隐藏的时候 总结 以上所述是小编给大家介绍的微信小程序实践之动态控制组件的显示/隐藏功能,希望对大家有所帮助,如果大家

  • 微信小程序实现发动态功能的示例代码

    微信小程序实现发动态功能的示例代码

    目录 一.设计所需要的表 1.文章表 2.评论表 3.点赞表 二.发布动态 1.文本区 2.最终发表动态效果 3.发布动态代码 最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现. 一.设计所需要的表 1.文章表 文章表很简单,就类似朋友圈,一个文字内容,一个图片数组 2.评论表 3.点赞表 二.发布动态 1.文本区 光标有点问题,回车换行时光标和文字被埋在下面了 解决,给textarea设置一个最大高度,max-length,把scroll-view改为view ,

  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序实现两个页面传值的方法分析

    本文实例讲述了微信小程序实现两个页面传值的方法.分享给大家供大家参考,具体如下: 需求:发送页面通过url传值,接收页面获取值. 发送页面的js var nowid='10'; wx.navigateTo({ url: '../index/index?id='+nowid, }) 或者发送页面用navigate 组件: <navigate url="xxx?id=10"></navigate > 如果id是page里面data的数据.是动态的,那么可以写成: &

  • 小程序组件传值和引入sass的方法(使用vant Weapp组件库)

    1.生命周期 1.onLoad():页面加载时触发,一个页面只加载一次. 2.onShow():页面显示切换的时候触发 3.onReady():页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 4.onHide():页面卸载时触发 2.小程序的框架: 小程序框架有两个层,一是视图层,一是逻辑层. 框架的视图层: 1.由 WXML 与 WXSS 编写,由组件来进行展示. 2.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. 3.WXML(WeiXi

  • 微信小程序首页数据初始化失败的解决方法

    微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

  • 微信小程序 解决swiper不显示图片的方法

    微信小程序 解决swiper不显示图片的方法

    微信小程序 解决swiper不显示图片的方法 1.我说的swiper不显示图片是只有一个swiper的框,但不显示设置好的图片. 第一个要确定的是图片路径设置的正不正确,确定路径没有设置错,还有一个可能的原因就是,放swiper的这个页面(也就是这个wxml文件)没有在app.json里面的pages进行注册 确决的方法是: 找到项目下的app.json文件 在app.json的配置文件下的pages进行页面注册,像下面图片这样 小程序的文档也写了"小程序中新增/减少页面,都需要对 pages

  • 详解微信小程序获取当前时间及日期的方法

    详解微信小程序获取当前时间及日期的方法

    获取当前时间 首先,在要获取时间的.js文件中加载util.js文件 然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u

随机推荐