评论

Wux Weapp 快速开发一个小程序 - 02 navigationBar

撸一个合适的navigationBar

小程序自定义 navigationBar

Wux UI 正常跑起来后接下来应该做 navigationBar

自定义 navigationBar

小程序原生 navigationBar 不能满足项目需求,需要折腾一下。

现在用了 Wux UI 那 navbar 应该很舒服了,直接引用,嗯~~跟想象的差太多,好像不是一个意思,不香了~

之前项目也是自定义了 navigationBar 但是后来改需求加了很多功能,代码写的乱的很,今天从新撸一个。

需求:

  • 返回首页
  • 统一样式
  • 自定义返回箭头
  • title居左或居中
  • 产品酝酿中~

遵守不造轮子原则,有需求第一步应该是去社区找答案。

搜索文章

嗯~第一个就是,查看后发现功能有的多,不很适合我,pass。

很完善,有点复杂,没有耐心看~。。

我秀哥,直接上片段


简单的组件,值得一试


写的很清晰,值得一试

总结: 社区干货真的多!

开始自定义 navigationBar

各种尝试后选择了两个组件最后这两个,稍微改造了一下。
链接: https://developers.weixin.qq.com/community/develop/article/doc/000804d4ce4370bfdcb80cbdb51013

https://developers.weixin.qq.com/community/develop/article/doc/000862ff684eb80e52983b9ad52813

第一个组件的使用方法很清晰,但是貌似好多功能用不到

第二个就简单了,跟我之前项目用的差不多,撸起来。

const app = getApp()

Component({

  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    statusBarHeight: app.globalData.statusBarHeight + 'px',
    navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
  },

  methods: {
    backHome: function () {
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: pages.length
      })
    },
    back: function () {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

看起来就很舒服。back,home,在加一个textLeft就能满足需求了

第一种方案的计算方式

const MenuRect = wx.getMenuButtonBoundingClientRect()
const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height +MenuRect.top

第二种方案的计算方式

statusBarHeight,用来获取手机状态栏的高度,这个需要在全局app.js中的onLaunch,调用wx.getSystemInfo获取,navigationBarHeight+默认的高度,这个是设定整个导航栏的高度,

en~ 结合一下

const SysInfo = wx.getSystemInfoSync()
const MenuRect = wx.getMenuButtonBoundingClientRect()

Component({
  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    textLeft: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    statusBarHeight: '',
    navigationBarHeight: ''
  },
  attached() {
    this.initLayout();
  },

  methods: {
    initLayout() {
      const statusBarHeight = SysInfo.statusBarHeight;
      const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height
      this.setData({
        statusBarHeight: statusBarHeight + 'px',
        navigationBarHeight: `height:${height + statusBarHeight}px;line-height:${height}px;font-size:${SysInfo.fontSizeSetting - 2}pt;`,
      })
    },
    backHome: function () {
      console.log('你点击首页')
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: pages.length
      })
    },
    back: function () {
      console.log('你点击返回')
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

然后简单的修改下 wxml,返回+首页同时存在的情况应该不需要,一般都是单独存在。新增 textLeft 这个css。替换图标,从阿里妈妈找了两个图标。https://www.iconfont.cn/

修改过程中发现作者 title 使用的 position。我习惯用flex,测试发现会有1px的误差抖动,忽略了~~,较真儿的话让设计去比对下吧。。

然后小程序进行配置,以下复制自: https://developers.weixin.qq.com/community/develop/article/doc/000804d4ce4370bfdcb80cbdb51013

先说下两种配置方法:

①全局配置navigationStyle:

调试基础库>=1.9.0
微信客户端>=6.6.0
app.json

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "window": {
    "navigationStyle": "custom"
  } 
}
②单页面配置navigationStyle

调试基础库>=2.4.3
微信客户端版本>=7.0.0
自定义的页面.json

{
  "window": {
    "navigationStyle": "default"
  } 
}
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  }
}

两者的区别就是,全局配置放在app.json文件里,单页面配置放在自定义页面配置文件里

demo: https://github.com/Grainfills/Wux-Weapp

总结

基于以上两位老哥的代码进行了简单拼接,满足了我的需求。链接贴在了上面👆。再写小程序的时候已经没之前那么慌了,学会了借鉴大佬的代码,节省了很多头发,丰富了开发过程,感谢。接下来常见的功能应该还是借鉴大佬的思路或者用 wux 直接实现。

总之一句话社区干货真的多

最后一次编辑于  2019-12-17  
点赞 1
收藏
评论

1 个评论

  • 张生
    张生
    2019-12-11

    你出的干货多。

    2019-12-11
    赞同
    回复 1
    • 小满
      小满
      2019-12-12
      都是一些基础。谢谢🙏
      2019-12-12
      回复
登录 后发表内容