H5/Mini-Program
文章平均质量分 62
雨声不在
有问题请在相关博客下评论,或者给我邮件 hello@yeshen.org。:)
展开
-
chrome extension无法获取window对象
上一篇博客之后,我要修改的网页有一个新改版,然后有个数据存在了window中,我直接在js中使用window.xxx发现无法获取。所以有本文。原创 2023-09-03 20:19:20 · 1361 阅读 · 0 评论 -
横向滚动的VIP效果
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Yeshen</title> <style type="text/css"> ul.vip-pad {whit原创 2020-12-05 11:29:41 · 301 阅读 · 1 评论 -
两个RGBA颜色合并
参考 https://gist.github.com/JordanDelcros/518396da1c13f75ee057var funcPrint = function(out){ console.log('red:', out[0].toString(16)); console.log('green:', out[1].toString(16)); console.log('...原创 2020-05-06 13:37:06 · 881 阅读 · 0 评论 -
H5获取设备信息
H5获取设备信息背景是有个同事在问这个事情,我吃完饭,也跟着看了一下。有如下一下可行的方法navigator.userAgentwindow.devicePixelRatio screen.height screen.widthnavigator.platformnavigator.vendor// iPhone model checks.function getiPhoneM...原创 2020-03-18 20:00:04 · 5201 阅读 · 0 评论 -
小程序 地区选择器
最近花了两周时间很急的上线了一个小程序,“CP对对碰“,上线后数据还可以,感觉小程序用来试错效果很好。今天才算缓过来,所以整理一下这段时间写的东西。 背景是用了官方API上的地区选择器具之后点选不了,看报错是地区的值没有PUSH进去,而且不是全部机器都有问题。官方文档在这里 用法是这样的 &amp;amp;lt;view class=&amp;quot;section__title&amp;quot;&amp;amp;gt;省市原创 2018-01-11 10:16:00 · 30052 阅读 · 4 评论 -
小程序 地区选择器 实现、调用
背景介绍在这里这里放一下实现,权当做笔记 region-widget.jsvar api = require('../../../utils/api/index.js');var constants = require('../../../utils/api/lib/constants');var raw = require('../../../utils/citys')...原创 2018-01-12 16:04:25 · 12355 阅读 · 12 评论 -
小程序 websocket
引文最近接了一下小程序的websocket。前几天产品问我们,IM要做几天,强哥说2天,我想着我也不能怂,调试接口也要一天,所以我这边一共要了3天。 真的做的时候,才想起之前的前端好像有为websocket苦恼过,还和产品&&强哥有过争吵….. 我之前徒手写过推送,所以一整套协议还是比较清楚的,看了一下官方文档 好像也不复杂。所以是三天搞定啦 : ) 。用在websocket上的时间只原创 2018-01-17 16:43:34 · 2735 阅读 · 3 评论 -
小程序delete方法在低端android机上存在兼容问题
今天有用户反馈说一个功能不能用,正好没事我给了他一点红包,找他联合调试了一波。结果是delete的兼容性问题。结论是 小程序 request 不能用 delete先看官方文档吧 问题出在android系统4.4.2,微信当前最新版本6.6.5后来在官方论坛找到对于的错误,略坑1, Android: DELETE does not support wr...原创 2018-03-20 19:24:32 · 1044 阅读 · 0 评论 -
小程序 左滑喜欢右滑讨厌的实现
引文发现自己好几天没更新了,今天有点空,还是做一点小整理&amp;amp;&amp;amp;记录吧。前几天,JK问我要之前做短视频的代码,收到代码后,他发出还是以前我们几个的代码质量高的感慨,才发现去年我也做了类似的事情,在android上。参考这篇文章背景背景是在小程序上做一个简化版的“探探”,什么是“探探”呢?大概是这样的效果。思路看了一下小程序的api,发现能支持到,先说思路...原创 2018-04-21 23:16:19 · 6626 阅读 · 9 评论 -
小程序录音及其动画
功能比较独立&amp;amp;amp;&amp;amp;amp;简单,大概是这样的交互先说录音吧,看 文档基础功能可以这样写,挺简单的~const recorderManager = wx.getRecorderManager()const innerAudioContext = wx.createInnerAudioContext()Page({ data: { intervalId:0, ...原创 2018-04-22 00:08:23 · 3700 阅读 · 3 评论 -
跨域、http header设置
跨域、http header设置跨域本质上是为了安全。不展开讲细节了,分享一下实际写代码中遇到的问题有几个点, 1,跨域是在服务器端设置的,服务器端没有设置,在服务器端的nginx设置也可以,要设置几个值:Access-Control-Allow-Origin:*Access-Control-Allow-Methods:"POST, GET, OPTIONS, DELETE"...原创 2018-03-27 12:13:04 · 10600 阅读 · 0 评论 -
Vue框架搭建
之前写kotlin论坛的时候搭过,然后大概是太简单了,没留下笔记,最近需要用到,蒙圈了一会,还是补下笔记。新建项目用的是webpack的脚手架,细节文档参考 http://vuejs-templates.github.io/webpack/ https://vue-loader.vuejs.org/npm install -g vue-clivue init we...原创 2018-03-21 14:10:56 · 370 阅读 · 0 评论 -
docker操作备忘
ubuntu1,安装docker在国内的速度很慢很慢,可以用阿里云的镜像加速器可以这样安装->Docker CEUbuntu 14.04 16.04 (使用apt-get进行安装)# step 1: 安装必要的一些系统工具sudo apt-get updatesudo apt-get -y install apt-transport-https ca-certificates curl ...原创 2016-12-06 23:13:50 · 794 阅读 · 0 评论 -
小程序 评分组件
发现小程序的文档很全,自定义组件也挺简单的 (PS:一直觉得小程序的框架和VUE的框架很像)分享一个评分组件,效果大概是这样的:jsComponent({ options: { multipleSlots: false }, data: { mark: 0, range:[1,2,3,4,5] }, properties: {原创 2018-01-11 10:55:32 · 2724 阅读 · 3 评论 -
小程序 JS拦截器
问了几个做前端的前同事,好像他们都对拦截器没什么概念。举个例子,就是有些请求我需要在登陆之后做,那么写一个拦截器,拦截之后才做请求。那么写业务逻辑代码的时候就不用去想登陆怎么和当前的业务耦合了,直接拦截一下。这个对于业务解耦还是挺有用的,简单写了一下。可以这样写:var login = function (options) { ... //登陆逻辑什么的 var原创 2018-01-11 10:45:27 · 3661 阅读 · 1 评论 -
IM概念、接入实践
这篇文章主要是从前端/客户端的角度分享下IM的通用模块、接入云信的方法、以及遇到的问题。IM的通用概念先想一下我们要什么基础的功能?比如聊天会话列表、群聊、一对一聊天、群管理、个人名片管理、好友申请与审核、黑名单、敏感词屏蔽、客服机器人、账号新建与登陆、图片\语音\表情聊天、消息撤回、消息已读。从客户端的角度上看,可能需要的技术有:长连接&短连接、消息存储与销毁、音/视频文件的上...原创 2019-05-26 18:00:45 · 1367 阅读 · 0 评论 -
让H5页面更像原生APP
其实google在这方面是做了很多努力的。比如webrtc/webassembly/progressive-web-apps国内大家比较熟悉的就是小程序了,小程序本质上也是H5。不过因为微信的高度定制,变得更可控&更安全。每天我们在使用的小程序,其实是一个个的H5页面。最近需要用到,和同事讨论之前,我查了一下资料,发现其实已经支持很全了。那么chrome在这个上面有什么支持呢?We...原创 2019-04-27 16:35:55 · 944 阅读 · 1 评论 -
聊天会话常用JS/CSS代码
滑动到列表底部$('.chat-dialog-cont').animate({ scrollTop: $('ul.im-chat-ul').prop('scrollHeight') }, 'fast');回车输入文字function onInit(){ $('textarea.chat-dialog-inp').keyup(function(event) { if (eve...原创 2019-03-28 22:36:43 · 2015 阅读 · 0 评论 -
去除 andriod webview 中图片被点击的蓝色效果
也是困扰了许久,最后我发现是css样式的效果。所以加了如下代码,禁用掉全部的点击态。<style type="text/css"> * { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0); ...原创 2019-01-24 09:35:20 · 664 阅读 · 0 评论 -
css 居中的简单方法
最近在写一个居中的H5弹窗,有个居中的效果,按之前雪峰说的方法,做了处理。然后有个需求,说关闭的按钮要随着中间的图片靠中。有点抽象,直接上图好了。方法一我是这样写的:<style type="text/css"> .dialog { position: absolute; left: 50%; top: 50%; ...原创 2019-01-24 09:31:39 · 224 阅读 · 2 评论 -
Nginx:创建CSR并安装SSL证书(OpenSSL)
原文来自 https://www.digicert.com/csr-ssl-installation/nginx-openssl.htm使用OpenSSL创建CSR并在Nginx服务器上安装SSL证书 使用此页面上的说明使用OpenSSL创建证书签名请求(CSR),然后在Nginx服务器上安装SSL证书。重新启动注意:安装SSL / TLS证书并配置服务器以使用它后,必须重...翻译 2018-07-06 13:43:49 · 6716 阅读 · 2 评论 -
CSS特殊按钮样式
这一周除了折线图,就是这个样式比较恶心了,UI效果是这样的;关键的css就只有两行:transform:skewX(-30deg);border-top-left-radius: 10rpx;第一行是向右倾斜30度,第二行是左上角加一个圆角。细节代码我也贴上来吧,权当作自己的笔记"welcome"> ... "submit" formType="原创 2018-01-11 11:07:38 · 1062 阅读 · 0 评论 -
渐变描边
最近有个需求是这样的,需要给头像描边,描渐变的边问了一下做前端的同事,他提供了两个思路:border-image::after + background: linear-gradient(red, blue)只是简单的css,最后我是两层嵌套,一层画背景渐变,一层画头像,大概是这样的&amp;lt;view class=&quot;avatar&quot;&amp;gt; &amp;lt;im原创 2018-04-07 12:13:19 · 697 阅读 · 0 评论 -
小程序 内存缓存
项目背景和上一篇博客一样。是一个和业务逻辑相关的问题了,就是我做页面路由(确定跳转到哪个page)要从后台拉数据,但是同样的接口在页面里面也会用到,为了更好的利用这一些数据,我在HTTP请求那里做了一点缓存。js代码是这样写的var data ={};var memory=function() { function push(key, value) { data[ke原创 2018-01-11 10:30:56 · 1944 阅读 · 0 评论 -
bilibili 镜像
最近看到同事share的一个bilibili的镜像网站。真镜像 :) http://www.ilidilid.com很神奇,效果大概是这样:扒了下代码,发现挺简单的.mirror_ifrom { -webkit-transform: scaleX(-1); animation: mirror forwards 0s; -moz-animati...原创 2018-02-28 13:13:04 · 23084 阅读 · 0 评论 -
移动端适配单位
之前做网站的时候有听前同事提起过,移动端的像素单位是 vw,今天刚好想起这个问题。 vw就是用屏幕宽度做适配,移动端千奇百怪的尺寸,用宽度适配能避免好多问题。下面是转载过来的。 原文阅读体验更好,墙裂建议直接打开链接 去原文 看! https://github.com/simaQ/cssfun/issues/1 https://webdesign.tutsplus.com...转载 2018-03-02 10:42:27 · 1880 阅读 · 0 评论 -
PS雪碧图快捷键
ctrl+alt+C原创 2016-04-28 11:02:17 · 1754 阅读 · 0 评论 -
HTML在IOS上的点击焦点错乱
最近在写一个工单列表,点击加载更多的时候,在IOS上会打开附近的一个item,然后打开item就跳页,就跳页了。很困扰,一开始以为是tap 和 a 的问题,把加载更多的高度提高也是无济于事,在android和chrome上也没有这个问题。中午突然想起以前也有遇到过这个问题,解决的方法是补充一个heighteg:#que-coop li{height: 72px;}补原创 2016-08-11 14:45:32 · 2260 阅读 · 0 评论 -
Flex 那些坑
最早看到flex的布局是在http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这个博客里面。后来交互也出了一些东西,看起来只有flex才能实现。交互图是这样的----------------------------item{width:100%}-------------------------------原创 2016-08-17 15:38:11 · 1454 阅读 · 0 评论 -
MVC ViewBag C#传值给javascript
备忘:C# using Newtonsoft.Json; public string getRaw() { return JsonConvert.SerializeObject(iChartList); }javascript: try { var data = '@Html.Raw(@ViewBag.model.g原创 2016-05-19 15:06:50 · 5042 阅读 · 0 评论 -
table 单行 超出打点
td:nth-of-type(1) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 199px;}原创 2016-04-23 14:36:59 · 1002 阅读 · 0 评论 -
兼容IOS android 页面滑动的CSS设置
<style type="text/css">#scroller { box-sizing: border-box; -webkit-overflow-scrolling: touch; position: absolute; width: 100%; top: 0px; bottom: 0px; right: 0px;...原创 2016-04-22 20:23:32 · 1856 阅读 · 0 评论 -
baidu touch.js在某些机子(Motorola XT531)上旋转不动
说起来是上上上篇博客遗留的问题了:http://blog.csdn.net/yeshennet/article/details/50531007测试的妹子发现这个机子完全不能转动,然后被提BUG了-_-进过上次读了一轮源代码,已经基本上清楚是这个库的结构了,在机器上打log出屏幕,发现在var rotation = this.getAngleDiff(move);这个地方代码还原创 2016-01-29 15:08:33 · 545 阅读 · 0 评论 -
baidu Touch.js 旋转不了
上一篇博客有写到这个东西:http://blog.csdn.net/yeshennet/article/details/50531007然后就有BUG了,BUG的内容是,当使用旋转元素的父元素有使用‘overflow:scroll’这个属性时,旋转很不流畅,而且会逆行只能去找找源码,毕竟IOS需要这个属性来支持另外一个'position:fixed'的属性,不然会导致页面错乱touch原创 2016-01-29 12:08:01 · 1012 阅读 · 0 评论 -
javasc json转String
困然了很久,网上找了一段代码,复制过来用json2str: function(o) { var arr = []; var fmt = function(s) { if (typeof s == 'object' && s != null) return _this.json2str(s); return /^(string|number)$/.test(ty原创 2015-10-29 16:06:44 · 688 阅读 · 0 评论 -
VS2010 MVC4下载地址
找了三个都是些奇奇怪怪的安装包,最后找到一个靠谱一点的:转载 2015-10-28 22:12:54 · 2503 阅读 · 0 评论 -
全面理解面向对象的 JavaScript
转载来自:http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本文将回归面向对象本意,从对语言感悟的角度阐述为什么 JavaScript转载 2015-10-26 16:02:08 · 465 阅读 · 0 评论 -
在Asp.net上获取svn版本号 的实践
找了一篇教程,http://blog.csdn.net/xxdddail/article/details/49280375不过发现实际上有些东西和上述的文章有点出去,我的做法是这样的:1、在项目路径下/Properties/ 复制一份AssemblyInfo.cs,复制的那份重命名为 AssemblyInfo.template.cs,修改AssemblyInfo.template.cs中原创 2016-08-12 11:02:15 · 750 阅读 · 0 评论 -
ASP.NET MVC 图片上传
author: Yeshentime:2016.11.11http://blog.csdn.net/yeshennet可以这样做:在代码目录下新建upload文件夹Controller:[HttpPost]public void Upload(HttpPostedFileBase upImg){ string fileName = System.IO.P原创 2016-11-11 10:34:06 · 830 阅读 · 0 评论 -
某"人格分析"H5代码分析
http://h5.shuntaiyuan.net/activity/internal_personality/index.html最近看到朋友圈的一个“人格分析“。大概是这样的。 设计挺好的,就是挺几段音乐,然后选感受。 出结果卡了半天。等得不耐烦,就抓下源码看看首先是ctrl+cmd+I然后我发现下面的代码简单说就是六个题目,一个题目不管,另外五个分...原创 2018-03-09 14:34:47 · 2428 阅读 · 0 评论