微信小程序学习day 1:wxml与wxss的简要理解、view(视图容器)、text(基础内容-文本标签)、navigator(导航-超链接)
一、wxml与wxss的简要理解
1、wxml:即页面文件,通俗来讲也就是呈现到眼前的页面,相当于是一个舞台最终的呈现效果。
2、wxss:即样式文件,故名思意也就是定义一个页面的具体样式,相当与是搭建整个舞台的后台筹备人员。
二、视图容器——view
1、view是以个块级标签;
2、view标签的嵌套——hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态,通过对其进行设置,则可以实现标签的嵌套。
下面展示一些 代码片
。
// index.wxml
<view class="box" hover-class="boxhover">
<view class="nesting" hover-class="nestingHover" hover-stop-propagation>view标签嵌套</view>
</view>
// index.wxss
.box{width: 200px;height: 200px;background-color: pink;}
.boxhover{background-color: royalblue;}
.nesting{width: 100px;height: 100px;background-color: sandybrown;}
.nestingHover{background-color: seagreen;}
三、基础内容——text
1、text是一个行级标签
2、使用——user-select:即为选中文本
3、空格的展示又两种方式:
1)decode-解码
2)space-显示空格:
a、ensp 中文字符空格一半大小
b、emsp 中文字符空格大小
c、nbsp 根据字体设置的空格大小
下面展示一些 代码片
。
// index.wxml
<view>坏心情</view>
<view>
<text user-select decode>web 前 端开发</text>
</view>
图片展示
四、导航——navigator
1、url:当前小程序内的跳转链接
下面展示一些 代码片
。
// index.wxml
<navigator url="/pages/logs/logs" hover-class="naHover">跳转到logs</navigator>
// index.wxss
.naHover{background-color: sienna;}
若想在logs页面实现跳转回首页,则需要在logs.wxml中写上链接跳转即可。