- 博客(125)
- 资源 (4)
- 收藏
- 关注
原创 微信小程序识别小程序码并传参
后端添加的参数我们可以在onLoad中接收scene,记得使用decodeURIComponent解析。连续看到几个类似关于小程序生成二维码场景的问题,分销的场景和单商品购买的页面居多。前端通过接口获取到小程序码。
2023-12-15 13:44:45
1222
1
原创 vue3使用v-model父子组件的值双向绑定
在vue2中我们可以使用sync和v-model两中方式来进行组件之间的绑定,vue3好像优化到只使用v-model进行双向绑定。
2023-04-19 17:39:36
1349
原创 vue2使用v-model父子组件的值双向绑定
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突。
2023-04-19 17:36:46
1774
原创 vue多选
做项目的时候,产品需求需要多选,记录一下代码,以后可以直接使用,也想没有思路的伙伴提供一个代码:data中的数据结构,我们必须要一个字段来记录当前的选中状态,我在这里使用了isActive来记录当前点击元素选中的状态data() { return { diseasesList: [ { isActive: false, type: "blood_pressure", name: "血压问题",
2021-11-23 16:14:34
851
原创 mac ITerm切换bash 和 zsh
切换到zsh :chsh -s /bin/zsh 重新启动ITerm切换到bash :chsh -s /bin/bash 重新启动ITerm
2021-10-19 18:53:54
1257
原创 微信小程序预览图片和视频
官方APIwx.previewMedia重装数据结构wx.previewMedia 中的 sources 是个数组,然后里面是:[ {url:item.videoPath,type:‘video’,poster:item.picUrl}{url:item.picUrl,type:‘image’,}]Page({ /** * 页面的初始数据 */ data: { "bannerList": [ { "picUrl
2021-05-08 17:59:15
2969
原创 微信小程序根据不同的权限展示不同的自定义tabbar
项目场景:小程序中我们可能需要根据不同的权限展示不同的tabbar,比如你是会员的话,那么你的底部就展示一个VIP的tabbar,如果是普通用户的话就把这个VIP的tabbar隐藏掉。解决方案:tabar自定义官方链接首先我们先实现一个自定义的tabbar:在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整创建custom-tab-bar,在根目录创建,如图(我用的是vant的组件,vant样式的使用vant官方链接 就不用去写
2021-05-08 17:06:54
5332
7
原创 uni-appH5打包dist文件
原文链接:https://ask.dcloud.net.cn/article/352321、先配置manifest.json 中的H5配置我的运行的基础路径是./2、直接发行就行,点击发行会有弹窗提示你输入网站标题和域名,然后等待打包完2、直接发行就行,然后等待打包完,我们找到当前的包,直接压缩发给后端就可以了...
2021-05-07 18:17:48
5082
原创 element table 中sortable排序
在项目中做表格的排序,我使用的是自定义的排序,也就是通过后台接口进行的排序,写个文章记录一下element的三种排序方式。在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前
2021-05-07 17:53:14
12808
3
原创 移动端调试控制台vconsole
开发h5的时候有时候在真机上报错,我们得频繁的alert去打印调试,这无疑是痛苦的一件事,发现一个H5的调试工具,类似于小程序的打开调试,大大的增加了我们的开发效率。 // cdn 地址 <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>// 或者npm npm install vconsole使用 new VConsole();
2021-04-29 14:16:54
386
原创 vue导出后台返回的excel 和 zip
在uni-app开发H5中使用微信公众号做支付的时候,wx.config的debug模式一定要开启,这样可以看到你的报错,遇到了the permission value is offline verifying 这个错误,我以为是其他地方的问题,后来发现放到真机上就可以调起支付了,如果你也有碰到这个支付报错的话,不排除是因为微信公众号的开发者工具中不支持调起微信公众号的支付,不像小程序直接就调起一个二维码。...
2021-04-25 19:00:07
422
原创 uni-app 完美解决软键盘把fixed顶起问题
对比图用了固定定位在H5上出现了键盘顶起的问题, “softinputMode”: “adjustResize” 然后我见网上有让加这个的,但是我加上了有没用,这个可能是作用在app上的,下面来看解决方案。代码部分1、 在onload中加个获取当前高低 onLoad() { this.height = uni.getSystemInfoSync().windowHeight },2、给你最外层的父盒子加个高度 :style="{height:height + 'px'}"3
2021-04-25 18:50:15
8120
1
原创 自己退出微信小程序开发者权限
被动退出:管理者直接在微信小程序的管理平台直接把你踢出去,但是你得联系到你的管理员。主动退出:在手机上关注公众平台安全助手 ===> 绑定查询 ===> 点击要退出的账号 ===>解除绑定https://developers.weixin.qq.com/community/develop/doc/000a86c2f7c1c8ee74878bced5a404...
2021-04-01 11:24:33
4076
3
原创 盒子模型中box-sizing的使用
CSS 盒子模型(Box Model)这里是引用所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子中主要的属性就5个:width、height、padding、border、margin。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距我们一般使用控制台选中的都是内容的宽度,不
2021-01-31 16:35:10
569
原创 scrollTop滚动的时候一直是0
一次项目scrollTop的小记,为body添加了onscroll的时候scrollTop一直是0,使用下面的方法// documentElement 属性以一个元素对象返回一个文档的文档元素document.documentElement.scrollTop || document.body.scrollTop只是针对于body的时候会是0,我直接写了个box,就可以直接使用,出现这个如果是body不能使用的原因是应该是没有选中<!DOCTYPE html><html lan
2021-01-31 15:07:32
1880
原创 Element + vue2.0 + vue-cli3.0 的国际化使用(二)
接着上一篇继续我们的国际化的封装上篇链接。因为在上篇中虽然实现了可以切换了,但是我们为了更好的管理,我们需要单独的去放到一个文件中,我们需要国际化的数据绝对不会是一个hello这么简单,肯定是有很多的数据的。1.我们先在src目录下新建一个lang的文件夹2.新建一个js文件,一个index.js,再新建几个我们语言的文件,比如你需要en和zh那么就见两个js文件,依次类推,这里我将值见一个en和zh,如下:这里我们两个文件的格式要一样,即使有很多的语言文件也要一样在lang文件夹中的inde
2021-01-30 16:56:43
256
原创 Element + vue2.0 + vue-cli3.0 的国际化使用(一)
Elemnt + vue2.0 + vue-cli3.0 的国际化使用现在使用的是Element 2.15.0 的版本,理论上是在其他的版本也不会出现问题的,如果有出现问题并且找不到解决方法的话,那么就要考虑下版本的问题,废话不说了,直接进入教程:如果你不知道从哪里搞起,那么我们先看Element的官方教程,我们先按照官方教程先配置,然后遇到问题再解决问题吗,最后我会将项目放在github上,项目是我为了写博客新建的vue-cli项目,如果懒的看的话,就直接去github上下载就可以。我们先根据Ele
2021-01-30 16:19:57
496
4
原创 elementUi字体图标出现跨域加载不出来,或者在本地使用elementUi的时候引入字体文件
直接上错误,这是使用的elementUi直接上面加载不出来线上的这个地址不知道为什么引入不进去,我们可以从element中把这个文件拿到本地来,在本地引入,代码如下:@font-face { font-family:"element-icons"; src: url(../lib/fonts/element-icons.ttf);}@font-face { font-family:"element-icons"; src: url(../lib/fonts/elem
2020-12-15 18:26:34
2611
原创 vue下载pdf文件
一、引入download.jsnpm install downloadjs 地址:https://www.npmjs.com/package/downloadjs注意这个npm下载的这个download.js是有问题的,它能下载下来pdf文件,但是打不开这个pdf,在文章末尾的话,我会附上一个修改完的js。<template> <div class="home"> <!-- <HelloWorld @listener="show" ref="chil
2020-12-07 14:19:55
4577
5
原创 小笔记:wx:for和wx:if在同一个标签下提示 Bad attr `wx的问题
问题:在微信XHTML中当wx:for和wx:if 和 wx:else 一起用的时候会报错Bad attr wx,如图:如果蓝色标记,造成问题的原因是因为你的for的优先级比if的优先级要高,如下代码:/*先进行了for循环 */for(){ ..../*然后进入了if判断 */ if(){ .... }}/*最后单独的一个else */else{ ....}这就成了一个语法错误了。正确写法1:<!- 包一个block,代码从上而下顺序执行,这样if的优先
2020-12-07 11:10:51
1315
原创 微信小程序border显示不全可能出现的问题
禅道bug记录写了按钮发现下面的border线不显示,以为是被什么元素压住了,最后发现我是在小程序中用的1rpx为单位,改完2rpx 就好了,但是我后来的测试的时候就再也没有复现过,先记录下。...
2020-11-24 17:49:45
2779
原创 钉钉PC端聊天中分享的网址生成卡片
前言卡片化可以方便用户更加简单直接的获取到你网页当中的内容,吸引用户点击进去查看更详细的信息实现方式一:通过设置页面的<meta>标签去获取:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阿里云创新赋能平台聊城站</title>
2020-09-11 15:17:26
2593
4
原创 vue动态修改打包后的请求路径
需求分析我们需要在打完dist包以后,去通过打包生成后的index.html去配置它的请求路径,可以解决前端反复打包测试环境和生产环境的问题,也可以解决动态配置请求路劲的问题,我们可以通过后台去动态的修改我们打包好的请求地址具体实现我们需要在vue的public页面中将这个地址挂载到window对象上。因为打包后我们的public文件夹不会进行webpack的解析,所以等打完包后我们就可以去修改这个你挂载的值。我们直接在这个将你window对象的值赋值给你axios的baseUrl,我这里是做
2020-08-20 16:23:32
3709
原创 微信小程序如何实现循环一个固定view
小程序<view wx:for={{7}}> </view>vue<div v-for="item in 7">这样下来就会循环7个view,方便我们在写静态页面时候,不用去粘贴复制
2020-06-24 17:12:36
1965
2
原创 移动端和vue接入腾讯地图前端定位组件位置不准确以及自己创建地图
1.介绍关于腾讯地图开发的博客还是挺少的,此教程只是给一些初进入接入腾讯地图文档的作为参考,我也是一知半解,但是对于一些需要简单接入地图的小伙伴就足够了,因为我也是看着官方文档来写的,所以以官方文档为准腾讯地图api官方接入文档温馨提示:运行的代码必须是在sever上的,不然没有效果,vscode可以下载liverserver去启一个服务,或者使用webpack,也可以部署到服务器也可以2.展示 2.1:展示官方文档中的前端定位中的demo上面二维码可以看到定位组件展示的效果3.
2020-06-16 11:29:45
6913
10
原创 vue 修改第三方样式库并不影响别的页面
原文链接 https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html?q=以下介绍比较啰嗦,大家如果不想看可以直接跳到官方文档↑↑↑1.需要场景当 在vue中 style 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,防止样式的全局污染,尤其是在我们引用第三方库的,可能它们没有达到我们的要求,我们需要去修改第三方的样式,如果我们不加scoped的时候可能在别的页面也会修改我们的样式。2.解决方案方法1(
2020-06-01 18:50:38
1924
原创 瀑布流样式实现小程序下拉刷新和上拉加载
全局方法介绍属性类型描述链接enablePullDownRefreshboolean(默认false)是否开启当前页面下拉刷新官方链接onReachBottomDistancenumber(默认50)页面上拉触底事件触发时距页面底部距离单位为px。官方链接页面的方法介绍属性类型描述onPullDownRefreshfunction监听用户下拉动作onReachBottomfunction页面上拉触底事件的处理函数d
2020-05-19 16:33:30
925
3
原创 Vue watch和computed快速上手
<template> <div class="home"> <div>计算的属性{{watchNuber}}</div> <div>{{watchNuberAfter}}</div> <img src="@/assets/images/wxy.jpg" alt srcset @click="handleWatchClick" /> </div></template>
2020-05-18 18:24:10
165
原创 微信小程序使用weui样式框架
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。以下内容是纯UI库,如果想使用逻辑封装版本,请看小程序组件库 - WeUIWEUI的组件库这篇文章只介绍样式如何引入↓↓↓github下载:weui-wxss将dist文件导入到微信开发者工具3.看到这个界面就说明.
2020-05-18 17:27:59
2990
原创 移动端左右文字布局
左右布局,右边内容可以一直增加,左边保持不动,如下图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&
2020-05-18 15:16:02
567
原创 vue router 跳转一个新的标签页
let routeUrl = this.$router.resolve({ path: '/alicenter/detail', query: { id : id } }); window.open(routeUrl.href, '_blank');这样网站就可以在一个新的标签页打开了...
2020-05-10 17:30:56
2250
原创 微信公众号VUE项目获取code
在微信公众号的项目中难免会用到支付,用到支付后就必须前端拿到code后去换区openid,在微信公众号中获取授权的有两种方式,一种是静默授权,一种是非静默的授权,具体移步微信公众号开发文档 let origin = location.href; let urlNow =encodeURIComponent(origin);///netbar/api/wechat/v1/get_open_i...
2020-01-18 16:51:24
8499
10
原创 微信公众号VUE项目安卓能请求到数据IOS报NetworkError
一、起因在本地测试环境和正式环境上测试的时候都是没有什么问题的,客户需要部署到他们的服务器上,需要换成他们的域名,然后就换完以后就出现下面的问题,但是在安卓上是可以正常跑的。二、解决过程首先我去排查了是那个地方报的错,发现是我的request.js中报的,就是axios报的,然后然后百度说让我把 config.headers['Content-Type'] = 'application...
2020-01-18 16:28:23
4129
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人