qq_40665861的博客

项目开发流程

1.单行和多行文本超出省略号<div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契;懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能

在前面的一篇文章里提到了，现有项目的升级，但升级结束并不意味这整个任务的结束。还有针对项目打包速度的提升，当一个vue的项目页面在200以上的时候，这个打包速度就会大幅度的降低。那么针对webpack的打包优化就是一件不得不做的事情了，webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。大小优化1.Externalswebpack 提供Externals的方法，可以通过外部引用的方法，引入第三方库： index.html<script src="https://code.

昨天突然提出要在小程序中使用SVG，因为我们的小程序项目是有主题色的。不同的主题色时有些图片一直是固定的，显的有些格格不入，所以打算使用SVG来实现根据主题色的颜色进行变化。什么是SVGSVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。是一个基于XML的图形描述语言。它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。SVG有哪些优势与其他图像格式相比，使用SVG的优势在于：SV

目录写在前面的话安装 webpack-cli ，升级webpack重新安装node包升级webpack-dev-server至3.X升级html-webpack-plugin升级vue-loader增加VueLoaderPlugin插件代码安装babel-plugin插件转换es6代码。同时安装webpack webpack-dev-server webpack-cli写在前面的话由于公司项目是19年创建的，因此还是基于vue/cli2搭建的，webpack版本也是3.6.0。（当时有vue/cli3和

原理概述前端文件上传这个可以说是一个老生常谈的话题了，其中主要用的是全栈的思维，和对http协议 、node⽂件处理的深入了解。在这里使用vue+element+nodejs来演示这个。1.上传功能初步实现formData <input type="file" @change="handleFileChange" /> <el-button type="primary" @click="handleUpload">上传</el-button>

一、成品展示与介绍在点击输入框的时候会弹出车牌输入键盘二、相关思路解析首先车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码。其中的八位数的车牌号码为新能源车的车牌号码。再次是对于输入键盘的设计。这里设计了两个键盘一个是有31位汉字组成的，第二个是数字加英文字母。最后是对交互的设计，在本次的设计中是从第一位开始输入。从最后一位进行删除，这样做的好处是

前言近期由于客户现场出现了非法接口的调用，为了处理此类问题和杜绝后续问题的出现。针对公司现有的项目实现接口加密，防止接口被恶意的调用。设计思路：客户端存储超级私钥，客户端返回加密的公钥。客户端先使用超级私钥对公钥进行解密，使用解密出来的公钥对接口进行加密。把加密后的字符串进行验签发送给服务器，服务器进行字符串对比。相关引用文件文件的引用这里就只放截图了，源文件网上很容易找到的。这里使用jsencrypt.min.js是为了节省小程序的空间。获取服务器的加密公钥var baseURL = req

一、原型依据在我这个项目中小程序端所需要实现的只有红包雨的下落动画和通屏背景图的兼容，关于红包点击金额的计算是由后端实现的。首先来看下需要实现的效果图。二、实现代码首先是第一次进入的页面，在这个页面的时候会进行静默登录。静默登录成功的话会显示当前剩余次数，否则在点击开始的时候回跳转登录页面。不论是否登录成功都会去调用活动信息监测的接口，判断当前是否有可以参加的活动。在点击开始后进行三秒钟的倒计时，倒计时结束则转入下一个界面实现红包雨的下落。<!--RedEnvelopes/page

知识点汇总页面基础模型页面的基础模型部分介绍的是在浏览器中渲染一个页面时用到的建模方式。在这个模型中，它会把每个元素涉及成一个带有尺寸、边距的盒子（盒模型）；还设计了每个盒子排布的方式（定位）；同时这些盒子还可以有层叠关系，就要处理他们之间的叠加方式（层级）；此外，这个模型中还包含了页面的渲染方式（页面渲染机制）。这几种模型里都包含了什么具体内容，可以参考下图里的详细划分：CSS 基础CSS 基础部分讲的是 CSS 语言的特性，包括 CSS 选择器、样式优先级和计量单位。同时，这部分内容里还包含我

常用页面切图的设计与开发在一些大的前端团队中，前端工程师这个职位会出现一个分支，叫做重构工程师。重构工程师主要负责 HTML 和 CSS 的制作，也就是把设计稿转换成 HTML 和 CSS 代码。重构工作完成以后，把制作好的 HTML 和 CSS 交给 JS 工程师来完成 JS 逻辑的部分。一、首页的制作首页整个网站的核心，也是主要功能的入口位置。所以在设计这个页面的时候，我们会把最重要的内容安排进去。这个应用的首页会有搜索功能来直达各个模块，然后会使用网格组件来制作网站的导航，再下面会是一些推荐的文

UI 框架的集成这一章中我们把之前完成的代码进行优化、整合和包装，达到可以在实战项目中直接使用的状态。在这一章的内容里，会涉及到一些基于 nodejs 的工具，并且会使用 shell 脚本来完成一些辅助的工作。我们这一章主要包含两部分内容。第一部分是把我们之前零散的文件打包成一个最终压缩好的文件，提供给传统的项目使用。第二部分是再把压缩好的目标文件依照 npm 包的规则进行修改，并发布到 npm 源上，提供给一些基于 npm 的项目使用。下面来简单说下这两部分内容里都要做哪些事。一、文件方式的集成在

常用样式组件的设计与开发Search搜索框样式的设计与开发搜索组件的需求搜索框的功能比较简单，最基本的就是输入和提交两个逻辑。但是我们这个搜索框要额外的加一些细节，输入框分为输入状态和非输入状态，两种状态下输入框表现要有所不同。我们对这个搜索框组件会有以下要求在搜索框输入后，可以直接点击键盘上的搜索按钮进行查询。这样整个搜索工作都可以在屏幕底部的键盘中完成，不用再去页面顶部点击提交按钮，可以减小操作范围。在输入状态中，当输入框有内容时，提供一键清空的功能。在输入状态中，要有输入提示，且整个搜索

移动端页面布局一 项目的建立1 项目目录结构接下来要做的就是建立好项目的目录结构。一个项目的目录层级尽量扁平，不宜太深。根目录下面把样式库的核心CSS代码放在src目录下，里面包含主文件、公共样式和其他组件的样式文件。为了演示效果，在根目录下建立一个demo目录，来存放各个组件的演示代码。在后面还会在根目录下追加存放目标代码的dist目录和实战页面的page目录，这两个目录等用到的时候再建，现在可以按着下面的目录结构建立对应的文件夹和文件。2 基础文件的建立一、/src/reset.css文件

这一章里主要是介绍一下页面结构基础，CSS 选择器，页面渲染机制，屏幕适配方案，CSS书写规范。页面结构基础盒模型在浏览器中，每一个 DOM 节点渲染后，都会在屏幕上占用一个方形的区域，这个方形的区域就被称为盒子，我们把这种渲染方式叫盒模型。在盒模型中，我们主要介绍盒模型的主要属性、两种盒模型和边距折叠这三个内容：一、盒模型主要属性上面的三幅画，其实就是 HTML 中的三个盒子。对盒子大小和位置能产生影响的一共有四类属性，他们分别是：宽度（width）和高度（height），这两个属性分别决

一、 写在前面的话做前端开发的朋友，现在在写过 CSS时，大部分都是用些第三方的库。例如：Bootstrap，vant，easyUI，elementUI，layui之类的样式库或组件库。在使用这些组件库的时候，我们会发现用这东西写样式太省心了，按着文档给 HTML 上加几个 class，样式就神奇的出来了。习惯了用这些框架开发以后还会有一种错觉，就是我的 CSS 水平不错了，还能拿出几个挺像样的页面显摆显摆。但实际上，这通常是错觉，当遇到现有 UI 框架满足不了的需求时，自己写起样式来又会感觉特别吃力。

一、熟悉购物车所谓熟悉购物车，是指对购物车的所有商品的操作熟知。如：商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数，实现的时候才会轻而易举。UI图二、具体购物车功能在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化，还...

小程序中地图的应用一、获取微信地址二、联动搜索及模糊查询三、导航一、获取微信地址在小程序的开发中，内置了获取微信地址的API接口。我们可以直接调用，对返回的数据进行相关的处理即可。代码如下： <view class="wx_address flex_c_m" bindtap='weChat'> <text class="iconfont iconwei...

在utils文件中对Cookie的设置、获取、删除进行封装//设置cookieexport function setCookie (c_name, value, expire) { // var date = new Date() // date.setSeconds(date.getSeconds() + expire) //document.cookie = c_name + ...

一、左右布局分类效果图二、实现逻辑页面布局<!--pages/member/brand/brand.wxml--><view class="box"> <view class="b_top"> <view class="b_Search"> <text class="iconfont iconsousuo...

一、编写公共的样式首先写一套可以用来进行换肤的样式/* pages/member/skin/skin.wxss *//* 天空蓝 */ .blue-box { background: #5ba1e7 !important;}.extra-blue { color: #85bdf3 !important;}.blue-item { color: #a2cbf3 ...

一、获取key及在index.htm中引入首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script&g...

父向子组件传参父组件传递user(e) { let id = e.currentTarget.dataset.id; let detail = e.currentTarget.dataset.detail; wx.navigateTo({ url: '/pages/member/package-payment-code/package-pay...

分享监听/** * 用户点击右上角分享 */ onShareAppMessage: function(res) { console.log(res) if (res.from === 'menu') { return { title: '邀请赢好礼', path: '/pages/member/membership-re...

高德开放者平台申请api下载amap-wx.js文件js中引入var amapFile = require('../../../utils/amap-wx.js');在onLoad中通过微信方法获取经纬度，进行逆编码onLoad: function(options) { var that = this; wx.getLocation({ type: 'wgs...

1.首先封装公共地址var baseURL = 'http://hmspapi.afarsoft.com/';module.exports = { baseURL: baseURL} 2. 封装请求var baseURL = require('/api.js');// 展示进度条的网络请求// url:网络请求的url// params:请求参数// message:进度条...

前言在项目中会员进行注册的时候需要进行生日的选择，在常见的小程序前端框架中并没有农历的，不过倒是找到了插件实现农历的方法。但是为了在以后转版的方便，借鉴了一位大佬的算法，在其的基础上进行了二次开发。实现了可以随机选择公历或农历的一种。wxml文件<view class='modal-mask' wx:if="{{ showDatePickerPlus }}" bindtap='clos...

问题描述在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。问题分析当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...

在项目中会员进行注册的时候需要进行生日的选择，由于通用的UI库都是公历的并且万年历的形式不符合。也在网上查了好多资料，最后找到一套算法感觉还是不错的。经过加工分析封装成了一个vue组件。实现公农历转换的算法/** * 数组LunarDaysOfMonth存入农历1901年到2050年每年中的月天数信息 * 农历每月只能是29或30天，一年用12(或13)个二进制位表示，从高到低，对应位...

一、router中增加title二、在入口文件中进行判断

Vue做了一个单页面应用，它在一切设备上都工作正常。在调试另一个dug时，发现了这个问题。项目在其他端都可以正常打开，只有在paid上打开时，显示的是白屏状态。在刚开始解决这个问题时，花费了好几个小时都没解决，都准备从新编译代码了。发现并没有写错，uglify也没搞错，错的是Safari本身。他们在第十七万一千零四十一号bug中承认了自己的错误：We incorrectly throw...