10月 232016
 

用ci框架做项目的时候,访问都会带上index.php,这样很影响美观。强迫症的实在受不了。蓝瘦,香菇。

办法总是有的。不过,不仅要去掉index.php.还要css,js这些不受影响。下边是我阿里云服务器的配置情况。配置完后,重启nginx服务器。再将ci项目中的config文件里的index.php配置成空字符串,然后访问站点。 Continue reading »

7月 282016
 

在一对一聊天,在给某个人发消息的时候。某个人可能刚好不在线。就是没连到服务器。如果不做处理,对方就会丢失掉你给他发的消息了。于是,就想。当对方不在线的时候,将发的消息存储到数据库。下次,他上线的时候,从数据库中读出来不就可以了吗。于是,一个简单点的离线消息模式就出来了。

既然在node.js上开发聊天室,那么就用node-mysql吧。他能在node服务端操作mysql。对mysql进行增删改查等等。于是看啊看,瞄啊瞄。用js的形式来query sql吧。

那么,开始走起。

1,安装node-mysql。 node install mysql -g;

2,封装一个mysql类。可以创建一个connect的引用也可以用连接池。这里用连接池。里边封装了query方法。一个参数是sql语句,和mysql语句一样一样的。还有一个参数是回调函数。

3,在聊天服务中,当接收消息方不存在的时候,就可以调用定义的的mysql的query方法。通过回调函数,得到执行的结果。

更多详细的内容:http://www.111cn.net/database/mysql/90774.htm

port最好不要填写。以为是随网站的80端口。超时等错误,可以修改超时参数。请看:http://stackoverflow.com/questions/35553432/error-handshake-inactivity-timeout-in-node-js-mysql-module

6月 202016
 

mui框架中,在app中,input比网页的input后边会多一个XX按钮。不排除网页也会这么做。可是这个XX随着input的高度变化,不会去自适应。这个体验肯定不好。还有如果我想改变XX的颜色或形状或大小呢。这个还是得涉及到修改input的样式。不过,与之对应的样式的样式名是mui-icon-clear。还是,依着之前的思路,想去看看mui.css样式中,怎么实现的。然后再重新mui-icon-clear的样式。

    .mui-input-row .mui-input-clear~.mui-icon-clear
    {
        top:15px; /*坐标*/
        color: #fb7299; /*颜色修改*/
    }

 Posted by at 上午10:54
6月 202016
 

mui-indicator默认的样式比较丑,也是大众的样式。非active为灰色+阴影,active白色。位置居中。外观是圆形。于是,就想,默认的样式那么难看,可不可以自己定义样式呢。答案是当然是可以的。

可以先去看看mui.css的源码,找到对应的样式,看看原来样式是怎么写的,这样才好修改。于是,根据样式表的优先级原则(就近原则)。也就是内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。所以,可以在嵌入样式表中重写mui-indicator样式。这个有点像子类重写父类方法一样。

.mui-slider-indicator
{
    text-align: right;  /*右对齐*/
    right: 20px;  /*右边20像素*/
}

.mui-slider-indicator .mui-indicator
{
    background: #ffffff;  /*默认背景颜色*/
    width:8px;   /**/
    height:8px;  /**/
    border-radius: 50%;  /*弧度50%,这样外观表现是圆。去掉之后,是正方形*/
    -webkit-box-shadow: none; /*去掉阴影*/
    box-shadow:none;  /*去掉阴影*/
}

.mui-slider-indicator .mui-active.mui-indicator
{
    background: #fb7299; /*active状态下背景颜色*/
}

 Posted by at 上午10:46
6月 122016
 

input有maxlength属性,可以控制输入的最大长度。而textarea没有。这个时候,只能通过手动的形式来限制textarea的输入长度。既然手动形式,那么我们就从用户的操作出发,也就是用户的键盘输入操作。可有时候,用户不一定通过键盘输入,有时候是通过复制粘贴来实现。那么侦听什么事件比较好呢。

请看这篇文章:http://blog.csdn.net/sunlylorn/article/details/6123355

为了照顾兼容性。ios下app走的都不是ie这条路。可以不必要加那些if。为了其它端。比如网页端等,还是加上了。在这里用onpropertychange,onchange就可以了。 Continue reading »

6月 122016
 

在进行输入操作的时候,就会和光标和键盘打交道。一个体验好的APP,光标和键盘的表现也会非常好。比如,有的app账号只能是手机号码。这个时候,弹出的键盘的默认输入法就是数字的。想象下这样一个场景,用户点击编辑按钮,进入编辑页面。这个时候,编辑页面应该怎么表现呢。
1,光标停留在输入框(input或textarea)中,并在输入框value的末尾。
2,弹出键盘。

先说第一个问题的解决,读别人的博客,然后跟着做。然后看效果。关于这个问题的相关博客。
http://www.zhangxinxu.com/wordpress/2010/04/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E6%8F%92%E5%85%A5%E8%AF%9D%E9%A2%98%E5%90%8E%E9%83%A8%E5%88%86%E6%96%87%E5%AD%97%E9%80%89%E4%B8%AD%E7%9A%84js%E5%AE%9E%E7%8E%B0/
http://www.jb51.net/article/26527.htm

在看第二个问题。
http://ask.dcloud.net.cn/article/513
参考文章中用的是input,用textArea也可以的。我测试的是ios机器。android机器没测试。想应该也是可以的。也许会出现一些bug。比如弹出键盘后,会马上消失不见。感觉文章中所说方案不怎么靠谱,因为不是百分百能弹出键盘。多次试验,将setTimeout的时间设置长一点,会好很多。

6月 122016
 

断断续续的写了好几篇。到现在,还没写成一连串的完整APP的创建过程。这中间,也听说了一些其他框架,比如apicloud , framework7,sui等。太多框架,众说纷纭。有时候,也难以让人抉择。不过,自己先接触的mui框架,也看了下其他框架。表面看了下,都能实现ui这些功能。既然,mui已经有一定基础了,且能做出东西了,就还是用mui吧。

现在回归正题。app页面的基本组成。app页面一般有页头,页身,页底组成。页头和页底一般都由导航nav(也可以叫菜单menu)组成。再啰嗦一点,页头的导航一般是滑块slider导航。是输入该页面的。而页底的导航是输入很多页面的,也就是很多页面都会存在底部的导航。 如下图所示:

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贴图

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/

网站地图