微信小程序学习2--小程序基本布局

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：45

小程序基本布局

wxml 指的是 Wei Xin Markup Language，是微信团队以 XML 为基础，而定义的一套用以实现小程序页面布局的标记语言，与HTML非常类似。

wxml 常用标签

wxml有一套自已的标签（组件）如 form、input、textarea、button、audio、video、view、text等，其含义与html的标签也是一样的，其中 view、text 可分别与 html 中的 div、span 对应。

view和text标签的基本使用

<!-- wxml文件 -->
<view class="fruits">
  <view class="item">苹果</view>
  <view class="item">橘子</view>
  <view class="item">柠檬</view>
</view>
<view>
  <!-- text标签可以通过selectable控制文本的长按选中 -->
  <text selectable>测试文本</text>
</view>

/* wxss文件 */
.fruits {
  display: flex;
}
.fruits .item {
  flex: 1;
  background-color: pink;
  text-align: center;
}

轮播图组件swiper的基本使用

<swiper indicator-dots="true" circular autoplay>
    <swiper-item>
        <image src="/static/uploads/slide_1.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/static/uploads/slide_2.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/static/uploads/slide_3.jpg"></image>
    </swiper-item>
</swiper>

控制页面跳转navigator标签的基本使用

<!-- 控制页面跳转（导航） -->
<!-- 小程序中页面分为两类：1、菜单页面；2、非菜单页面 -->

<!-- open-type的值如果是switchTab,那么可以跳转到菜单页面 -->
<navigator open-type="switchTab" url="/pages/index/index">跳转到主页</navigator> 

<!-- open-type的值如果是navigate，那么可以跳转到非菜单页面 -->
<navigator open-type="navigate" url="/pages/demo/demo">跳转到Demo页面</navigator>

<!-- open-type的值是redirect,也是跳转到非菜单页面，但是页面没有返回按钮 -->
<!-- 如果采用redirect，那么打开的页面没有回退按钮，可以自己添加一个按钮实现跳转 -->
<navigator open-type="redirect" url="/pages/demo/demo">跳转到Demo页面</navigator>

wxss 样式处理

wxss 指的是 Wei Xin Style Sheet，是微信团队定义的一套用以实现小程序布局样式的层叠样式表，与CSS非常接近。可以理解成 wxss 是 css 的一个子集，也包括选择器、属性、值部分，同样具有层叠的特征。

小程序会自动根据 wxml 文件名，自动将 wxss 进行加载，例如当加载 pages/style/index.wxml 时，会自动将 pages/style/index.wxss 加载。

小程序的选择器支持有限

选择器	样例	样例描述
.class	`.intro`	选择所有拥有 class=“intro” 的组件
#id	`#firstname`	选择拥有 id=“firstname” 的组件
element	`view`	选择所有 view 组件
element, element	`view, checkbox`	选择所有文档的 view 组件和所有的 checkbox 组件
::after	`view::after`	在 view 组件后边插入内容
::before	`view::before`	在 view 组件前边插入内容

小程序样式分为全局样式和局部样式
- 全局样式：app.wxss
- 局部样式：每个页面有自己的样式文件 page.wxss
  - 局部样式优先级高

<!-- 样式处理 -->
<!-- 基于class的样式 -->
<view class="active">样式处理</view>

<!-- 基于style的样式 -->
<view style='background: pink;'>Style样式</view>

注意：

在 wxss 中引入本地资源（图片、字体）时，会报错，原因是小程序中 wxss 不支持本地资源路径，只支持网络路径(http:// 或 https://)或者 base64 路径。

在小程序中字体图标所引入的字体文件路径为网络路径，且必须为 https 协议。

@font-face {
  font-family: 'icomoon';
  /** 路径为网络路径，且需要为 https 协议 **/
  src:  url('https://static.botue.com/paradise/fonts/icomoon.eot?lzaqut');
  src:  url('https://static.botue.com/paradise/fonts/icomoon.eot?lzaqut#iefix')       format('embedded-opentype'),
  url('https://static.botue.com/paradise/fonts/icomoon.ttf?lzaqut') format('truetype'),
  url('https://static.botue.com/paradise/fonts/icomoon.woff?lzaqut') format('woff'),
  url('https://static.botue.com/paradise/fonts/icomoon.svg?lzaqut#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}