![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序/开发者工具/uniapp/HBuilder
微信小程序/开发者工具/uniapp/HBuilder相关
公孙元二
如果你看到这句话,幸运值+1
展开
-
uniapp 微信小程序 带表情js对象进行序列化字符串后传参
转换: const item = encodeURIComponent(JSON.stringify(val)) uni.navigateTo({ url: '/pages/item-detils' + '?data=' + item })解析:onLoad(e) { this.data = JSON.parse(decodeURIComponent(e.data));}原创 2022-05-30 18:06:23 · 666 阅读 · 1 评论 -
uniapp 微信小程序 实现显示倒计时订单关闭
效果图: console.log('订单信息',res.data); this.printConfigInfo = res.data // 如果订单还存在有超时时间,应该在界面上进行显示 if(this.printConfigInfo.timeoutCancel>0){ this.orderCancelTime = this.printConfigInfo.timeoutCancel this.showCancelTimeHandle(原创 2022-05-23 16:35:13 · 1035 阅读 · 0 评论 -
uniapp 微信小程序 点击按钮实现复制功能
copyNumHandle(){ uni.setClipboardData({ data: this.formdata.orderNum, // data的值为你要复制的内容 success: res => { } });},原创 2022-05-17 23:02:34 · 2000 阅读 · 0 评论 -
uniapp 微信小程序 禁止遮罩层或弹框滑动触发底下页面的滑动
加上这行代码,禁止蒙版下的页面滚动:@touchmove.stop.prevent="" 示例: <!-- 全屏遮罩层 - 文件上进度 --> <u-overlay :show="isShowFileUploadLoading"> <view @touchmove.stop.prevent="" style="display: flex;align-items: center;justify-content: cen原创 2022-05-17 16:05:42 · 1760 阅读 · 0 评论 -
uniapp 微信小程序 uview u-picker和u-action-sheet的层级问题/解决覆盖问题
我的场景:点击按钮拉起u-action-sheet,此时再点击按钮拉起u-picker,结果发现u-picker在u-action-sheet的下面,被遮盖了。解决方案:给他们包裹一层容器,给他们的容器设置布局和层级。<template style="position: absolute;z-index: 100;" v-if="isShowPageRangeComponent"> <u-picker ref="uPicker" class="picker-height" :im原创 2022-05-13 16:05:20 · 4179 阅读 · 0 评论 -
uniapp 微信小程序 自定义radio-button按钮
效果图代码<view class="distance-select-list"> <view v-for="(item,index) in distanceList" :key="index"> <view class="distance-select-list-item" :class="{'distance-select-list-item-active': distanceTypeSelect === index}" @tap="tapDis原创 2022-05-10 11:35:19 · 750 阅读 · 1 评论 -
uniapp中使用uview组件尺寸很小如何解决
问题场景:在日常开发uniapp 微信小程序使用uview的过程中,老是发现uview的组件尺寸特别小。例如,尺寸可能这么小解决方案方案一:查看官方文档是否提供修改组件尺寸的属性例如:方案二:利用::v-deep去穿透样式改大小例如:<view class="step-style item-content pmt30"> <u-steps current="100" dot iconSize="40" direction="column"> <u-原创 2022-05-09 15:37:01 · 4256 阅读 · 1 评论 -
uniapp vue ::v-deep失效
多半是因为::v-deep写错位置了,::v-deep不可滥写,否则也不会产生穿透效果。使用的注意事项:1.切记必须是双冒号<style lang="scss" scoped>.a{ ::v-deep .b { /* ... */ }} </style>2.使用方法如下:在想要修改的样式前面加上v-deep就可了::v-deep .v-text-field.v-text-field--enclosed .v-text-field__details {原创 2022-05-09 15:27:43 · 12743 阅读 · 0 评论 -
uniapp 微信小程序 请求列表数据添加loading增强体验感、减少卡顿
设置一个变量isReady<template> <view class="container"> <!-- 内容区域 --> <view v-if="isReady" class="order_centext" :style="{height:windowHeight - 41 + 'px'}"> <swiper :current="tabIndex" @change="tabChange" :style="{height:window原创 2022-05-09 14:56:19 · 1377 阅读 · 0 评论 -
uniapp 开发微信小程序解决webView缓存文件
问题描述小程序上传体验版后进行真机测试,但由于缓存的存在,webview的页面一直是旧页面。解决方案:第一步先把小程序里的缓存删除(新手机不用,已经存在缓存的手机需要,该清理方法仅限安卓微信8.0.22及以上版本)我-》设置》通用-》存储空间 -》 点击“前往清理”第二步public/index.html页面设置 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />原创 2022-05-08 15:29:42 · 5139 阅读 · 0 评论 -
uniapp 微信小程序阻止点击事件click冒泡
使用uniapp开发小程序的时候,@click.stop来做事件冒泡没有作用。需要把@click.stop改成@tap.stop就可以实现了。原创 2022-05-08 15:09:36 · 4082 阅读 · 0 评论 -
uniapp 微信小程序阻止点击事件click冒泡
使用uniapp开发小程序的时候,@click.stop来做事件冒泡没有作用。需要把@click.stop改成@tap.stop就可以实现了。原创 2022-05-07 12:37:53 · 2945 阅读 · 0 评论 -
uniapp 微信小程序 下拉刷新
pages.json{ "path":"pages/list/list", "style":{ "enablePullDownRefresh": true }}在需要下拉刷新的页面,通过onPullDownRefresh可以监听到下拉刷新的动作<template> <view> <view>这是列表页</view> <view class="box-item" v-for="item in list"原创 2022-05-06 15:23:22 · 1314 阅读 · 0 评论 -
uniapp 微信小程序 实现上传多个图片
效果图:代码:upload.vue<u-upload accept="image" capture="['album', 'camera']" :previewImage="true" width="200" height="200" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="uploader-componet" multiple :maxCount="9"> &l原创 2022-04-29 22:26:10 · 1762 阅读 · 0 评论 -
微信小程序-出于性能原因,对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置
微信开发最新版本进行图片转base64进行显示的时候,出现如下报错:出于性能原因,对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置。新版本的配置方式:(目前使用的是 Stable 1.05.2204180)解决方案:设置 -》编辑器设置滑动到最下面,点击“更多编辑器设置”原来是20000,我改成了200000重启即可...原创 2022-04-29 21:56:35 · 2247 阅读 · 0 评论 -
uniapp 微信小程序fail parameter error: parameter.filePat…parameter.name should be String instead
uniapp的uni.uploadFile官方文档点击此处首先,如果是uniapp开发微信小程序,是无法实现一次性上传多个文件的,uniapp开发App才支持。查看原因可点击此处。其次,filesPath和name是必填的,且filesPath和name都必须是String类型,且不能是空字符串和undefined。...原创 2022-04-29 10:57:16 · 7477 阅读 · 1 评论 -
微信小程序 uni.uploadFile/wx.uploadFile一次性上传多个文件
答案是无法实现。原因:uni.uploadFile仅在App和H5上支持,用在微信小程序不支持。uniapp的官方文档wx.uploadFile也一样:微信的官方文档解决方案:第一步,实现独立上传文件并返回文件储存地址的接口第二步,将目前接收正反面文件的接口改成接收正反面文件储存地址第三步,多次调用上传文件的接口得到文件储存地址后合并到实际需要提交的表单数据中再提交即可...原创 2022-04-29 10:39:23 · 6585 阅读 · 0 评论 -
uniapp 微信小程序 获取uview组件refs是空对象
场景:onReady() { this.$nextTick(()=>{ console.log('!!!!!:', this.$refs) // 打印出来为空对象{} })},一般包裹this.$nextTick 就可以解决 。但是由于微信小程序版本bug导致this.refs 在微信小程序上获取到 {}仔细翻了微信小程序更新日志发现是微信小程序调试基础库导致的。打开微信小程序文档更新日志第三条更新。修复 框架 virtualHost 的组件节点无法被 selectCom原创 2022-04-28 14:27:40 · 1971 阅读 · 0 评论 -
uniapp 微信小程序 实现请求业务接口发现token过期自动重新获取且再重新请求业务接口
小程序官方给出的小程序登录流程:点击进入小程序登录官方文档官方给登录流程图:本文所提到的token对应官方说的自定义登录态,token一般都是有时效性,按照此流程,当token失效的时候,页面在请求接口的时候服务端肯定会认为token是非法的,此时就需要小程序端重新获取新的token,然后继续接着后面的流程走。一般服务端都会给一个特定的状态码标记需要重新获取token,后面的场景我们都以服务端返回code码401认为需要去登录。场景1:token失效之后直接跳转到特定的一个授权登录页面由于get原创 2022-04-28 09:38:06 · 5205 阅读 · 0 评论 -
Unhandled promise rejection TypeError: Cannot read property ‘request‘ of undefine
缺乏对promise的异常处理。原来: getNewToken().then(res => { console.log('[观测点1]',res,resolve) this.request({ url, method, params, callback: resolve }) })改成: getNewToken().then(res => { console.log('[观测点1]',res,resolve) this.requ原创 2022-04-27 22:40:54 · 8938 阅读 · 0 评论 -
Failed to execute ‘createObjectURL‘ on ‘URL‘: Overload resolution failed.
我原来的写法:let url = nullurl = window.webkitURL.createObjectURL(file)Chrome更新后不支持这种用法,需要改为: let url = null const binaryData = []; binaryData.push(blob); url = window.URL.createObjectURL(new Blob(binaryData,{type:'application/pdf;chartset=UTF-8'}));原创 2022-04-25 18:38:59 · 18652 阅读 · 6 评论 -
uniapp 开发一个自定义顶部导航栏
效果图:代码: <view class="uni_tab_bar"> <view class="order_top"> <block v-for="(tabBar,index) in tabBars" :key="index"> <view :class="{'active': tabIndex==tabBar.id}" @tap="toggleTab(tabBar.id)"> {{tabBar.name}}原创 2022-04-24 10:56:11 · 1239 阅读 · 0 评论 -
uniapp 微信小程序 点击按钮调用微信支付
实现效果:点击按钮后唤起支付方式选择:在这里我选择“微信支付”输完成密码后完成支付:需求:计算金额和创建支付订单等操作都在后端完成,前端只要将后端传过来的签名、时间戳、随机字符串等参数传给微信的api,即可在小程序唤起支付弹窗。代码: // 调用微信支付 callPayMent(data){ wx.requestPayment({ //调起支付 'timeStamp': data.timeStamp, 'nonceStr': data.nonceS原创 2022-04-21 10:11:50 · 3582 阅读 · 1 评论 -
uniapp 微信小程序 从接口获取配置信息 前端添加固定的过期时间
系统中的配置信息从接口中获取,这些配置信息需要在多个接口请求中的参数中用到,为了保证这些接口使用时能够拥有配置信息,需要把配置信息做成全局的。为了减少请求的频率,需要把配置信息存储在缓存中,但是为了保证实时性,于是需要给缓存添加过期时间,当用户刷新页面时就去检查是否拥有配置信息,如果配置信息不存在,则去请求配置信息,如果配置信息已过期,则去请求最新的配置信息。代码如下:App.vue // 当 uni-app 启动,或从后台进入前台显示 onShow: function(e) {原创 2022-04-19 22:31:09 · 567 阅读 · 0 评论 -
uniapp 微信小程序 web-view上传手机文件管理器里最近文件(限制文件类型)
文本限制用户上传的文件类型为:office、pdf、图片。效果:<template> <div class="container"> <van-uploader accept="*" :before-read="beforeRead" :max-count="1" :max-size="10 * 1024 * 1024" @oversize="onOversize" :after-read="afterRead"> <!-- &l原创 2022-04-19 15:14:54 · 1336 阅读 · 1 评论 -
uniapp 微信小程序 web-view上传文件的真机调试方法。
需求: 需要上传用户手机文件管理器里的文件,而微信小程序没有提供相关接口,因此需要小程序加载一个H5页面,放置一个上传文件按钮,用户点击按钮打开用户的文件管理器从而上传手机里的文件。但是web-view只允许填写一个url,也就是H5的程序必须单独部署在一个地方。但在开发阶段,前端往往没有服务器资源,无法实时部署和调试H5程序。因此我的解决方案是,利用egg运行一个服务器环境,然后把H5项目打包后放在egg静态资源文件夹下,web-view填写改静态资源的地址,从而实现H5资源的访问。步骤如下:1.完成原创 2022-04-19 15:09:02 · 1592 阅读 · 0 评论 -
uniapp 微信小程序 web-view上传手机文件管理器里最近文件(不限文件类型)
我在这里使用的vant.js的Uploader组件上传工具。uploadFile.vue <van-uploader accept="*" :before-read="beforeRead" :max-count="1" :max-size="100 * 1024 * 1024" @oversize="onOversize" :after-read="afterRead"> <div class="box-button">原创 2022-04-18 10:16:06 · 1516 阅读 · 0 评论 -
uniapp 微信小程序 web-view利用el-upload在微信开发者工具上可以上传文件,真机模拟点击上传按钮无响应
原因:在微信开发者工具有效果是因为是在PC浏览器环境,而el-upload是适用于PC web环境,如果使用真机模拟,不属于PC环境,所以el-upload上传按钮点击没反应。可以使用vant.js等第三方的移动端UI库。vant2官方地址:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/uploader#wen-jian-yu-lan...原创 2022-04-17 22:43:49 · 1601 阅读 · 0 评论 -
uniapp 微信小程序 web-view如何查看console.log和调试H5页面
问题场景:在微信小程序的页面中,web-view内嵌了另一个页面url,从小程序跳转到该H5页面的时候,看不到该H5页面的控制台调试信息console.log值。解决方案:当从小程序跳转到H5页面的时候,在微信开发者工具模拟器页面的底栏,会出现一个眼睛图标,旁边有个"…"的按钮,点开后可以看到“调试”菜单,选中后,会弹出调试器窗口。该窗口内就可以查看到web-view的调试信息页面了。...原创 2022-04-09 12:38:49 · 6549 阅读 · 2 评论 -
getLocation:fail 频繁调用会增加电量损耗,可考虑使用 wx.onLocationChange 监听地...
当前小程序频繁调用wx.getLocation接口会导致用户手机电量消耗较快,请开发者改为使用持续定位接口wx.onLocationChange,该接口会固定频率回调,使用效果与跟频繁调用getLocation一致。从基础库2.17.0版本起(预计发布时间2021.4.9),将对getLocation接口增加频率限制,包括:在开发版或体验版中,30秒内调用getLocation,仅第一次有效,剩余返回fail。正式版中,为保证小程序正常运行同时不过度消耗用户电量,一定时间内(根据设备情况判断)调用ge原创 2022-03-28 16:10:43 · 3545 阅读 · 3 评论 -
uniapp 微信小程序 腾讯位置服务路线规划插件的使用
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.htmluniapp项目的manifest.json文件:"permission" : { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }, "plugins" : {原创 2022-03-24 09:25:28 · 1436 阅读 · 0 评论 -
uniapp 微信小程序 从微信聊天列表(会话)中上传文件(pdf和office)并浏览(还没提交给后台)
需求: 用户选择从微信会话列表选择和上传office(word、ppt、excel)和pdf文件,还没提交给后台时允许用户点击进行文件预览。实现代码: // 获取微信列表中图片/文件 chooseWeChatMessage(type='file'){ //从客户端会话选择文件 wx.chooseMessageFile({ count: 10, type: type,原创 2022-03-23 13:58:07 · 2644 阅读 · 0 评论 -
uniapp 设置全局样式统一每个页面的背景颜色
1.设置全局样式可以在App.vue里面2.在每个页面的根view 里添加一个class名叫page转载 2022-03-10 15:36:22 · 4513 阅读 · 3 评论 -
微信开发者工具 公众号网页调试的调试器没了?
消失:解决方案:windows 从任务栏打开工具!!!!。解决方案:桌面快捷方式打开或取消任务栏固定,右键桌面快捷方式重新固定到任务栏。原创 2022-03-07 15:16:57 · 1085 阅读 · 0 评论 -
uniapp 微信小程序 点击按钮时先去查询用户是否授权了位置权限
<u-button @click="isAgreePositionHandle()">打开页面<u-button> this.isAgreePositionHandle().then(msg => { if(msg==='已授权userLocation'){ // 用户已授权,打开页面 this.isShowB原创 2022-03-04 14:46:32 · 1326 阅读 · 1 评论 -
uview u-collapse 布局重叠 异常,且导致页面无法上下滚动
1.设置ref<u-collapse ref="collapse_haha" :item-style="itemStyle" :head-style="headStyle">2.更新完数据后,重新布局this.$nextTick(() => { this.$refs.collapse_haha.init()})官方文档解释:原创 2022-03-04 08:44:50 · 1766 阅读 · 1 评论 -
uniapp 微信小程序 获取场景值和场景值个性化参数
App.vue onShow: function(e) { // #ifdef MP-WEIXIN //获取二维码携带的参数 let scene = decodeURIComponent(e.query.scene) scene = scene.split('&') let data = { //场景值 scene: e.scene } scene.forEach(item => { let arr = item.split('=') if原创 2022-03-03 21:42:40 · 2219 阅读 · 0 评论 -
uview 修改u-button按钮的border
效果1:<view class="button-layout" style="margin-top:20rpx;"> <view style="width:50%;"> <u-button class="no-border" type="success" @click="btn1()">按钮1</u-button> </view> <view style="width:50%;">原创 2022-03-02 15:26:33 · 1377 阅读 · 0 评论 -
微信小程序 减少因wx.onLocationChange频率过高而导致的上传定位时间频率过于频繁问题
1.利用时间间隔,以及判断经纬度与上次上传相比差异不大的话不上传来限制。// 开启实时获取用户坐标getIntervalPosition() { console.log('[用户已授权定位,开启实时事件]') const that = this wx.startLocationUpdate({ success: res=> { that.locationChangeFn = res => { const原创 2022-02-23 21:23:59 · 2002 阅读 · 0 评论 -
uniapp 微信小程序 用户登出后取消实时定位上传
我们的系统是实时上传用户的定位数据,但是上传定位的接口要用到token,所以当用户登出时及时清除token,当调用上传接口时会报错,此时我们用try catch捕获错误,捕获到错误后关掉定位监听。 export default { data() { return { locationChangeFn: null,// 发送用户定位sendUserPosition(res){ const data = { 'latitude': res.lat原创 2022-02-23 21:10:56 · 549 阅读 · 0 评论