分类目录归档:JavaScript 类别

小喵心语

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

小喵心语开发 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 进行了优化,并没有过大的改动。

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

云开发

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

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

邀你看漫画

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

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

继续阅读小喵心语

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小程序问答

JavaScript实现可重复倒数读秒

动态提示能很好的提高一个网站的人性化程度。比如下载页面,很多网站都有倒数秒的功能 “5..4..3..2..1秒钟后即将开始下载”等这样动态提示语。有时候的需求只需执行一次不用清零,而有时我们需要反复的执行倒数秒的功能。

利用 JavaScript 代码,可以重复实现倒数读秒功能。

核心的 JavaScript 语法是:

setInterval(code,millisec[,”lang”])

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

对于只需一次调用的倒数读秒:

对于下载页面,跳转页面等,只需一次倒数读秒的,可以直接使用一次性代码即可:

在需要引用的地方插入HTML代码:

<p><span id="count-down">5</span>秒钟后自动返回文章页面</p>

其次,在网页底部引用 JavaScript:

<script type="text/javascript">
var seconds = 4; //倒数5秒 4=5-1
    setInterval(function() {
    if (seconds > 0) { //若要倒数至0秒 seconds >= 0
        document.getElementById("count-down").innerHTML = seconds; //打印秒
        seconds-=1;
    } else {
        clearInterval(timer); //防止多次累加
        return;
    }
}, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数 
</script>

演示 Demo

对于#需要重复调用的倒数读秒:

在需要引用的地方插入HTML代码:

<a onclick="t54321()"><span id="count-down">5</span>秒钟后自动关闭</a>

然后,在网页底部引用 JavaScript:

<script type="text/javascript">
    function t54321() {
    var seconds = 4; //倒数5秒 4=5-1
    setInterval(function() {
        if (seconds > 0) { //若要倒数至0秒 seconds >= 0
           document.getElementById("count-down").innerHTML = seconds; //打印秒
           seconds-=1;
        } else {
           clearInterval(timer); //防止多次累加
           seconds = 4; //重置倒数秒变量
           return;
        }
    }, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数
 }
</script>

演示 Demo

通过 onclick=“t54321()” 点击反复调用该函数。当然,你也可以使用其他交互方式进行调用操作。

继续阅读JavaScript实现可重复倒数读秒

JavaScript更改Copyright年份

随着站点的慢慢发展和变更,网站的结构必将趋于复杂,一个小小的站点最初可能就只有两三个页面,而几年后的规模肯定不止于此。每年的元旦假期前夕,总是最痛苦的时候,因为在12月31日,要将所有页面底部的 Copyright 的年份 +1,相当于每个页面都要发生边个更,并更新到服务器上,并刷新缓存。

利用 JavaScript 代码,可以获取当前服务器上的时间(与访问设备时间无关),来自动更新年份时间。

核心的 JavaScript 语法是:

dateObject.getFullYear()

getFullYear() 方法可返回一个表示年份的 4 位数字。该方法总是结合一个 Date 对象来使用,用 Date() 函数替代 dateObject 即可。

Date().getFullYear()

核心的 JavaScript 代码已经完成,接下来需要将其引入到 HTML代码中,并在合适的位置使用,可以利用  <span></span> 确定使用位置。(设定 id = footerYear

执行代码是:

document.getElementById(id) 方法可返回对拥有指定 ID 的第一个对象的引用。

document.getElementById(id)

这里定义了 id = footerYear,所以该写代码:

document.getElementById(‘footerYear’)

tablerowObject.innerHTML=HTML。innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。仔执行 innerHTML即可,改写代码:

document.getElementById(‘footerYear’).innerHTML

即,单独的JavaScript代码如下:

document.getElementById('footerYear').innerHTML = new Date().getFullYear() + '';

还可以引入到 HTML文件中 </body> 之前:

<script type="text/javascript"> 
document.getElementById('footerYear').innerHTML = new Date().getFullYear() + '';
</script>

然后在 Copyright 年份位置引入<span></span>

Copyright <span id="footerYear">2014</span> Scenery Architecture. All rights reserved.

就会输出(2017年):

Copyright 2017 Scenery Architecture. All rights reserved.

继续阅读JavaScript更改Copyright年份

PHP基于Linux服务器的随机选择

和朋友们一起聚会、参加活动,有时候想制作一个小小的抽奖程序来分法纪念品?不知道午饭或晚餐吃什么?你需要一个随机选择工具,来帮助解决你的困难选择症 🙂

展示效果:Demogithub_link

为了基于Linux服务器实现可以实时调取摄像头并上传照片的效果,编写时采用了PHP嵌套HTML的方法,在HTML主页面框架的先前插入了以下的PHP代码:

<?php
 $dir = "images/";
 $img = "";
 if (is_dir($dir)){
     if ($dh = opendir($dir)){
         while (($file = readdir($dh))!= false){
         if( $file<>'' && strlen($file)>2 ){
             $img .= '"'.$file.'",';
                                            }
                                                }
                             }
  $img = substr($img, 0, ( strlen($img)-1));
                  }
?>

一、基于Linux服务器的实时采集图片

你可以访问演示Demo页面的下一个目录  /camera/index.php 来启用摄像头的功能。

二、JavaScript实现随机选择

原理上是使用了JavaScript来实现对 /images 目录下的所有照片参与随机的选择:

$(function(){
  
  var alldata = new Array(<?php echo $img;?>);
  var num = alldata.length - 1;
  var show = $("#show");
  var btn = $("#btn");
  var open = false;
 
  function change(){
   var randomVal = Math.round(Math.random() * num);
   var prizeName = alldata[randomVal];
   show.html("<img src='images/"+prizeName+"' />");
  }
  
  function run(){
   if(!open){
    timer=setInterval(change,50);
    btn.removeClass('start').addClass('stop').text('Stop');
    open = true;
   }else{
    clearInterval(timer);
    btn.removeClass('stop').addClass('start').text('Start');
    open = false;
   }
  }
  
  btn.click(function(){run();})
  
 })

以上代码中用深绿色标注出来的就是timer计时器,用这段代码来控制变换的速度;用红色标注出来的就是选择目录。

random-selection-page 继续阅读PHP基于Linux服务器的随机选择