m0_52459016的博客

原创 element ui 移动端IOS设备input框光标不垂直居中问题处理

说明：在移动端开发时发现ios设备光标偏上，不垂直居中，经过测试 设置 line-height:normal;没有效果，经过研究测试发下使用以下代码可以将问题解决，亲测有效，特此记录。

转载 【无标题】

看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/‘改为‘./’在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置。找到config文件夹下的index.js文件修改一下位置。2、背景图片路径不对。加入红框内字段即可。

原创 vue中封装axios，带有切片加载及进度显示

当你在Vue中使用axios时，你可以将它封装在一个单独的文件中，以便在整个应用程序中重复使用它，并将切片加载和进度显示添加到它中。在此示例中，我们在request函数中添加了onUploadProgress回调函数来跟踪文件上传进度。您可以根据需要自行更改此函数的实现方式。此外，我们还在axios拦截器中添加了NProgress插件，以在每个请求和响应之间显示进度条。这将为用户提供更好的用户体验。

原创 Vite + Vue3 +Vant4构建项目时，按需引入使用Toast组件，引用 showToast 时出现编译报错的解决方案

Vite + Vue3 +Vant4构建项目时，按需引入使用Toast组件，引用 showToast 时出现编译报错的解决方案

原创 JavaScript原生方法大全

JavaScript原生方法大全

原创 js获取url链接参数

1.封装方法（正则匹配）2.页面上使用，

原创 uniapp 网络请求封装

vue uniapp 网络请求 uni.request

原创 微信小程序获取位置权限用户拒绝授权后重新引导用户授权

微信小程序获取位置权限用户拒绝授权后重新引导用户授权解决问题：​ 微信小程序获取位置权限，用户点击允许后直接地图选点，或者用户拒绝授权后引导用户到设置页面重新授权，需要代码可直接滑至页面底部。调用方法：1.利用uni.getSetting 获取用户的当前设置2.利用uni.authorize 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此

原创 当页面出现遮罩层，并且遮罩可以滑动时，滑动遮罩层时会造成底部页面跟着一块滑动

场景：当页面出现遮罩层，并且遮罩可以滑动时，滑动遮罩层时会造成底部页面跟着一块滑动解决方案：当出现遮罩时，利用固定定位禁止底部页面滑动。view页面<view id="content" :class="isShowWl?'active-container':''" style="min-height: 100vh;background: #f6f6f6"> <!-- 遮罩模态框 --> <view :show="isShowWl" >

原创 uniapp开发微信公众号生成签名与微信签名校验工具生成的签名一样，依然报签名错误（invalid signature）

uniapp开发微信公众号生成签名与微信签名校验工具生成的签名一样，依然报签名错误（invalid signature）如果确认微信公众号生成的签名与微信签名校验工具生成的签名一样，一般情况是因为生成签名的url的问题。获取url的步骤：1.在main.js中获取首次进入页面的路径，利用window.sessionStorage.setItem将获取到的页面路径进行缓存window.sessionStorage.setItem('firstEntryUrl',window.Location.hre

原创 uniapp 中APP端调用uni.getLocation偶尔获取不到address解决方法

uniapp 中APP端调用uni.getLocation偶尔获取不到address解决方法1.配置geocode为trueuni.getLocation({ type: 'wgs84', geocode:true,//设置该参数为true可直接获取经纬度及城市信息 success: function (res) { console.log('获取定位信息',res); }, fail: function (err) { conso

转载 uniapp base64图片保存到相册

1.APP 保存base64格式图片（利用bitmap）a.定义方法saveImgFile(base64) { const bitmap = new plus.nativeObj.Bitmap("test"); bitmap.loadBase64Data(base64, function() { const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式 console.log(

原创 uniapp开发微信公众号调用微信授权登录

微信公众号调用微信授权登录1.登录页面<view class="submit1 disflex" style="justify-content: center;" @tap="submit"> <image src="/static/image/wechat_icon.png" mode=""></image> <text>登录</text></view>submit() { const that =

原创 uniapp利用uni.uploadFile上传图片时在formData中携带token信息

上传图片时在formData中携带token信息注意：在formData中携带参数时，不要配置header头信息，否则会造成后台接收不到前台传递的信息// 上传头像 chooseImg() { let that = this; let token = that.$tool.getCache('token') console.log('token',that.$tool.getCache('token')) uni.chooseImage({ count:

原创 uniapp 上传图片(单个)

上传图片(单个)<view class="list disbetween" hover-class="hover" @click="chooseImg" style="height: 120rpx;"> <view class="list-til">头像</view> <view class="disflex"> <image class="list-img" :src="avatar||'/static/image/a

原创 uniapp video视频组件poster视频封面不显示问题

关于poster视频封面不显示问题：1、controls属性必须为true（默认）；2、poster路径必须是网络资源地址，即https；3、视频加载完才行（这个官方没说，所以问题就出在这里）；解决办法就是加个判断，当poster的值加载完成不为空时显示video组件，解决代码如下：<!-- 视频区域 --><view class="video-item"> <video id="myVideo" v-if="video.thumb" :poster="vi

转载 uni-app 微信小程序设置全局的分享onShareAppMessage

uni-app 微信小程序设置全局的分享onShareAppMessage[前景：使用uni-app开发微信小程序，实现分享转发的话，要每个页面都写一个onShareAppMessage，这样代码太臃肿，因此使用vue的mixins 设置一个全局的分享。vue的mixin的使用创建一个 mixins ，我的文件路径为 ： common/share.jsexport default { onShareAppMessage(res) { //发送给朋友 return {}

原创 uniapp 开发微信公众号H5 隐藏右上角扩展按钮

uniapp 开发微信公众号H5 隐藏右上角扩展按钮1.首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样)初始化：npm init -y安装微信模块：npm install jweixin-module --saveH5的话 要引入js <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8">

原创 uniapp ios平台通用链接 Universal Link 设置

ios平台通用链接 Universal Link 设置第一步：开启Associated Domains服务登录苹果开发者网站，在“Certificates, Identifiers & Profiles”页面选择“Identifiers”中选择对应的App ID，确保开启Associated Domains服务 开启Associated Domains服务后需要重新生成profile文件，提交云端打包时使用第二步：服务器配置 apple-app-site-association 文件（该文件

转载 HBuilderX3.1.10+版本公共测试证书

HBuilderX3.1.10+版本公共测试证书可用于测试打包，不要用于正式发布，其信息如下：MD5: 06:83:8C:C8:40:09:3B:9D:46:89:FC:41:9B:A1:A3:F3SHA1: 97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CDSHA256: B0:1D:06:18:0D:00:3E:79:C7:B9:08:89:93:B8:E5:AE:7A:19:B0:DA:11:61:AA:09:7C:7F:39

转载 H5网站或uni-app打包的H5如何接入微信公众号支付

H5网站或uni-app打包的H5如何接入微信公众号支付http://www.linfengya.cn/?post=39我这边以一个uniapp打包的H5网站为例（普通H5网站依然通用，比葫芦划瓢就ok了）uniapp官网的文档里面没有封装好的支付接口 所以纵使是用uniapp写的H5 依旧要按照普通H5接入公众号支付的流程，前提准备：①确保微信公众号已申请了微信支付②微信公众号的appid③微信公众号的secret（一般前端不需要用这个，后台需要用这个）④公众号配置安全域名流程: ①通过

原创 uniapp base64图片保存到相册

base64图片保存到相册qrcode路径返回的base64码显示图片：<button type=“primary” class=“saveBtn” @tap=“getSaveImg(qcCode)”>保存二维码至相册保存二维码至相册，先判断用户是否授权，如果用户已经授权则直接保存。uni.getFileSystemManager()是文件管理器对象var FileSystemManager = uni.getFileSystemManager()FileSystemManage

原创 uniapp APP&H5端获取地理位置信息（百度地图&高德地图）

APP&H5端获取地理位置信息一、app端1.在需要使用的页面中onShow(){ //#ifdef APP-PLUS // 获取定位信息 this.getLocations(); //#endif},methods：{ //获取定位信息 getPosition(){ const that = this; uni.getLocation({ type: 'wgs84', geoco

原创 uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈

uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈1.html<!-- 分享模态框 --> <canvas canvas-id="poster" class="poster-canvas"></canvas> <view class="share-mask" v-if="isShowShare" @click="isShowShare = false">

原创 uniapp APP项目启动页面全屏显示去除导航栏和下巴

uniapp APP项目启动页面全屏显示去除导航栏和下巴<template> <view> <!-- 启动图 --> <view class="start-item" > <image :src="startImg" mode="" class="pic" @click="jump(startUrl)"></image> </view> </view></template>

转载 web端和uniapp移动端锚点链接跳转或者滚动

web端和uniapp移动端锚点链接跳转或者滚动引言前端在工作中，时不时会碰到锚点的需求，即要求点击某个元素之后，跳转到另一处或者滚动条移动到指定位置web端控制滚动条document.body.scrollTop = 750上述即标识滚动条会移动到距离顶部750px的地方跳转到指定元素document.getElementById("divId").scrollIntoView()还可以使用a标签和window.location.hash，但是会造成URL更新导致页面刷新，不建议使用

原创 微信公众号页面如何跳转至关注公众号页面

微信公众号页面如何跳转至关注公众号页面1.获取微信公众号biz字段a.点击公众号 历史文章，在浏览器中打开b.鼠标右键，查看网页源代码c.复制红框的字段 即为biz字段2.拼接biz字段成完整跳转链接替换红框中的内容即可https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg2MjY4MzIyOA==#wechat_redirect3.在代码中使用 window.location.href 进行跳转jump(

原创 如何在微信小程序中引入阿里巴巴图标库iconfont