程序3"/>

微信小程序3

微信小程序3

• 尺寸单位rpx
• 样式导入
• 选择器
• 使用less
• 常见组件
• • 1.view
  • 2.text
  • 3.image
  • 4.swiper微信内置轮播图组件
  • 5.navigator
  • 6.rich-text

尺寸单位rpx

1 小程序中 不需要主动来引入样式文件
2 需要把页面中某些元素的单位 由px 改成rpx1 设计稿750x750 px= 750 rpx1 px = 1 rpx2 把屏幕宽度 改成375px375 px = 375 rpx1 px = 2 rpx1 rpx = 0.5 px3 存在一个设计稿 宽度414 或者 未知 page1 设计稿 page 存在一个元素 宽度 100px2 拿以上需求 去实现 不同宽度的页面适配page px = 750rpx1 px = 750 rpx / page100 px = 75rpx*100/page假设 page= 375px以下代码写法错误width: 750 rpx * 100 / 375;4 利用 一个属性 calc属性 css 和 wxss 都支持 一个计算属性1 750和rpx之间不要留空格2 运算符的两边也不要留空格

demon05.wxss文件

view{/* width: 200rpx; */height: 200rpx;font-size: 40rpx;background-color: aqua;width: calc(750rpx*100/375);
}

样式导入

view{color:aqua;font-size: 100px;
}

<!--pages/demon06/demon06.wxml-->
<view>pages/demon06/demon06.wxml</view>

/* 
1 引入的代码是通过 @import 来引入的
2 路径 只能写相对路径
*/@import "../../styles/common.wxss";

选择器

特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！

*{margin:0;padding:0;box-sizing:border-box;
}

目前支持的选择器有：

使用less

原生小程序不支持 less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。
但是仅仅因为⼀个less功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现。

1. 编辑器是 vscode
2. 安装插件 easy less
   
3. 在vs code的设置中加入如下，配置

   "less.compile": {"outExt":       ".wxss"}

4. 在要编写样式的地方官，新建 less文件，如 index.less ,然后正常编辑即可。

常见组件

/

1.view

代替 原来的 div 标签

  <view hover-class="h-class">点击我试试</view>

2.text

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能）
4. 可以对空格 回车 进行编码
   

  <text selectable="{{false}}" decode="{{false}}">普&nbsp;通</text>

<!-- 1 长按文字复制 selectable2 对文本内容 进行 解码3 tip: decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;-->
<text selectable decode>text &nbsp; 123 &lt;
</text>

3.image

1. 图片标签，image组件默认宽度320px、高度240px
2. 支持懒加载
   
   mode 有效值：
   mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
   
   

<!-- image 图片标签1 src 指定要加载的图片的路径图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 1002 mode 决定 图片内容 如何 和 图片标签 宽高 做适配1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  5 bottom。。 类似以前的backgroud-position 3 小程序当中的图片 直接就支持 懒加载  lazy-load1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 -->

 <image mode="bottom" lazy-load src=".jpg" />

image{box-sizing: border-box;border: 1px solid red;width: 300px;height: 200px;
}

4.swiper微信内置轮播图组件

<!-- 1 轮播图外层容器 swiper2 每一个轮播项 swiper-item3 swiper标签 存在默认样式1 width 100%2 height 150px    image 存在默认宽度和高度 320 * 240 3 swiper 高度 无法实现由内容撑开 4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度原图的宽度和高度  1125 * 352 pxswiper 宽度 / swiper  高度 =  原图的宽度  /  原图的高度swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度height: 100vw * 352 /  11255 autoplay 自动轮播6 interval 修改轮播时间7 circular 衔接轮播8 indicator-dots 显示 指示器 分页器 索引器 9 indicator-color 指示器的未选择的颜色 10 indicator-active-color 选中的时候的指示器的颜色 -->

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"><swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item><swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item><swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

swiper {width: 100%;/* height: calc(100vw * 352 /  1125); */height: 31.28vw;
}
image {width: 100%;
}

5.navigator

导航组件 类似超链接标签

open-type 有效值：

<!-- 导航组件 navigator0 块级元素 默认会换行  可以直接加宽度和高度 1 url 要跳转的页面路径  绝对路径 相对路径2 target 要跳转到当前的小程序 还是其他的小程序的页面self 默认值 自己 小程序的页面 miniProgram 其他的小程序的页面3 open-type 跳转的方式1 navigate 默认值 	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面2 redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。3 switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面4 reLaunch	关闭所有页面，打开到应用内的某个页面-->

 <navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator><navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator><navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator><navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator><navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator> 

6.rich-text

富文本标签
可以将字符串解析成 对应标签，类似 vue中 v–html 功能

<!-- rich-text 富文本标签1 nodes属性来实现1 接收标签字符串 2 接收对象数组 --><rich-text nodes="{{html}}"></rich-text> 

// pages/demo12/demo12.js
Page({data: {// 1 标签字符串 最常用的// html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'// 2 对象数组html:[{// 1 div标签 name属性来指定name:"div",// 2 标签上有哪些属性attrs:{// 标签上的属性 class  styleclass:"my_div",style:"color:red;"},// 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 children:[{name:"p",attrs:{},// 放文本children:[{type:"text",text:"hello"}]}]}]}
})