微信小程序--几个常用标签

小程序的几个常用标签

先来个前言，小程序开发还是适合有一定开发基础的人学习，教程有不详细的地方和有疑问的地方，欢迎留言

人生如戏，戏如人生。要开发小程序，我们得先学习小程序页面的基本标签是那些。其实小程序和普通h5开发一样，只是标签不同而已，今天我们就来了解一下下面几个项目中经常用到的标签

view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
button 这个是按钮组件。
input 这个是输入框组件。
navigator 这个是导航组件。

view组件

view官方文档叫它组件，但是我喜欢叫它标签。

他的特点是在没有像弹性盒模型，浮动这样布局影响下，它很很霸道的在页面中独占一行。

官方文档说它有下面这几个属性，看你们喜欢着用吧（我表示没有到一个）

hover-class ：指定按下去的样式（那这里就是填class名称呗）
hover-stop-propagation ：是否阻止本节点的祖先节点出现点击态
hover-start-time ：点击多久出现点击态（单位为毫秒）
hover-stay-time ：取消点击以后点击态保存时间（单位为毫秒）

其实这个标签没什么好讲的，主要就是这几个属性稍微有点冷门了。没细心看文档表示不知道有这几个属性。

在我们的开发中，经常会要求我们加各种交互效果，一般的就是那种点击颜色要有点变化，让用户操作起来不那么生硬，感觉柔滑一点。这虽然是产品应该考虑的，但是想要成为一名优秀的前端程序员，我们也应该在开发的过程中，考虑当用户操作，这样你做出来的产品才会更有感情（其实就是不想写完以后，被产品经理各种改）

来看个小demo,我们来初步了解这个属性(下面是html和css)

<view><!-- 阻断与非阻断点击态对比 --><view hover-class='bg_ccc' class='red p_40' data-id="red" bindtap='bindView'><view hover-class='bg_ccc' class='green p_40' data-id="green" bindtap='bindView'>未阻断点击态<view hover-class='bg_ccc' hover-stop-propagation="{{true}}" class='yellow p_40' data-id="yellow" bindtap='bindView'>阻断点击态</view></view></view><!-- 试着设置下按住多久才显示点击效果 默认为 50 --><view class='red mt40 p_40' hover-class='bg_ccc' hover-start-time='1000'>按住1000毫秒才触发点击态</view><!-- 试着设置松开延迟多久消失 默认为 400 --><view class='red mt40 p_40' hover-class='bg_ccc' hover-stay-time='1000'>松开后1000毫秒点击态消失</view>
</view>.red {background-color: red;
}
.green {background-color: green;
}
.yellow {background-color: yellow;
}
.bg_ccc {background-color: #ccc;
}
.p_40 {padding: 40rpx;
}
.mt40 {margin-top: 40rpx;
}

text组件

这个组件比较随和，不独占一行；但是也和固执，就是你设置宽高就是不理你，按自己的来。这个时候你如果想要强行改变它，那你可以用display改变他为块元素或者行内块元素以后，就可以修改它的宽高了。

官方文档里面说它有下面几个属性：

selectable ：设置文本是否可选
space ：显示连续空格（ensp – 中文空格一半大小 emsp – 中文空格大小 nbsp – 根据字体）
decode ：是否解码（可以解析： < > & ' ）

这个标签的这几个属性我也没有用到过，不过我们还是看看下面的例子，了解一下，万一哪天我们要用呢

<view class='mt40 p_40'><!-- 文本可选和不可选 --><text class='mr_40'>文本不可选</text><text class='' selectable='{{true}}'>文本可选(长按可以选择)</text>
</view>
<view class='mt40'><!-- 文本显示连续空格 --><view><text class='mr_40 fz_25' space="ensp">啦啦 啦啦 中文空格一半的大小</text></view><view><text class='mr_40 fz_25' space="emsp">啦啦 啦啦 中文空格大小</text></view><view><text class='mr_40 fz_25' space="nbsp">啦啦 啦啦 跟随字体</text></view>
</view>
<view class='mt40'><!-- 解码 --><view><text>啦啦 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; 啦啦</text></view><view><text decode="{{true}}">啦啦 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; 啦啦</text></view>
</view>.mr_40 {margin-right: 40rpx;
}
.fz_25 {font-size: 50rpx;
}

image标签

 这个标签是图片标签，我们在页面放图片的用到的标签，可以是远程图片，本地图片。

这里来个小提示：我们再用background-img设置背景图片的时候，不能用本地图；只能放远程图片或者是base64的图片。并且小程序的文件总大小不能超过2M,这里建议稍微大一点的图片最好放远程服务器。

言归正传，我们看看官方给我的几个属性：

src : 这个属性就没什么可说的了，放图片地址
mode : 这个属性微信给得很可以，可以设置图片裁剪，缩放的模式；
lazy-load : 是否懒加载（只能是page和scroll-view下的image才有效）；
binderror : 发生错误事件。
bindload : 图片载入完毕事件（可以返回图片的宽高）。

mode属性里面的值有很多，代码中就挑几个常用来做例子，有兴趣的可以自己去看官方文档，下面就看看我们的例子吧（测试用我们随便在网上找了找图片测试）

<view><!-- 图片默认是 320px * 240px --><image class='b_333' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image><!-- mode = aspectFit  保持图片的比例，使长边能显示出来 --><image class='b_333' mode='aspectFit' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image><!-- mode = aspectFill  保持图片的比例，使短边能显示出来，多余的截取 --><image class='b_333' mode='aspectFill' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image><!-- mode = widthFix  保持图片的比例，保持宽度，高度自适应 --><image class='b_333' mode='widthFix' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image><!-- 图片懒加载 --><image class='b_333' lazy-load='{{true}}' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image><!-- binderror事件 --><image class='b_333' binderror='imageErr' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jp'></image><!-- bindload事件是图片加载完成，需要开启图片懒加载 --><image class='b_333' lazy-load='{{true}}' bindload='imageLoad' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
</view>/* 图片标签样式 */
.b_333 {margin-top: 20rpx;border: 1rpx solid #333;
}imageErr: function(e) { //  图片加载错误console.log("图片加载错误")console.log(e);},imageLoad: function(e) { //  图片加载完成console.log("图片加载完成")console.log(e);}

button组件

小程序的button按钮也包含像view那几个点击态属性，但是微信默认有给button按钮默认的点击态，如果觉得不合适我们的项目场景，那么可以像view一样更改

button按钮属性有点多，就直接在代码里面注释了，我们要热爱看代码，那就看看代码吧。

<!-- button按钮 -->
<view><!-- size属性两个值 default，mini。 默认：default   --><button size='default'>size =default </button><button size='mini'>size =mini </button><!-- type属性设置样式类型。 primary- 绿色； default- 白色； warn- 红色 --><button type='primary'>绿色</button><button type='default'>白色</button><button type='warn'>红色</button><!-- plain属性设置是否透明 --><button plain='{{false}}' type='warn'>不透明</button><button plain='{{true}}' type='warn'>透明(没有背景色)</button><!-- disabled属性设置是否禁用 --><button disabled='{{false}}' bindtap='showBtn'>不禁用(有弹框)</button><button disabled='{{true}}' bindtap='showBtn'>禁用(没有弹框)</button><!-- loading名称前是否带图标 --><button loading='{{false}}'>名称前不带loading图标</button><button loading='{{true}}'>名称前带loading图标</button><!-- form-type只用这个按钮放在from里面才能触发 ，分别触发 submit/reset事件 --><form bindreset="resetPut"><input value='啦啦啦'></input><button form-type='reset'>重置表单</button></form><form bindsubmit="submitPut"><input value='啦啦啦'></input><button form-type='submit'>提交表单</button></form><!-- open-type开发功能 --><button open-type='contact'>打开客服</button><!-- 分享要在页面设置 onShareAppMessage方法 session-from : 会话源send-message-title ： 会话显示的标题send-message-path :  会话内消息卡片点击跳转小程序路径send-message-img ：  会话内消息卡片图片show-message-card ： 是否显示会话卡片bindcontact :  从客服回话点击卡片返回小程序的回调--><button open-type='share' session-from="1" send-message-title="测试分享" send-message-path="pages/index/index" send-message-img="http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg" show-message-card="{{true}}" bindcontact="openContart">触发分享</button><!-- 得到用户信息，里面 bindgetuserinfo事件回调得到用户信息 lang 设置中英文 zh_CN 简体中文  zh_TW 繁体中文  en 英文 --><button open-type='getUserInfo' bindgetuserinfo='getUserInfo' lang='zh_CN'>得到用户信息</button><!-- 获取用户手机号，这里需要小程序开放功能认证（300百块钱认证）才有这功能（这个比较私密的信息还是小心点用，小心小程序被封） --><button open-type='getPhoneNumber' bindgetphonenumber="getPhone">获取用户手机号</button><!-- 打开app功能貌似有很多限制，需要从app打开小程序或者app分享卡片进入的小程序才能进入这个app(其实也相当于返回那个app,这个我没测试通过，我这里不具备这样的场景) app-parameter ： 想app传递的参数binderror： 发生错误--><button open-type='launchApp' app-parameter="啦啦啦" binderror="openAppErr">打开app</button><!-- 打开授权写，可以让用户授权 bindopensetting :  打开授权页回调--><button open-type='openSetting' bindopensetting="openSeetting">打开授权页</button><!-- 打开意见反馈，用户反馈内容可以才公众平台查看 --><button open-type='feedback'>打开意见反馈</button>
</view>/* button按钮 */
button {margin-top: 40rpx;
}showBtn: function() { //  判断是否禁用wx.showToast({title: '这个按钮弹框表示未禁用',icon: "none"})},resetPut: function(e) { //  重置表单console.log("重置表单")},submitPut: function(e) { //  表单完成console.log("点击表单完成");},getUserInfo:function(e) { //  得到用户信息console.log("点击了获取用户信息");console.log(e);},openContart: function(e) { //  客服消息点击卡片console.log("点击打开客服");console.log(e);},getPhone: function(e) { //  获取手机号回调console.log("获取手机号");console.log(e);},openAppErr: function(e) { //  打开app错误console.log("打开app错误");console.log(e);},openSeetting: function(e) { //  打开授权页回调console.log("打开授权页回调");console.log(e);}

input组件

输入框这个组件的属性比较多，我们也就直接在示例中注释解释

<!-- input组件 -->
<view><!-- value属性 --><input value='啦啦啦啦'></input><!-- type属性，设置输入方式 text : 文本键盘输入number : 数字键盘输入idcard ： 身份证输入（数字键盘，多了个X输入）digit ： 带小数点键盘输入--><input type='text' value='文本键盘'></input><input type='number' value='数字键盘'></input><input type='idcard' value='身份证键盘'></input><input type='digit' value='带小数点键盘'></input><!-- password属性，是否是密码输入--><input password="{{true}}" value="密码输入"></input><!-- placeholder属性，默认显示文本 --><input placeholder="这是默认显示的文本"></input><input placeholder="这是默认显示的文本" value='有值得时候，不显示默认文本'></input><!-- placeholder-style属性设置默认显示文本的样式这个属性可能我们会经常用到，在输入框默认情况下显示的样式和真正输入了以后是不一样的--><input placeholder='这是默认显示文本' placeholder-style='color:red'></input><!-- placeholder-class也是设置默认显示文本的样式，只是使用class设置默认值为 input-placeholder，就是说你只要在css里面加上这个样式，设置与不设置都一样但是你也可以改变这个默认值--><input placeholder='这里是默认显示文本' placeholder-class='input-placeholder'></input><input placeholder='这里是默认显示文本'></input><input placeholder='这里是默认显示文本' placeholder-class='greenput'></input><!-- disabled设置input框是否禁用，这里就是在默写时候，你要输入了上一个框，这个框才能输入的时候使用只需要动态改变true/false，就可以实现效果--><input value="输入框禁用" disabled='{{true}}'></input><input value="输入框没有禁用" disabled='{{false}}'></input><!-- 设置输入框的输入的字符数量最大值 设置为-1就是不显示长度--><input value='默认输入的最大值为140'></input><input value='默认输入的最大值为10' maxlength='15'></input><input value='设置为-1就是不限制输入长度' maxlength='-1'></input><!-- cursor-spacing指定光标与键盘的距离单位px --><input value='默认是为0' cursor-spacing='0'></input><input value='指定光标与键盘距离为10' cursor-spacing='10'></input><input value='指定光标与键盘距离为50' cursor-spacing='50'></input><!-- focus是否获取焦点当有些场合，用户进入页面，自动聚焦到input框。可以通过这个属性--><input value='自动聚焦' focus='{{true}}' selection-start="1" selection-end="3"></input><!-- confirm-type设置键盘右下角显示的文字，仅仅当type=text是有效done : 完成(默认值) send : 发送 search : 搜索 next : 下一个 go : 前往 --><input type='text' confirm-type='done' value='设置右下角文字为“完成”'></input><input type='text' confirm-type='send' value='设置右下角文字为“发送”'></input><input type='text' confirm-type='search' value='设置右下角文字为“搜索”'></input><input type='text' confirm-type='next' value='设置右下角文字为“下一个”'></input><input type='text' confirm-type='go' value='设置右下角文字为“前往”'></input><!-- confirm-hold点击右下角按钮是，是否保持键盘不收起 --><input confirm-hold='{{true}}' value='点击右下角按钮不收起键盘'></input><input confirm-hold='{{false}}' value='点击右下角按钮收起键盘'></input><!-- cursor属性指定光标位置 0表示开头， -1表示末尾，这个一般与自动聚焦一起使用点击的话会改变这个结果（这个测试的时候只能一个个来使用，把前面的自动聚焦注释掉）--><input cursor='0' focus='{{true}}' value='光标位置为0'></input><input cursor='5' focus='{{true}}' value='光标位置为5'></input><input cursor='-1' focus='{{true}}' value='光标位置为-1'></input><!-- selection-start和selection-end属性配合使用，即自动聚焦是选中范围内文本 （这个测试的时候只能一个个来使用，把前面的自动聚焦注释掉）--><input value='自动聚焦' focus='{{true}}' selection-start="1" selection-end="3"></input><!-- adjust-position属性设置键盘弹起页面是否上推 --><input value='聚焦页面不上推'></input><input value='聚焦页面上推' adjust-position="{{true}}"></input><!-- bindinput事件，输入框输入时触发 --><input bindinput='changeInput' value='输入框输入事件'></input><!-- bindfocus事件，输入框聚焦事件 --><input bindfocus='getFocus' value='输入宽聚焦时触发'></input><!-- bindblur事件，输入框失去焦点时触发 --><input bindblur='loseFocus' value='输入框失去焦点时触发'></input><!-- bindconfirm事件，输入框点击完成时触发 --><input bindconfirm='wancheng' value='输入框点击完成按钮触发'></input></view>/* input框样式 */
.input-placeholder {color: blue;
}
.greenput {color: green;
}// input框changeInput: function (e) { //  输入事件console.log(e);},getFocus: function (e) { //  输入框聚焦事件console.log(e);},loseFocus: function (e) { //  输入框失焦事件console.log(e);},wancheng: function (e) { //  点击完成按钮事件console.log(e);}

navigator组件

导航组件，可以实现页面切换（路由），跳转到其他小程序等功能。

这个组件在这篇文章里面不会讲解得太详细，只讲路由的跳转，其他功能后面会有详细的讲解；我们还是老规矩，就在代码里面讲吧。

<!-- navigator组件 -->
<view><!-- target属性self : 当前小程序跳转（默认值）miniProgram : 要跳转其他小程序时设置hover-class,hover-stop-propagation,hover-start-time,hover-stay-time这几个属性为点击态属性，这个组件有默认的值，可以根据项目需要修改，和前面讲得是一样的。--><!-- 当target=self时，也就是默认值（不设置的情况） url ： 当前小程序跳转的页面地址(这个路径我建议是写成绝对路径)open-type ：  跳转方式有下面的值open-type=navigate  : 保留当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）open-type=redirect  : 关闭当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）open-type=switchTab  : 关闭所有非tabar页面，跳转到tabbar页面open-type=reLaunch  : 关闭所有页面，跳转到tabbar页面open-type=navigateBack  : 页面回退（和delta属性一起使用，设置返回层数）提示：这里只是简单介绍一下，tabbar页面配置还没讲过，先了解这个东西吧，我一般都不用这个组件，习惯用小程序api--><navigator open-type='navigate' url='/pages/index/index'>跳转</navigator><navigator open-type='redirect' url='/pages/index/index'>跳转</navigator><navigator open-type='switchTab' url='/pages/index/index'>跳转</navigator><navigator open-type='reLaunch' url='/pages/index/index'>跳转</navigator><navigator open-type='navigateBack' delta="1">跳转</navigator>
</view>

小程序还有其他的几个组件，这里就不做过多的介绍了。如果有需要我特别介绍的，可以评论下想要详细介绍的组件，我一定知无不言，言无不尽，尽无不详，详无不实。

微信小程序--几个常用标签相关推荐

微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序中识别html标签的方法
微信小程序中识别html标签的方法前言 rich-text组件前言在后台接口返回的数据中有些会带有标签,在微信小程序中如何将其直接渲染在页面呢? rich-text组件在微信小程序中有一个组件 ...
微信小程序云开发——常用功能2：操作云数据库一键批量导入数据（导入json文件）
微信小程序云开发--常用功能2:操作云数据库一键批量导入数据(导入json文件) 今天我们要添加100条数据.下面的过程是先创建一条记录,然后导出这条数据看json文件中是如何编辑字段的,然后仿照这个 ...
微信小程序 Notes ｜常用开发事例（五）基于云平台导出 Excel
历史文章回顾: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用事例(三) 微信小程序 Notes | 开发常用事例(四) 一.前言最近一 ...
微信小程序里面的标签和html标签的对比、微信小程序基础之常用控件
微信小程序和html5标签的区别: HTML5 微信小程序 <h1></h1>...<h6></h6> <p></p> < ...
微信小程序项目-最常用网盘助手
目录项目展示首页-页面全部-页面项目地址微信小程序云开发开始收费,白嫖的时代结束了,不能靠着这个小程序薅羊毛了.所以把这个项目分享给大家.这是一款记录分享阿里云盘链接的小程序.可以记录分享一 ...
微信小程序中wxml的标签说明
对于不熟悉web开发的童鞋来说,开发微信小程序会遇到一个比较大的困难就是界面的排版问题了.其中wxml文件中的很多标签都需要慢慢的去熟悉,下面我就列出常用的标签及其分类.能够帮助之前没有经历过微信小程 ...
微信小程序与HTML5的标签差异梳理
小程序自己开发了一套WXML标记语言和WXSS样式语言,并非直接使用标准的HTML5+CSS3.因此,粗略的统计了一下之间的差异,有助于理解小程序,同时遇到HTML5转换小程序的时候,知道如何避开其中 ...
微信小程序[电商]-实现标签云热搜及搜索功能
效果图从首页的搜索入口进入到搜索页面,展示热搜. 再根据用户的输入内容模糊搜索,返回数据显示在热搜下方. 实现分析主要由三部分组成搜索框热搜标签云搜索结果列表搜索框搜索框使用 vant- ...
微信小程序中，block标签与view标签的区别及实例应用
介绍在微信小程序开发当中,除了最常使用的 <view> 标签以外, 还有 <block> 标签: 这两个标签还是有很明显的区别的:具体如下: 定义 <view> ...

微信小程序--几个常用标签

微信小程序--几个常用标签相关推荐

最新文章

热门文章