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

小程序基本布局

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>

注意：

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

2. 在小程序中字体图标所引入的字体文件路径为网络路径，且必须为 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;
   }
   

   base64图片资源：

   base64是表示图片的一种编码形式，浏览器可以直接识别

   • base64编码后的图片体积会比原始的图片体积要大
   • 一般用于小图片，不太适合大图片的转化
   • 优点：不需要发送网络请求