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

微信小程序公共页面封装

作者: 钱先生的瞎比比 | 来源:发表于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