击败不可能-优快云博客

原创微信小程序image组件图片设置最大宽度宽高自适应

问题描述：在使用微信小程序image组件的时候，在不确定图片宽高情况下想给一个最大宽度让图片自适应，按比例，image的widthfiex和heightFiex并不能满足（只指定最大宽/高并不会生效）问题解决：使用bindload获取图片信息获取宽高再判断是否超过最大值。

2023-11-23 10:44:42 1410

原创 image图片加载完再显示

解决思路：先定义图片地址字段为null，再使用js图片加载接口进行图片加载，在加载完回调事件里再给渲染字段赋值。问题描述：在使用image加载大图的时候图片会从上往下一点点的渲染，会造成不好的用户体验。

2023-05-20 16:25:31 738

微信H5分享原理：是前端发送当前url到服务端，服务端把url进行加密生成签名，在微信进行签名比对，微信那边也同理取点击分享的页面获取页面url进行生成签名，如果配置没有问题，签名通过注册成功可进行自定义分享；微信那边ios与Android获取url方式不同，Android是每加载一个页面微信都会获取当前页面url，解决方法：判断机型如果是ios在第一次进入的时候用全局变量记录下url，在页面注册分享时把获取的url发送给服务端就好了。此示列是uniapp 使用vue同理。

2022-08-19 16:28:23 1780

原创 Files\nodejs\node_cache\_npx\14148“ as it does not contain a package.json file

问题描述：在使用npm创建vite项目的时候遇到了这个问题报错npm init vite@latest解决方法：先用 npm config get cache 查看node cache路径是否存在空格，一般是默认安装的nodejs路径中有空格比如 C:**Program Files\nodejs\node_cache使用 npm config set cache “地址” 更换成没有空格的地址即可或者C:\Program Files\nodejs\node_cache更换为C:**Prog

2022-04-20 00:25:48 889

原创 uniapp app端根据支付宝qr链接直接打开支付宝app支付页面

问题说明：因为客户所开通的支付授权是H5端的通过链接跳转到支付宝的页面后再打开支付宝app进行支付，这样会进行两次跳转体验不好解决：可以直接拿到支付宝支付的url拼接到支付宝链接上，直接用H5+打开app方法填入url就可以了//拼接支付宝内部功能，直接打开支付页面let url =`alipays://platformapi/startapp?saId=10000007&qrcode=${encodeURI('支付宝链接')}?_s=web-other`;let platform = un

2022-04-12 11:48:05 4499 9

原创 vue导出表格文件下载工具类

请求后端导出表格数据的时候需要对后端返回的数据进行下载导出表格需要在请求添加 responseType: 'blob',export function blobFun(res) { let blob = new Blob([res]); //response.data为后端传的流文件 let downloadFilename = 'form' + ".xlsx";//设置导出的文件名 if (window.navigator && window.navigator.m

2022-03-04 17:50:58 405

原创 uniapp 监听路由跳转

需要实现一个每次页面跳转的时候都能触发的事件，使用 uni.addInterceptor uni拦截器实现，拦截路由跳转方法 //在app.vue的onload生命周期，打开页面就开始监听 onLoad() { let that=this; uni.addInterceptor('navigateTo', {//监听跳转 success(e) { that.watchRouter(); } }) uni.addInterceptor('redirectT

2022-02-08 17:39:20 15276 5

原创 js 对象、数组赋值不指定路径（简洁写法）

问题描述：js的变量赋值，如果是string、int、bool是直接复制一份，而array、obj赋值是指定路径（既更改新赋值的变量会影响之前的变量）；解决方法：//要赋值的数据let item={name:'张三',age:'20',sex:'男'};let list=[{name:'张三',age:'20',sex:'男'},{name:'李四',age:'25',sex:'女'},{name:'王五',age:'27',sex:'男'}];//被赋值的数据let pageItem={..

2021-12-01 17:24:22 670

原创 GET方式请求，传递对象数据处理

问题描述：当使用GET请求的时候需要使用url拼接，如果参数过多拼接起来会特别麻烦，现使用这方法可像post请求一样直接传递一个对象。解决方式：直接循环对象拼接字符就可以了requestGETobj(objData){ let getParam=''; for(let key in objData){ getParam=getParam+'&'+key+'='+objData[key]; } getParam=getParam.substring(1,getParam.length)

2021-11-02 13:49:22 9248

原创 uni-app 多语言，国际化

问题描述：因为做到项目有海外用户所以需要配置多语言满足客户需求。解决方法：在uni-app里有内置i18n多语言的配置，并且uni-app里的组件可是可以支持跟随设置语言进行变换的，i18n的主要功能是可以做到实时切换语言。1.配置语言包先每种语言新建一个js文件用于，配置语言包再引入，注意语言包里的变量命名需一致//中文简体zh-CN.jsexport default { login: { title: '登录', page_1: '密码登录', page_2: '短信登录',

2021-10-04 15:00:53 3206 1

原创 app跳转至H5，H5向app传递参数调用app接口

1.需先在项目引入uni的 SDK  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>2.向app发送消息：调用uni-app接口 uni.postMessage发送消息，app接收消息，触发接收消息事件，获取消息内容调用功能接口uni

2021-09-18 16:32:00 1243

原创 uni-app/微信小程序请求方法封装使用async await

问题描述：网络请求每个页面基本都会用到，如不封装代码会十分难以维护，此方法需要npm下载await-to-js 包，用于接收参数，话不多说直接上代码导入await-to-js包后，在mian.js 将 await 引入全局使用import to from 'await-to-js'; Vue.prototype.$to = to;请求方法import config from '@/config.js';//配置文件/*url:请求地址param：请求参数isShowLoading ：是否

2021-09-17 00:12:22 1313

原创 Invalid regular expression flags at Object../src/utils/request.js 错误解决

在运行vue项目时出现了这个报错影响主流程，原因是设置的全局变量没有加完整的**’""’**符号

2021-08-27 16:03:51 1131

原创 uni-app 获取小程序当前页面路径

问题描述：使用转发功能时需要提供当前页面路径getPageUrl() { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; let pageUrl = `/${currentPage.route}`; pageUrl = this.pageUrl + '?id=' + this.detailID; console.log('当前页面url：', pageUrl); return pageU

2021-07-14 14:39:04 2658

原创 uni-app 获取屏幕亮度与设置屏幕亮度

问题描述：每次写到显示二维码的时候，可能会因为用户屏幕亮度过暗导致扫码困难，所以需要打开二维码的时候显示为最高亮度，关闭时恢复原来亮度。实现逻辑：使用uni官方提供的接口 uni.getScreenBrightness获取屏幕亮度，再使用uni.setScreenBrightness接口设置屏幕亮度。 //获取屏幕亮度 getScreenBrightness(){ //注意uni.getScreenBrightness为异步接口，所以需要使用Promise封装为异步执行 return new

2021-06-09 15:51:58 2114

原创 uni-app APP校验版本号应用版本升级，在app页面进行升级安装

问题描述：每当app进行了版本升级后就需要去应用市场重新更新下载，如未上架应用市场则需通过浏览器访问地址下载比较麻烦，现实现在本APP就可更新下载新版本，并判断当前是否为最新版。实现思路：实现版本号校验需要服务端配合提供获取版本号接口。当前版本号则在代码上写死每次打开应用进行判断是否一致，如不一致则通过uni.downloadFile进行下载文件应用，下载后会返回临时url，通过 puls.runtime.install进行应用安装...

2021-06-01 23:13:17 1311

原创 uni-app获取当前位置并计算出某个地点距离

实现思路：先通过 uni.getLocation 接口获取当前位置获取当前位置，再与点击经纬度进行计算得出相差距离。1.获取当前位置需要先在manifest.json配置文件开启获取位置权限//获取当前位置 getLocation() { let location = { lat: 0, lng: 0, } return new Promise((reserve, reject) => {//因为获取位置是异步接口所以需要使用promise uni.getLoc

2021-06-01 23:01:44 6860 14

原创 js获取日期、时间、星期多种样式

问题描述：在开发过程中要用到日期时间几乎是必不可缺，封装成一个方法供全局调用，话不多说直接上代码。 //返回当前时间 getTime() { var date = new Date(); var H = date.getHours(); var M = date.getMinutes(); let m = M; let h = H; if (M < 10) { m = '0' + M.toString() } if (h < 10) { h = '

2021-05-26 16:37:42 391

原创 KeyPath name on object store Athletes_table is not indexed From previous:

问题描述：当我使用本地数据dexie.js(对indexdb进行封装后的数据库)的时候遇到了这个坑，添加表的时候没有建立字段直接声明了一个id后就往里加对象数组,下面是建表代码 //实例化数据库 let db = new Dexie('sportsman'); //创建数据表 await db.version(1).stores({ Athletes_table:'&id' }); console.log('数据库：', db);以为会自动创建索引，结果查询的

2021-05-11 16:06:30 835

原创 uni-app 获取标签元素信息（高度、宽度等等）

2021-05-05 21:31:09 3812

原创 uni-app使用rem单位布局

问题描述：一般使用uni-app是开发移动端，但是根据需求需要开发pc端又想用uni-app的技术，pc端使用rpx会出现不兼容，所有使用rem布局；解决思路：uni-app提供了可以设置html标签字体的组件 page-meta 可以动态渲染html字体大小从而实现响应式布局,组件详情请看官方文档：https://uniapp.dcloud.io/component/page-meta<template> <view class="indexBody"> <page

2021-04-22 16:08:35 13192 9

原创 uni-app 去掉H5顶部标题栏

问题描述：解决:在pages.json文件的globalStyle对象里加上 "navigationStyle":"custom",

2021-04-21 10:16:14 3241

原创 uni-app 生成数字字母验证码

问题描述：在登录页经常有要求填写登录验证码，加强登录真实性。![效果图](https://img-使用canvas组件写出验证码 <view class="canvas-img-code" @click="clickCode"> <canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"></canvas> </view> export default

2021-04-14 16:23:00 1132

原创 js 手机号、邮箱、身份证校验

描述：每次开发涉及有关于表单的必有校验，下面分享一些常用的校验： //手机号校验 checkPhone(phone) { if (!(/^1[3456789]\d{9}$/.test(phone))) { return '手机号码有误'; } }, //邮箱校验 checkEmail(email){ if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email))){ return

2021-04-14 15:58:21 2428 1

原创 js 根据支付金额选择最优的优惠券

问题描述：在制作商品支付的时候遇到了需要使用优惠券抵扣的功能，如果用户有多种优惠券需要自动帮用户选择最佳的优惠券，在用户不损失较大金额优惠券前提下选择最接近的金额。解决方法：//选择最优的优惠券 choiceCoupons(couponsDataList,sessionMoney){ sessionMoney=parseFloat(sessionMoney);//先把传来的金额进行数值转换 let maxMoney = [];//存放大于场地费用最接近的数 let minMoney = [

2021-03-27 17:21:00 1390 1

原创 js获取最近七天日期

没什么问题描述直接上代码吧//返回最近七天的日期 getday2() { let days = []; var Date = new Date(); for(let i=0; i<=144;i+=24){ //144是前六天的小时数 let dateItem=new Date(Date.getTime() - i * 60 * 60 * 1000); //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒） let y = dateItem.getFullYear();

2021-03-23 12:00:45 7299 9

原创 uni-app view元素无法覆盖image组件问题

问题描述：view元素使用margin-top负数值，被image组件覆盖设置z-index值无效。问题效果图：解决后：解决方法：image组件经过uni-app框架封装存在position:relative;属性相对定位，保留位置并脱离标准流，只需要给view元素添加position:relative;z-index:2就可以了 position:relative; z-index: 2;...

2021-03-10 00:01:12 2456 3

原创 uni-app image组件将图像url里的反斜杠处理成乱码

问题描述：因后端返回数据问题url连接存在\反斜杠，然后图像没有渲染出来。返回的url：经过image组件渲染后的url：反斜杠部分经过渲染后已成乱码。解决方法：修改返回的url把反斜杠修改为正斜杠 imageUrl.replace(/\\/g,"/"); //通过replace更换字符...

2021-02-26 10:19:41 625

原创 js节流

问题描述：当我们使用移动或者拖动触发事件的时候这些事件会十分灵敏，不进行处理一秒内会触发几十上百次事件里的程序，会影响程序性能；使用节流可指定最快在多少时间内执行，找了下其他博客的写得又比较复杂。 data: { jieliu: true, //在data中定义一个布尔值用于节流判断 }, //需要节流的事件(这边我是随便写的事件)loadjieliu(){ if(this.jieliu){ this.jieliu=false; settimeout(()=>{

2021-02-02 11:24:43 266

原创 uni-app小程序跳转至网页并互相带参

问题描述：因为uni-app小程序的组件使用出了问题并无法解决，所以另外是用了webview独立开发了一个页面，需要来回跳转并携带参数；官网文档很多写的不详细，写的时候遇到很多坑。uni-app小程序跳转到webview,小程序提供了web-view标签用于跳转至网页<web-view src="https://xxx.com?token=123456" @message="messageValue"></web-view><!--@message是接收参数的回调--&g

2021-02-02 10:48:59 2368

原创 uni-app获取微信版本号，并进行版本校验

问题描述：当用户微信版本过低，可能会导致某一些功能无法正常使用，与基础库版本不兼容。//获取用户版本信息getUserSystem() { let res = uni.getSystemInfoSync(); //获取系统信息 console.log('手机信息：', res); let system = res.system.split(' '); console.log('手机系统：', system); let version; if (system[0] == "iOS") {

2021-01-25 16:40:46 2415

原创 uni-app阻止事件浸泡

问题描述：当我们写弹窗页面的时候，一般都需要点击透明背景的空白处就关闭弹窗，但是透明背景为弹窗内容的父级元素，所以导致点击弹窗内容的时候也会关闭弹出。解决：给子级元素添加@click.stop事件<view class="follow" @click="clickclose"> //父级元素 <view class="back" @click.stop="fangzhi"> //子级元素 <image src="../../static/follow.jp

2021-01-21 16:23:51 1178

weixin_48495574的博客