AIGC风口下多端小程序开发（二）

今天，我继续介绍我用uni-app开发的多端小程序，我使用的是vue3的app模板 gitee.com/h_mo/uniapp… 作者内置了路由拦截器，pinia,请求拦截器和缓存加密，基本满足了一个框架所需要用到的功能 我在作者的基础上增加了全局的组件包裹AppProvider组件，这里可以控制全部页面的行为

<script lang="ts" setup name="AppProvider"></script>
<template>
  <view class="_u_bg-blue-500">

    <view v-if="versionShow === undefined">
      <loading />
    </view>
    <slot v-else-if="versionShow !== undefined"></slot>
    <privacy-dialog />
    <share-modal />
  </view>
</template>
<script setup lang="ts">
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import { login } from '@/utils/auth';
  import { useSettingStore } from '@/state/modules/setting';
  import { storeToRefs } from 'pinia';
  import PrivacyDialog from '@/components/PrivacyDialog/index.vue';
  const setting = useSettingStore();
  const { versionShow } = storeToRefs(setting);
  onShow(async () => {
    await login();
  });
  const goto = () => {
    uni.redirectTo({
      url:'/pages/index/language'
    })
  }
</script>

这个包裹器可以控制所有的页面拥有统一的隐私弹窗

由于小程序的主线程app.js和页面page.js的js是同步执行的，有些方法需要等待，这时候为了两个不同线程的状态同步，如登录状态，是需要一个同步锁的，即页面里面的login方法

import Semaphore from 'semaphore-async-await';
// 同时只允许一个方法进入执行
const lock = new Semaphore(1);
export const login = () => {
try {
    await lock.wait();
    //登录方法
    loginAction()
  } catch (e: any) {
    //登录异常处理
    user.islogin = false;
  } finally {
    lock.release();
  }
}

做好了这一步，我们就可以在处理好用户的同步登录状态后，进行页面的开发了

游览体验