m0_61073617的博客

原创 uni-app nvue页面中使用video视频播放组件

问题是，在nvue页面引用video组件，然后啥也没显示的，显示了无法控制播放，折腾了好久，在这里记录下来！希望可以帮助到需要的人

原创 uni-app 自定义底部凸起导航栏

tabBar支持图片、iconfont图标展示。

原创 微信小程序 151****9351 抢购了*台** 轮播效果

微信小程序 151****9351 抢购了*台** 轮播效果。

原创 微信小程序 商品布局 宫格、列表、大图模式切换

效果：搜索框内容处理、商品布局切换、手风琴模式弹出层、上拉触底加载下一页等等...业务逻辑已经写好，接通后端接口就可以了，这里使用模拟数据展示！ 1.在项目根部创建一个 components 文件夹里面放 -- 全局组件 goodsLayout.wxml goodsLayout.wxssgoodsLayout.jsgoodsLayout.json 保持不动2.在pages页面里调用封装好的全局组件比如 pages/index/index.jsonpages/index/index.

原创 js 数组对象排序，升、降序

方法一 封装一个共用函数，将传递的参数转换为 Number 数字类型，isNaN检测是否为数值，再依次判断字段的大小对比进行排序。升序 根据某个字段 从小到大排序 降序 改下 compare 方法 将 -1和1调换，就可以根据某个字段从大到小排序了使用es6的写法一行代码搞定！效果都是一样的

原创 微信小程序 商品报价表格 兼容PC端、手机端

1.固定表头、表格行高由内容撑开2.图片自适应居中、图片预览3.筛选条件置顶、显示所选的筛选分类4.触底加载下一页5.表格文字可复制6.支持手机横屏、竖屏切换。横屏时隐藏底部tabbar上效果图wxml<view class="containers"> <view class="head" catchtouchmove='catchTouchMove' style="width: {{isWindows?'980px':'100%'}.

原创 微信小程序 取消/阻止页面返回上一页

有个需求是这样的，有两个页面 A、BA页面跳转到B页面，在B页面不允许用户返回上一页的操作1.A.js 使用 wx.reLaunch 跳转 ==关闭所有页面，打开到应用内的某个页面wx.reLaunch({url:'这里写B页面的路径',})2.B.js 使用 wx.hideHomeButton()，消除页面左上角的返回按钮/***生命周期函数--监听页面显示*/onShow:function...

原创 微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动（多种表格演练）

最近在做公司的项目需要到表格展示数据，但是微信小程序是没有原生table标签的，于是就百度各种搜...发现结构有类似的就粘过来修改，要善于学习和借鉴别人的经验使其变成为自己的东西，学无止境~在这里做下记录！...

原创 微信小程序 table表格 PC版本

公司项目啊....其实小程序页面的商品列表也有宫格、列表、大图模式了，尽管描述得不那么详细，但是信息量也能看到个大概，但是领导或业务员比较喜欢看表格详细点，罗列得比较清晰。 所以要求可以通过小程序分享到微信，PC端登录微信，在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~实现：表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等...先上效果图 （mock数据）小程序是没有原生 table tr th td 这些标签的，但是可以通过css 样式控制v-for 循环换.

原创 git不提交node_modules文件

node_modules：一般都是放置项目依赖文件夹通常我们提交代码时都不会提交node_modules文件夹到仓库以后我们要克隆仓库到本地的时候，只需要 npm install 就可以了它会根据项目中的package.json文件记录的依赖来下载完成那么该如何在提交代码时不提交node_modules呢？首先，在项目目录下打开 Git Bash Here，输入命令：touch .gitignore完成后项目中会出现一个后缀名“.gitignore”为的文件打开该文件，生成.

原创 gitee 报错解决 getaddrinfo() thread failed to start

git push -u origin "master" 命令报错如下fatal: unable to access 'https://gitee.com/xxxxxxxxxxxxx/': getaddrinfo() thread failed to start解决方案关闭防火墙其他方案在控制面板凭证管理中更新账号密码方法请查看我的这篇文章：https://blog.csdn.net/m0_61073617/article/details/123665961可以尝试把htt

原创 vue-devtools 安装编译失败的解决方法

先说下这个插件有什么作用：vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率按照安装步骤进行操作1.克隆git clone https://github.com/vuejs/vue-devtools.git2.cmd 安装依赖 npm install 或者 cnpm install3.编译 npm run build4.谷歌浏览器输入地址 "chrome://extensions/"进入扩展程序页面，点击“加载已解压的扩..

原创 gitee项目部署步骤及克隆或提交仓库用户名密码错误解决

git项目部署1、gitee官网https://gitee.com/2、新建仓库点击“新建仓库”填写仓库进行，进行创建即可。3、快速进入当上一步仓库创建成功后，会自动进入如下图页面。这时候找到我们项目-->打开cmd黑窗口或者在代码编辑器中打开我们需要部署的项目终端，按上图👆中的顺序，复制粘贴依次执行即可进行部署。提交代码到gitee仓库（下图中：因为我已经创建好项目了，可以直接从初始化开始，点击终端开始输入命令）全部的命令执行完成后，如下图：.

原创 uni-app 环境搭建以及注意事项

1、安装编辑器HBuilderX 下载地址：https://www.dcloud.io/hbuilderx.html下载成功，是一个压缩包zip、点击右键解压到本地文件夹解压成功后，点击文件夹找到HBuilderX.exe，双击运行或者创建快捷方式添加到桌面方便以后使用2、如果开发微信小程序要下载微信开发者工具进行预览、调试下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download....

原创 uni-app 微信小程序的分包加载机制

微信小程序每个分包的大小是2M，总体积一共不能超过20M。当我们新建的页面越来越多的时候，主包的内存就会越来越大，所以分包加载机制是很有必要的

原创 uni-app 微信小程序支付功能

前端提交订单把商品信息传到后端，后端生成订单，然后调用统一下单接口返回uni.requestPayment 所需要的参数

原创 uni-app 微信小程序 登录/注册功能

用户分为两类：没有注册的用户，已经注册的用户如何检测？首先需要触发用户点击，这里使用button按钮user.vue<button @click="getuserinfo()" class="btn">登录 / 注册</button>js 处理用户触发事件，调用getUserProfile获取用户信息，每次请求都会弹出授权窗口，用户同意后返回 userInfo。调用uni.login 返回用户登录凭证code码，将获取到的userlnfo、code参数传递..

原创 uni-app 微信小程序 getCurrentPages() 使用场景

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 注意：不要尝试修改页面栈，会导致路由以及页面状态错误。不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page 还没有生成官方文档：https://uniapp.dcloud.io/api/window/window?id=getcurrentpages先说下项目场景：目前有 index（首页）detail（详情）logi

原创 uni-app 微信小程序客服聊天和发送页面卡片功能

微信小程序客服聊天和发送页面卡片功能实现步骤如下：(一)：首先登录微信公众平台：https://mp.weixin.qq.com/登录成功后找到----->功能----->客服---->添加客服--->输入微信号---->搜索----->确定添加网页端客服地址：https://mpkf.weixin.qq.com/使用绑定的客服微信账号，扫一扫二维码登录，成功后就可以看到接收、回复客户发的信息点击头像还可以设置账号在线...

原创 uni-app 微信小程序分享功能

这两种分享都会触发 onShareAppMessage 函数，在js 中定义该函数，设置页面分享的信息，注意：该函数和onLoad 等生命周期函数同级

原创 react 切换路由时将页面滚动回顶部

先看效果图TabBar 标签栏中有5项，点击切换页面时发现 跳转后的页面还停留在上一个页面浏览的位置，不会自动跳转到页面的顶部，页面效果极差！ 项目中是使用 react-router-dom，Router路由进行页面的跳转，后来查了百度之后才知道页面之间共享了同一个 history，导致浏览的位置被记录下来了，所以跳转页面时跳到了相同的位置解决方法：在函数组件中设置窗口的滚动位置为0// 返回顶部useEffect(() => { window.scrollTo..

原创 html ＜table＞ 表格 表头固定 内容滚动 代码拿去就能用

原创 js 获取当前时间、时间格式转换

如果我们的需求是要实时更新当前的时间，代码写在这个mounted函数中，实现每秒刷新时间

原创 js 将秒数 转换为 天、时、分、秒格式

js 将秒数 转换为 天、时、分、秒格式

原创 js 整数不处理 浮点数保留后两位小数 （百分比）

js 整数不处理 浮点数保留后两位小数 （百分比）

原创 Ui 组件库 (移动端)

先记录下来，怕忘记了~Vant文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN/Vant 是有赞前端团队开源的移动端组件库react-vant文档地址：https://3lang3.github.io/react-vant/#/zh-CN/参照Vant打造的 React 框架移动端组件库。...

原创 uni-app 解决富文本图片溢出问题

解决前在js中获取后台的富文本数据后，使用 replace 设置图片的宽度为100%<template> <view class="container"> <rich-text :nodes="content"></rich-text> </view></template><script> import { publicRequest } from '@/services.js'; ex

原创 css3 基本语法

使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。CSS全称层叠样式表，又称风格样式表CSS规则由两部分组成：选择器和声明HTML引入CSS样式的方法有三种：行内样式注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。<h1 style="color: red;">style属性的应用</h1><p style="font-size: 14

原创 html 表单

表单是实现用户与网页之间信息交互的基础，通过在网页中添加表单可以实现如会员注册，用户登录，提交资料等交互功能表单 <form></form><form>标签的两个属性：action、methodaction 属性指的是服务器上处理表单输出的程序method 属性指的是告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法method 两个方法如下：post 、 get两方法区别如下1：post方法提交方式不会改变地址栏状态，表单数据不会

原创 html 列表、表格与媒体元素

HTML5列表分为三种类型：1：无序列表 <ul></ul>无序列表由<ul>和<li>标签组成，<ul>标签表示无序列表的声明 <li>标签表示每个列表项的起始无序列表的特性是：1：没有顺序，每个<li>标签独占一行（是块元素）。2：默认<li>标签项前面有个实心小圆点3：一般用于无序类型的列表，如导航，侧边新闻，有规律的图文组合模块等<!DOCTYPE html>..

原创 html 基本标签

标题标签 h1~h6<!DOCTYPE html><html><head><meta charset="utf-8"><title>不同等级的标题标签对比</title></head><body><h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题.

原创 uni-app 使用uCharts图表、并解决canvas层级过高的问题

功能需求是点击下拉框-->选择商户名称-->查看各商户图表的统计数据弹出下拉框后发现图表的层级过高，直接覆盖了下拉框，也尝试过使用z-index设置下拉框层最高，也是没有效果，后来百度发现canvas组件是原生组件，原生组件的层级默认最高，最后也是看了其他博客的解决方法，方法如下监控图表渲染完成，将图表转成图片显示，但是点击柱状图查看提示详情等功能就失效了...

原创 uni-app 使用swiper做左右滑动数据排名

效果图首先在data中定义模拟数据，可以改为后台请求的数据<script> export default { data() { return { rankingList: [{ title: '本月风格销售排行', menu: ["排名", "风格", "销售数量", "销售金额"], data: [{key: 1, name: "现代轻奢", num: "15", price: "117025.90"}, {k..

原创 uni-app 使用swiper做左右滑动数据表格

先上效果图，只是模拟数据，可以将v-for里面的数据源替换成后台请求的数据 1.首先在data中定义以下内容dateList 列表dateStatus 选中下标dateCurrent 滑动下标 <script> export default { data() { return { dateList: [{ title: '今日' }, { title: '昨日' }, { title: '...