- 博客(44)
- 收藏
- 关注
RSS订阅
原创 小程序只展示for循环数据的前几条
// 展示数组的前两条数据<view wx:for="{{wow.commentList}}" wx:for-item="cos" wx:key="key" wx:if="{{index < 2}}"></view>
2020-11-10 14:42:43
3714
原创 微信小程序底部与顶部背景颜色文字颜色修改
1、单个页面修改顶部背景颜色与文字颜色{ "usingComponents": {}, "navigationBarBackgroundColor": "#17abe3",//背景颜色 "navigationBarTextStyle": "white"//文字颜色，只能为black 或者 white。}文字颜色，只能为black 或者 white，不然会出现以下情况：2、全局修改顶部背景颜色与文字颜色在app.json文件中找到window "window":{ "b
2020-07-02 12:19:35
13546
原创 2020前端知识点汇总(三)
1、隐藏元素的几种方法display:none;visibility:hidden;opacity:0;position:absolute; left:-1000;2、回答以下输出的类型alert(typeof(“undefined”));//stringalert(NaN == undefined);//falsealert(NaN == NaN);//falsealert(typeof(null));//objectalert(typeof(NaN));//numberale
2020-06-30 14:33:24
347
原创 2020前端知识点汇总(一)
1、JavaScript中 == 和 ===的区别== 用于一般比较，==在比较的时候可以转换数据类型;严格比较，只要类型不匹配就返回flase。2、下面代码会打印出来什么var a = 10;a.pro = 10;console.log(a.pro + a); // NaNvar s = 'hello';s.pro = 'world';console.log(s.pro + s); // undefinedhello3、 em 和 rem 的区别em:定义字体大小时以父级字体大
2020-06-29 09:33:18
638
原创 小程序的退出登陆功能实现代码
1、wxml中加事件<view class='pro' bindtap="loginout">安全退出</view>2、js中清除tokenconst app = getApp()Page({ /** * 页面的初始数据 */ data: { }, // 退出登录 loginout(){ wx.showModal({ ...
2020-05-06 17:52:57
9283
原创 微信小程序的几种弹出提示框
1.wx.showToast 消息提示框//icon：success 成功图标，loading 加载图标 （7个汉字长度），none不显示（两行文字）//image：设置自定义图标，优先级高于icon//mask:显示蒙层wx.showToast({ title: '成功', icon: 'success', duration: 2000})//隐藏消息提示框wx.hi...
2020-04-13 11:48:10
6313
原创 小程序picker普通选择器动态获取数据
效果如图：1.wxml：picker选择器<view class="box"> <picker mode='selector' bindchange="bindCommunicateChange" value="{{fashionidx}}" range="{{fashionList}}" range-key="{{'fashionName'}}" data-s...
2020-04-11 12:14:14
2485
原创 es6简介 let & const let与var的区别！！！
1、简介ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版，主要是为了解决 ES5 的先天不足2、let 与 constES6新增加了两个重要的 JavaScript 关键字: let 和 constlet 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。代码块内如果存在
2020-12-29 11:05:55
190
原创 微信小程序 返回并刷新上一页数据
var pages = getCurrentPages();//获取页面栈if (pages.length > 1) {//上一个页面实例对象var prePage = pages[pages.length - 2];//调用上一个页面的onShow方法prePage.onShow()}
2020-12-09 13:51:18
2681
1
原创 小程序fiexd定位后sroll-view失效
1、wxml部分<view class="cont"> <scroll-view scroll-x class="nav classify" scroll-with-animation scroll-left="{{scrollLeft}}"> <view class="item {{index==TabCur?'cur':''}}" wx:for="{{productCategories}}" wx:key
2020-11-19 17:28:23
188
原创 微信小程序获取当前地理位置
1、wxml绑定<view bindtap='getLocal'>获取位置</view>2、js部分// 获取当前地理位置 授权验证 getLocal(){ let that = this; wx.getSetting({ success(res) { if (res.authSetting['scope.userLocation'] == false){ // 如果已拒绝授权，则打开设置页面 wx.op
2020-11-17 17:52:23
250
原创 小程序实现点击后地图选择定位位置
1、wxml写点击事件并绑定数据<view class="address">{{address}}</view>2、js给一个默认初始值Page({ data: { address: "定位" }, handleAddressClick() { wx.chooseLocation({ success: this.handleChooseLocationSuccess.bind(this) }) }, handleChoo
2020-11-13 10:19:51
676
原创 小程序动态修改标题navigationBarTitleText
1、平时我们是在.json文件直接去设置页面标题{ "navigationBarTitleText": "首页",}2、想要修改标题可以给他动态设置，或者根据一些判断条件在.js文件中去设置wx.setNavigationBarTitle({ title: '我是修改后的标题啊'})...
2020-11-10 10:14:22
6338
原创 小程序弹出弹框隐藏底部导航反之出现
<view class="fabu" bindtap="showModals" data-target="bottomModal"> <image src="../../images/home/fabu.png"></image></view><view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}" bindtap="hideModals">
2020-10-26 15:19:20
722
原创 2020前端面试题-react
1、react diff 原理把树形结构按照层级分解，只比较同级元素。列表结构的每个单元添加唯一的 key 属性，方便比较。React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束,React 检查所有标记 dirty 的 component 重新绘制.选择性子树渲染。开发人员可以重写 shouldComponentUpda
2020-10-24 11:15:13
294
原创 如何解决跨域问题？
能说1，2，7，8就行。1、 通过jsonp跨域2、CORS3、 document.domain + iframe跨域4、 location.hash + iframe5、 window.name + iframe跨域6、 postMessage跨域7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域...
2020-10-13 16:54:47
256
原创 小程序图片海报在安卓保存失败的bug
在小程序中海报图片保存分享的功能实现中，部分用户图片海报保存不了检查原因：小程序在保存图片海报时，苹果手机图片扩展名还是.png安卓手机扩展名为.unknown，保存失灵解决办法：filePath: wx.env.USER_DATA_PATH + ‘/’ + fileName + ‘.png’,查看是否授权然后在执行保存方法savePoster: function () { let that = this wx.getSetting({ success(
2020-09-29 15:53:15
888
原创 小程序地图获取位置
首先需要在app.json中添加字段，给予权限"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } },不添加的话会出现以下情况此处我的经纬度是从上一页传过来的，展示当前位置Page({ data: { longitude: '', //经度 latitude: '', //纬度 markers: [{ id: 0, .
2020-09-18 15:41:09
214
原创 小程序前端调用微信支付
小程序调用微信支付前还需要一系列准备工作申请资质认证填写公司资料，等待审核通过拿到AppID和AppSecret申请开通微信支付，等待审核通过编写小程序端代码// An highlighted blockwxPay: function (e) { var that = this; wx.request({ url: app.data.address, header: { "Content-Type": "application/json;
2020-09-18 15:15:38
455
原创 小程序swiper小圆点默认样式改变
开发过程中swiper样式不喜欢，想要修改小圆点样式，拿到swiper下的小圆点进行修改，去设置想要的颜色，点与点之间的间距等等一系列样式/* 圆点的样式 */swiper .wx-swiper-dot { width: 35rpx; height: 7rpx; border-radius: 50%; display: inline-flex; margin-left: 19rpx; justify-content: space-between;}swiper .wx-swi.
2020-09-17 10:40:29
819
原创 微信小程序圆角苹果手机不兼容
1、安卓手机圆角的正常操作就是直接border-radius：3rpx2、苹果手机圆角却不显示，需要加以下样式：.box{ border-radius: 6rpx; overflow:hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);}...
2020-09-17 09:24:09
880
原创 小程序修改名称功能显示隐藏实现
1.wxml中用wx：if 控制显示隐藏<view class="over" wx:if="{{!shows}}"> <text class="fl">{{personalInfo.userName}}</text> <text class="edit" bindtap="edit">修改</text></view><view class="over" wx:if="{{shows}}"> <input
2020-08-03 10:45:04
481
原创 2020前端知识点汇总(五)-vue
1、vue的组件通信？父传子用props父用子用ref子调父用$emit无关系用Bus2、vuex？组件通信库，可以避免子组件无法改变props的弊端等 mutations 同步操作， 用于改变状态 官方不推荐异步 action执行多个mutaions，官方推荐异步操作 mapState、mapGetters、mapActions使用示例3、vue的双向绑定？原理：利用了 Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set
2020-07-01 14:13:50
271
原创 2020前端知识点汇总(四)-小程序
1.简单描述微信小程序的相关文件类型?WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式js 逻辑处理，网络请求json 小程序设置，如页面注册，页面标题及tabBar。注意:app.json必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小
2020-07-01 09:40:52
394
原创 2020前端知识点汇总(二)
1、POST提交数据的几种常见Content-Type？Application/x-www-form-urlencodedMultipart/form-dataApplication/jsonText/xml2、什么是重放攻击？列举几种常见防御手段？重放攻击：入侵者从网络上截取主机A发送B的报文，并把由A加密的报文发送给B，使主机B误以为入侵者就是A，然后主机B向伪装A的入侵者发送应当发送给A的报文防御手段：①、加随机数：认证双方不需要时间同步，双方记住使用过的随机数，如发现报文中有以
2020-06-30 11:20:19
288
原创 理解优雅降级与渐进增强
1. 渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。2.优雅降级一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。...
2020-06-23 16:27:39
110
原创 css调整字与字间距与词语首字末字对齐
一、调整字与字间距.title{ letter-spacing: 2px;}二、词语首字末字对齐.title{ width: 110px; margin: 0 auto; text-align-last: justify; text-align: justify; text-justify: distribute-all-lines; }
2020-06-12 15:30:13
322
原创 安装vscode并安装一系列常用插件
一、官方下载地址 链接: https://code.visualstudio.com/二、一系列常用插件1、 Chinese - 中文（简体）语言包 - 安装完成后关闭软件，重新打开软件，显示中文2、Auto Rename Tag- 自动匹配重命名的闭合标签对应修改3、 ESLint - 检查Javascript编程时的语法错误。...
2020-06-04 11:29:36
707
1
原创 前端本地存储的几种方式以及他们的相同与不同之处
一、localStorage兼容性火狐3.6 谷歌5.0 Safari4 Opera10这些浏览器都支持,API基本一致,存在少许出入,不影响使用存储量一般5M左右，不同浏览器会有一点差别安全性不会放进请求头,可以节省大量的带宽,缩短请求时间,更加安全生命周期永久,需用户手动清除语法 (API)localStorage.setItem(k,v) //设置localStorage.getItem(k) // 获取localStorage.remo
2020-05-28 11:33:22
1290
原创 vue的v-if与v-show的相同与不同之处
相同之处：v-if 和 v-show 都是动态操作DOM元素，控制元素的显示隐藏。不同之处：v-if：根据条件判断去切换，不断地在DOM中去重建和销毁元素，达到显示效果v-show：带有v-show的元素一直都存在与DOM中，靠css的display属性去达到显示隐藏效果需要注意的是：v-if 如果在初始渲染时条件为false时，则等到条件变为true时才会开始渲染， 有着更高的切换开销v-show简单一些，元素始终被渲染，只需要css切换 ，有着更高的初始渲染开销。频繁切换
2020-05-28 10:32:57
441
原创 用vue-cli创建一个vue项目从0到1
1、先全局安装node.js，选择自己需要下载的版本即可node.js下载地址https://nodejs.org查看一下当前node版本，输出版本号则安装成功node -v检查一下npm包，输出版本号则安装成功npm -vnpm有局限性，安装cnpm淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2、等待npm安装完成后，安装vue-clivue-cli安装命令cnpm install -
2020-05-20 15:38:53
171
原创 用css清除浮动的几种方法
1、给外边父盒子添加overflow:hidden<style> .parents { width: 500px; border: 1px solid #ccc; overflow: hidden; } .leftson, .rightson { width: 200px; height: 200px; background: red; float: left; }</s
2020-05-19 10:06:19
128
原创 纯css来实现隔行变色功能
1、先写几个标签，或者for循环出你想要的个数<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>效果如图：2.用css的 :nth-child选择器实现p { width: 200px; height: 40px; text-align: center; line-heigh
2020-05-13 11:22:17
426
原创 css的单行、多行文本溢出隐藏
1、多行文本溢出隐藏.hidden{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}2、单行文本溢出隐藏.hidden{ overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap;}...
2020-05-12 13:43:16
1286
原创 vue的几种安装使用方法
1、直接引包<script src="lib/vue.min.js"></script>2、用webpack安装 npm init -y cnpm install vue webpack --save cnpm install vue-loader css-loader style-loader vue-template-compiler--save-dev ...
2020-05-06 18:12:10
192
原创 git命令整理与账号配置
1、git部分命令从远程仓库克隆git clone https://github.com/shi150511/one.git进入文件夹cd 文件夹名称查看本地分支git branch查看远程分支git branch -r创建本地分支git branch "name"创建分支并且切换分支git checkout -b cxl切换分支git checkout ...
2020-05-06 18:00:26
242
原创 小程序获取当前input的value值
1、wxml展示<view class="inpbox"> <input class="inp" bindinput='visitCustomerNameInput' value='{{visitCustomerName}}' placeholder="请输入内容"></input></view>2、js获取 Page({ /**...
2020-05-06 17:41:14
875
1
原创 小程序上一页面传值并在下一页面取值
1.在A页面wxml中拿到需要传的值<view class="row" wx:for="{{terminalVisitList}}" wx:key="key"> <view class="viewdetails"> <view bindtap="editbusinessTerminalVisit" data-id="{{item.id}...
2020-05-06 17:25:49
361
原创 小程序双层for循环
1、wxml// wx:for-item的值默认为item，第二层循环需要重新起个名字<view class="container" wx:for="{{categoryVos}}" wx:for-item="item" > <view class="title">服务分类：{{item.missionCategoryName}}</view> &...
2020-05-06 17:10:38
2214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人