微信小程序学习日记

微信小程序学习day 1

一、wxml与wxss的简要理解

1、wxml：即页面文件，通俗来讲也就是呈现到眼前的页面，相当于是一个舞台最终的呈现效果。

2、wxss：即样式文件，故名思意也就是定义一个页面的具体样式，相当与是搭建整个舞台的后台筹备人员。

二、视图容器——view

1、view是以个块级标签；

2、view标签的嵌套——hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态，通过对其进行设置，则可以实现标签的嵌套。

下面展示一些 代码片。

// index.wxss
<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  前&emsp;端开发</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中写上链接跳转即可。

0 条评论