5月 302016
 

对于app的页面,起初,我们可以虚拟一些数据。但不能总是做静态的网页。这个时候,需要去请求一些数据。而我们是用pc来开发的,pc上搭建了php环境。所以,这个时候就遇到了手机访问本地localhost的问题。官网给了一篇调试PHP的文章,http://ask.dcloud.net.cn/article/144。自己没跑通,也没理解怎么用。于是,再去想别的办法。方法,可能有很多种,我自己跑通,有始有终的有一种,那就是借助Fiddler。

场景环境:
1,手机连的是wifi。
2,pc连的是宽带。pc上已经安装了Fiddler。
Continue reading »

5月 272016
 

h5+app,抛开大的方面,比如结构,功能这些。h5+app,其实主要是html + js + css。这里说主要,那另外的就是ajax,native.js等这些了。而mui框架,帮我们封装实现了一个一个比较实用的组件。比如:图片轮播,图文列表,侧滑菜单,折叠面板等。我们只需要按照规范,引用class就可以了。也可以在此基础上修改。那如果,不用这些呢。用js,css自己写呢。这个当然是可以的。可是,在时间如此珍贵的时代,你还愿意花更多的时间来写吗。即使自己写,写出来的效果能有mui封装的好吗。如果,虽然。如果你时间足够多,当然是可以花些时间去研究js,css。而不必直接就开始用jquery,mui这些。好吧,想要快速的实现效果,我们还是能用,恰到好处的用mui框架里的组件吧。

第三方的框架还是很多的。http://amazeui.org/widgets/slider# 还有jscroll等。时间不多,不能每个项目都要去造轮子。

mui的使用文档:
1,老版本。http://dcloudio.github.io/mui/javascript/
2,新版本。http://dev.dcloud.net.cn/mui/ui/
某些组件,老版本讲的比较详细。

最常用,最实在的几个组件,这里重复一下,自己也跟着学习,加深下印象。

1,轮播图片。http://dev.dcloud.net.cn/mui/ui/#gallery 这里讲的通俗易懂。一看就晓得怎么用了。

5月 262016
 

用框架做事情,很容易就不自觉走进坑中。如何面对以及处理这些坑,是个路漫漫其修远兮的过程。需要去尝试和记录。还有,怎么去描述这些坑,专业术语怎么表达,这个是重点。毕竟,很多时候,需要去问度娘等。如果都不知道怎么描述,怎么找答案呢。下边一点一点的总结我所遇到的问题。这些问题导致体验不完美或出故障。

1,冥冥代码是对的。图片就是不显示或代码根本就不是按代码所要展示的效果走。HBuilder中,有一个功能,为了使得打的包足够小,会对资源关系进行优化。因为在你的项目中,可能存在的图片或js或xml等不是项目最终需要的。这个时候,你通过优化功能去掉了页面的引用关系。后来你改代码了,引用了原来图片或资源。这个时候你觉得是对的,路劲写的也没错,为什么就没效果呢。这个时候,你就需要重新构建引用关系。并在代码视图中的unpackage包中,去掉之前删除过的引用。最后这一句很重要。

2,页面左右策划的时候,冥冥不想划出可视区域。划出可视局域后,有一块白屏。却偏偏划出去白屏了。这个时候,是设置侧滑返回关闭窗口了的功能。只需要将其设置为none即可。就是popGesture这个参数。至少我是这样的。

3,页面滑动后出现下沉的现象。创建webview的时候,你可以设置webview距离顶部或底部的距离。当你设置了到顶部有一定距离后,show出来的时候就会出现下沉。敲这篇文字的时候,我也在想解决这个问题。得去弄懂设置了顶部距离后,究竟做了什么。比如设置了页面的浮动top或padding什么的。

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了两份同样的数据。

网站地图