2024.01 unaipp小程序开发问题记录

解决登录拦截，一个页面多个需要登陆的接口会重复跳转登录页面问题

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

  //判断是post请求，需要处理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();
  }

  //不校验verifyCode接口
  if (url.indexOf('buyer/verifyCode') != -1) {
    return res.data;
  } else {
    // console.log('res.data', res.data)
    //登录失效，跳转登录页面
    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;
}

//跳转登录页面
function jumpToLogin() {
//uniapp可以从getCurrentPages中拿到页面历史栈信息
  const pageStack = getCurrentPages();

  const page = pageStack[pageStack.length - 1].$page;
  console.log('jumpToLogin', page.fullPath);
  //判断当前是否是登录页面，解决一个页面请求多个需要登录的接口时会重复跳转登录页面的问题，判断如果jump是true时就不再跳转到登录页面
  var jump = uni.getStorageSync('jump');
  if (jump) return;
  //存储当前页面的完整路径，登录完成后需要从本地存储中拿到登录前页面信息，登录完成后返回该页面
  store.commit('SAVE_PRE_LOGON_PATH', page);

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

登录页面

//生命周期函数中
mounted(){
    //解决多个页面重复登陆的问题，如果已经跳转到登陆页面了移除jump，这样第二次走jumpToLogin方法时就会被拦截
    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,
   });

//返回上一级页面
   uni.reLaunch({
       url: that.preLoginPath,
     });
   });

分享带分享人功能

解决：从分享的url中拿到全路径，从全路径中拿到参数信息，referenceId为分享人的id，保存分享人id，然后在新用户登录时将referenceId参数传入

//分享页面处理逻辑
onLoad(){
//存储当前信息
    const pageStack = getCurrentPages();
    console.log(pageStack);

    const page = pageStack[pageStack.length - 1].$page;
    console.log('page', page);
    //存储当前页面的完整路径
    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]; // 获取查询参数部分
    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);
}

//登录页面处理逻辑
//从store中获取分享路径
const urlString = this.sharePath;

console.log('sharePath', this.sharePath);
//从分享路径中拿到分享人参数
const queryString = urlString && urlString.split('?')[1]; // 获取查询参数部分
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组件库

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

下载vant-webapp压缩包，解压好后在项目跟目录新建wxcomponents/vant目录，将解压好的压缩包中的dist目录复制进wxcomponents/vant目录。

使用：

//pages.json
 "globalStyle": {
        "usingComponents": {
            "van-calendar":"wxcomponents/vant/dist/calendar/index",
        }
    },
    
//项目中使用
<van-divider />

• 通栏时，刘海屏手机需要手动计算高度，获取标题栏、状态栏高度

export const globalPage = {
  data() {
    return {
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      globalData: {
        statusBarHeight: 0,
        navHeight: 0,
        navigationBarHeight: 0,
        menuButtonWidth: 0,
      },
    };
  },
  mounted: function () {
    //获取状态栏高度
    this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    //#ifdef MP-WEIXIN
    //获取menu按钮的高度
    const custom = uni.getMenuButtonBoundingClientRect();
    console.log('custom', custom);
    this.globalData.menuButtonWidth = custom.width;
    //标题栏高度
    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);
  },
};

使用单号生成二维码

网上搜了很多库发现不是cancas生成有问题就是这些库不兼容使用import方式导入的引用，这些库的底层其实都是js，所以干脆安装完uniapp-qrcode库后，在自己项目工具类目录下文件下新建qrcode工具类，将实现复制到自己项目即可

使用：

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

//生成二维码方法
generatorQrcode(item){
    //根据订单号生成二维码
  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>