weixin_45435854的博客

原创 uniapp转小程序分包

uniappuniapp转小程序分包由于小程序上传发布有限制要求，目前小程序分包大小的限制整个小程序所有分包大小不超过 8M单个分包/主包大小不能超过 2M建立分包文件夹所以需要分包，如果项目是用的uniapp框架编译的小程序。可做以下配置。建立一个与pages同级的文件夹。如packone,这个文件夹就是分包的页面路径，以及这些页面所用到的组件资源都可以放在packone这个文件中。(建议静态资源放在网络上,减少包的内存占有)配置subPackagesroot为打包的根路径。其下pag

原创 字体随着外层尺寸大小而变化

最近项目新加了个需求，系统文字从接口获取。如登录页面标题，和系统标题。其中发现遇到了一个问题。文字背景是一张图片，图片是自适应缩放的，所以可适应文字的宽度只能是按比列。所以能想到的办法就是标题文字随着外层的宽度变化，字体也跟着变化，显示完整的标题文字。封装文字宽度组件，其中登录的文字后边有图片，并且是可以居中的状态，所以图片也封装到组件。以下方法可以获取文字长度 放入utils文件夹中。当页面宽度变化的时候文字也会跟着变化。

原创 画布自适应方法 ResizeObserver

画布自适应方法

原创 vue动态组件

如果页面需要切换的组件过多，代码冗余的时候，可以使用动态组件。

原创 界面长时间未使用，就锁定页面输入密码重进页面

首先这需要全局做判断用户是否有使用，那么怎么 才能知道用户是否使用系统呢 这种方式可以通过鼠标是否移动来判断 如果鼠标停留太久就弹窗 需要用户重登入。

原创 2022下半年前端面试题总结

封装elementui 表格组件 怎么获取组件内的值。for in for of和foreach区别。vue computed和method区别。v-for和v-if一起使用会怎么样。项目中遇到最难的问题以及怎么解决的。keep alive是怎么做缓存的。箭头函数和普通函数，构造函数区别。路由 和页面按钮操作的权限控制。v-for中为什么要加key。vue2和vue3的区别。状态码302和301区别。对nexttick理解。行内元素之间的空白处理。input取消历史记录。组件自用数据存储方式。

原创 组件v-model实现数据双向绑定

组件v-model实现数据双向绑定。

原创 vuex 模块化

一般当项目比较大时，如果vuex 的modules模块过多，此时需要用到模块化来管理仓库。如果在index里引入modules中所有的文件，需在index.js中配置以下。比如在addController.js中定义一个变量。页面中通过getter取state属性。在getters.js中获取该属性。页面中存state属性。

原创 nvm安装流程

nvmnvm是管理node版本的工具。一般我们会负责多个项目，不同项目有不同版本的node环境，此时就需要nvm对node版本进行切换处理。1 首先卸载node2 nvm下载​ 安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，windows系统下载nvm-setup.zip安装包3安装[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBIxIW7Z-1648518669494)(C:\Us

原创 性能优化:防抖与节流

防抖在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。function debounce(fn) { let ti

原创 基于vue2，vue3的一些改变

1 template可以有多个节点2 setup语法替代原来的data函数，可以接收两个参数，props,context。我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。由于在执行 setup 时，组件实例尚未被创建，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。可以省略不写，只执行一次props因为 props 是响应式的，你不能使用

原创 jsrender简单封装

一个JavaScript库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，不依赖于jQuery，也不依赖于文档对象模型（DOM），支持创建自定义函数并使用纯粹的基于字符串的渲染。如下为自己封装的JsRender模板语法首先在页面引入jsrender.min.js方法一: useTemplate: function (templateId, elementId, data, helpersOrContext,n

原创 微任务和宏任务解析

macrotask（宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）每一个task会从头到尾将这个任务执行完毕，不会执行其它浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task执行开始前，对页面进行重新渲染宏任务中可以创建微任务，但是在宏任务中创建的微任务不会影响当前宏任务的执行当一个宏任务队列中的任务全部执行完后，会查看是否有微任务队列，如果有就会优先执行微任务队列中的所有任

原创 jquery ajax封装

ajaxCallback: function (jResult, callback) { if (!jResult) { alert("服务器响应异常"); return; } if (jResult.code === undefined) { callback(jResult); } else if (jResul.

原创 深拷贝方法

deepclone:function(obj){ var newDate=Array.isArray(obj)?[]:{}; if(obj&&typeof obj==='object'){ for(var k in obj){ if(obj[k]&&typeof obj[k]==='object'){ newDate[k]=deepclone(ob.

原创 layui弹窗与百度富文本弹窗层级问题

layui弹窗在触发打开时其弹窗的zindex会根据点击次数不断累加1，在页面修改其样式，都不生效可以通过修改layui文件中layui.all.js的代码来实现固定弹窗z-index，防止影响百度富文本的弹窗被layui弹窗遮挡。将源代码中的s值改为s=r.zIndex+1即可...

原创 Promise 异步编程的解决方案

理解promise首先为什么会使用promise?,promise是解决回调地狱的一种方式。异步回调会存在以下问题之前处理异步是通过纯粹的回调函数的形式进行处理很容易进入到回调地狱中，剥夺了函数return的能力问题可以解决，但是过程冗余，难以读懂，维护困难容易踏入回调地狱-嵌套层次深，不好维护promisepromise是一个对象（构造函数），对象和函数的区别就是可以保存状态，函数不可以，除了闭包并未剥夺函数return能力，因此无需层层传递回调函数代码风格，易理解，便维护多个异步

原创 小数点相加方法

小数相加function addNum(num1,num2){var r1,r2,m;​ try{ r1=num1.toString().split(".")[1].length; } catch(e){ r1=0; }​ try{ r2=num2.toString().split(".")[1].length; } catch(e){ r2=0; }​ m=Math.pow

原创 解决P标签连续字母，数字 不换行问题

解决P标签连续字母，数字 不换行问题 word-break: break-all;

原创 ie8下实现预览pdf

ie8下实现预览pdfie8不兼容pdf.js，和html5所以实现了以下方法来兼容ie8,判断是否是ie浏览器，如果是ie浏览器判断是否安装阅读器，将安装包放在服务器。若用户未安装则提示用户安装之后才能预览//点击预览function preview(){ //判断插件是否安装 　 if(!isAcrobatInstalled()){ //检测到未安装阅读器，则提示用户下载,未安装跳转到下载安装地址

原创 ie8项目遇到的问题

**ie8项目遇到的问题**因为项目兼容问题，所以考虑用Jquery1.12.4+layuimini单页版开发框架http://layuimini.99php.cn/onepage/v2/index.html#/样式兼容问题，众所周知，ie8不兼容HTML5 CSS3那也可以通过一些方法使其兼容。1 border-radius 和 box-shadow gradient演示地址:https://www.zhangxinxu.com/study/201007/pie-ie-css

原创 防止键盘事件与blur的重复调用

防止键盘事件与blur的重复调用​ $(‘input’).bind(‘keypress’, function (event) {​ if (event.keyCode == “13”) {​ //键盘事件调取blur​ event.target.blur();​ }​ });

原创 点击按钮，触发多次问题 jquery

点击按钮，触发多次问题$("#btn").click（function() {});改成$("#btn").off().on(‘click’,function() {});

原创 分页兼容ie8 jquery

兼容ie8分页js代码如下 page.js：;(function ($, window, document, undefined) { 'use strict'; function Paging(element, options) { this.element = element; this.options = { pageNum: options.pageNum || 1, // 当前页码 totalNum

原创 uniapp canvas生成海报不显示问题

uniapp canvas生成海报不显示问题在APP中建议把图片放本地资源，网络资源的渲染速度比较慢。可以输出看canvas是否有拿到本地临时路径图片，如果没有拿到就开始drow就会报错，一般H5和APP会报错：ready of undefined...小程序会报../../资源 渲染层出错一般即没有报错，也没有显示图片是因为 canvas的实例要在onReady()中获取，一定要小心这个坑。data() { return { context:'' } }onRea

原创 获取地理位置(经度，纬度)H5/小程序/APP

获取地理位置(经度，纬度) H5/小程序/APP小程序一般来说获取小程序可以通过授权getLocationInfo获取，用户进入小程序只会弹出一次授权地理位置信息。方法如下://封装以下方法到util.js文件中//小程序记录位置需要授权位置信息function getAuthorizeInfo(a="scope.userLocation",callback){ //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗 uni.authorize({ scope: a,

原创 微信授权登陆 获取openId unionId

之前采用的方法有bug，仅限于关注公众号的用户。现在进行了改善，改变了登陆流程。以下为登陆界面。点击第二个按钮就会弹出需要授权个人信息(昵称，头像)此时允许按钮为:<button class="allowHeadimg" open-type="getUserInfo" @getuserinfo="getUserInfo">允许</button>此时用到的方法为： async getInfo(callback){ wx.login({

原创 微信支付(h5/小程序/APP)支付宝（superpay）

APP可以有多种支付方式最常用的就是微信和支付宝，superpay支付小程序一般只有微信支付支付宝(alipay)支付//封装方法在util.js文件中function fn_payByAlipay(orderid, success, fail, complete) { var path = 'payment.Alipay/getPaymentInfo'; var data = { orderid }; uni.showLoading({ title: "支付中...", ma

原创 uniapp实现页面左右滑动，上下滑动事件

uniapp实现页面左右滑动，上下滑动事件<view class="container" @touchstart="start" @touchend="end"><view>添加方法：start(e){ this.startData.clientX=e.changedTouches[0].clientX； this.startData.clientY=e.changedTouches[0].clien

原创 uniapp 隐藏或显示tabar

uniapp 隐藏或显示tabar//滚动，滑动一段距离显示或隐藏tabar onPageScroll(e) { if(e.scrollTop>=10){ uni.hideTabBar(); }else if(e.scrollTop<=10){ uni.showTabBar(); } }

原创 小程序canvas生成海报（uniapp）

弹窗防止滑动和穿透catchtouchmove='true' @touchmove.prevent="stopPrevent"stopPrevent() {},海报画布：<view class="poster" v-if="showposter" @click.stop.prevent="stopPrevent"><canvas canvas-id="myCanvas" :style="'width:' + windowWidth + 'px;height:' +

原创 uniapp app/h5复制文字

uniapp app/h5复制文字如需要在页面加一个按钮。复制页面中的文字可以进行以下操作： //此方法仅适用于APP,H5不兼容 copy为需要复制的文字 copyfun(copy) { uni.setClipboardData({ data: copy }); }针对h5，可使用以下方法：content为需要复制的内容 copy(content) { const r

原创 uniapp APP用户修改头像(上传到OSS)

uniapp APP用户修改头像(上传到OSS)点击头像进行修改头像**点击头像跳转到新的页面**（先判断用户是否登陆），选择图片，确认上传。<image class="portrait" :src="headimg ||imagUrl('../../../static/missing-face.png')" @click="navtophoto()"></image>**此页面结构如图**（kps-image-cutter为剪切图片插件）：**选择图片:**

原创 MVC设计模式流程

原创 uniapp打包WGT背景图不显示问题

uniapp真机背景图不显示问题有时候uniapp更新后,运行到浏览器可以看到背景图片。但打包wgt后，在真机上就看不到背景图片。可以采用以下方式（下面有条件编译，根据不同的情况分别编译） <view class="container" <!-- #ifdef APP-PLUS --> :style="{backgroundImage: 'url(../../static/register_bg_image.png)'}" <!-- #endif -->

原创 uniapp同意使用,不同意退出APP

关于app的使用。许多电商平台都设置了下载APP就会提示用户是否同意使用条款或者隐私政策。用户不同意就会退出APP。同意了就跳转到首页。那怎么才能判断用户下载APP,是否有同意使用呢。并且用户卸载重装后仍然会提示用户同意。我们可以在用户点击同意时，保存一个关键词在本地。根据这个关键词是否存在本地。而提示用户是否同意。这样用户同意之后在下次点击APP时就不会提示了。除非用户卸载重装APP我的做法是做一个新的页面。这个页面如上图所示，并且该页面为APP的首次加载页面。在该页面上做判断。如果存在就导

原创 小程序微信授权登入 对接客服

uniapp之小程序微信授权登陆通过button open-type="getPhoneNumber" 触发方法。首先要获取code,根据code获取用户的openid,unionid在方法里定义getPhoneNumber如果需要前端处理code来获取openid和unionid。可以通过以下方式先在方法util.js文件中定义方法在需要调用的文件中使用，如在onload生命周期中使用如下微信绑定客服如果在小程序中需要设置按钮，转跳到小程序客服会话框。可以使用buttom组

原创 复杂数据处理（如时间整合）

对于一些数据格式，需要进行归纳比如以下数据返回的全是单条的时间数据但是我们需要做成以下这种样式风格。就要把当天的归类成一组数据数据结构最终为:var result = {};var data = res.data.freezingAmount;//请求回来的原数据console.log(data);for (var i = 0; i < data.length; i++) { //将时间转换成如：2020-02-22 var key = data[i]['create_at'

原创 uniapp热更新与打包基座

修改host文件有时候需要模拟真实环境，比如上传头像，图片等。要修改域名需要修改本地的host文件其路径为C:\Windows\System32\Drivers\etc可以用记事本打开，修改该文件。在最后一行添加真实域名然后在运行项目，在浏览器中打开http://local.ugomt.com:8080 即可。uniapp建立自定义基座打开uniapp选择项目运行到手机或模拟器，然后自定义基座如下图为安卓的配置信息如图为ios手机的配置，需要在证书中配置相应手机的udid编

原创 Dom编程

Dom简介Dom是由 1 Bom (Browser Object Modle:浏览器对象模型)​ 2 Dom​ 3 事件​ 4 表单Reference error:引用错误SyntaxError:语法错误Bom(Browser Object Modle:浏览器对象模型)由以下...