朋友介绍很好用的封装方法

函数封装,一节省编写代码的时间,二不容易出现错误,三节省代码,简洁,便于后期维护。
希望对于新手的你能够有帮助!一起加油啊!
1.wx.navigateTo()
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

可封装函数为:

//跳转新页面页面,保留当前页面。
function navigateTo(url) {
    wx.navigateTo({
        url: url
    })
}
2.wx.redirectTo()
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

可封装函数为:

//跳转新页面页面,关闭当前页面。
function redirectTo(url) {
    wx.redirectTo({
        url: url
    })
}
3.wx.switchTab()
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

可封装函数为:

//关闭其他所有非 tabBar 页面,跳转到 tabBar 页面
function reLaunch(url) {  //url必须为tabbar页面的路径,否则没有效果
  wx.switchTab({
    url: url
  })
}
4.wx.navigateBack()
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

可封装函数为:

//返回页面
function navigateBack(delta) {  //注意:此处的delta为number(数字)
    wx.navigateBack({
        delta: delta
    })
}
 另接getCurrentPages的函数封装方法

//获取当前页url
function getCurrentPageUrl() {
  var pages = getCurrentPages()                //获取加载的页面
  var currentPage = pages[pages.length - 1]    //获取当前页面的对象
  var url = currentPage.route                  //当前页面url
  return url
}
5.wx.reLaunch()
关闭所有页面,打开到应用内的某个页面

可封装函数为:

//关闭所有页面,打开到应用某个页面
function reLaunch(url) {
    wx.reLaunch({
        url: url
    })
}
6.wx.request()
发起 HTTPS 网络请求。

可封装函数为:

function ajaxRequest(meth, url, data) {
  //添加通过用的参数,如api_key api_token,待完善
  var promise = new Promise((resolve, reject) => {
    //init
    var that = this;
    //增加公共参数
    data.api_key = api_key;
    data.api_token = api_token;
    var postData = data;
    /*
    //自动添加签名字段到postData,makeSign(obj)是一个自定义的生成签名字符串的函数
    postData.signature = that.makeSign(postData);
    */
    // 网络请求
    wx.request({
      url: url,
      data: postData,
      method: meth,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) { //服务器返回数据
        if (res.statusCode != 200) {
          form.errorMsg('请求出错statusCode' + res.statusCode)
          wx.hideLoading();
        } else if (res.data.err_code != 0) { //返回失败,显示错误提示
          
            form.errorMsg(res.data.err_msg)
            wx.hideLoading();
        } else { //返回成功
          resolve(res.data.data);
          wx.hideLoading();
        }
      },
      error: function (e) {
        form.errorMsg('网络出错')
        if (reject) reject(e);
        wx.hideLoading();
      }
    })
  });
  return promise;
}
 
 
 
 
//调用如下,仅供参考:
 
//发起post请求,使用方式如下:
// ajaxPost('http://接口网址', data).then((res) => {
//   console.log(res);//成功处理
//   wx.hideLoading();
// }).catch((errMsg) => {
//   console.log(errMsg);//错误处理
//   wx.hideLoading();
// });
//封装post请求
function ajaxPost(url, data) {
  return ajaxRequest('POST', url, data)
}
//封装get请求
function ajaxGet(url, data) {
  return ajaxRequest('GET', url, data)
}
 
 
7.wx.showLoading()
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

可封装函数为:

//加载等待提示,title提示,mask是否透明层bool
function showLoading(title, mask) {
  wx.showLoading({
    title: title,
    mask: mask
  })
}
 7.1隐藏loading提示框
可封装函数为:

function hideLoading() {
  wx.hideLoading()
}
8.wx.showToast()
显示消息提示框

可封装函数为:

//加载模态框,title 提示的内容, icon 图标(success,loading,none), duration 提示的延迟时间 mask是否显示透明层, image 自定义图标的本地路径,image 的优先级高于 icon
function showToast(title, icon, duration){
   wx.showToast({
      title: title,
      icon: icon,
      image: image,
      duration: duration,
      mask: mask
    })   
}
 
 
 8.1隐藏消息提示框
可封装函数为:

function showToast() {
  wx.showToast()
}
9. wx.pageScrollTo()
将页面滚动到目标位置

可封装函数为:

//滚动页面到某一个位置 scrollTop 滚动到页面的目标位置,单位 px,duration 滚动动画的时长,单位 ms
function pageScrollTo(scrollTop, duration){
   wx.pageScrollTo({
      scrollTop: scrollTop,
      duration: duration
   })  
}
10.wx.showModal()
显示模态对话框(俗称模态框)

可封装函数为:

//title 提示的标题,content 提示的内容,showCancel 是否显示取消按钮,cancelText 取消按钮的文字,最多 4 个字符,confirmText 确认按钮的文字,最多 4 个字符
function showModal(title, content, showCancel, cancelText, confirmText){
  wx.showModal({
    title: title,
    content: content,
    showCancel: showCancel,   //可设置可不设置
    cancelText: cancelText,   //可设置可不设置
    confirmText: confirmText, //可设置可不设置
  })
}
11.wx.previewImage()
全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

//current(string) 当前显示图片的http链接,urls(array) 需要预览的图片http链接列表
function previewImage(current, urls){
  wx.previewImage({
    current: current,
    urls: urls 
  })
}
另加两个不常用的跳转到其他小程序和返回到之前的小程序的方法
12.wx.navigateToMiniProgram()
打开另一个小程序

可封装函数为:

//appId 要打开的小程序appId, path 打开的页面路径,如果为空则打开首页(path 中 ? 后面的数据可以再小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数当中获取到), extraData(object) 需要传递给目标小程序的数据(目标小程序可在 App.onLaunch,App.onShow 中获取到传过来的数据), envVersion 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。
function navigateToMiniProgram(appId, path, extraData, envVersion){
  wx.navigateToMiniProgram({
    appId: appId,
    path: path,
    extraData: extraData,
    envVersion: envVersion
  })
}
13.wx.navigateBackMiniProgram()
返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功

注意:微信客户端 iOS 6.5.9,Android 6.5.10 及以上版本支持

可封装函数为:

//extraData(object) 需要返回给上一个小程序的数据,上一个小程序可在 App.onShow 中获取到这份数据。
function navigateBackMiniProgram(extraData){
  wx.navigateBackMiniProgram({
    extraData: extraData,
  })
}
14.手机号验证封装
可封装的函数为:

//验证手机号
function checkPhone(phone) {
    var reg = /^1[34578]\d{9}$/;
    if (reg.test(phone)) {
        return true
    } else {
        return false
    }
}
15.邮箱验证封装
可封装的函数为:

//验证邮箱
function checkMail(mail) {
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    if (reg.test(mail)) {
        return true
    } else {
        return false
    }
}
16.随机数封装
可封装的函数为:

//产生随机数函数
function RandNum(n) {
  var rnd = "";
  for (var i = 0; i < n; i++)
    rnd += Math.floor(Math.random() * 10);
  return rnd;
}
17.转义特殊字符
可封装的函数为:

//转义特殊字符
function replaceSpecialChar(url) {
  url = url.replace(/&quot;/g, '"');
  url = url.replace(/&amp;/g, '&');
  url = url.replace(/&lt;/g, '<');
  url = url.replace(/&gt;/g, '>');
  url = url.replace(/&nbsp;/g, ' ');
  console.log("转义字符", url);
  return url;
}
 

以上可整合为一下redirect.js里,具体如下:五例为准其他的按照这五例可以比飘画葫芦(懒得加了,嘿嘿嘿!)
//跳转新页面页面,保留当前页面。
function navigateTo(url) {
    wx.navigateTo({
        url: url
    })
}
 
//返回页面
function navigateBack(delta) {
    wx.navigateBack({
        delta: delta
    })
}
 
//跳转新页面页面,关闭当前页面。
function redirectTo(url) {
    wx.redirectTo({
        url: url
    })
}
 
//关闭所有页面,打开到应用某个页面
function reLaunch(url) {
    wx.reLaunch({
        url: url
    })
}
 
//获取当前页url
function getCurrentPageUrl() {
  var pages = getCurrentPages()                //获取加载的页面
  var currentPage = pages[pages.length - 1]    //获取当前页面的对象
  var url = currentPage.route                  //当前页面url
  return url
}
 
module.exports = {             //抛出封装好的函数方法,以便在其他需要的页面进行引入调用。
    navigateTo: navigateTo,
    navigateBack: navigateBack,
    redirectTo: redirectTo,
    reLaunch: reLaunch,
    getCurrentPageUrl: getCurrentPageUrl,
}
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值