美文网首页
微信小程序公共页面封装

微信小程序公共页面封装

作者: 钱先生的瞎比比 | 来源:发表于2021-12-23 18:56 被阅读0次

小程序在公共全局的基础方法和变量这一块并不支持。已知的全局变量存取也不是很方便。

本文章能解决的问题:

  • 实现在所有page中 js,wxml页面里使用公共的data和方法;
  • 实现公共Page处理公共属性和逻辑(比如全局登录弹框);

1.使用minxi的概念将公共Page合并到每一个Page里面:

  • 新建 minxi.js 存放在until文件夹下。
const nativePage = Page
const lifecycle = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll']
let globalMixin = null

//全局mixin方法
wx.mixin = function(config){
  if(isType(config,'object')){
    globalMixin = config
  }
}
//原生Page代理
Page = function (config) {
  let mixins = config.mixins
  //加入全局mixin
  if(globalMixin){                                                         
    (mixins || (mixins=[])).unshift(globalMixin)
  }
  if (isType(mixins, 'array') && mixins.length > 0) {
    Reflect.deleteProperty(config, 'mixins')
    merge(mixins, config)
  }
  nativePage(config)
}

function merge(mixins, config) {
    mixins.forEach(mixin => {
      if (isType(mixin, 'object')) {
        //合并data、生命周期以及其他数据
        Object.keys(mixin).forEach(key => {
          if (key === 'data') {
            config[key] = Object.assign({}, mixin[key], config[key])
          } else if (lifecycle.includes(key)) {
            let nativeLifecycle = config[key]
            config[key] = function () {
              let arg = Array.prototype.slice.call(arguments)
              mixin[key].call(this, arg)
              return nativeLifecycle && nativeLifecycle.call(this, arg)
            }
          } else {
            config[key] = mixin[key]
          }
        })
      }
    })
  }
  
  //判断类型工具
  function isType(target, type) {
    let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
    type = type.toLowerCase()
    return targetType === type
  }
  • 新建 common-page.js ,用于处理公共逻辑
// 此为公共参数 方法区
//添加全局公共参数、方法 :这里面的方法参数将合并到每一个Page里面 优先级比所属Page低

export const mixinStr = {
    data: {
      comm_showLoginDialog: false, //控制登录弹框
      comm_imageUrl: "https://***.com/images", //小程序图片资源目录
      comm_pageInfo:{ //前端首次加载页面信息
        "pageNum": 1,
        "pageSize": 10,
        "total": 1,
        "totalPage": 1,
      }
    },
    onReady:function () {
      var mApp = getApp()
    this.setData({
      comm_globalData: mApp.globalData,
    })
    },
    comm_goLogin() {//唤起登录
      this.setData({
        comm_showLoginDialog: true
      })
    },
    comm_resetPageInfo(){ //重置页面属性
      this.setData({
        comm_pageInfo:{
          "pageNum": 1,
          "pageSize": 10,
          "total": 1,
          "totalPage": 1,
        } 
      })
    },
    comm_addPageNum(){ //页面加一
      var mPageinfo = this.data.comm_pageInfo
      mPageinfo.pageNum = mPageinfo.pageNum + 1
      this.setData({
        comm_pageInfo: mPageinfo
      })
    },
    //跳转webview
    comm_goWebPage(url){
      wx.navigateTo({
        url: '../../pages/webview/webview?url='+url,
      })
    },
    //显示普通toast
    comm_showToast(str){
      if (str != null && str != undefined && str != '') {
        wx.showToast({
          title: str,
          icon: "none"
        })
      }
    },
    //显示成功toast
    comm_showSuccessToast(str){
      if (str != null && str != undefined && str != '') {
        wx.showToast({
          title: str,
          icon:"success"
        })
      }
    },
    //显示失败toast
    comm_showFailToast(str){
      if (str != null && str != undefined && str != '') {
        wx.showToast({
          title: str,
          icon:"error"
        })
      }
    },
    //返回
    comm_onBackBtnClick(){
      wx.navigateBack({
        delta: 0,
      })
    }

  }
  • 然后在app.js 里面调用 minxis.js中minxi方法,这样所有的Page将会合并我们的common-page.js中的内容,这样我们就可以在所有的Page里无缝使用公共方法和属性了
//添加全局公共参数、方法 :这里面的方法参数将合并到每一个Page里面
 require('./utils/mixins.js')
wx.mixin(mixinStr)
...
App({
...
})

相关文章

网友评论

      本文标题:微信小程序公共页面封装

      本文链接:https://www.haomeiwen.com/subject/pdfkqrtx.html