课堂学习:封装函数 可滚动视图区域 请求数据并加载
一、scroll-view:
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
scroll-x 允许横向滚动
scroll-y 允许纵向滚动
二、封装函数后 导入和导出
模块化语法有两种:1.commonjs规范,2.es6规范
nodejs环境采用的就是commonjs规范
采用exports 或 module.exports 导出成员,采用require() 导入成员
微信小程序支持commonjs规范,同时还支持官方的ES6规范
采用export 导出成员,采用import 导入成员
一般的,我们在utils中创建若干个js文件,不同js文件里分别定义并导出(export)不同的函数封装号的方法,且注册到全局对象中(wx.xxx=xxx)。接着我们在utils/index.js文件中导入这些js文件,再把utils中的index.js文件导入到全局js文件app.js中。
// 导入具体的初始化文件
import './msg'
import './util'
import './request'
// 导入初始化文件
import './utils/index'
举例:
// 定义消息框方法,并导出
export let $msg = (title,icon='success',duration=1500)=>{
// showToast()方法,打开消息框
wx.showToast({
//消息框的内容
title,
//消息框的图标
icon,
//消息框显示时间
duration,
//显示遮罩层
mask:true
})
}
// 定义确认框方法,并导出
export let $confirm = (content)=>{
return new Promise((resolve)=>{
//showModal()方法,打开确认框
wx.showModal({
content,
success:({confirm})=>{
//confirm返回true,表示点击的是确定按钮,否则是取消按钮
if(confirm){
resolve()
}
}
})
})
}
// 将消息框相关的方法,注册到全局对象wx中
wx.$msg = $msg
wx.$confirm = $confirm
//定义一个请求方法
export let $request = (url,data={},method='GET')=>{
return new Promise((resolve)=>{
//发送ajax请求
wx.request({
//请求地址
url,
//请求参数
data,
//请求方式
method,
//请求成功的回调
success:({data})=>{
resolve(data)
},
})
})
}
// 定义一个get请求方法
export let $get = (url,data={})=>{
return $request(url,data,'GET')
}
// 定义一个post请求方法
export let $post = (url,data={})=>{
return $request(url,data,'POST')
}
// 将请求方法注册给wx对象
wx.$request = $request
wx.$get = $get
wx.$post = $post