微信小程序开发—— 封装方法 & 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:允许纵向滚动。

   

你可能感兴趣的:(微信小程序开发—— 封装方法 & wx.request请求 & WXS & 确认框和消息框 & scroll-view滚动条)