小程序开发笔记

自定义头部导航

1. 页面 .json 文件设置 "navigationStyle": "custom"
2. component 文件夹下新建自定义组件（搭配vant-weapp组件 (opens new window)使用）
3. 在对应页面 .json 中引入组件

<van-nav-bar fixed bind:click-left="onClickLeft" border="{{false}}" custom-style="background: {{navBackColor}};z-index:999;" placeholder="{{true}}">
  <!-- 左侧图标 -->
  <image wx:if="{{isLeftArrow && isIndex}}" class="home-icon" src="图片路径或地址" slot="left"></image>
  <van-icon wx:if="{{isLeftArrow && !isIndex}}" name="arrow-left" color="{{navLeftColor}}" size="36rpx" slot="left" />
  <!-- 标题 -->
  <view class="nav-title" style="color: {{navTitleColor}};" slot="title">{{title}}</view>
</van-nav-bar>

const App = getApp();
Component({
    options: {
        styleIsolation: 'shared',
    },
    /**
     * 组件的属性列表
     */
    properties: {
        // 是否显示左侧箭头
        isLeftArrow: {
            type: Boolean,
            value: true
        },
        // 是否点击返回首页
        isIndex: {
            type: Boolean,
            value: false
        },
        // 标题
        title: {
            type: String,
            value: "茶艺师"
        },
        // 背景色
        navBackColor: {
            type: String,
            value: "#ffffff"
        },
        // 左侧颜色
        navLeftColor: {
            type: String,
            value: "#000000"
        },
        // 标题颜色
        navTitleColor: {
            type: String,
            value: "#000000"
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        navHeight: App.globalData.navHeight,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        onClickLeft() {
            if (this.properties.isIndex) {
                wx.switchTab({
                    url: '/pages/indexNew/indexNew',
                })
            } else {
                wx.navigateBack({
                    delta: 1,
                })
            }
        },
    }
})


// 在app.js中根据设备信息设置导航高度(onLaunch)
const menuButtonObject = wx.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。
// 获取设备信息
wx.getSystemInfo({
  success: res => {
    const statusBarHeight = res.statusBarHeight, //状态栏的高度，单位px
    navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
      },
    fail: (err) => {
      console.log(err);
    }
})
globalData: {
  navHeight: "",
  navTop: ""
}

封装接口请求

/**
 * 请求域名
 */
const baseUrl = "xxx";

/**
 * 供外部post请求调用
 */
async function post(url, params) {
  const res = await request(`${baseUrl}${url}`, params, "POST");
  return res;
}

/**
 * 供外部get请求调用
 */
async function get(url, params) {
  const res = await request(`${baseUrl}${url}`, params, "GET");
  return res;
}

/**
 * function: 封装网络请求
 * @url URL地址
 * @params 请求参数
 * @method 请求方式：GET/POST
 */

function request(url, params, method) {
  const header = {
    // 根据接口要求是否需要token
    // userToken: wx.getStorageSync("token"),
  };
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: params,
      method: method,
      header: header,
      success: (res) => {
        resolve(res.data);
      },
      fail: function(error) {
        reject("请求失败");
      },
    });
  });
}

// 通过module.exports方式提供给外部调用
module.exports = {
  postRequest: post,
  getRequest: get,
};