5月 262016
 
plus.navigator.closeSplashscreen(); //关闭splash
plus.navigator.setFullscreen(true); 
//进来的时候,就让app处于全屏状态.true为全屏状态,false为非全屏状态
plus.navigator.setStatusBarBackground("#f6f6f6"); 
//设置系统状态栏(通知栏、顶部状态栏)样式背景颜色或透明
console.log("这里打印日志啦啦啦");  //console一定要小写,要记得哈。
5月 192016
 

guide,英语的意思有指导,指南,向导。由此,可见,guide的重要性。guide,就像两个陌生人之间的第一印象。第一印象的好坏,往往就决定了,使用app的人对你这个app的敢兴趣程度。

其实,在guide之前,还有一个splash页面。splash页面,是点击app快捷图标,第一个展现在眼前的页面。该页面,是配置在manifest.json中的,很多东西都配置在manifest.json中的。那么,打开一个app,展现在打开app人眼前的是页面先后顺序是:splash页面,guide页面,app内容页面。

最美的东西,看多了,也会厌倦。那么,guide页面也是如此。你每次打开,总是看到相同的展示页面(一般仅仅展示,没有实际的操作功能),也会感到反感。那么,灵活的使用guide页面就比较重要了。可以这样一种假象。比如安装app后,第一次打开展示guide页面,更新后展示guide页面,或有新的觉得值得展示的时候展示guide页面。其他的时候,直接从splash页面到app内容页面。

不过,用HBuilder开发app应用,调试的时候,快捷图标(暂且这样叫吧,如同桌面程序。还没研究官方怎么个叫法)和splash页面总会是HBuilder自己的图标和页面。这个,没办法更改。就算你在mainfest.json中配置了也是一样。官方的意思是,你要打包成app后,你才能有自己的快捷图标和splash页面。有强迫症,追求完美的我,总是感觉到不爽。不过,自己暂时也没办法。如果打包成app的话,对于ios系统的,可以打包整越狱包或签名的证书包。越狱包是容易,打包了,安装不了。证书包,这个暂时我也没弄好。好了,纠结归纠结。还是开始guide引导页面的制作吧。

Continue reading »

5月 192016
 

准备工作:
1,开发工具:HBuilder。
2,mui框架包。
3,官方的例子源码包。主要方便用官方已经实现的例子。
4,硬件:Android或iPhone手机,数据线。

选中模仿的APP:
既然想做,不能空想。最现实,最快捷的方式是打开你的手机,运行手机里的APP,多看,看中哪个你想做的。然后就是模仿它做。最好不是太复杂。当然,可以自由发挥,并非全部一模一样模仿。也可以综合几个APP的特点,抓住你想要的。这样,功能,设计全有了。

择日不如今日,我看见手机里的bilibili很不错,配色风格样式都不错。先截图,再整理下想模仿的点。
1,启动动画。大部分的app,第一次启动的时候或更新一个版本的时候或每次的时候,都有启动动画。启动动画可以做得很精美,以打动人心并初步从形象里表达该app功能指向。
2,顶部的按钮组以及配色等。顶部涉及到手机的网络运营商,时间,电量等信息。怎样搭配才好看呢。有的app隐藏时间电量这些,个人感觉这样很懵,突然想看时间的时候感觉好空白。不建议总是隐藏。 有的app喜欢把扫描二维码功能挂在顶部,对于app中经常用到调用扫描二维码的还不错。顶部按钮组背景颜色也是一个重点。可以透明,也可以半透明,还可以配色。这里是要花点心思。
3,底部的导航。底部导航是一个app的控制器。导航icon需要做的贴切漂亮,导航名字需要表达清楚明了该栏目所以展示的内容。icon经常会用到字体。字体改变颜色,放大缩小都很方便。
4,注册和登录。
5,slider的应用,图片轮播。
6,内容页的填充。
mui框架的估计不能完美的适应一个app,这个可以自己写css。除却颜色其他的,还是可以取。如果可以,所有的css都自己也行。或是用其他框架。

bilibili贴图

5月 112016
 

        最近,在处理一些音频事情。遇到这样一个问题,播放全频广播语音,flash播放服务端编码的flv视频数据(可以只有音频),发现播放比较慢。播放速度是正常速度的一半左右。随着时间的累计,NetStream的bufferLength越来越长。开始以为封装成flv的时候,采样率设置错误。经过多次修改测试,发现并不是这样。后来观察下行流量,发现下行流量是正常情况下的两倍左右。于是,去检查socket过来的数据,发现每次相同的数据发了两份。于是,稍微修改下,丢掉相同的另一份数据。音频播放就正常了。此刻,可以想到。NetStream播放速度变慢,是每次appendBytes了两份同样的数据。

4月 262016
 

在安装好了express和socket.io,下边就开始实战了。程序包都在node_modules下,如图:

先看下这篇文章:http://www.plhwin.com/2014/05/28/nodejs-socketio/

再来说说具体的操作:

1,建立服务器代码。在npm目录下。也可以在其子目录下。所以,为了多项目,为了方便管理,所以先建立一个servers目录,在servers下建立一个chatroom目录。在chatroom中建立服务器文件,index.js。index.js中注意listen的端口。服务端代码可以完全复制上边那边文章的。代码写好了,然后node一下。如图:

2,服务端代码建立好了。就开始建立client端代码了。在html中,要嵌入socket.io.js和客户端的交互服务器端的js。如果没有服务器,又想在局域网内测试。我们使用本地ip地址。记得,嵌入socket.io.js的端口地址是服务端listen的端口。而html,css,js这些使用的是自己电脑web服务器的端口。在js中,也有连服务端的地址。那个端口也是用服务端listen的端口。客户端代码,依然一模一样copy上边文章中的代码。将端口和路径修改对了即可。

3,总结以上。需要创建的文件有:index.js(服务端文件),index.html,style.css,client.js。这些都完毕了。一个简单的聊天程序就可以跑起来了。在局域网,把你的地址发给小伙伴们,就可以开始聊起来了。如图:

 Posted by at 下午10:30
4月 262016
 

Node.js是啥,能做啥,怎么样。

Node.js怎么安装。怎么安装呢。先去官网(https://nodejs.org/en/download/),根据自己的系统,下载所需。

然后向安装普通软件一样安装,一路next。 也许,next到最后一步,发现出问题了,next不下去了。就是进度条提示:roll back,because of a error.node.JS setup wizard ended prematurely 如图:


Continue reading »

4月 252016
 

在时间就是生命的时候。拿来主义蛮好的。省去了很多力气和时间。地点的三级联动,这里用的就是腾讯的。

http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动,图下:
查看其源代码,发现了其引用了一个geo.js。地区数据全部在里边,还包含了查询遍历的一个方法。在html页面中,也找到了使用geo的方法。

结合bootcss的样式,一个比较好看的三级联动实现就好了。图如下:

注意,在html页面,select的id命名必须是s1,s2,s3。option空着。初始化调用setup();默认带一个第一级地区,使用preselect(‘上海市’);显示选择结果,调用promptinfo();前边两个方法是geo.js中的,最后一个是自己定义的。如下边code:
Continue reading »

4月 212016
 

网页中,h5app中,字体icon的图标的使用,非常多。好处也当然比img多好多。 比如:组合图片和文字,改变颜色,大小等。

不过,请看这个网站:http://iconfont.cn/在线使用库里已经存在的很多很多icon。支持在线编辑。然后还能在线保存和下载。其使用方法也非常方便。

下边几篇文章其相关的字体icon的使用。

http://ask.dcloud.net.cn/article/128

http://www.gbtags.com/gb/share/4489.htm

http://www.jb51.net/article/77422.htm

https://icomoon.io/app/#/select

http://www.uisdc.com/make-the-font-icon

http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/

4月 192016
 

bootstrap的日期插件非常棒,好看,好用。
想要的点过来:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201503041458.html

写个额外的东东。居中。当想将%比和具体像素组合居中的时候。可以定义两次div。

第一层div,比如:先做一个,距离左边div 50% 的距离。
第二层div,再左一个,距离自己宽度一半的像素距离。不过这个距离是负值,具体表现就是向左边移动了自己宽度的一般距离。这个宽度,自己是能够知道的。

css code是这样的:

    <div style="margin-left:50%">
        <div style="margin-left:-200px">
            XXXXXXX
        </div>
    </div>
4月 182016
 

哎呀呀呀。bootstrap框架的modal经常会被用到。比如弹出注册登录框。不过,在弹出窗口的时候,没办法垂直居中。网上有一些解决方法,不过,修改最少,体验最好的就是修改bootstrap.js的源码。这个等会说,先了解下bootstrap modal。

这里有介绍:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
Continue reading »

网站地图