wx小程序学习Day2 样式、常见的组件

今天是学习小程序的第2天！

---

---

1. 样式WXSS

WXSS是一套样式语言
与CSS相比，WXSS扩展的特性有：

• 响应式长度单位rpx
• 样式导入

尺寸单位

rpx：可以根据屏幕宽度进行自适应。小程序规定屏幕宽为750rpx，无论在iPhone6还是其他机型上都是750rpx的屏幕宽度
以iPhone6为例，该屏幕宽度为350px，则750rpx = 350px => 1px = 2rpx

可以结合calc()，计算宽度：

calc()的使用，注意：

• 数字和rpx之间不能有空格
• 运算符之间要有空格

---

样式导入

WXSS中直接就支持样式导入功能
使用@import语句可以导入外联样式表，只支持相对路径

/** demo.wxss中 **/
@import "../../styles/common.wxss";

---

选择器

⚠️：小程序不支持通配符*，因此以下代码无效：

*{
  margin: 0;
  padding: 0;
}

---

2. 常见组件

view

代替原来的div标签

属性：

• hover-class：指定按下去的样式类
• hover-stop-propagation：是否阻止事件冒泡
• hover-start-time：按住后多久出现点击态
• hover-stay-time：手指松开后点击态的保留时间

---

text

• 只能嵌套text
• 只有text标签长按文字可复制
• 可以对空格、回车、大于号等编码

<!-- 长按文字复制 -->
<text selectable>一段文字</text>

---

image

• image组件默认宽度320px、高度240px
• 支持懒加载

属性名：

• src：图片资源地址
• mode：图片裁剪、缩放的模式，默认值是 scaleToFill
• lazy-load：图片懒加载，默认值是false

mode有效值：

• scaleToFill: 不保持纵横比缩放图片，使图片完全拉伸至填满image元素
• aspectFit：保持纵横比缩放图片，确保图片的长边能完全显示出来(常用)
• aspectFill：保持纵横比缩放图片，确保图片的短边能完全显示出来(少用)

还有：…

小程序中的图片直接就支持懒加载lazy-load，当我们的图片出现在视口的上下三屏的高度之内，就会自己开始加载图片

<image lazy-load src="https://....jpg">

（静态资源我们一般放在网络上，所以当我们要用图片时，统一使用外网的图片）

---

swiper

widthFix：宽度不变，高度自动变化，保持原图比例

属性：

• autoplay：是否自动切换
• interval：自动切换的间隔时间，默认5s
• circular：是否循环轮播
• indicator-dots：是否显示面板指示点
• indicator-color：指示点颜色
• indicator-active-color：当前选中的指示点颜色

更多属性可查文档：
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

---

navigator

导航组件，类似于超链接标签
但navigator是块级元素，会默认会换行，可以直接加宽度和高度

属性：

• url：跳转链接(绝对路径/相对路径)
  ⚠️：如果是../.. /demo.wxml，不用加后缀名wxml
• target：在哪个目标上发生跳转，默认当前小程序
• open-type：跳转方式，默认值navigate

open-type有效值：

• navigate：保留当前页面，跳转到应用内的某个页面，但不能跳转到tabbar页面
  (跳转到某个页面之后，会出现返回按钮)
• redirect：关闭当前页面，转到应用内的某个页面，但不能跳转到tabbar页面
  (跳转到某个页面后，会出现小房子图标)
• switchTab：跳转到tabBar页面，并关闭所有其他非tabBar页面

---

rich-text

可以将字符串解析为对应标签，类似于vue中的v-html功能

属性：
nodes：

• 接收标签字符串

  <rich-text nodes="{{html}}"></rich-text>
  

  Page({
    data: {
       html: '<div><span>鸿星尔克短裤男</span>鸿星尔克短裤男<span>鸿星尔克短裤男</span>鸿星尔克短裤男</div>'
    },
  })
  

• 接收对象数组

  data: {
    html: [
      {
        // 标签名
        name: "div",
        // 标签的属性，不支持id属性
        attrs: {
          class: "my-div",
          style: "color:red;"
        },
        // 子节点列表，结构与nodes一致
        children: [
          {
            name: "p",
            attrs: {},
            // 放文本
            children: [
              {
                type: "text",
                text: "hello"
              }
            ]
          }
        ]
      }
    ]
    },
  }
  

---

button

外观的属性：

• size：按钮的大小
  • default：默认大小
  • mini：小尺寸
• type：按钮的颜色
  • default：白色
  • primary：绿色
  • warn：红色
• disabled：是否禁用

(样式也可以自定义，只是提供一些便利属性)

• loading：名称前是否带loading图标
  

开发能力：
open-type的合法值：

• contact：打开客服对话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体消息
• share：转发当前小程序给微信朋友，不能分享到朋友圈
• getPhoneNumber：获取当前用户手机号，结合bindgetphonenumber事件使用，只有企业的小程序号有权限来获取用户手机号

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>

Page({
  getPhoneNumber(e) {
    console.log(e);
  }
})

(可能因为不是企业小程序号，就算是的话获得的手机号信息也是加密过的)

• getUserInfo：获取用户的个人信息，可以直接获取，不存在加密字段

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

Page({
  getUserInfo(e) {
    console.log(e);
  }
})

• launchApp：直接打开app
• openSetting：打开授权设置页
• feedback：打开“意见反馈”页面，用户可提交反馈内容并上传日志

---

icon图标

属性：

• type：图标的类型

success | success_no_circle | info | warn | waiting | cancel | download | search | clear

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

• size：图标的大小
• color：图标的颜色

---

radio单选框

radio标签要跟父元素radio-group来使用
value为选中的单选框的值
需要给radio-group绑定change事件

<radio-group bindchange="handleChange">
  <radio value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>

<view>您选中的是：{{gender}}</view>

Page({
  data: {
    gender: ""
  },
  handleChange(e) {
    // 获取单选框中的值
    let gender = e.detail.value;
    // 把值赋值给data中的数据
    this.setData({
      // gender: gender
      gender
    })
  }
})

---

checkbox多选框

checkbox标签要跟父元素checkbox-group来使用

<checkbox-group bindchange="handlChange">
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
  {{item.name}}
  </checkbox>
</checkbox-group>

<view>选中的水果：{{checkedList}}</view>

Page({
  data: {
    list: [
      {
      	id: 0,
      	name: "🍎",
      	value: "apple"
      },
      {
      	id: 1,
      	name: "🍇",
      	value: "grape"
      },
      {
      	id: 2,
      	name: "🍌",
      	value: "banana"
      },
    ],
    checkedList: []
  },
  handleChange(e) {
    // 获取被选中的复选框的值
    const checkedList = e.detail.value;
     // 把值赋值给data中的数据
    this.setData({
      checkedList
    })
  }
})