逐浪技术--Zoomla!逐浪CMS官方博客

微信小程序的标签和html标签比较及前端知识普及入门

作者:tudou土豆 发布时间:2021-05-09 来源:本站原创 点击数: 分享网址

tudou土豆

博主:tudou土豆
个人座右铭:不要迷恋哥,哥只是个土豆

基本介绍

微信小程序开发和H5的开发主要区别在于标签和js部分

1、标签,微信小程序的开发很多的H5标签都是不支持的,类似H5的h1~h6,span,a,div,ul,li等等,微信小程序有它标签也叫组件。下面进行详细的解析:(注意每个属性支持的版本库)

A:view标签:基础标签,类似H5中的div,块级标签;

B: scroll-view:相当于H5中的div标签添加了overflow-x/overflow-y属性;多用于头部滑动导航,支持属性如下:

在这里插入图片描述

C:swiper:滑动视图容器,多用于滑动广告图,支持属性如下:

在这里插入图片描述

示例代码:

< swiper class= 'swiper' indicator-dots= 'true' indicator-color= '#fff' indicator-active-color= '#25f6d5' autoplay= 'true' circular= 'true' interval= '3000' duration= '1000' bindchange= 'change'>
< swiper-item class= 'item' >
< image src= '../../image/1.jpg' class= 'img'></ image >
</ swiper-item >

< swiper-item class= 'item' >
< image src= '../../image/2.jpg' class= 'img'></ image >
</ swiper-item >

< swiper-item class= 'item' >
< image src= '../../image/3.jpg' class= 'img'></ image >
</ swiper-item >
</ swiper >

微信小程序的标签和html标签比较

html 微信小程序
<div></div> <view></view>
<h1></h1><h2></h2>....<h6></h6><p></p><span></span> <text></text>
<input type="text"><input type="checkbox"><input type="radio"><input type="file"> <input /><checkbox /><radio /><view bindtap="changeImage"></view>
<select><option></option><option></option></select> <picker range="{{area}}"> <view> {{area[index]}}</view></picker>
<a href="#"></a> <navigator url="#" redirect></navigator>
<img src=""> <image mode="aspectFill" src="">
<i class="icon"></i> <icon></icon>

wxss选择器

html 微信小程序
div(标签选择器) view、text、icon、input、image、navigator(标签选择器)
class(类选择器) class
id(id选择器)(效率最高) id(效率最高)
element,element(层级选择器) element,element(层级选择器)
:after(伪类选择器) :after :before
:frist-child等 :frist-child等(不建议(工具过滤易导致页面错乱))
.class .class .class .class(不建议(工具过滤易导致页面错乱))
群组选择器 群组选择器
后代选择器 后代选择器

其它

<em id="__mceDel">//微信小程序中placeholder的样式和html5是不一样的。需要修改placehoder的样式,通过placeholder-class=”class”来定义。
<input type="text"  placeholder="邮箱" placeholder-style="color:#c0c0c0" />
<input password type="number" placeholder="密码" placeholder-class="placeholder"  />
<!--小程序里通过placeholder-style和placeholder-class修改样式,不过并不能修改点击时候input的边框颜色--></em>



本文责任编辑:  加入会员收藏夹 点此参与评论>>

进一步意向对[微信小程序的标签和html标签比较及前端知识普及入门]这条信息感兴趣吗?您还可以点此联系我们以确定进一步意向。
当前网址:
复制本网址-发给QQ/微信上的朋友
上一篇文章:git、github以及nodeJS的使用技术大全 下一篇文章:

+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
经营许可证号:工商3601002021063 沪ICP备09077823号 沪公网安备31011502000316号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网