0%

前言

这两天恰逢软件系答辩,扫了一眼我大数本的毕设题目,好家伙八成是Web项目,怎奈我手痒+技穷,只能尝试用PHP来写个天气Demo了,说实话这两年国内好用的天气API接口越来越少了,心知天气算是比较坚挺的一个,申请完接口后发现稳定性还不如用公共开放接口,当然获取的信息也会少很多,没关系,我们懂原理就好。:)

开发准备

心知天气官网

值得一提的是,官网为我们准备了两套天气图标,虽然风格较老,但是做做demo没问题的。

核心代码

从心知API返回天气JSON数据

function weather(){
@$location=$_POST['location'];
$url="http://www.thinkpage.cn/weather/api.svc/getWeather?city=$location&language=zh-CHS&provider=CMA&unit=C&aqi=city";
$vhtml=curl_get_contents($url);//这是主函数~通过API接口返回JSON数据
$final=json_decode($vhtml,true);//对Json进行解码,便于提取数据
$GLOBALS['wind_scale']=$final["results"][0]["now"]["wind_scale"];//风力
$GLOBALS['location_name']=$final["results"][0]["location"]["name"];
$GLOBALS['now_code']=$final["results"][0] ["daily"][0]["text_day"];//当前天气
$GLOBALS['now_temp']=$final["results"][0]["now"]["temperature"];//当前温度
$GLOBALS['weather_code_today']=$final['results'][0]['now']['code'];//当前图标
...后面类似省略}

发起CURL连接

function curl_get_contents($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);//设置访问的url地址
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1');   //用户访问代理 User-Agent
curl_setopt($ch, CURLOPT_REFERER,"http://www.thinkpage.cn");//设置 referer
curl_setopt($ch, CURLOPT_TIMEOUT, 2);//设置超时
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);//返回结果
curl_setopt($ch, CURLOPT_COOKIE, "");
$result = curl_exec($ch);
curl_close($ch);
return $result;}

效果


在线demo

前端代码不贴了,因为太简单了,想看的等我传到github。
这次总共不到300行代码就能实现比较令人开心的效果,以后可以举一反三咯~

收获

通过写这个demo我掌握了:

  • PHP对JSON数据的处理
  • 心知API部分功能的使用
  • 编写移动端网页的经验有所提高

遗憾

  • 前端方面依然离不开框架的帮助,框架虽好,可还是贪杯了:(

今天介绍下Win下如何配置Ruby、Sass、Compass:

安装Ruby

Ruby官网下载安装RubyInstaller。

安装时记得勾选“add to PATH”选项

最好把git也装上,其命令行工具更好用。

更换成境内的源

gem sources --remove https://rubygem.org/

gem sources -a https://gems.ruby-china.org/

如果遇到SSL证书问题,可将https协议换为http协议

使用以下命令检查源是否正确:

gem sources -l

安装Sass

gem install Sass

检查Sass版本

sass -v

安装Compass

gem install Compass

检查Compass版本

compass -v

Compass创建项目

compass create your-project-name

Compass设置监听

open your project PATH

compass watch

最近在练习Bootstrap的时候需要把图片水平居中,这里要分为两种情况:

  1. 图片使用了.img-responsive类
  • 需要在.img-responsive类后添加.center-block类,like this:

    <img class="img-responsive center-block" src="..." />
    
  1. 未使用.img-responsive图片响应式类
  • 直接使用.text-center类,like this:

    <p class="text-center"><img src="..."></p>
    

这样,Bootstrap的图片水平居中就实现了~

在牢里的时候天天盼着出狱,几个cellmates电脑配置稀烂得感人只能在期末玩几把cs1.6(他们是怎么活这么久的?),到家之后恰逢游戏荒,正好有时间细品一下 『极速快感19』。

游戏封面

Read more »

最近在练习CoordinatorLayout的时候碰见一个奇怪的问题:当在CollapsingToolbarLayout中加入toolbar之后,会在布局底部也生成一条一样大小的空白区域,把页面内容遮挡住,如图所示;


布局文件如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?colorPrimary"
            app:expandedTitleMarginEnd="8dp"
            app:expandedTitleMarginStart="4dp"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/scape1"
                app:layout_collapseMode="parallax" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <com.ogaclejapan.smarttablayout.SmartTabLayout
                android:id="@+id/viewpagertab"
                android:layout_width="match_parent"
                android:layout_height="48dp"
             />
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/viewpagertab" />
        </RelativeLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>


最初还以为toolbar在作祟,因为把toolbar的layout_height属性设到极小时发现下部的空白也随之变小,后来在调整各个属性后无果的情况下开始怀疑是整体布局的问题,最后在stackoverflow上找到了解决方法:
该页面的根布局需由LinearLayout改为RelativeLayout,再加入android:fitsSystemWindows=”true”属性就没问题了~因为解决这个bug花了两天时间,所以特地分享一下:)

修改后代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

周末的时候打开Android Studio的时候一脸懵逼,新建任何Demo之后Gradle在sync的时候的都会冒出来这个错误:

1
Plugin is too old please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to "a8faa180fc282060c9b8ec88f9bdcc9072121284"

解决完之后又出现了:
1
Warning:Gradle version 2.10 is required. Current version is 2.8. If using the gradle wrapper, try editing the distributionUrl in D:\aaa\Rundom\gradle\wrapper\gradle-wrapper.properties to gradle-2.10-all.zip

毕竟之前学习Android的时候就踩过不少坑,用过AS后再也不想用Eclipse,故习惯性地上stackoverflow寻求解决方案,然而这并没有什么卵用,最后在联系师兄后得到启发,自己找到了解决方法,希望对以后进这个坑的人有所帮助~

依赖包下载

Gradle dependencies

你可以直接修改build.gradle中的版本号后sync一下,as会自动下载对应版本,或者可以按以下方法手动下载。
下载地址:https://jcenter.bintray.com/com/android/tools/build/gradle/
声明形式是这样的:

1
2
3
4
5
6
dependencies {
classpath 'com.android.tools.build:gradle:2.1.0-alpha3'

// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}

步骤:以我著文时的版本2.1.0-alpha3为例子,你需要下载

1. gradle-2.1.0-alpha3.jar
2. gradle-2.1.0-alpha3.pom
3. gradle-2.1.0-alpha3-sources.jar
这三个文件放入
*:\android-studio\gradle\m2repository\com\android\tools\build\gradle-core\2.1.0-alpha3
*:\android-studio\gradle\m2repository\com\android\tools\build\gradle\2.1.0-alpha3
之后sync一下~

注:位于build.gradle中所声明的依赖包,有时候一些错误可通过强制控制该依赖包版本来解决,但是我用了一段时间后发现还是乖乖升级为最新版本吧,因为强制锁定低版本会造成某些新特性不能使用。

Gradle

这是为了解决上面第二个问题,需要更新Gradle至你项目所要求的版本~
下载地址:http://services.gradle.org/distributions
例如要求2-10版本,你就下载gradle-2.10-all.zip解压至:
*:\android-studio\gradle\gradle-2.10
后在Android Studio-Flie-Setting-gradle如图设置:

跳出深海巨坑感觉真好,have a nice day!