UI组件

chanchaw大约 5 分钟mini

button

绑定事件看下面代码

<!-- 下面是 wxml 的代码，属性 plain 是镂空效果（有边框的按钮）-->
<button type="primary" bind:tap="handleTap" size="mini" plain>点击我</button>
<!-- 下面是 js 文件代码 -->
Page({
	handleTap(event){
		console.log(event)
	}
})

form

注意

不需要传输给后端的数据（仅用于展示给用户看）也要放在表单的双标签内，否则使用双大括号的绑定不会显示数据

初始赋值

在表单的每个元素上通过 mustash 绑定数据进行初始赋值，例如：

<form bindsubmit="formSubmit">
    <view class="form-item" hidden="true">
        <text class="head">openId：</text>
       <input type="text" name="openId" value="{{userInfo.openId}}"/>
    </view>
</form>

表单所在组件初始化结束拿到数据后会自动更新到UI

顶底布局

表单排版中将按钮显示在纵向的底部，可通过使用 flex 实现，要在 form 内部先包裹一个容器 view 再将表单分为两部分：所有表单项包裹在一个容器，底部多个按钮包裹在一个容器。代码案例如下：

picker

案例代码见visitoropen in new window 的页面 index 中的部门

input

小程序的 input 不同于 html 的，它默认没有边框，所以需要自己定义全局样式(在 app.scss)

input {
    border: 1px solid #ccc;
}

获取用户输入的值

<!-- wxml 中添加一个 input 元素 -->
<input type="text" bind:input="getInputVal"/>
<!-- js中使用事件接受用户输入的值 -->
Page({
  getInputVal(event){
    console.log(event)
    console.log(event.detail.value)
  },
})

view

相当于 html 中的 div，是块级元素，占据一行。

swiper 和 swipere-item

image

四个属性

src - 图片资源地址
mode - 图片裁剪、缩放的模式
show-menu-by-longpress - 长按图片显示菜单
lazy-load - 图片懒加载

注意：image组件默认宽度320px，默认高度=240px。即使不给 src 属性设置图片地址，该组件也占有宽高

text

属性介绍

user-select - 文本是否可选，用于长按选择文本
space - 控制可显示乱序的空格

注意事项：出了文本节点以为的其他节点都无法长按选中，text组件内只支持 text 嵌套

navigator

两个属性

url - 要跳转到的目标连接
open-type - 跳转方式
- navigate - 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
- redirect - 关闭当前页面，跳转到应用内的某个页面。但是不能跳转到 tabbar 页面
- switchTab - 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- reLaunch - 关闭所有页面，打开到应用内的某个页面
- navigateBack - 关闭当前页面，返回上一页面或者多级页面

注意：路径携带参数的方式同 html，在生命周期函数 onLoad(options) 中获取传递的参数，open-type="switchTab" 时不支持传参

scroll-view

字体图标

介绍使用阿里巴巴的字体图标的方法，先选择多个合适的图标到自己创建的项目中（在iconfont网站上的自己的项目），按照下面图片的步骤生成样式代码

将上面的样式代码拷贝到小程序的文件 iconfont/iconfont.scss 中（注意 iconfont 目录和 app.ts 文件同级别），然后在 app.scss 中导入该样式文件

@import "./iconfont/iconfont.scss";

最后在业务组件中引用字体图标，注意下面的 class 中是先引用通用类名 iconfont 在使用具体的每个图标的类

<text><text class="iconfont icon-navicon-chps" />同城配送</text>

注意上图中选择使用 Base64 是为了避免小程序开发的IDE中在使用字体图标时会有个报错：渲染层网络层错误使用 Base64 之后解决该报错（即使有该报错也不影响使用）

背景图片

通过属性 background-image 可以设置元素 view 的背景图片，注意小程序中不支持本地图片，只可以使用网络图片或者 Base64 图片。例如下面代码

<!-- 在 wxml 中添加下面元素 -->
<view class="bg-image"></view>
<!-- 在 wxss 或者 scss 中添加下面样式 -->
.bg-image {
	height: 400rpx;
	background-image: url(http://图片地址);
	background-image: url(base64字符串);
}

加载提示框

wx.showLoading({
    title: '数据正在加载中...',// 显示给用户的文案
    mask: true, // 显示加载提示框时同时显示透明图层，用户不可点击
})
// 关闭加载提示
wx.hideLoading()

showModal 模态窗

跟 html 中的模态窗一样是异步的

// 官方文档见：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
// 下面是官方案例
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  showCancel: false,// 表示不显示取消按钮
  success (res) {// 成功回调
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  },
  fail: err => {},// 失败回调
  complete: () => {}// 执行完毕的回调
})


async handleModel(){
    const res = await wx.showModal({
        title: '提示',
        content: '确定要删除吗？'
    })
    console.log('模态窗响应结果：', res)
},
 
// 也可以使用 Promise 方式
handleModel(){
  wx.showModal({
    title: '提示',
    content: '确定要删除吗？'
  }).then(res => {
    console.log('模态窗的响应结果：', res)
  }).catch(err => {
    console.log('模态窗出现异常：', err)
  })
},
    
// 只起到提示作用
wx.showModal({
	editable:false,
	showCancel: false,
	title: '提示',
	content: '网速较慢，请稍等片刻再操作！',
	success: res => this.initPage()
})

消息提示

wx.showToast({
    title: '删除成功！',
    icon: 'success',// 多个类型
    duration: 2000 // 持续2秒
})

UI组件

# button

# form

# 注意

# 初始赋值

# 顶底布局

# picker

# input

# view

# swiper 和 swipere-item

# image

# text

# navigator

# scroll-view

# 字体图标

# 背景图片

# 加载提示框

# showModal 模态窗

# 消息提示