微信小程序

微信小程序组件库

小程序的页面内容包含什么取决于 wxml 中定义的组件. 小程序规定, 在 wxml 中使用微信官方定义的组件 库, 原生 html5 的标签不可用.

关于小程序组件的属性

1. 如果在设置小程序组件的属性时遇到了布尔类型属性, 直接设置true或false, 都将会当做是普通字符 串来处理, 它们都将会被解析为true. 除非设置空字符串"". 但是这么写有点野. 小程序推荐:

<view hover-stop-propagation></view>

<view hover-stop-propagation="{{true}}"></view>

2. 小程序组件的属性的属性名默认支持两种命名方法: 短横线命名法/驼峰命名法. 这两种属性名格式 都将被小程序解析.

<view hover-stop-propagation=""></view> 属性生效

<view hoverStopPropagation=""></view> 属性生效
 

view 组件

view 组件属于视图容器组件, 在 view 组件中可以包含其他组件. 基本使用方法如下:

<view class="" 定义组件的样式类名

hover-class="" 定义组件点击后的样式类名

hover-start-time="50"

hover-stay-time="350"

hover-stop-propagation=""  是否阻止点击态的冒泡>

</view>

测试: 编写测试页面: pages/view/view . 在该页面中测试 view 的使用.

image 组件

image 组件用于显示图片. 基本使用方法如下:

<image src=""   路径

mode=""  图像的裁切模式

lazy-load   是否采用懒加载

show-menu-by-longpress   是否在长按时弹出操作菜单></image>

案例: pages/image/image .

默认情况下, 小程序为 image 组件设置默认大小: 320px * 240px . 需要我们手动控制 image 的大小. 也 可以通过 mode 属性控制裁剪模式.

小程序中的图像适配问题

适配原则: 无论任何大小的屏幕, 布局不要乱. wxml 提供了一个尺寸单位: rpx .

rpx 响应式像素

响应式像素是一个"动态尺寸单位", 在不同的屏幕尺寸下, 1rpx 会换算成不同的 px . 屏幕越大, 换算的 px 结果就越大. 这种换算关系的设计原则: 小程序规定, 无论任何尺寸的屏幕, 宽度都是 750rpx .

在工作中, 通常情况下会使用 iphone6/7/8/x 作为设计初稿. 它们的宽度都是 375px . 在小程序平台下都 相当于 750rpx . 所以 iphone6 平台下 rpx 的换算关系: 1px = 2rpx .

Swiper 组件

Swiper 组件用于实现轮播图

<swiper

indicator-dots="{{true}}"

indicator-color="#0003"

indicator-active-color="#1c1"

autoplay

circular

duration="200"

current="1"

vertical

bindchange="handlechange">

<swiper-item>图片</swiper-item>

<swiper-item>图片</swiper-item>

<swiper-item>图片</swiper-item>

........

</swiper>

案例: pages/swiper/swiper ， 测试轮播图。

应用题：

原始图片尺寸大小: 宽: 1242px , 高: 698px .

显示图片尺寸宽度: 750rpx , 问:图片高度应该是多少才可以保证等比例缩放.

小程序官方组件除了一些自定义属性外, 还有一些自定义事件, 例如 swiper 的 bindchange 属性(自定义 事件)就用于监听轮播图 current 的改变. 如果轮播图切换了某一页, 就会触发 change 事件. 若在组件上 绑定的 change 事件处理:

<swiper bindchange="doChange"></swiper>

将会在触发了 change 事件后, 执行该方法(方法在 js 中定义):

Page({

data: {}, doChange(){ ... }

})

text 组件

text 组件用于在页面中显示文字:

<text space=""  定义空格的显示

user-select=""  指定是否允许用户选择复制

decode=""  是否对文本中html实体进行解析

>内容文本</text>

navigator 组件

navigator 为导航组件, 类似于 html 中 a 标签. 用于点击后跳转到一个新页面, 具体语法:

<navigator url="/pages/swiper/swiper" open-type="打开目标页面的方式">

点我跳转到xxxx

</navigator>

open-type:

1. navigate 默认的跳转方式. 可以从当前页跳转到非 tabbar 页面(内容不包含底部选项卡的 页面, 即没有在 app.json 中的 tabbar 配置项范围内的页面). 跳转的过程将会保留当前页, 创 建目标页, 然后显示目标页实现跳转.

2. navigateBack 返回上一页. 通过 delta 属性可以返回上 n 页. 这个过程本质上是销毁当前 页, 上一页自然而然的就显示出来了.

3. redirect 意为 重定向 . 通过 redirect 方式跳转到目标页时, 将会销毁当前页, 创建目标页, 然后执行跳转.

4. switchTab 切换选项卡 . 这种方式可以跳转到 tabbar 页面. 但是, 一旦使用这种方式跳转, 将会销毁所有的非 tabbar 页面.

5. relaunch 重新启动 . 这种方式可以跳转到任何页面. 但是这种做法将会销毁所有页面, 然后 重新启动应用, 打开目标页.

案例:新建3个页面: pages/a/a pages/b/b pages/c/c .

scroll-view 组件

scroll-view 用于表示一个可以滚动的视图容器. 如果页面中有需要放置一个带滚动条的视图容器时, 就 可以使用 scroll-view 来实现. 只有内容的大小超出 scroll-view 容器的范围时, 才具备出现滚动条的条 件. 基本用法:

<scroll-view style="width:xx;height:xxx;"

scroll-x="{{true}}"

scroll-y="{{true}}">

内容

</scroll-view>