传统Hrml和小程序代码标签差异详解

2020-02-20 21:10 by viooma 3429 0

最近开发微信小程序，总是停留在Html的代码编写习惯上，对于小程序的代码总是要去翻手册，可能也是为了自己方便查阅，所以把Html和小程序的标签做了一个区别笔记，这里共享给和我一样有疑问的小伙伴们。

div 改成 view

<view class="mp-search-box"></view>

span、font 改成 text

<text class="title clamp">{{item.title}}</text>
<text class="price">￥{{item.price}}</text>

a 改成 navigator

<navigator url='{{item.url}}' class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
<image src="{{item.pic}}" class="slide-image"/>
</navigator>

img 改成 image

<image src='{{item.pic}}'></image>

input 还在，但type属性改成了confirmtype

<view class="mp-search-box">
	<input class="ser-input" type="text" value="输入关键字搜索" disabled />
</view>

form、button、checkbox、radio、label、textarea、canvas、video 这些还在。

select 改成 picker

iframe 改成 web-view

ul、li没有了，都用view替代

audio 不再推荐使用，改成api方式，背景音频api文档

当然除了这些常用的区别外，小程序还为我们增加了一些其它的新标签：

scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
progress 进度条
slider 滑块指示器
switch 开关选择器
camera 相机
live-player 直播
map 地图
cover-view 可覆盖原生组件的视图容器

更详细的标签还需要大家做系统化的学习，我这里只是做了简略的介绍而已

注：本文转载自唯马网络，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。

匿名用户:
2020-02-21 06:28:06

if(hljs){
    $('pre',$comment_tpl).each(function(i, block) {
        hljs.highlightBlock(block);
    });
}

回复 1538 1814

发表问题/文章

传统Hrml和小程序代码标签差异详解

评论

热门文章