尝试开发微信公众号消息推送功能并且和小程序关联by Liu Yue/2019-11-10 标签: 功能 并且 开发 推送 微信 程序 关联 尝试 公众 消息 之前写了几篇关于微信小程序的开发实践，总的来说没啥难度，感兴趣的请移步：使用Mpvue配合Weui开发面试题题库微信小程序，并且发布到正式环境,这一次我们来尝试开发一下微信公众号，那么公众号和小程序到底有什么区别呢？ 首先定位不同 公众号服务于营销与信息传递，小程序面向产品与服务。公众号主要用于信息的传递实现人与信息的连接，借助H5 能够实现简单的交互，主要以营销和信息传递为主简单的......了解更多
在半小时内从无到有开发并调试一款Chrome扩展（Chrome插件/谷歌浏览器插件）by Liu Yue/2019-11-05 标签: 插件 开发 Chrome 浏览器 从无到有 调试 谷歌 半小时 一款 扩展 就在不久之前，我们目前这个毕业班的班长那日同学和我说，他正在公司开发Chrome扩展，看起来很高大上的技术，实际开发却非常简单，这引起了我非常浓厚的兴趣，正所谓技不压身，检验自身技术的手段之一就是拥抱新事物，这一次我们尝试在半小时内开发一款Chrome扩展，因为之前我们做了一个微信小程序的在线面试题题库的项目，所以正好利用这个题库将面试题平移到Chrome扩展上面。 Chrome插件其实和一个普通web......了解更多
关于微信小程序体验版获取不到openId的问题by Liu Yue/2019-11-01 标签: 关于 问题 微信 程序 体验版 openId 获取 不到 我们知道openid是微信用户验证的重要标识，支付功能严重依赖这个东西，之前我们做微信支付的时候是通过在微信客户端直接调用官方接口，通过传code参数来调用，下面这样： getOpenId(){ //获取用户的openid let _this=this; wx.login({ success(res) { if (res.code) { ......了解更多
使用Mpvue配合Weui开发面试题题库微信小程序，并且发布到正式环境by Liu Yue/2019-10-14 标签: 使用 并且 配合 开发 环境 mpvue 微信 程序 面试题 Weui 题库 正式 发布 之前的一篇文章详细阐述了微信小程序开发的准备和入门以及环境搭建，这一次我们介绍如何将微信小程序如何上线，同时配合weui美化界面。 本次做的微信小程序项目是一个类似在线题库的功能，面试者可以通过小程序来检索笔试题，同时用户输入关键词时同步监听输入行为，不需要点击就可以获取知识要点，后台采用tornado+mongodb+mortor的组合实现异步非阻塞的接口。 首先weui是腾讯团队......了解更多
利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)by Liu Yue/2019-09-22 标签: 利用 网站 添加 模式 自定义 CSS3 暗黑 属性 究竟什么是暗黑模式？这个概念起初来源于macOS系统，该系统的mojave版本为用户提供两个主题皮肤，即浅色和深色的皮肤。自从有了这个概念之后，很多网站和系统都会用户提供了相应的两套肤色，便于用户根据自己的习惯或爱好进行切换 从科学的角度讲，低对比度的暗色可以降低屏幕对视网膜的刺激，同时还可以让电子设备更加省电。 在过往......了解更多
使用flex弹性布局来为微信小程序写自适应页面by Liu Yue/2019-09-03 标签: 页面 布局 适应 使用 微信 程序 flex 弹性 我们知道，写习惯了前端的人，一般切图后布局页面的话，上手最习惯的是基于盒子模型的浮动布局，依赖 display 属性 + position属性 + float属性，但是浮动布局有一些致命的小问题，比如垂直居中比较费劲，比如著名的float坍塌问题，另外有些极端情况下，还得使用模型+clear:both来手动清除浮动，比较麻烦。 于是，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局......了解更多
使用基于mpvue的框架开发微信小程序（搭建环境）by Liu Yue/2019-08-26 标签: 框架 使用 基于 开发 环境 搭建 mpvue 微信 程序 美团很早就开源了mpvue这个项目，如此看来，美团可不仅仅是一家团购网站，真正的技术驱动型企业，使得我们多了一种用来开发微信小程序的框架选项。由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用，但是瑕不掩瑜），这给使用过Vue开发Web应用的前端开发者提供了极低的门槛来开发小程序。 搭......了解更多
彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）by Liu Yue/2019-07-02 标签: 应用 session cookie sessionStorage localStorage 弄清楚 面试 场景 彻底 区别 客户端状态保持是一个老生常谈的问题了，归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式：session,cookie,sessionStorage,localStorage 首先cookie和session: Cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏......了解更多
使用Hexo建立一个轻量、简易、高逼格的博客by Liu Yue/2019-06-25 标签: 一个 使用 博客 轻量 Hexo 高逼格 简易 建立 在之前的一篇文章中，介绍了如何使用Hugo在三分钟之内建立一个简单的个人博客系统，它是基于go lang的，其实，市面上还有一款类似的静态页生成器，就是Hexo 读音/hækso/ ，它是基于node.js的，和Hugo一样，Hexo 正常来说，不需要部署到我们的服务器上，我们的服务器上保存的，其实是基于在hexo通过markdown编写的文章，然后hexo帮我们生成静态的html页面，然后，将生成的html上传到我们的服务器。简而言之：hexo是个静态页面生成......了解更多
具体谈谈如何优化前端性能的总结by Liu Yue/2019-05-30 标签: 性能 如何 总结 前端 谈谈 优化 具体 前端是庞杂的，包括 HTML、 CSS、 Javascript、Image 、Video等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 从服务商角度而言，优化能够减少......了解更多
使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动appby Liu Yue/2019-05-26 标签: 移动 使用 打造 基于 属于 自己 js 开发 vue Hbuilder app 混合 模式 近几年，混合模式移动应用的概念甚嚣尘上，受到了一些中小型企业的青睐，究其原因，混合模式开发可以比传统移动开发节约大量的开发成本和人力成本。 Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 说白了，如果走传统移动开发路线，......了解更多
利用vue.js双向绑定机制和vue-resource在前端异步上传文件by Liu Yue/2019-04-30 标签: 异步 上传 利用 js 文件 vue resource 绑定 双向 前端 机制 之前介绍了一个基于jquery的uploadify插件，可以用来上传文件：Django2.0.4+Uploadify3.0(h5版) 实现多文件异步上传和删除 但毕竟这是面向过程基于节点的插件，如果前端使用vue.js的脚手架，就要入乡随俗，利用vue.js自带的vue-resource来实现异步上传视频文件 首先安装 vue-resource 没必要全局安装，所以只在需要用到的项目中安装即可 cnpm install......了解更多
利用grunt插件来压缩js和css文件用来减少http请求，提高页面效率by Liu Yue/2018-02-20 标签: 用来 页面 利用 插件 grunt js css http 压缩 请求 效率 文件 减少 提高1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址：https://github.com/mishoo/UglifyJS css我用的是clean-css github地址：https://github.com/GoalSmashers/clean-css 图片用的是node-......了解更多
FLOAT坍塌原理及解决方案by Liu Yue/2017-08-15 标签: 解决方案 FLOAT 坍塌 原理什么叫float坍塌？先看一段简单的代码<div class = "parent-container"> <div class = "left-container"></div> <div class = "right-container"></div></div>.parent-container { width: 400px; border: 5px solid #FF6B5B;}.left-contai......了解更多
关于响应式设计最新的适配方案by Liu Yue/2017-07-12 标签: 关于 响应 设计 适配 最新 方案 截至目前最靠谱的响应式设计讨论 https://www.w3cplus.com/css/vw-for-layout.html 记录一下......了解更多
rem在响应式布局中的应用by Liu Yue/2017-07-09 标签: 响应 布局 rem 应用rem在响应式布局中的应用最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。关于媒体查询还有媒体查询的一些兼容性问题，网上介绍的很多其实响应式布局中主要困扰我们的问题还是元素的等比缩放。目前的元素的等比缩放主要有以下两种解决方案。实现等比缩放的一些方案1. 利用img元素的等比缩放特点这种情况最为常见，只需要百分比设置img元素的宽度，img元素的高度就会随着宽度等比缩放。这也是我们在响应式界面......了解更多
说说各种居中by Liu Yue/2017-06-23 标签: 居中 各种单行居中 div{ height: 26px; line-height: 26px; overflow: hidden; text-align:center; }1. 同时支持块级和内联极元素2. 只能支持单行垂直居中，并且不支持标......了解更多
移动布局方案(转载)by Liu Yue/2017-03-22 标签: 方案 转载 移动 布局layout viewport和visual viewport移动端浏览器和PC最大的不同在于大小（废话= =），那么怎样让网页友好的展示在移动端呢。很显然的，如果不做任何处理，很多页面的展示必然会乱掉。Apple也发现了这个问题，并定义了一个viewport meta标签，用来创建一个虚拟的**layout viewport**（布局视图），这个视图的分辨率接近pc，Apple将其定义为**980px**，其他厂商可能不同，感兴趣的可以自己写页面测试下。这就很好的解决了早期的页面在手机上显示的......了解更多
响应式设计笔记by Liu Yue/2017-02-21 标签: 响应 设计 笔记HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。下面的css是应用在宽度小于等于960px的屏幕上：@media screen and (max-width: 960px) { body { background-color: red; } } 此外，......了解更多
自适应与响应式的异同by Liu Yue/2017-01-27 标签: 响应 异同 适应 目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。在这先说明下这两者的异同：自从移动终端飞速发展以来，各种各样的机型突飞猛进，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，......了解更多
