前端标签与小程序标签对比

本文作者基于前端背景,对比分析了小程序中的主要标签,如view、text、icon、input等,介绍了它们的功能和用法,并提供了官方文档链接。此外,还列举了一些小程序常用但前端不常见的标签,如swiper、picker、navigator等,旨在帮助初学者更好地理解和运用小程序标签。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

														**第一次学习小程序**
                            (作为一个初学者也只是记录一下,看到不好的可以给意见,但请不要骂人,谢谢!)

这个就当是个记录,第一天也就看了官方文档,然后按照官方文档去摸了一下首页,这个所谓的首页编码都是在app.json,不了解这个是用来干嘛的。。。
然后第二天吧,想学一下每个标签的作用,顺便记录一下;
因为原本就有一定的前端基础,只不过刚刚学习小程序,所以还是要先摸一下,也会做个对比,这样应该会比较容易理解吧。
搜索了好几篇,大概就有几个主要的标签说明了一下,结果只是约等于而已,并不是==:

  1. viewdiv         view 视图容器
  2. textspan       text 文字
    (PS:小程序里面没有具体的类似于P或者h1之类的标签,自带默认属性的,只能通过css去控制他成为怎么样的元素)
  3. i标签class=“icon” → icon        icon 图标
    (小程序里面是有默认的小图标的,然后也可以通过创建wxss文件,引入相关的阿里icon内容,然后页面引用相对应的class就可以了;相关的说明分别用两个链接说明,文章都非本人,都是引用的;
    第一篇是开发文档icon说明:https://developers.weixin.qq.com/miniprogram/dev/component/icon.html ;
    第二篇是如何引用外链的icon说明:https://blog.youkuaiyun.com/m0_38082783/article/details/78873053)
  4. <iput type="text"><input/>       input 输入框
  5. <iput type="checkbox"><checkbox/>       checkbox 多项选择器
  6. <iput type="radio"><radio/>       radio 单项选择器
  7. selectpicker        picker 列表选择器
    (具体参照开发文档picker:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html)
  8. <a href="#"></a><navigator url="#"></navigator >         navigator 应用内跳转
    (具体参照开发文档navigator: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
  9. <img src=""><image src="" ></image >        image 图片
    (具体参照开发文档image: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Image.html)
  10. button<button></button>         button 按钮
    以上内容为小程序里面一些能大概跟前端做对比的标签,方便了解具体用途的;
    以下是一些在日常小程序里面用得比较多的标签:
    view(视图容器)、rich-text(富文本)、swiper(滑块视图容器)、icon(图标)、text(文字)、progress(进度条)、button(按钮)、form(表单)、input(输入框)、checkbox(多项选择器)、radio(单项选择器)、picker(列表选择器)、slider(滚动选择器)、switch(开关选择器)、textarea(多行输入框)、label(标签)、navigator(应用链接)、audio(音频)、image(图片)、video(视频)、camera(系统相机)、map(地图)、scroll-view(可滚动视图容器)、picker-view(内嵌列表选择器)、canvas(画布)movable-area(可移动区域)、movable-view(可移动的视图容器)、cover-view(覆盖视图)、cover-image(覆盖图片)、functional-page-navigator(跳转到插件功能页)、live-player(实时音视频播放)、live-pusher(实时音视频录制)
    具体使用方法在微信开发文档里面的右上角搜索能找出来的,为了方便查找,链接如下:
    https://developers.weixin.qq.com/miniprogram/dev/framework/
    搜索框位置
    标签的内容差不多就是这些了,然后大神们有什么意见的可以说一下,毕竟都是第一次学习小程序,有很多不足的地方,多多指教,也希望这篇文章对跟我差不多的萌新,有一个大概的了解小程序的标签!谢谢了!
    .
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值