微信小程序自定义标题

添加自定义头部分为全局和指定页面设置自定义头部

1.在全局添加自定义头部

在app.json文件中添加

"window": {
    "navigationStyle": "custom"
}

2.在指定页面设置自定义头部

在index.json文件中添加

"navigationStyle": "custom"

仿写大众点评的搜索栏

顶部栏适配任意机型: wx.getMenuButtonBoundingClientRect() 核心API获取胶囊按钮的宽高位置信息,返回的单位是px

top: 胶囊到顶部的距离(单位px)
left: 屏幕左侧到胶囊左侧的距离(单位px)

屏幕左侧到胶囊左侧的距离就是盒子的宽度

点击搜索跳转到真正的搜索页面

获取用户头像/昵称

1.wx.getUserProfile 需要绑定点击事件使用(自2022年10月25日后上线的小程序将无法使用)

  buttontap(e) {
    //判断是否点击授权
    if (e.detail.index) {
      this.setData({
        show: false
      })
      //获取用户信息
      wx.getUserProfile({
        desc: '获取加油站优惠信息',
        //成功的回调
        success: (data) => {
          console.log(data, this);
          this.setData({
            show: false,
            mengcheng: false,
            userInfo: data.userInfo
          })
        }
      })
    }
  },

扫码功能

1.wx.scanCode 调起客户端扫码界面进行扫码

 scanCode(){
    wx.scanCode({
      //是否只能从相机扫码，不允许从相册选择图片
      onlyFromCamera: false,
      //码的类型如、一维码、二维码、条码
      scanType:['barCode', 'qrCode','datamatrix','pdf417'],
      success(data){
        //成功的返回值
        console.log(data);
      }
    })
  },

小程序自定义头部