微信小程序 —— 第二天

微信小程序 - Unit02

1.WXSS

WXSS(Weixin Style Sheets)，是一套样式语言，用于描述WXML的组件样式。

WXSS具备CSS的大部分特性，但其进行扩展：

· 尺寸单位

· 样式导入

1.1 尺寸单位

rpx(Response Pixel)，响应式像素，可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

1.2 样式导入

样式导入的语句是：

@import "wxss文件的路径及名称";

2.组件

· 关于组件(属性)的说明

A.组件属性既可以采用短横线分隔也可以采用驼峰标记法

B.针对布尔属性时，无论其值书写为任何结果都认为是true，除非该属性不存在(如果在进行双向数据绑定时，则需要true或 false)

C.小程序组件严格遵守XML语法结构，单标记必须以/>结尾

· <view>组件

<view>组件是视图容器组件，其语法结构是：

<view
  hover-class="按下去的样式类名称"
  hover-start-time="按住后多久出现点击态(毫秒)"
  hover-stay-time="点击态保留时间(毫秒)"
  hover-stop-propagation="是否阻止冒泡">
  ...  
</view>

· <image>组件

<image>组件为图片组件，支持GIF、JPG、PNG、SVG、WEBP格式的图片，语法结构是：

<image 
	src="图片的URL地址" 
    lazy-load="是否采用懒加载"
    show-menu-by-longpress="是否开启长按显示识别小程序码的菜单">
</image>

webp图像格式是Google推荐使用的一种图像格式， 其体积约为JPG文件的2/3

· <swiper>组件

<swiper>组件为滑块视图容器，其语法结构是：

<swiper
    autoplay="是否自动播放"
    indicator-dots="是否显示指示点"
    indicator-color="指示点正常显示的颜色"
    indicator-active-color="指示点选定时的颜色"
    circular="是否采用衔接滑动"
    interval="停留时间(毫秒)"
    duration="切换的时长(毫秒)">
    <swiper-item>...</swiper-item>
    ...
</swiper>

· <text>组件

<text>组件是文本组件，其语法结构是：

<text decode="是否解码" user-select="文本是否可选">...</text>

解码支持实体(HTMLEntity)的有：>、 <、&、'、 、 和 

· <navigator>组件

<navigator>组件是页面链接组件，其语法结构是：

<navigator url="当前小程序内的页面路径" open-type="跳转方式">
    ...
</navigator>

跳转方式有：

· navigate，默认跳转方式，可以跳转到非tabBar页面，存在"返回"图标

· navigateBack，作用与"返回"图标是相同的，返回上一级页面

switchTab，可以跳转到tabBar页面

redirect

reLaunch

· <button>组件

<button>组件为按钮组件，其语法结构是：

<button 
	type="按钮类型"
    size="按钮尺寸"
    plain="是否镂空"
    disabled="是否禁用"
	loading="是否带有加载图标">
    ...
</button>

按钮类型有：primary(主要)、default(默认的)、warn(警告)

按钮尺寸有：default(默认)、mini(小的)

3.事件绑定

事件是视图层到逻辑层的通讯方式，事件可以将用户的行为反馈到逻辑层进行处理。

1.1 事件列表

·touchstart，手指触屏开始

· touchmove，手指触屏后移动

· touchend，手指触屏动作结束

· touchcancel，手指触屏动作被打断，如来电提醒

· tap，轻敲（手指触屏后马上离开）

· longtap，长敲(手指触屏350ms后离开)

· longpress，长敲(手指触屏350ms后离开)

1.2 事件绑定

<组件名称 bind事件名称="函数名称"></组件名称>
<组件名称 bind:事件名称="函数名称"></组件名称>
<组件名称 catch事件名称="函数名称"></组件名称>

小程序进行事件绑定时，函数名称严禁出现小括号！！！

bind:事件名称不能应用于原生组件，而bind事件名称可应用于所有组件。

catch事件名称也不能应用于原生组件。

bind事件名称和bind:事件名称不能阻止事件冒泡；而catch事件名称可以阻止事件冒泡。

longpress不会触发tap事件；而longtap会触发tap事件，建议使用longpress取代longtap。

原生组件是手机操作系统自带的组件（键盘、照像机等）。

如：

<button bindtap="f1">按钮</button>

<button bind:tap="f2">按钮</button>

<button catchtap="f3">按钮</button>

Vue.js与小程序页面的结构对比

Vue.js

<script>
    export default{
        data:{
            return {
    			//初始化数据        	
	        }
        },
        methods:{
            //方法列表
        }
    }
</script>

小程序页面

Page({
	//初始化数据
	data:{
		
	},
    //方法列表
})

1.3 数据传递

当对组件进行事件绑定时，事件处理函数严禁出现小括号，形如：

<button type="primary" bindtap="f5">按钮</button>

现在的问题就是：如何将参数传递到自定义函数的内部？

针对**原生事件(如touchstart、tap等)**只能通过以两步实现：

第一步：首先组件上通过data-*来实现自定义属性

<button 
	type="primary" 
    bindtap="f1" 
    data-username="张三">
	原生组件传参
</button>

第二步：在事件处理函数中传入event参数，代表事件对象，然后在函数体内部通过：event.target.dataset.*进行获取操作

Page({
    f1(event){
        let username = event.target.dataset.username;
        console.log(username);
    }
})