微信小程序开发—— 封装方法 & wx.request请求 & WXS & 确认框和消息框 & scroll-view滚动条

一、封装方法

1、封装方法并导出

将封装的方法放到util目录下的js文件中。可以新建js文件，也可以直接写在util.js文件中。
通过export导出封装的方法。

（1）确认框方法

在新建的msg.js文件中定义确认框方法，并导出。

export let $confirm = (content)=>{
  return new Promise(resolve=>{
    wx.showModal({
      content,
      success:({confirm})=>{
        if(confirm){
          resolve()
        }
      }
    })
  })
}

（2）消息框方法

在新建的msg.js文件中定义消息框方法，并导出。

export let $msg = (title,icon='success',duration=1500)=>{
  wx.showToast({
    title,
    icon,
    duration,
    mask:true
  })
}

（3）获取事件参数的方法

在新建的msg.js文件中定义获取事件参数方法，并导出。

export let $key = (e)=>{
  return e.currentTarget.dataset
}

2、导入方法

import是ES6的导入语句。

// 导入msg文件（模块）中的指定成员
import {$msg,$confirm,$key} from '../../utils/msg'

3、将方法注册给全局对象wx

直接在页面使用import导入的方法，只能在当前页面使用。为了实现在所有页面中都可以使用，可以将方法注册给全局对象wx。
wx对象是微信小程序的全局对象，在任何地方都可以使用。

（1）注册语句

wx.$msg = $msg
wx.$confirm = $confirm

（2）在app.js入口文件中导入

注意：注册给wx对象的方法，需要在app.js文件中导入，才可使用。这是因为app.js 会先于其他页面执行，所以比较适合处理一些注册函数。

// 导入初始化文件
import './utils/index'

（3）调用方法

wx.方法名(参数)

wx.$msg('删除成功')

二、wx对象发起请求

1、wx.request() 发送请求

 wx.request({
      // 请求接口地址
      url: '接口地址',
      // 请求参数
      data:{},
      // 请求方式 GET/POST
      method:"GET",
      // 请求成功后的回调
      success:({data})=>{
        resolve(data)
      },
      // 请求完成后的回调
      complete:()=>{
         console.log('请求完成');
      }
    })

注意：小程序实际使用中，请求的接口必须都是已经配置过的接口，在微信公众平台中，选择 开发管理-服务器域名 进行配置。

开发阶段，可以直接在开发工具中设置“不校验合法域名”，暂不配置。

2、封装请求方法

为了方便请求，可以对wx.request做一个简单的封装，这样我们再调用的时候就方便了许多。

（1）定义请求方法

export let $request = (url,data={},method='GET')=>{
  return new Promise((resolve)=>{
    wx.request({
      url,
      data,
      method,
      success:({data})=>{
        resolve(data)
      },
    })
  })
}

（2）定义get请求方法

export let $get = (url,data={})=>{
   return $request(url,data,'GET')
}

（3）定义post请求方法

export let $post = (url,data={})=>{
   return $request(url,data,'POST')
}

三、格式化时间 & WXS

将时间戳进行格式化，转化成我们需要的时间格式。
例如：将时间戳 1605010831402 格式化成 2020-11-10 20:20:31

1、在后台对数据里的时间戳进行处理

formatTime是utils.js文件中自带的格式化时间方法，我们可以将该方法注册给wx对象，就能直接调用。

let data= await wx.$get('Subject/GetSubjects',{section_id:id})
 data = data.map(r=>{
  return {
    Createtime: wx.$formatTime(new Date(parseInt(r.Createtime)))
  }
})

2、WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
在wxml页面中，只能在插值{{ }}中写简单的js表达式，而不能调用方法。wxs就是为了能在页面中使用js而存在的。

（1）语法

① 变量必须使用var声明，不支持const或者let。
② 不支持箭头函数。
③ 不可以使用模板字符串，字符串连接用+ 。
④ 每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。
通过 module.exports 导出内部的私有变量与函数。
⑤ 标签中，module属性值定义标签的模块名；src属性值引入.wxs文件的相对路径。
⑥ 生成date对象使用 getDate()，返回一个当前时间的对象。不使用new Date()。

（2）编写在wxml文件中的 标签内

 var formatTime = function(date) {
    date = getDate(parseInt(date))
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
var formatNumber =function(n) {
   n = n.toString()
   return n[1] ? n : '0' + n
}
module.exports = {
   formatTime:formatTime  
}
 

{{tools.formatTime(item.Createtime)}}

（3）编写在wxs文件中，再导入wxml文件

{{tools.formatTime(item.Createtime)}}

四、确认框和消息框

1、wx.showModal() 确认框

title：提示的标题
content：提示的内容
success：接口调用成功的回调函数。回调函数中的confirm属性返回true，表示点击的是确定按钮，否则是取消按钮。

 wx.showModal({
      content:'是否确定删除',
      success:({confirm})=>{
      //confirm返回true，表示点击的是确定按钮，否则是取消按钮
        if(confirm){
            console.log("删除成功");
         }
 }) 

效果图：

2、wx.showToast() 显示消息提示框

title：提示的内容
icon：图标
duration：消息提示框的显示时间
mask：是否显示透明蒙层，防止触摸穿透

   wx.showToast({
        title: '删除成功',
        icon:"success",
        duration:1500,
        mask:true
   })

效果图：

五、scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
scroll-x：允许横向滚动。
scroll-y：允许纵向滚动。