uniapp小程序问题记录

一、使用自定义头部

pages.json

{
    "path": "pages/index/index",
    "style": {
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "首页"
    }
},

image.png

二、设置头部安全距离

//获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
console.log(safeAreaInsets);

 <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"></view>

image.png

三、全局引入自定义的组件

1、在src下的components中定义自定义组件（如以Xtx为开头XtxSwiper.vue）
2、在pages.json中进行配置

"easycom": {
    "autoscan": true,
    "custom": {
        //以uni为开头的自动导入
        "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
        //以Xtx为名的组件自动导入
        "^Xtx(.*)":"@/components/xtx$1.vue"
    }
},

四、分包加载

1、在src下面新建pagesMember文件，里面放置自己的分包页面

image.png

2、pages.json中进行配置

//分包加载规则
"subPackages":[
      {
          "root": "pagesMember",
          "pages": [
              {
                  "path": "points/points",
                  "style": {
                      "navigationBarTitleText": "积分"
                  }
              },
              {
                  "path": "settings/settings",
                  "style": {
                      "navigationBarTitleText": "设置"
                  }
              }
          ]
      }
  ],
//预下载加载规则
  "preloadRule":{
      "pages/my/my":{
          "network": "all",
          "packages": ["pagesMember"]
      }
  }

3、跳转分包页面

<navigator url="/pagesMember/settings/settings"> 设置 </navigator>
<navigator url="/pagesMember/points/points"> 积分 </navigator>

五、设置pinia存储用户信息

1、store/user.ts

import { ref } from "vue";
import { defineStore } from "pinia";

export type LoginResult = {
  /** 账户名 */
  accout: string;
  /** 头像 */
  avatar: string;
  /** 用户ID */
  id: number;
  /** 手机号 */
  mobile: string;
  /** 昵称 */
  nickname: string;
  /**登录凭证 */
  token: string;
};

export const useMemberstore = defineStore(
  "member",
  () => {
    const profile = ref<LoginResult>();
    function gitProfile(val: LoginResult) {
      profile.value = val;
    }
    function clearProfile() {
      profile.value = undefined;
    }
    return { profile, gitProfile, clearProfile };
  },
  {
    //网页端配置持久化
    // persist: true,
    //小程序配置持久化
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key);
        },
        setItem(key, value) {
          uni.setStorageSync(key, value);
        },
      },
    },
  }
);

2、用户登录后将用户调用gitProfile()将用户信息存起来

六、登录页

<template>
  <div class="login">
    <button open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
      登录
    </button>
    <button @tap="toIndex">模拟登录</button>
  </div>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { getHomeCategoryApi } from "@/api/user.ts";
import { useMemberstore } from "@/store/user.ts";
const code = ref();
// 必须是企业appid开发才能获取
// const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = (ev) => {
//   const encryptedData = ev.detail?.encryptedData;
//   const iv = ev.detail?.iv;
//   console.log(ev);
// };
// onLoad(async () => {
//   const res = await wx.login();
//   code.value = res.code;
// });
const toIndex = async () => {
  const res = await getHomeCategoryApi("13693100000");
  useMemberstore().gitProfile(res.result);
  uni.showToast({ icon: "success", title: "登录成功" });
//不添加定时器弹窗不会显示，会直接跳转页面
  setTimeout(() => {
    //页面跳转
    uni.navigateBack();
  }, 500);
};
</script>

<style scoped></style>

七、uniapp的几种跳转

1、使用<navigator>组件

<navigator url="/pages/other/other">跳转到其他页面</navigator>

2、uni.navigateTo方法用于保留当前页面，跳转到应用内的某个页面。

uni.navigateTo({
  url: '/pages/other/other'
});

3、uni.redirectTo方法用于关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
  url: '/pages/other/other'
});

4、uni.reLaunch方法用于关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
  url: '/pages/index/index'
});

5、uni.switchTab方法用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
  url: '/pages/tabBar/tabBar'
});

6、返回上一页
使用 uni.navigateTo 或 uni.redirectTo 打开新页面后，可以使用 uni.navigateBack() 方法来返回上一页。

uni.navigateBack({
    delta: 1 // 返回的页面数，默认为1
});

7、使用按钮的 open-type="navigateBack" 属性

<button open-type="navigateBack">返回</button>