分类目录归档:Code

网页自定义Facebook/Twitter/QQ/微信分享预览

我们幸幸苦苦做完网站后或多或少都会分享链接,如何让我们分享的链接分享更好看呢?就需要对各主流平台一一进行内容配置。

Facebook 的 Open Graph 和 Twitter Card 想必我们都很了解,使用相应的 meta 标签,定义相关内容即可。

Facebook

挑一些重点来说,一般常用的就如下几个:

<!-- Facebook Open Graph -->

<meta property="og:site_name" content="图筑风暻" />
<meta property="og:url" content="nousbuild.org" />
<meta property="og:title" content="图筑风暻" />
<meta property="og:image" content="http://nousbuild.org/icon.png" />
<meta property="og:description" content="欢迎访问图筑风暻官网。" />

如果需要更多 meta 标签,你可以访问 Facebook 页面,或是 The Open Graph protocol 查看:

地址:Facbook Open Graph(可能需要科学上网)

地址:The Open Graph protocol

Twitter

Twitter 采用的也是 meta 标签,只是标记不同,常用的如下:

<!-- Twitter Card -->

<meta name='twitter:card' content='欢迎访问图筑风暻官网。' />
<meta name='twitter:site' content='@图筑风暻' />
<meta name="twitter:url" content="nousbuild.org" />
<meta name='twitter:title' content='图筑风暻 | Scenery Architecture' />
<meta name='twitter:image' content='http://nousbuild.org/icon.png' />
<meta name='twitter:description' content='欢迎访问图筑风暻官网。' />

用法也不用多说,大家肯定都很熟悉,如果需要更多 meta 标签,你可以访问 Twitter 页面:

地址:Twitter Card(可能需要科学上网)

QQ

咱们主流的社交软件当然是就是 QQ 和 微信了,下面先来介绍 QQ 链接自定义预览的方法吧:

<!-- QQ Sharing -->

<meta itemprop="name" content="图筑风暻" />
<meta itemprop="image" content="http://nousbuild.org/icon.png" />
<meta name="description" itemprop="description" content="Scenery Architecture" />

QQ 非常人性化,使用了通用标准,在 QQ移动Web开发平台 中可以看到示例:

也非常简单,仅仅只有 标题、缩略图、站点描述或内容,三个标签。

微信

最后一个,微信。为什么把微信放到最后一个写?是因为重要吗。当但不是!我放到最后一个仅仅是因为微信是最坑的一个!

你访问微信 JSSDK 文档会发现,仅仅只有引入 js 的方法,凭什么一个简单功能我还要引入微信的 js,不仅拖累加载速度,而且三天两头随意更改规则!气愤!!

于是我开始看看其他大企业的官网网站都是怎么设置的,直到我看到了星巴克的中文官网

让我们查看下星巴克的源代码:

星爸爸真是很良心的帮我们把注释的写好了,最底下的这个就是我们要的:

<!-- WeChat Sharing -->

<script>
  var WECHAT_TITLE = '图筑风暻';
  var WECHAT_DESC = 'Scenery Architecture';
  var WECHAT_IMAGE = 'http://www.nousbuild.org/icon.png';
  var WCHAT_NO_GA = '';
</script>

怎么样,很奇葩的使用了 js 模块来实现,而且插入 <script> 会导致此文章保存错误,真是坑。微信目前我发现了只有 标题、缩略图、站点描述或内容,三个标签。由于找不到官方资料,如果以后发现还有更多标签,我在更新此文章。

注意问题

最后说几个注意问题:

  1. 顺序。有时候你的通用 meta 标签在微信标签之前,读取时有时候会直接读取通用 meta 标签的内容,如果你的微信标签的题目与通用标签的题目不一致,很可能在分享链接时会出现内容替换。
  2. 缩略图。缩略图的链接如果使用相对链接出现问题,建议该用绝对链接。图片最好是正方形,尺寸大于等于300px。

如果你找到更多内容,欢迎评论交流。

继续阅读网页自定义Facebook/Twitter/QQ/微信分享预览

小喵心语

小喵心语 是我的原创校园漫画《那些年的校园与我们》发行的小程序平台。

小喵心语开发 v1.0

有了第一次开发小程序的经验,这一次开发起来就很游刃有余了。这一次我并不打算将漫画用网页版的形式发布与共享,而使用小程序,原因有以下几点:

  1. 因为小程序内不可以保存漫画图片(顶多就是截图,你能有我的宽2048px分片率的图片高?),达到一定程度的版权保护。
  2. 漫画故事由中学真人真事改编,向互联网所有访问者公布也不太好。再一个朋友、同学使用微信还是比较多的,也有利于仅在朋友圈范围内传播分享,这样更合适一些。
  3. 虽然小程序是个鸡肋,不看齐HTML5标准,但是坐拥10亿用户的微信,还是稍微开发练个手吧。

所需功能

作为一个小范围的漫画小程序,就需要一个不太难看的UI,和一个动态更新漫画的后台就可以了,有时间的话,还可以个彩蛋来活跃活跃氛围。

所以就需要至少2个页面就可以了,一个是主页,另一个就是漫画页面,能随着漫画的更新而更新。

我就用猫怎么了?!你管我~ 当然了,还有一个彩蛋页面,就看你能不能发现啦!!

这真的是后台吗?

没错,你没看错,后台就是这个不起眼的 .json 文件(是不是大跌眼镜),一个 .json 足够了,毕竟重点是画漫画啊!

当然,现在小程序有了云开发功能,你也可以使用小程序的云数据库作为后台开发:

当然,有个小坑,setData() 的时候注意留意一下数据有没有被写入。

与用别人的 API 不同的是,自己的 .json 完全自己定啊!想要什么类别就定什么类别,超级方便,还不用心里默默的吐槽这个 API 设定怎么会这么反人类。

小喵心语开发 v2.0

嗨!我又回来啦,现在距小喵心语 1.0 版本开发已经过去2个月啦,其实今年1月30日我就提交了 2.0 版本的小喵心语,并在过年后逐步更新并增强稳定性。那为什么等到 3 月底才继续更新这篇文章呢?原因是,懒!哈哈哈,其实是在学机器学习,并且又写了个小喵心语官网出来 cattalk.nousbuild.org,方便无微信或者讨厌微信的伙伴们看漫画的。

2.0 版小喵心语小程序与 1.0 版最大的区别就是以下两点:

  1. UI 更新,页面增加,功能分割更清晰。
  2. 更新使用 小程序云开发 可以增加更多互动功能。

UI与页面的调整

与 1.0 版的两个主页面不同,2.0 版增加到四个主页面,独立出了「表情包」页面,新增加了「个人中心」页面,整体 UI 进行了优化,并没有过大的改动。

找表情包更方便了,按人物归类,还有多人互动表情等你发现。我还专门写了表情添加教程,方便大家参考。

云开发

使用云开发,在节省服务器成本的同时,还可以与微信账户进行更多交互,例如用户登录、留言、反馈机制等等。

云开发比服务器端代码更简单、简洁,使用也非常方便。虽然功能、权限、可拓展性根本不是服务器对手,但是对于个人小型开发项目,还是很有用的。

邀你看漫画

快去看漫画吧!进入小程序或者访问 小喵心语官网

或者来看看漫画的创作中的故事,看这篇文章

继续阅读小喵心语

Windows/macOS/Linux下批量修改后缀名

Windows, macOS, Linux 系统下都有操作简单的批量修改后缀名的方法,无需安装或借助额外的工具,原生的操作系统即可进行批量操作。

我们可能经常需要在网络上获取资源,而有些网站的媒体文件没有后缀名,并使用 Javascript 或是相关加密播放工具在线预览和播放。当我们批量下载完这些没有后缀名的媒体文件后,如何批量修改呢?

Windows

Windows 操作系统有自己的 .bat 批处理文件,而且语法简单、操作简便,是不二之选。

Rename 命令就是我们需要的,一行语法即可搞定,下面以 .jpg 后缀批量修改为 .png 后缀为例:

ren *.jpg *.png

// * 是指后缀名之前的文件名称的通配符
// 红色 *.jpg 现在的文件后缀名
// 蓝色 *.png 想要修改后的文件后缀名

通配符一般分为两种:

星号(*) 可以代替0个或多个字符
问号(?) 可以代替一个字符

在记事本中输入后,另存为 .bat 文件,将 .bat 文件与要修改后缀名的文件放置在同一个文件夹中,运行 .bat 批处理文件即可。

下面,问题来了,如果是没有后缀名的文件,想要加上后缀名该怎么办呢?

ren * *.jpg

直接用 * 匹配名称即可,这里有一个问题,会将 .bat 批处理文件也修改为目标后缀名,其实影响不大,批处理指令我们使用完成后也会删除,如果你想要保留 .bat 批处理文件,可以使用 cd 添加执行目录

cd C:\Users\haoning\Desktop\add-jpg
ren * *.jpg

// cd 后路径为要修改的媒体文件文件夹地址
macOS & Linux

macOS 与 Linux 操作系统,那就要使用 Shell脚本 来完成这个任务啦!

Shell 语句总共分为三行:路径操作完成,以 .jpg 后缀批量修改为 .png 后缀为例:

for i in /Users/wuhaoning/Downloads/*.jpg;
do mv "$i" "${i%.jpg}.png";
done

// 第一行是在macOS“下载”文件夹中读取所有.jpg后缀的文件
// 第二行执行mv指令,现有后缀名写在{}中,目标后缀名写在最后
// 第三行结束sh语句

将以上代码保存为 .sh 后缀的文本格式,然后在 Terminal (终端) 中执行此 Shell 即可:

同理,如果是没有后缀名的文件,想要加上后缀名该怎么办呢?

for i in /Users/wuhaoning/Downloads/*;
do mv "$i" "${i%}.jpg";
done

同理,直接用 * 匹配名称即可,同样也有一个问题,会将 shell 文件也修改为目标后缀名,因为已有执行目录,如果你想要保留 .sh 文件,只需将 .sh 放到执行文件夹以外即可

继续阅读Windows/macOS/Linux下批量修改后缀名

树莓派开启声音及视频播放

什么?刚刚买回来点亮的树莓派是个哑巴?放音乐没声音,不是缺少输出设备,那就是默认设置不对啦。如何设置,并且可以让树莓派播放 1080p 的视频,看这里呀~

连接输出设备

首先,检查你树莓派的输出设备是否正确连接,不管是使用带有音响的显示器 HDMI 接口,还是 3.5mm 耳机或扬声器设备,确保他们正确连接并且供电正常。

设定输出设备

打开树莓派设置:

sudo raspi-config

进入 Advanced Options → Audio:

默认的 Auto 是不行的,你必须选择使用 1 或 2 其中一个作为音频输出设备。我连接的是 Dell S2419H 带音响的显示器,所以选择 强制 HDMI 输出即可,就可以播放音频文件啦。

用 Chromium 浏览器播放下看看,没问题!

但是不能总用 Chromium 播放音频和视频吧,所以装一个媒体播放软件还是很有必要滴~ 我推荐安装 Omxplayer,如果喜欢命令行的朋友可以自己安装 mplayer。

安装 Omxplayer

老规矩,先更新下系统组件和核心:

sudo apt-get update
sudo apt-get upgrade

到 Omxplayer 页面查看最新的下载版本及地址:点击进入

这是当时目前最新的版本,复制 .deb 下载链接,使用 wget 安装:

wget https://omxplayer.sconde.net/builds/omxplayer_0.3.7~git20170130~62fb580_armhf.deb

dpkg omxplayer_0.3.7~git20170130~62fb580_armhf.deb

测试后支持的格式:.mkv .avi .flv .mp4

全屏播放的参数是 -r :

sudo omxplayer -r -0 local test.mp4

如果想用HDMI的输出声音,在/boot/config.txt 里面设置HDMI_DRIVER=2,然后终端输入:

sudo omxplayer -o hdmi test.mp4
相关参数

可以查看 Omxplayer 官网的说明:点击查看

或者查看树莓派官网帮助信息:点击查看

可视化

下面开始可视化啦,一款用python写的omxplayer图形播放界面,虽然很简单,但是还是很好用的。

安装
wget http://pexpect.sourceforge.net/pexpect-2.3.tar.gz 
tar xzf pexpect-2.3.tar.gz 
cd pexpect-2.3 
sudo python ./setup.py install 
cd..
安装图形软件:

Github 项目地址:点击进入

git clone https://github.com/KenT2/tboplayer.git 
cd tboplayer
运行软件:
python tboplayer.py

回车一敲,简单的图形操作界面显示出来了。

继续阅读树莓派开启声音及视频播放

CityWeather小程序问答

城市天气 CityWeather,一个简约风格的世界主要城市的天气查询小程序,是微信讨论组中分享天气的极佳途径,下面来看看这款小程序的开发过程吧~

城市天气 CityWeather 是我开始学习微信小程序开发的第一款 Mini Program,选择从一个简单的天气小程序入手。你也可以从 Udacity 上学习次小程序:点击查看

天气程序需要什么样的功能?

市面上的天气应用或小程序很多很多,但随着应用/小程序不断更新,这些天气应用变得就比较臃肿了,比如一些天气应用/小程序还添加了广告、应用推荐、打赏、账号登录等七七八八但功能,完全脱离了应用/小程序本身。一个好的应用/小程序,就应该在它该出现的时候出现,不需要的时候就不出现。

城市天气 CityWeather 就是这么一款简单的天气小程序,专注于天气本身,一款插画风格的可爱天气小程序,给你每个季节、每个天气应有的“温度”。开发者 Mickey Wu

社么样的天气显示最直观呢?

整体UI设计,当然是插画风格啦!简约、可爱的天气插画背景,让你直接看图片就能直观的看到当天的天气。

因为天气情况很多,最基础的天气就是譬如 多云小雨中雪 等常规天气,还有 微风和风大风 等刮风天气,当然还有一些极端天气 沙尘暴浮沉,甚至是代号为999的,只有会在世界末日中才会出现的 未知天气。目前的部分天气素材来自于Udacity以及网络。

小程序如何内容布局?

第一页UI采用上下两栏设计,上部将近60%的区域用来显示当前天气以及最具特色的天气背景插画;第二页UI采用列表样式布局,显示未来7天天气预报。

当然,未来可能会在增加一个页面用来显示当前天气的风速日出日落时间空气质量紫外线强度等内容。

如何设计好的图标?

应用/小程序 的图标可谓第一脸面,用户最先看到的必然是小图标,所以一个好的图标对于应用/小程序的推广有着举足轻重的作用。如何在众多天气应用/小程序图标中脱颖而出?

当然是在明确主题的同时,美观、简约、有特点,这样能让人第一眼留有印象。

小程序开发

这一步骤是坑最多的,尤其是微信小程序开发工具的bug也非常多,经常代码是正常的,但是模拟器卡死或没有应用的效果,macOS原生中文输入法有时也会出问题,输不进入字符等一系列问题。

我也非常建议学习小程序开发的你,去Udacity上跟着一起制作:开始学习

还有一些历史问题,一些淘汰的函数和接口也得自己排查,比如跳转页面的 wx.openSetting 接口:

 

小程序推广与分享

城市天气 Weather City 的官方页面:点击进入

城市天气 Weather City Github 项目:点击进入

更新日志

v1.1.1版增加小程序分享功能?

更新分享功能,并且直接点击进入即可查看天气,查看完后可以直接关闭,就跟查看聊天图片一样简单,用时打开,不用时则静静的推出,增加城市天气在群聊中的互动性。

未来也会重新绘制天气背景,增加一个当日详细信息页面,用于查看 空气质量、风速、紫外线强度、日出日落时间等;再或者,加入一个夜间模式也说不定哦,白天打开时显示白天的天气插画,夜晚打开时夜晚的天气插画,当然这都是未来需要做的事情啦。

 

继续阅读CityWeather小程序问答