image frame

脑洞大开の乱乱想

放下碎碎念,重新出发

H5打开app

缘起

运营会给用户发一些营销和通知短信,短信会携带一个网址。领导希望打开对应网页的时候会弹窗询问客户是否使用app打开,能打开就直接在app打开了。

1
2
3
4
5
graph LR
A(点开链接) --> B[打开网页]
B --> C{弹窗提示是否app打开}
C --YES --> 判断
C -- NO --> 正常浏览

scheme

最常用的方式是 scheme

经过测试,我们app的协议是

1
<a href="cn.wangxiao.zhuntiku://zdwx?param=%7B%22Type%22%3A2%2C%22TypeAction%22%3A0%2C%22Data%22%3A%7B%7D%7D">123</a>

代码由三部分组成:

  • cn.wangxiao.zhuntiku:// 。这个类似于 http:// 是一种协议
  • zdwx 。这个类似于 www.baidu.com 是url网址
  • ?param=xxx。 携带的参数

我们可以在页面里创建一个 iframe 或者使用js 跳转页面。

如果有app的话就会提示是否打开

问题

  • 有浏览器会直接报错,错误的页面
  • 不是所有用户都安装了app
  • 手机浏览器 Android Chrome 25+ 不再支持 scheme 只支持 intent://协议,需要用户手动点击才能跳转
  • 微信里不支持,除非是白名单,需要提示在页面里提示浏览器打开
1
2
3
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>
<iframe href="intent://xxx" style="display: none;">></iframe>// 失效
<iframe href="strange://xxx" style="display: none;">></iframe>// 失效

intent 协议

1
2
3
4
5
6
intent://
scan/
#Intent;
scheme=zxing;package=com.google.zxing.client.android;
S.browser_fallback_url=http%3A%2F%2Fzxing.org;
end

这个玩意也有兼容问题:

引用别人的文章 https://www.jianshu.com/p/76eaa1e0c2b2

目前市面上大多第三方浏览器都是基于 Chrome 开发,这就带来了兼容性问题(没有条件覆盖所有的系统浏览器,这里只是有限测试的结果):

1、部分浏览器,只支持 协议手动唤起,如chrome、锤子。

2、部分浏览器只支持 scheme唤起,如 UC 浏览器。

3、大部分浏览器,同时支持 scheme私有协议和intent://协议 自动唤起。但,都没有按标准的 intent://协议来实现(除了 360 浏览器,给 360 点个赞):

  • 有的浏览器在 App 没安装时并没有执行S.browser_fallback_url,而是跳转到应用市场如猎豹浏览器 4.46.3、乐视浏览器 1.2.1.29。
  • 有的浏览器不支持S.browser_fallback_url如搜狗浏览器、欧朋浏览器、猎豹浏览器。
  • 有的浏览器无论应用有无安装S.browser_fallback_url一直都会执行如 QQ 浏览器。

所以对这部分浏览器,不能使用 intent://协议。

4、更奇葩者,二者都不支持,如百度浏览器。

第一种,手动唤起。

第二种,第三种,自定义 scheme

第四种,百度浏览器无解。

解决方式: 判断常用浏览器,如果是锤子和Chrome原生无解,只能避免误伤。

考虑到浏览器判断的难度,结合浏览器市场占有率的情况,我们最终的方案是暂时忽略 锤子系统浏览器、 Chrome 原生浏览器 这部分不支持 自定义 scheme 自动唤起 App 的用户。

链接直接唤起app

如果是短信里直接唤起app,会弹窗提示用app打开还是浏览器打开。要多一次选择,所以在 android6开始支持 deep links 点击链接直达 app

ios得使用 universal links ,要不然还是打开浏览器

结论: 从短信直接唤起app能不能行?

  • 安卓类用户 首选 deep links 安卓6+ 备选 inten-filter
  • iOS 用户首选 universal links ios9+

用户需要区分,不好用,还是得打开网页,再唤起app

iframe

无法明确判断是否安装了app,可以使用 setTimeout 尝试唤起app,如果没有唤起成功会触发下载行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var url = {}
var iframe = document.createElement("iframe")
var body = document.body
iframe.style.cssText='display:none;width:0;height:0'
var timer = null

$('#btn').on("click",function(){
if(/MicroMessenger/gi.test(navigator.userAgent)){
// 引导浏览器打开
}else{
body.appendChild(iframe)
iframe.src = url.url
timer = setTimeout(function(){
window.location.href = url.down
},500)
}
})
1
2
3
4
5
pageshow 事件,页面显示时候触发。在load事件之后触发
pagehide
visibilitychange 页面隐藏,比如切换tab
document.hidden 页面是否隐藏
由于各个浏览器的支持情况不同,我们需要将这些事件都给绑定上,即使这样,也不一定能够保证所有的浏览器都能够解决掉这个小问题,实在没办法的事情就不管了。

参考链接

一切为了营收!如何从推广短信链接唤起 App ?

mongo笔记

Docker 一条龙

docker启动

1
docker run -d -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=xinbao  -e MONGO_INITDB_ROOT_PASSWORD=12345678 -v ~/data-mongo:/data/db --name simple-mongo mongo:3.6-xenial

代码格式化

根目录。
.editorconfig 维护代码风格。

1
2
3
4
5
6
7
8
9
10
# editorconfig.org
root = true
[*]
charset = utf-8
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_tra... = false

docker常用命令

概念不讲了,写了好多次了,这里放常用代码块。

直接命令行

注意我的参数

启动 redis

1
docker run -d -p 6379:6379 -v ~/data-redis:/data --name simple-redis redis:5.0.6-alpine3.10

启动mysql

1
docker run  -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=12345678 -v ~/data-mysql:/data --name simple-mysql mysql:5.7

优化

目标:

  • 更快的构建速度
  • 更小的Docker镜像大小
  • 更少的Docker镜像层
  • 充分利用镜像缓存
  • 增加Dockerfile可读性
  • 让Docker容器使用起来更简单

总结

  • 编写.dockerignore文件
  • 容器只运行单个应用
  • 将多个RUN指令合并为一个
  • 基础镜像的标签不要用latest
  • 每个RUN指令后删除多余文件
  • 选择合适的基础镜像(alpine版本最好)
  • 设置WORKDIR和CMD
  • 使用ENTRYPOINT (可选)
  • 在entrypoint脚本中使用exec
  • COPY与ADD优先使用前者
  • 合理调整COPY与RUN的顺序
  • 设置默认的环境变量,映射端口和数据卷
  • 使用LABEL设置镜像元数据
  • 添加HEALTHCHECK

假设我们更新了 apt-get 源,下载,解压并安装了一些软件包,它们都保存在/var/lib/apt/lists/目录中。但是,运行应用时 Docker 镜像中并不需要这些文件。我们最好将它们删除,因为它会使 Docker 镜像变大。

1
2
3
4
5
6
7
8
9
FROM ubuntu:16.04
RUN apt-get update \
&& apt-get install -y nodejs \
# added lines
&& rm -rf /var/lib/apt/lists/*

ADD . /app
RUN cd /app && npm install
CMD npm start

WordPress Rest Api 介绍

高版本的wp(大概是4.x+),提供了 rest api ,并默认开启。我们通过访问 xx.com/wp-json 就能访问基础的api。

在网上看到的中文整理比较陈旧,英文官网429to many requests,在国内打不开了。我在这里简单整理一份。

目前以 GET 信息为主。

全局参数

筛选相关

_fields

api会返回较多数据,可以通过 _fields 筛选必要的结果。合理使用筛选能够加快api响应速度和传输速率。合理的返回结果页有利于前端进一步加工数据。所以每次的请求应该构建合适的 _fields 参数。
demo如下:

1
/wp-json/wp/v2/posts?_fields=id,date,content,excerpt,categories

这个结构,请求了网站的新闻列表,返回的信息比较整齐,冗余少。

构建参数,除了逗号分隔,也可以使用参数数据的方法,一般不常用。做参考

1
/wp/v2/posts?_fields[]=author&_fields[]=id&_fields[]=excerpt&_fields[]=title&_fields[]=link

注意:wp5.3+版本之后支持嵌套查询,对版本要求较高,收益不大,先忽略。

分页相关

1
2
3
4
5
6
key|value|description
page|1|分页
per_page|10|每页结果数
offset |1|跳过的结果数量
order|desc asc|默认倒序排列
orderby | date id includet title slug 等 | 排序字段

分页时候,返回的响应头里,包含两个字段:

  • x-wp-total 总数量
  • x-wp-totalpages 总页数

方便之后做分页

API 介绍

获取文章列表

1
wp-json/wp/v2/posts

返回的字段

  • date 发布日期
  • date_gmt gmt是国际时区0的时间
  • guid 唯一识别符
  • id 新闻id
  • modified 修改时间
  • slug 字母识别符
  • status publish 公开
  • excerpt 摘要
  • feature_media 特色媒体id
  • title content categories 等

参数

  • before after 时间戳 时间范围内的结果
  • author 或 author_exclude 特定作者
  • include exclude 指定id,不包含指定id
  • categories categories_exclude 包含的栏目

获取文章详情

传入id返回文章详情

1
/wp/v2/posts/<id>

##获取栏目

1
/wp/v2/categories

返回的字段,比较平常。特殊的:

  • parent 父类id

可以通过 post id 找到所在栏目

可以通过 category id 找到子栏目 方便做导航 0 默认大站

1
/v2/categories?parent=3

搜索

先略。

从简历说起

这段时间公司前端岗要增加两人,就在拉钩上挂上了,JD侧重静态实现,vue技术栈,小程序概念。如果对前端工程化和node express有经验就更好了。

简历

把用人需求挂到拉钩之后,每天收到至少一页20条简历,两天不看就看不完了。看下来很累人,简历大部分都不大行,都是vue 全家桶api使用经验,深入使用和特色类的项目较少。项目经验多半都是管理后台*1spa*1,因为相似项目实在是多,有点视觉疲劳。

简历格式,可以使用拉钩推荐的,也可以自己上传PDF。PDF兼容性好自然不必说,但有的pdf流血距离太大,也就是网页留白太多,导致阅读体验不佳。还有的是table布局和左右布局,感觉太复古不符合前端审美,看着很乱,还不如一层一层往下写。

我也说不好怎么样的简历让人喜欢,从顺眼的角度来看,项目描述应该着重描述自己承担的责任和使用技术解决的问题,而不是写作文项目是干什么的,用来abc技术,堆砌技术词汇。看不出自己岗位发挥的作用,更别提项目反思和技术收益了。

面试

面试至少得知道面试的公司是做啥的,清楚大概的业务方向和赢利点。你说大老远使用各种交通工具赶过来了,公司干啥的啥都不知道,被骗了可咋办?

根据JD按碟下菜,我想要小程序和前端工程化就有意识突出呗。

作为面试者,技术面试行不行你说了也不算,那就自信点,技术不行,态度诚恳,求知欲望表现的强烈点,不吃亏。

怎么介绍做过的项目

背景

为什么要做项目,项目当初如何选择的技术栈。也就是背景,多讲一些铺垫,让别人对项目有更好的理解,很多项目和行业或者业务强挂钩,不容易理解。

承担的责任

项目都有谁参与,自己做了哪些工作。

项目结果

用了多久,上线效果怎么样,遇到啥bug没有。

项目反思和技术沉淀

有啥收获,有啥技术总结。

面试题要不要刷,博客要不要写

要。要。
一面技术面,就是面试高频题,你不看,都没法继续进行。
自己准备时候也是有意识整理知识点,整理的过程就是技术产出和复盘的过程,有了博客至少表现得有沉淀实力。

希望未来自己能够掌握vue源码,和深入node

chrome 扩展推荐

最近网络不稳定,加上电脑经常切换,历史记录和插件有点跟不上我变化的脚步了,尝试使用 360急速浏览器解决书签和历史记录不同步的问题。

这里记录我的Chrome插件:

wordpress 笔记

备份

备份数据库

可以远程登录mysql进行备份。
一般情况下,建议通过插件来完成。WordPress Database Backup

疑难杂症

文件权限

docker 里的wordpress不让安装插件,不让修改文件。一般就是文件权限不同。

1
2
docker exec -it xxx bash
ls -l

找到明显不一致的归属,比如某个文件夹明显不对。执行:

1
chown -R www-data:www-data 文件夹

这样就可以了。

标签

bloginfo()

  • name 网站标题
  • stylesheet_url主题样式表文件style.css的相对地址
  • pingback_url博客的Pingback地址
  • template_url 主题文件的相对地址
  • version 博客的Wordpress版本
  • url WordPress博客的绝对地址
  • charset 网站的字符编码格式
  • html_type 网站的HTML版本

主体

  • the_content(); 日志内容
1
<?php while(have_posts()) : the_post(); ?> 如果有,则显示全部日志
  • 结束 标记

    1
    2
    <?php endwhile; ?> 结束PHP函数”while”
    <?php endif; ?> 结束PHP函数”if”
  • get_header(); header.php文件的内容

  • get_sidebar() sidebar.php文件的内容

  • get_footer() footer.php文件的内容

  • the_time(‘m-d-y’) 显示格式为”02-19-08″的日期

  • the_title() 显示一篇日志或页面的标题

  • the_permalink() 显示一篇日志或页面的永久链接/URL地址

  • the_category(‘, ‘) 显示一篇日志或页面的所属分类

  • the_author() 显示一篇日志或页面的作者

  • the_ID(); 显示一篇日志或页面的ID

分类目录函数wp_list_cats() 或 分类列表函数wp_list_categories()用法举例

按照字母排序,并只显示 ID 为16、3、9和5的指定分类:

1
2
3
4
<ul>
<?php
wp_list_categories(‘orderby=name&include=3,5,9,16‘); ?>
</ul>

按照字母排序,显示每个分类的日志数,但不显示 ID 为10的分类

1
2
3
4
<ul>
<?php
wp_list_categories(‘orderby=name&show_count=1&exclude=10‘); ?>
</ul>

百度统计基础概念

搬运自团队博客

百度统计学习笔记

作为前端把页面写好是基本功,作为离用户最近的技术人员,还要了解用户是怎么使用页面的,他们对哪些感兴趣,大群体的趋势是什么——页面监控和统计就显得非常重要,网站统计要用对,用好。

公司用的是百度统计,其他的统计平台很多人倾向于使用 google analytics,这个以后再看。

首先申请权限账号,能够登录百度统计的后台,查看相应数据。

基本概念

  • pv。pageview 页面浏览。用户进入页面,pv+1,打开新页面pv+1,体现的网站内容的展现量。
  • uv。user-view 用户数。一个用户这一段时间内打开看了若干页面,算一次uv,体现的是网站用户数
  • 独立ip。ip地址理论上对应到一个用户,这个用户可能多次不同时间访问,体现的是用户的属性。
  • 跳出率
  • 在线时长

一个用户有可能多次打开这个网站,每次流量若干页面。比如,你早中晚流量新浪微博,百度贴吧,每次看不同的内容。

百度统计js api

基础用法

推荐在head里添加,或者尽可能早添加统计代码

1
2
3
4
5
6
7
8
9
10
<script>
var _hmt = _hmt || [];
// 放置其他js api
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?fd91d2ffbfa83c234c1cee672a69326c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

pv追踪

pv追踪, trackPageview

统计异步pv。针对的是纯js页面,比如单页面,比如浮层。

当ajax页面生成,行为触发时候

1
2
_hmt.push(['_trackPageview', pageURL]);
//pageURL:指定要统计PV的页面URL。此项必选。必须是以"/"(斜杠)开头的相对路径

点击登录出现浮层,可以在click时候

1
2
<a id="login" onclick="_hmt.push(['_trackPageview', '/virtual/login']); showLoginDialog();" 
href="javascript:void(0)">
登录</a>

这样受访页面就能看到数据。

事件追踪

有些事件需要统计,比如暂停,播放,点击按钮等

1
_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);
  • category 类型名,视频操作
  • action 起个名,点击播放
  • opt_label 额外信息,视频名
  • opt_value 数值。

自定义变量

自定义一个变量。在统计pv时候追加数据。

访客有三种范围:

  1. 访客级别,和ip有关。统计vip和普通用户的数量
  2. 访次级别,和uv有关。登录用户的次数
  3. 页面级别,和pv有关。页面上的按钮最常点击
1
_hmt.push(['_setCustomVar', index, name, value, opt_scope]);
  • index:是自定义变量所占用的位置。取值为从1到5。该项必选。
  • name:是自定义变量的名字。该项必选。
  • value:就是自定义变量的值。该项必选。
  • opt_scope:是自定义变量的作用范围。该项可选。1为访客级别(对该访客始终有效),2为访次级别(在当前访次内生效),3为页面级别(仅在当前页面生效)。默认为3。

因为我们的新闻页网址区分不出频道,所以添加了 页面的自定义变量

切换账户

1
_hmt.push(['_setAccount', '0123456789ABCDEF0123456789ABCDEF']);

禁止统计pv

比如嵌套了iframe页面,不希望统计pv,使用这个

1
_hmt.push(['_setAutoPageview', false]);

电商数据统计

_trackOrder

百度统计后台

左侧导航栏。接下来逐个看。

网站概况

主要内容

  • 今日流量。可以看到网站运行的整体情况。几个关键词。今日昨日的pv,uv等信息。整体概况。
  • 趋势图。折线图展示多个维度,可以按时间段查看
  • 十大搜索词
  • 十大来源网站
  • 十大入口页面
  • 十大受访页面
  • 新老访客
  • 访客属性
  • 地域属性

流量分析

  • 实时访客。获取到当前用户正在访问哪些页面,怎么进入的,看了多久。没事点进去看看有没有问题

  • 趋势分析。一段时间内的实时数据。可以看到访问高峰,跳出率变化

  • 跨屏分析。百度网页统计+移动应用统计。应该可以交叉对比。没开。

来源分析

  • 全部来源。可以看到不同的来源

  • 搜索引擎。有价值。神马搜索的跳出率好高啊。为啥高,看来源页面,全是地区页。

  • 搜索词

访问分析

  • 受访页面。按照页面排名,优化的主要信息来源
  • 入口页面
  • 受访域名
  • 页面点击图。监控一部分页面,获得点击热力图。看了结果会很唏嘘的
  • 页面上下游
  • 事件分析
  • 子目录。可以监控不同的频道。但因为新闻页的网址没有规律,可能没啥用。我们的做法是传了 sign,自定义变量

什么是数据转化

数据转化漏斗

放到到达目标页比如订单完成页,注册成功页所经过的一系列中间页面。

比如注册,阅读协议,填写信息,提交注册,注册成功一系列步骤。在这些路径里设置好信息采集,生成报告。

img

这里设置好路径。

请我喝杯咖啡吧~