- 博客(55)
- 收藏
- 关注
RSS订阅原创 【uniapp*vue3】app/h5 webview通讯方案
本文旨在解决vue3版本下uniapp h5项目向app项目中webview通讯问题问题产生于uniapp自定义打包模板。
2025-02-21 18:01:04
963
原创 完美解决uniapp检测USB抄码枪连接、扫码功能
USB抄码扫描一次会触发多个input事件，最后再触发一次enter事件，这里就去监听input事件去不断拼接拿到映射的抄码值，最后的enter事件触发就是完整的结果。我这做的处理是在App.vue下的onLaunch，app一创建就去执行监听事件，做到全局去检测usb插入拔出。做这个需求前，查阅了大量的技术文档，并且发现在dcloud已经有相关插件可以实现，但就是需要购买插件。简单来说，检测usb抄码枪就是检测usb外接设备，监测抄码功能就是检测外接键盘的输入事件。设备，有涉及到原生代码。
2024-08-26 17:03:44
791
原创 多种方案解决IOS下uni.share分享分包页面报错Error: Framework inner error
有个需求是用uni.share从app分享微信小程序，发现在苹果手机真机调试的时候 跳转的目标页面会白屏、页面样式错乱、一些组件不出现等问题。并且报错。
2024-08-14 17:57:11
670
原创 vue运行background-removal-js库
前段时间在github上有个能在浏览器扣图的js库蛮火不仅仅能将人物主体扣出，还能处理动物、植物等最近我萌发出在vue中运行这个库的想法，记录一下。
2023-07-06 16:04:09
4100
15
原创 uniapp实现应用wgt资源热更新
APP更新一般有两种形式1、整包更新，通过hbuliderx提供的在线云打包就属于整包更新，属于全量更新，缺点就是打包时间长、要重新走市场审核。费时2、wgt资源包热更新，通过hbuliderx打wgt包 ，速度快，能在应用打开就更新，跳过市场审核更新，很方便，但仅更新js代码，无法改变原生配置项。
2023-06-16 17:52:22
10554
3
原创 uniapp兼容多pda扫描扫码
我的方法是自己要知道什么pda的默认广播动作、标签字段 然后预设在代码里面 通过uni.getSystemInfoSync().deviceBrand来区分不同pda厂家 后面用对应的广播动作字段即可。网上有现成的针对单个pda扫码录入的代码，但是公司的需求是在多个不同厂商pda上运行，这就会导致不同的pda默认的广播动作和广播标签不一致的情况，目前也没有获取这俩字段的api。这样就能兼容多个pda的扫码功能了 不过前提还是要知道用户pda是什么厂商 自己再去找对应厂商默认的广播动作和广播标签字段。
2023-06-15 18:10:44
1727
4
原创 electron客户端中视频监控的实现HLS/HTTP-FLV
对于前端方面对于视频监控实现 我的浅见是获取拉流视频地址 再将流视频地址推到video标签。推流过程主要体现在摄像头至服务端的过程 和前端无关。基于第一点后 就是从直播（监控）协议入手 主要是三个RTMPHLSHTTP-FLV具体的差异和优缺点可以参考文章。简而言之就是RTMP低延迟且兼容性差（浏览器中只能通过Flash使用）、HTTP-FLV承接RTMP的优点 对于仅在flash使用 也有flv.js插件来解决、HLS是苹果推出的 供苹果系统使用。
2023-05-15 13:16:47
823
原创 uniapp微信小程序接入echarts（踩坑无数）
导入到自己的项目会多出以下文件夹，真正有用的是红框内的三个文件，可以将其移入到components下，具体哪个页面/组件使用了就引入。需要注意的是，直接下载那个插件，里面内置的echarts.js源文件2mb太大了，但是一个项目就用折线图、饼图，就可以去官网定制下载。这里我是把uni-ec-canvas移入到components文件夹下了。因为本次小程序开发使用到了echarts 发现接入有点麻烦，记录一下。使用了uniapp插件市场的。不然插件会报错 有的方法不支持。那个版本需要选5.0以下的。
2023-02-15 15:12:16
7522
4
原创 解决element-ui u-tree树形组件父节点半勾选回显数据问题
问题描述：因为e-tree组件默认关闭了check-strictly就严格遵循了父子关联关系，只要父节点勾选上了，全部子节点默认会勾选上。如果接口返回的勾选节点id包括了父节点，其子节点都是会被e-tree默认勾上参考，大致的思路就是动态控制check-strictly，在回显之前开启父子节点互不关联，然后在节点获取到赋值id后再关闭，这样就能实现了 关键代码如下具体文章可移步但是这里也会有bug 就是父节点不会出现半勾选状态。这里就引出第二个。
2022-10-12 09:35:42
2779
4
原创 uni.share失效 无法唤醒微信 而且还卡住的情况
昨天快下班测试提了个bug就是点分享至微信后会没反应 而且点确定也没反应了 就是整个app卡住了 一开始我以为是个简单的bug，没想到琢磨了将近一个半小时才发现问题，记录一下先看分享代码let data = uni.getStorageSync('outStockData'); let { outstoreDate, settleDate, apptType, productInfo } = data; let url = conf.conf.SHARE_URL; console
2022-04-12 16:12:12
2559
1
原创 接口直接返回图片 uniapp如何显示
uni.request({ url: `http://admin.tcsjk.com/api/V1/imageCode?phone=${phone}`, responseType: "arraybuffer", success: res => { let datas = res.data this.imgCode = 'data:image/png;base64,' + btoa( new Uint8Array(datas).reduce((datas, byte) => d
2022-01-15 11:17:30
2612
原创 uniapp前端处理接口返回一整个html格式
问题描述调用了一个接口，返回的不是常规的json数据，是一个html页面的html代码正常需要返回展示的页面是这样的一开始想着用富文本解析做，发现view层无法解析全部的html代码，比如还有style样式那些，后来发现有个web-view标签就是用来处理这个的web-view填入src属性即可，就是请求的接口地址不过需要注意的是，在小程序平台跑，需要将其配置到域名白名单...
2022-01-11 15:20:37
3245
4
原创 将vue项目打包部署到云服务器（傻瓜式宝塔面板）
前提准备拥有一台云服务器（以个人的轻量级云服务器视角）下载Xshell先将自己的vue项目打包，得到dist就行npm run build通过xhsell连接云服务器第一步应该是先创建实例，重置实例密码然后拿到公网ip，打开xshell新建会话，将公网ip输入主机 框，然后点击连接接下来会让你保存ssh密钥，然后就是输入服务器实例的账号密码了出现这个就是已经和服务器连接成功安装宝塔面板首先先注册个宝塔账号 点击跳转宝塔官网点击右上角的注册，完成注册
2021-11-04 15:37:42
3770
8
原创 uniapp中利用监视vuex中state数据配合uview实现登录消息提示
先看效果图登录成功或者退出成功都能够给用户提示，提示用户体验！uview的顶部消息提示详情可见u-top-tips设计思路首先是页面的布局是将顶部消息提示写在了个人详情页内<u-top-tips ref="loginTips"></u-top-tips>然后又要显示退出信息，考虑到简洁性，我把显示提示框封装成了methods内的一个方法showLoginModal(title, type) { this.$refs.loginTips.show({ ti
2021-09-24 18:21:54
1737
原创 uniapp微信小程序获取位置（高德SDK）
效果图：在uniapp官网给出了一个全局api用来获取用户位置uni.getLocation成功的回调函数会返回相关的用户信息但是仔细参考，就会发现就address参数返回的很直接，但是也仅限APP端可以使用，小程序开发中并拿不到这个参数。经过无数次的踩坑，我发现可以利用高德地图或腾讯地图提供的服务来实现获取位置的功能这里我就用高德来举例首先进入高德api的控制台，没账号的自行注册高德api再进入左侧的应用管理创建一个应用然后就要获取key了然后你就拥有一个key再
2021-09-23 17:48:15
3790
3
原创 关于vuex中actions可以返回promise的用法
在vuex中的actions中 addCartList({ state, commit }, payload) { return new Promise((reslove, reject) => { let prodect = state.cartList.find((item) => item.iid === payload.iid); if (prodect) { // 同一商品点击多次加入购物车，只增加商品数量 commit
2021-09-15 08:57:08
2546
原创 uniapp实现瀑布流基本写法
大概的结构布局是这样呈现的先由最外层一个div包裹着左右等宽的div，左边的是index为奇数区，右边是index为偶数区，具体实现就是给每个区域添加v-if="index%2=1" 或者 v-if="index%2==0"这样就能让奇数区显示index为奇数的item，偶数区显示index为偶数的item.接下来实例是用图片来实现最基本的瀑布流布局（用到uview组件库的内置样式）<view class="u-flex u-col-top u-border wrapper".
2021-09-11 20:25:53
2572
原创 class构造函数实现接口数据整合
一般项目接口中很有可能数据分布很不集中，经常出现想要的数据可能在不同对象内。例如如果要取columns内的数据，以及itemInfo内的部分数据…按我之前拿数据方法，这样的话就是定义一个对象存放在data内，然后会把columns和itemInfo全部存放在对象内。今天学习到将所需的数据存入class内，通过带参数的构造函数来实现。// 将商品基本信息过滤到类中export class GoodsInfo { constructor(itemInfo, columns, services)
2021-09-01 13:09:58
247
原创 vue中的防抖函数写法
vue中的methods// 防抖方法 debounce(func,delay){ let timer=null return function (...args) { timer && clearTimeout(timer) timer=setTimeout(() => { func.apply(this,args) },delay) } }第一个参数是需要节
2021-08-30 11:15:36
1062
原创 总结better-scroll插件的使用
在html文件中使用先下载better-scroll / 引用<script src="https://cdn.bootcdn.net/ajax/libs/better-scroll/2.4.1/better-scroll.js"></script>设置html结构<div class="wrapper"> <ul class="content"> <li>测试1</li>
2021-08-29 18:55:19
299
原创 vue使用swiper插件
昨天搞这个插件，搞得我很生气！我只是要个最简单的移动端轮播图，整的我心态本类能够自动播放，循环就行。。但是找了一圈，一直报错还有就是，我获取图片是通过接口的，所以用到了v-for循环就会出现无法循环播放问题只要加上v-show="banners.list.length"banner.list是存放图片的一个数组就行我是在组件内导入，不是全局引入安装npm install vue-awesome-swiper@3 --save引入，注册import { swiper, swip
2021-08-22 13:46:14
524
原创 vuex中actions配合mutation处理axios请求
众所周知，vuex中actions一般用来做异步操作，像数据请求，定时器，都不应该直接写在mutation，像我就犯了这个错Vuex mutations: { PLAY(state, obj) { const { id, name } = obj; // 播放歌曲 axios({ url: "/song/url", params: { id }, }).then(({ data: { data } }) =>
2021-08-18 16:32:51
1620
原创 vue中将axios封装
在平时写项目中，经常会遇到组件调用同一个接口或者不同接口import axios from "axios"axios({ url: "https://autumnfish.cn/mv/url", params: { // 接收传来的MVid id: this.$route.query.id, }, }).then(({ data: { data } }) => { this.m
2021-08-17 15:38:38
229
原创 vue中watch监听路由传来的参数变化
一个组件内写了个编程路由，通过交互触发 this.$router.push({ name: "Result", query: { // 发送搜索词给result title: this.inputVal, },在接收参数的路由组件中watch内 watch: { // 监视搜索词变化 "$route.query.title": { immediate: true,
2021-08-12 16:02:04
6709
原创 VUE使用过滤器来格式化当前时间
<div id='app'> <p>当前时间为：{{time|formatDate('xxxx-mm-dd')}}</p> </div> <script src='js/vue.js'></script> <script> Vue.filter("formatDate", function (value, str) { let dt = new
2021-07-20 16:55:26
292
原创 js省市二级联动；)
HTML<form> <select id="province"> <option value="请选择">请选择</option> </select> <select id="city"> <option value="请选择">请选择</option> </select>
2021-07-02 14:07:53
150
原创 浅谈js与jq给新增元素动态绑定事件（事件委托）
正确效果：先看结构HTML<div class="box-head"> <ul class="tab"> <li class="tab-active">测试<span class="iconfont"></span></li> <li>测试<span class="iconfont">&
2021-06-15 23:13:00
557
原创 js判断访问端，跳转不同页面
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOBBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){ window.location.href="";//手机端跳转的页面 } else {
2021-05-29 17:47:52
496
原创 JQ实现歌词字幕滚动
<style> * { padding: 0; margin: 0; list-style: none; } a { text-decoration: none; color: skyblue; font-size: 20px; } .box { .
2021-05-07 15:54:45
463
原创 JQ实现 todolist案例（记事本）
HTML <header> <section> <label for="title">ToDoList</label> <input autofocus type="text" id="title" name="title" placeholder="添加ToDo" required> </section> </header> .
2021-05-04 17:47:52
441
原创 JQ实现单击按钮 倒计时获取验证码
html<input type="button" value="获取验证码">css input { display: block; cursor: pointer; margin: 100px auto; }jsvar s = 10//预定义总秒数//按钮单击事件$("input:button").click(function () { $(this).val("还剩10s可重新获取.
2021-04-27 18:08:56
252
原创 JQ实现王者荣耀手风琴效果
准备htm+lcss布局和样式分析HTMl是一个容器装着无序列表，li内装着俩图片，一个是小头像图片，另外一个是详情大图片<div class="box"> <ul> <li class="current"> <a href="#"><img src="upload/c1.jpg" class="small"><img src="upload/c.png" c.
2021-04-17 17:39:18
420
原创 JQ实现标签栏切换效果、导航栏下滑效果以及动画队列和stop（）方法
标签栏切换HTML <div class="box"> <div class="tab-list"> <ul> <li>商品介绍</li> <li>商品介绍</li> <li>商品介绍</li> <li>商品介绍<
2021-04-13 23:51:48
796
原创 JQ实现全选、全不选、反选、偶数选中、奇数选中
html<div> <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="取消全选"> <input type="button" id="btn3" value="选中所有奇数"> <input type="button" id="btn4" val.
2021-04-13 23:30:10
444
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人