解決登錄攔截，一個(gè)頁(yè)面多個(gè)需要登陸的接口會(huì)重復(fù)跳轉(zhuǎn)登錄頁(yè)面問(wèn)題

async function request(url, params = {}, method, load = true) {
  if (load) {
    uni.showLoading({
      title: '請(qǐng)稍候',
      mask: true,
    });
  }

  //判斷是post請(qǐng)求，需要處理token掛載信息
  var contentType = '';
  let cookieName = uni.getStorageSync('cookieName') || '';
  let token = uni.getStorageSync(cookieName) || '';
  if (method === 'post') {
    // url = url + '?hongxin=' + token
    contentType = 'application/json';
  } else {
    // params.hongxin = token
    contentType = 'application/x-www-form-urlencoded';
  }
  let [error, res] = await uni.request({
    url: url,
    data: params,
    method: method,
    header: {
      'content-type': contentType,
      Cookie: `${cookieName}=${token}`,
    },
  });
  if (load) {
    uni.hideLoading();
  }

  //不校驗(yàn)verifyCode接口
  if (url.indexOf('buyer/verifyCode') != -1) {
    return res.data;
  } else {
    // console.log('res.data', res.data)
    //登錄失效，跳轉(zhuǎn)登錄頁(yè)面
    if (res.data.code == 401) {
      jumpToLogin();

      return false;
    }
    if (res.data.code == 200) {
      return res.data;
    } else {
      if (res.data) {
        if (!res.data.msg) {
          res.data.msg = res.data.data;
        }
        uni.showToast({
          title: res.data.msg ? res.data.msg : '操作成功',
          icon: 'none',
        });
      }
    }
  }

  return false;
}

//跳轉(zhuǎn)登錄頁(yè)面
function jumpToLogin() {
//uniapp可以從getCurrentPages中拿到頁(yè)面歷史棧信息
  const pageStack = getCurrentPages();

  const page = pageStack[pageStack.length - 1].$page;
  console.log('jumpToLogin', page.fullPath);
  //判斷當(dāng)前是否是登錄頁(yè)面，解決一個(gè)頁(yè)面請(qǐng)求多個(gè)需要登錄的接口時(shí)會(huì)重復(fù)跳轉(zhuǎn)登錄頁(yè)面的問(wèn)題，判斷如果jump是true時(shí)就不再跳轉(zhuǎn)到登錄頁(yè)面
  var jump = uni.getStorageSync('jump');
  if (jump) return;
  //存儲(chǔ)當(dāng)前頁(yè)面的完整路徑，登錄完成后需要從本地存儲(chǔ)中拿到登錄前頁(yè)面信息，登錄完成后返回該頁(yè)面
  store.commit('SAVE_PRE_LOGON_PATH', page);

  uni.reLaunch({
    url: `/pages/my/login/index`,
  });
}

登錄頁(yè)面

//生命周期函數(shù)中
mounted(){
    //解決多個(gè)頁(yè)面重復(fù)登陸的問(wèn)題，如果已經(jīng)跳轉(zhuǎn)到登陸頁(yè)面了移除jump，這樣第二次走jumpToLogin方法時(shí)就會(huì)被攔截
    uni.removeStorageSync('jump');
    console.log(this.$refs)
},

//登錄方法完成后的操作，preLoginPath是存在store中的
login(params).then((loginRes) => {
   const { cookieValue, user, cookieName } = loginRes.data;
   that.$store.commit('SET_USER_INFO', {
        user: user,
        cookieName,
        cookieValue,
   });

//返回上一級(jí)頁(yè)面
   uni.reLaunch({
       url: that.preLoginPath,
     });
   });

分享帶分享人功能

解決：從分享的url中拿到全路徑，從全路徑中拿到參數(shù)信息，referenceId為分享人的id，保存分享人id，然后在新用戶登錄時(shí)將referenceId參數(shù)傳入

//分享頁(yè)面處理邏輯
onLoad(){
//存儲(chǔ)當(dāng)前信息
    const pageStack = getCurrentPages();
    console.log(pageStack);

    const page = pageStack[pageStack.length - 1].$page;
    console.log('page', page);
    //存儲(chǔ)當(dāng)前頁(yè)面的完整路徑
    this.$store.commit('SAVE_PRE_LOGON_PATH', page);
    console.log(page.fullPath);
    const path = page.fullPath;

    const urlString = path;
    const queryString = urlString && urlString.split('?')[1]; // 獲取查詢參數(shù)部分
    const params1 = {};

    queryString &&
      queryString.split('&').forEach((param) => {
        const [key, value] = param.split('=');
        params1[key] = value;
      });

    const referenceId = params1['referenceId'];
    this.$store.commit('SAVE_SHARE_PATH', path + `&referenceId=${referenceId}`);
    uni.setStorageSync('referenceId', referenceId);
}

//登錄頁(yè)面處理邏輯
//從store中獲取分享路徑
const urlString = this.sharePath;

console.log('sharePath', this.sharePath);
//從分享路徑中拿到分享人參數(shù)
const queryString = urlString && urlString.split('?')[1]; // 獲取查詢參數(shù)部分
const params1 = {};

queryString &&
  queryString.split('&').forEach((param) => {
    const [key, value] = param.split('=');
    params1[key] = value;
  });

const referenceId = params1['referenceId'];
let params = {};
if (referenceId) {
  params = {
    openid,
    code: phoneCode,
    referenceId: referenceId,
  };
} else {
  params = {
    openid,
    code: phoneCode,
  };
}
login(params).then((loginRes) => {
//登錄邏輯
});
});

使用vant-ui組件庫(kù)

需要使用vant-ui小程序版本

下載vant-webapp壓縮包，解壓好后在項(xiàng)目跟目錄新建wxcomponents/vant目錄，將解壓好的壓縮包中的dist目錄復(fù)制進(jìn)wxcomponents/vant目錄。

使用：

//pages.json
 "globalStyle": {
        "usingComponents": {
            "van-calendar":"wxcomponents/vant/dist/calendar/index",
        }
    },
    
//項(xiàng)目中使用
<van-divider />

• 通欄時(shí)，劉海屏手機(jī)需要手動(dòng)計(jì)算高度，獲取標(biāo)題欄、狀態(tài)欄高度

export const globalPage = {
  data() {
    return {
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      globalData: {
        statusBarHeight: 0,
        navHeight: 0,
        navigationBarHeight: 0,
        menuButtonWidth: 0,
      },
    };
  },
  mounted: function () {
    //獲取狀態(tài)欄高度
    this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    //#ifdef MP-WEIXIN
    //獲取menu按鈕的高度
    const custom = uni.getMenuButtonBoundingClientRect();
    console.log('custom', custom);
    this.globalData.menuButtonWidth = custom.width;
    //標(biāo)題欄高度
    this.globalData.navigationBarHeight =
      custom.height + (custom.top - this.globalData.statusBarHeight) * 2;
    this.globalData.navHeight =
      this.globalData.navigationBarHeight + this.globalData.statusBarHeight;
    //#endif

    console.log('App Launch', this.globalData);
  },
};

使用單號(hào)生成二維碼

網(wǎng)上搜了很多庫(kù)發(fā)現(xiàn)不是cancas生成有問(wèn)題就是這些庫(kù)不兼容使用import方式導(dǎo)入的引用，這些庫(kù)的底層其實(shí)都是js，所以干脆安裝完uniapp-qrcode庫(kù)后，在自己項(xiàng)目工具類目錄下文件下新建qrcode工具類，將實(shí)現(xiàn)復(fù)制到自己項(xiàng)目即可

使用：

import wxbarcode from "@/utils/qrcode/index.js";

//生成二維碼方法
generatorQrcode(item){
    //根據(jù)訂單號(hào)生成二維碼
  wxbarcode.qrcode('qrcode', item.orderNo, 480, 480);
  this.showQrcode = true;
}


    <!--展示二維碼彈窗-->
    <van-overlay :show="showQrcode">
    
      <view class="qrcode-wrap">
        <text class="iconfont icon-guanbi" @click.stop="showQrcode = false"></text>
      <canvas canvas-id="qrcode"></canvas>
    </view>
    </van-overlay>