- 博客(100)
- 收藏
- 关注
RSS订阅原创 小程序 · rich-text富文本回显：解决video不显示 图片自适应
【代码】小程序 · rich-text富文本回显：解决video不显示 图片自适应。
2023-05-10 15:18:52
819
1
原创 Vue · 设置本地代理
本地开发的时，在浏览器访问项目的地址为 localhost， 但是当我们需要对接第三方验证后又回到本地项目时，由于第三方的回跳地址为正式服的域名就会不成功。这个时候就需要把域名映射到本地项目的地址，可以通过修改host文件实现。1、本地安装Whistlew2 start启动后，添加rules：/(?:https|http):\/\/griddev.jiuqi.com.cn/(.*)/ http://127.0.0.1:9898/$12、谷歌浏览器安装Proxy SwitchyOmega扩展
2022-04-01 14:24:55
1537
1
原创 企业微信 · 剪切板：复制
copy(){ wx.setClipboardData({ data: this.url, success:(res)=>{ this.$vux.toast.show({ text:"复制成功", type: "text", width: "60%", isShowMask: true, .
2022-02-16 17:24:51
986
原创 Vue · Table：手写横向竖向滚动表格，分页、条数设置
效果：<template> <div> <div class="pages-tables" :style="{ height: screeHeight + 'px' }"> <div class="table-header" :style="{ width: header.length * 150 + 'px' }"> <table border="0" cellspacing="0" cellpadding=
2022-02-16 17:21:05
1756
原创 小程序 · 组件刷新
方法一<comTem id="comTem" ></comTem>onReady(){ this.selectComponent("#comTem").comFun();}但是以上方式有个问题，那就是只有在第一次进入pageA页面的时候才会执行刷新，当从其他页面返回到pageA页面时onReady 不在执行，无效。如果想要每次返回都执行，在小程序的生命周期函数周只有onShow,可是使用onShow会因为组件，页面没有渲染完成导致 this.selectCompon
2021-12-21 14:36:57
3191
原创 小程序 · 手机号码中间四位隐藏
<!-- 使用wxs 手机号码中间四位显示为*号 --><view>{{text.getPhone(item.phone)}}</view><wxs module="text"> var getPhone = function (val) { var phone = val.substring(0, 3) + '****' + val.substring(7); return phone; }module.exp
2021-12-21 14:23:01
1286
原创 小程序 · 复制粘贴
wx.setClipboardData({ data: 'data', success (res) { wx.getClipboardData({ success (res) { console.log(res.data) // data } }) }})使用：<button class="weixin" bindtap="onClickCopy" data-weixin="{{dataDetail.weixin}}">
2021-12-21 13:57:18
571
原创 小程序 · 拨打电话
wx.makePhoneCall({ phoneNumber: '1340000' //仅为示例，并非真实的电话号码})使用<button class="btn" bindtap="onClickPhone" data-phone="{{dataDetail.mobile}}">立即沟通</button> onClickPhone(e) { let phone = e.currentTarget.dataset.phone wx.makePhoneC
2021-12-21 13:51:02
148
原创 小程序 · 客服
<button open-type="contact" bindcontact="handleContact"></button>Page({ handleContact (e) { console.log(e.detail.path) console.log(e.detail.query) }})方法一：在商品详情里面点击客服的时候，跳转到客服界面，有点类似分享商品出来然后咨询<button open-type..
2021-12-21 11:42:27
453
原创 工具 · 移动端调试工具：weinre
获取Weinre在任何的支持 Node.js 环境的系统下通过包管理器（npm）即可安装Weinrenpm install -g weinre使用Weinre进行远程调试1 启动 WeinreDe bug 服务端weinre --httpPort 8080 --boundHost -all-2 通过PC浏览器（WebKit内核）打开 WeinreDe bug 客户端Open in your pc browser http://localhost[Your IP]:80803 在你需要调试的页
2021-11-29 18:15:39
308
原创 Vue · 报错
错误提示：Uncaught SyntaxError: Unexpected token u in JSON at position 0某个地方用了JSON.parse，但是传入的参数不是一个合格的json字符串。解决：搜索一下，parse，解析前先判断一下parse前记得判断下错误提示：Duplicate keys detected: ‘0’. This may cause an update error.错误原因一个template中有两个一样的v-for<div class="in
2021-11-29 17:28:07
163
原创 Vue · @click点击事件：阻止事件冒泡、取消默认事件
一般情况下绑定事件方法的：<div class="parent-wrapper" @click="clickWrapper">点这里</div>阻止事件冒泡方法：<div class="parent-wrapper" @click.stop="clickWrapper">点这里</div>取消默认事件方法：<div class="parent-wrapper" @click.prevent="clickWrapper">点这里<
2021-11-29 17:21:39
3681
原创 小程序 · H5跳转小程序
方法一：通过服务端接口或在小程序管理后台「生成 URL Scheme」在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme生成的 URL Scheme 如下所示：weixin://dl/business/?t=1qFTj3VcOqc开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码如下：location.href = 'weixin://dl/business/?t=1qFTj3VcOqc'参考：
2021-11-29 16:59:20
1698
2
原创 Vue · 使用iconfont
App.vue<style lang="scss">@import "~@/assets/scss/iconfont";</style>.vue<i class="iconfont icon-wanggejuxing" style="font-size: 13px"></i>参考小程序 · 使用iconfont
2021-11-29 16:38:51
194
原创 HTML · ＜table＞表格
Month Savings January $100 设置水平居中，在tr或者td中设置都可以，但是垂直居中，如果只在tr中设置，那么在IE中无效text-align:center;设置水平居中vertical-align:middle;设置垂直居中...
2021-11-29 16:29:12
86
原创 Vue · 遮罩层：禁止滑动
弹出层时禁止页面滚动data() {return {myInfoShow:false},watch: {myInfoShow(val) {var mo = function(e){e.preventDefault();};if(val){document.body.style.overflow=’’;//出现滚动条document.removeEventListener(“touchmove”,mo,false);}else{document.body.style.overflow
2021-11-29 15:31:36
797
原创 Vue · ECharts
xAxis:{position: ‘top’} //让x轴在顶部yAxis: { inverse:true} //让Y轴数据逆向legend: {orient: ‘vertical’,x:‘right’, //可设定图例在左、右、居中y:‘center’, //可设定图例在上、下、居中padding:[0,50,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]data: [‘直接访问’,‘微信’,‘百度’,‘其他文章’,‘网页’]
2021-11-29 13:57:04
264
原创 JS · 正则表达式
URL匹配多个子域名和无http或者https或者www[a-zA-z]+(://)*[^\s]*已经验证的url如下：open.weixin.qq.comwww.baidu.comhttp://weixin.qq.com?rere=fahttp://www.ccgp.gov.cnhttps://www.creditchina.gov.cnhttps://open.weixin.qq.com?weixin=1http://open.weixin.qq.com?weixin=1&
2021-11-18 16:21:57
163
原创 小程序 · 隐藏滚动条
来自2020年的我为你们解答，先用标签包裹，再设置::-webkit-scrollbar{width: 0;height: 0;color: transparent}赞 1回复焽焽2020-09-17使用标签scroll-view包裹，再设置scroll-x='true’横向滚动
2021-11-17 13:57:48
224
原创 小程序 · 自定义组件
创建自定义组件在components文件夹右击–>创建文件夹–>右击–>新建component即可 创建一个组件com.wxml<!-- 这是自定义组件的内部WXML结构 --><view class="inner"> {{innerText}}</view><slot></slot>com.jsComponent({ properties: { // 这里定义了innerText属性，属性值可以
2021-10-28 16:40:08
88
原创 工具 · 抓包：whistle
whistle 的大致工作流程：配置需要修改的 url 地址编写 URI 协议，如 statusCode://编写协议对应的参数，如 statusCode://404可以看出 whistle 的操作都是通过文本配置去实现，比较符合程序员的思维。whistle 可操作的资源的 request 、respond 的 header、 body， 其中 header 里面的 query 、ua 、 cookie、status Code 等数据对前端来说非常熟悉， 也都有相应的协议去操作这些数据。另
2021-10-28 16:32:19
3863
原创 JS · 工具：vConsole.js移动端调试
在做微信公众号开发的时候，时常要调微信接口。在电脑浏览器上无法模拟，出现问题很难排查。只能通过电脑连接手机去查看log，这儿介绍一个快捷的方法，在手机前端页面直接查看打印信息。vConsole前端调试面板vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。方法一：安装vConsolenpm install vconsole引入import VConsole from 'vconsole';const vConsole = new VConsole();
2021-10-28 11:09:13
1563
原创 Vue · 设置浏览器icon
在index.html中引入<link rel="icon" href="./static/favicon.png" type="image/x-icon">
2021-10-27 11:55:06
90
原创 小程序 · 遮罩层：阻止事件冒泡、禁止滑动
目录方法一：方法二：阻止事件冒泡禁止滑动方法一：html<!-- 遮罩层 --><view class="mask" wx:if="{{hasMask}}" bindtap="hideMask">我是遮罩层</view><view class="content" wx:if="{{hasMask}}">我是页面内容</view>js data: { hasMask: false, }, showMask(e) {
2021-10-26 15:24:09
1604
原创 小程序 · rich-text
html <rich-text class="content" nodes="{{node}}">rich-text>js data: { node: `<div class="div_class"> <h1>Title</h1> <p class="p"> Life is <i>like</i> a box of <b
2021-10-26 11:51:17
223
原创 Vue · for循环：遍历对象、遍历对象数组
Document <div id="app"> <!-- 对象遍历 --> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }} - {{ value }} </div> <!-- 数组对象遍历 --> <div v-for=...
2021-10-20 22:07:34
3882
原创 Vue · 操作数组
方法一适用于数组就只有一组listData: [{name:“张三”,age:18}],//直接添加对象listData.sex=“男”123方法二适用于数组中有多组信息listData:[],list:[{“张三”,“李四”}]//比如想把另外一个数组中编列出来的值加入到这个数组中for (let index = 0; index < this.listlist.length; index++) {this.listData.push({ name: “” });thi
2021-10-20 22:02:55
251
原创 Vue · 回到页面的某个位置
<div ref="scrollContainer"></div>this.$nextTick(function(){ this.$refs.scrollContainer.scrollTop = 0;});注意：该方法 (this.$refs) 只能在 mounted 的状态之后使用。
2021-10-20 21:22:32
217
原创 Vue · scroll：监听滚动
滚动监听页面滚动在mounted中进行监听滚动：mounted () { window.addEventListener('scroll', this.scrollToTop)},在方法中定义监听滚动执行的方法：scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(sc
2021-10-20 19:28:18
6010
原创 Vue · swiper、vue-awesome-swiper
1、安装swiper4npm install swiper vue-awesome-swiper --save或指定swiper3//直接安装版本3即可，自动会选择3.1.3版本cnpm i vue-awesome-swiper@3 -S//或者手动指定cnpm i [email protected] -S2、引入模块页面引入即可，没必要全局引入，很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。全局引入（两个版本没有差别）import Vue
2021-10-20 17:21:08
724
1
原创 Vue · font引入外部字体
方法一：1、下载所需要的字体，.ttf格式（测试字体）2、 src下新建css文件，文件夹中包含以下文件font.css @font-face { font-family: 'Gen2'; src: url('./GenJyuuGothicMonospaceHeavy2.ttf') format('truetype'); font-weight: normal; font-style: normal; font-size: 18px; }3、引入字
2021-10-20 15:32:51
697
原创 Vue · elementUI
el-dropdown修改鼠标划过样式.el-dropdown-menu__item:hover { background: none; font-weight: 500; color: rgba(19, 29, 23, 0.8);}注意：给el-dropdown-menu添加自定义类名new-drop如果css中编写不生效（需要重新定义一个style，不要写scope）注意new-drop类名如果没有scoped会全局生效，所以一定注意不能重名，否则各个组件之间会相互影响参考：
2021-10-20 11:27:47
302
原创 CSS · border
实现border-width:0.5px;需求：把列表分割线改成0.5px直接写成border：0.5px solid #cccccc;是不符合规范的写法，依旧会显示1px。同时存在Android和IOS手机上的兼容问题。解决方法：利用CSS3的transform特性，放缩边框宽度来实现这一效果。HTML<ul class="list"> <li class="item">边框宽度0.5px</li> <li class="item"&g
2021-10-20 11:18:08
131
原创 小程序 · 在a页面中引入b页面以及点击事件
功能：在a页面中引入b页面以及点击事件解决方法：1.首先在a中引人b.wxml文件：分两种。includ和import。include和import区别2.然后在a中引入b.js。这里就需要在b中使用module.exports来暴露相应的方法。才能让在a中点击b页面时事件生效。这里就涉及到了如何绑定page{ }外定义的方法为响应事件。具体代码参考如下a.wxml：<include src="../b/b.wxml"/>a.js:var bJs = require('../
2021-10-14 17:39:44
354
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人