logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔5
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置基于Node的WIKI管理
前端知识16
HTML常用知识CSS常用知识CSS美化checkbox复选框JavaScript常用知识JavaScript格式化时间戳JavaScript窗口宽高处理JavaScript黑夜主题切换实现方案JavaScript数字转大写简易图片查看器TypeScript基础知识Threejs基础三要素Threejs网格辅助和轨道控制器Threejs物体绘制Electron基础使用Nodejs基础知识animate.css页面动画
Vue框架19
Vite的使用及扩展Vue3父子组件Vue3使用Marked解析MarkdownMermaid图表生成库初始化页面加载动画Axios表单提交二维码解决方案NProgress加载进度条Vue3动态菜单实现Vue3使用ECharts图表Vue3处理Excel导入导出keep-alive页面缓存及setup问题Element:文件上传Element:结合Pinia实现动态菜单Element:图片上传组件Element:自定义统一弹窗组件Element:表格自定义指令控制按钮显示(鉴权)可视化大屏使用缩放适配分辨率
UniApp15
UniApp的基础使用封装网络请求工具及文件上传uni-app的开发记录微信小程序分享原生文件上传Pinia取消滚动条(兼容小程序)tabbar消息数量显示scroll-view上滑到底部加载数据状态栏高度动态设配数据共享与传递uview-plus导航栏实现背景融合Wot UIWot UI实现顶部背景图融合uni-app x
Java基础知识10
基础知识面向对象Lambda表达式常用API常用知识积累try-with-resource注解反射多线程经纬度距离计算
SpringBoot31
application配置Maven创建聚合项目全局异常处理锁机制项目启动初始化数据方式邮件功能集成原生定时任务异步集成阿里云OSS阿里OSS预签名上传基于hutool读excelJSR303WebSocketWebSocket版AI接口流式调用Smart-Doc接口文档生成器application配置信息加密雪花算法工具AOP实现请求参数脱敏思路JWT生成Token及工具类SpringBoot默认JSON与对象转换若依框架:安装使用若依框架:优化和调整文件上传若依框架:管理后台页面优化若依框架:后端接口代码优化SpringAISpringBoot实现AI接口流式调用服务启动时创建MySQL连接自建项目工程树形结构处理工具微信支付代码微信手机号登录
SpringMVC14
跨域处理拦截器RESTful风格伪前后端分离Jackson转换器调整Thymeleaf基于拦截器做权限校验AOP打印接口请求响应日志AOP打印接口请求响应耗时文件上传和回显POST请求加解密实现(AES)POST请求加解密实现(RSA+AES)参数动态校验实现方案真实IP和归属地
MyBatis8
MyBatis基本使用与配置Mapper使用相关MaBatis多数据源配置MyBatisPlus数据统计类处理方案MyBatisPlus条件查询正向工程的实现(H2)mybatis-plus-join
SpringCloud15
Netflix:微服务与搭建Netflix:服务的消费与提供Netflix:EurekaNetflix:ActuatorNetflix:RibbonNetflix:FeignNetflix:HystrixNetflix:ZuulAlibaba:简介与搭建Alibaba:Nacos注册中心Alibaba:RibbonAlibaba:OpenFeignAlibaba:Nacos配置中心Alibaba:GetewayAlibaba:Sentinel
MySQL6
MySQL基础知识MySQL多表查询与事务MySQL常用函数及解决方案MySQL视图MySQL索引安装MySQL
Redis7
Redis介绍和安装Redis配置文件Redis持久化Redis集群Redis语法基础Redis相关问题及解决方案SpringBoot集成Redis使用记录
MongoDB10
Linux安装MongoDBMongoDB基础语法MongoTemplate及SpringBoot配置MongoTemplate中Update操作MongoTemplate中聚合查询MongoTemplate日期归档示例项目使用相关知识归纳地理位置存储与距离查询MongoDB副本集与事务获取类名和属性名工具类
其他数据库1
H2数据库
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
工具集合13
IDEAMavenGradleGitNginx安装Nginx配置VSCodeJMeter压测DockerOllamaRustFSPicGoObs录制
Linux知识11
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:Niri
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

自定义Tabbar

https://www.uviewui.com/components/tabbar.html

自定义后可以加消息数量,但是会出现跳转闪屏问题,解决方案是使用单页面完成所有Tabbar功能,即使用v-if手动操作显示页面

操作后发现底部没有出现默认的颜色分隔线,可以强制手动加上

/*  底部tabbar */
.u-tabbar__content {
  border-top: 1px solid #eee !important;
}

版本更新

<!-- 下载 -->
<view>
  <u-loading-page :loading="updateData.flag" :loading-text="'更新中' + updateData.progress + '%...'" color="#333"
    font-size="18" icon-size="36" loading-color="#333"></u-loading-page>
</view>

// 版本更新数据
updateData: {
  flag: false,
  progress: 0,
}

// 版本更新方法
updateApp() {
  // 同步获取设备信息
  let data = uni.getSystemInfoSync()
  // 获取自定义版本号,防止云打包不一致问题
  let appWgtVersionArry = data.appWgtVersion.split('.')
  let appVersionNumber = parseInt(appWgtVersionArry.join(''))
  console.log(appVersionNumber);
  // https://zpaik.cn/download/apk/qc.apk
  // uni.showLoading({
  //   title: '更新中'
  // })
  // 展示下载进度
  let _this = this
  _this.updateData.flag = true
  let downloadTask = uni.downloadFile({
    url: 'https://zpaik.cn/download/apk/qc.apk',
    success: (downloadResult) => {
      if (downloadResult.statusCode === 200) {
        plus.runtime.install(downloadResult.tempFilePath, {
          force: false
        }, function() {
          _this.updateData.flag = false
          console.log('更新安装成功');
          plus.runtime.restart()
        })
      }
    }
  })
  // 下载进度
  downloadTask.onProgressUpdate((res) => {
    _this.updateData.progress = res.progress
    console.log('下载进度' + res.progress);
  });
},

targetSdk版本配置

应用市场要求30或以上

第一次启动隐私协议

小米应用上架审核要求必须出现同意和拒绝按钮,uniapp配置示例

视频模块添加

如果应用出现了视频播放的场景,打包时需要配置视频播放,否则会出现“打包时未添加”

拨打电话

// 拨打电话
makePhoneCall() {
  uni.makePhoneCall({
    phoneNumber: '13041491933'
  });
},

图片全屏预览

<template>
  <view>
    <image src="图片路径" @click="preview"></image>
  </view>
</template>

<script>
export default {
  methods: {
    preview() {
      uni.previewImage({
        urls: ['图片路径'], // 需要预览的图片链接列表
      });
    },
  },
};
</script>

保存图片到相册

// 保存图片
saveImage() {
    if (this.detalis.image) {
        for (let img of this.detalis.image) {
            uni.downloadFile({
                url: this.baseUrl + img, //图片下载地址
                success: res => {
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                            filePath: res.tempFilePath, //图片文件路径
                            success: function() {
                                uni.showToast({
                                    title: '图片保存成功,请到相册查看',
                                    icon: 'none',
                                });
                            },
                            fail: function(e) {
                                console.log(e);
                                uni.showToast({
                                    title: '图片保存失败',
                                    icon: 'none',
                                });
                            }
                        });
                    }
                }
            });
        }
    }
},

复制到剪贴板

 uni.setClipboardData({
          data: content,
          success: () => {
            // 可以添加用户提示复制成功
            uni.showToast({
              title: '房源信息已复制',
              duration: 2000
            });
          },
          fail: () => {
            // 可以添加用户提示复制失败
            uni.showToast({
              title: '操作失败',
              icon: 'none',
              duration: 2000
            });
          }
        });

开启分享到朋友圈

onLoad(option) {
  wx.showShareMenu({
    withShareTicket: true,
    //设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
    menus: ["shareAppMessage", "shareTimeline"]
  })
},

// 定义分享到朋友圈的内容(与methods平级)
onShareTimeline(res) {
  return {
    title: '文字内容',
    type: 0,
    summary: "",
  }
},

字体加载

App.vue

onLaunch: function() {
  console.log('App Launch')
  // 加载网络字体
  uni.loadFontFace({
    family: 'zhFont',
    global: true,
    source: 'url("https://jushang153299.oss-cn-chengdu.aliyuncs.com/tombstone/app/static/zhFont.TTF")',
    success() {
      console.log('hado-font加载成功')
    },
    fail(err) {
      console.log('hado-font加载失败', err)
    },
    complete() {
      console.log('hado-font字体加载');
    }
  })
},


<style lang="scss">
  /*每个页面公共css */
  body {
    font-family: 'zhFont', sans-serif;
    font-weight: 200;
  }
</style>

获取窗口屏幕宽高

onLoad() {
  uni.getSystemInfo({
    success: function(res) {
      const windowWidth = res.windowWidth; // 窗口宽度
      const windowHeight = res.windowHeight; // 窗口高度
      console.log(windowWidth);
      console.log(windowHeight);
    }
  })
},

扫码

uni.scanCode({
  success: function (res) {
    console.log('扫码成功');
    console.log('类型:', res.scanType);  // 码的类型,如 QR_CODE
    console.log('编码格式:', res.charSet); // 编码字符集
    console.log('结果:', res.result);     // 扫码得到的数据,如网址、文本等
  },
  fail: function (err) {
    console.log('扫码失败', err);
  }
});
自定义Tabbar
版本更新
targetSdk版本配置
第一次启动隐私协议
视频模块添加
拨打电话
图片全屏预览
保存图片到相册
复制到剪贴板
开启分享到朋友圈
字体加载
获取窗口屏幕宽高
扫码