zoukankan      html  css  js  c++  java
  • 基于phonegap,html5,ratchet,handlebars等技术的微表情APP

    该app是由很多有意思的微表情构成的,支持40种表情,并且每种表情都有不同的状态,主要有搜索表情,分享表情,摇一摇换表情等功能。目前只支持安卓版。由前期构思,到技术选型,到界面设计,到编码测试,再到发布,过程还是花了不少心思...

    app截图

    截图1 截图2 截图3 截图4 截图5 截图6 截图7 截图8 截图9 截图10 截图11 截图12 截图13 截图14 截图15

    前期构思

    目的:做一个关于表情方面的有意思的app;锻炼和提升自己的各方面能力,从构思到设计到编码到测试,使自己更清晰整个开发流程。于是寻找市面上的一些表情app,例如脸萌啥的,对比了下一些功能点和差异化….IEmoji也就因此诞生了,由于本人技术和经验有限,所以设计的功能点比较简单,主要有一套表情,描述不同状态的表情,如下列英文表情所示:’blink’, ‘chill’, ‘chuckle’, ‘confused’, ‘cry’, ‘drooling’, ‘drowsy’, ‘embarrassed’, ‘flushed’, ‘grimace’, ‘grin’, ‘hellooo’, ‘hotkiss’, ‘hypnotized’, ‘inthedark’, ‘laugh’, ‘like’, ‘onfire’, ‘panic’, ‘pig’, ‘pleased’, ‘pucker’, ‘puke’, ‘scold’, ‘scowl’, ‘scream’, ‘sick’, ‘silence’, ‘skull’, ‘sleep’, ‘smile’, ‘smug’, ‘sneer’, ‘sniffle’, ‘sob’, ‘sobeye’, ‘strive’, ‘surprised’, ‘sweating’, ‘wantmoney’, ‘wink’,提供表情搜索,本地下载,社会化分享,摇一摇随机换表情(这个是比较有意思的)等功能,服务器端用户如何交互的功能没有做,这个花费的时间和精力比较大,并且像脸萌等一些拼脸软件也没有做。关于素材的准备,这个是比较蛋疼的,由于自己没有设计功底和细胞,主要是用一个php微表情生成系统,能根据定义的一些规则,根据脸部不同部位的组合,生成一套表情,这个是比较有意思的哈。图片主要采取svg图,体积小,缩放不失真,图片外部链接下载主要托管到github服务器上,要想搭建自己的图片服务器,no money no talk。说了这么多,感觉还没有说到重点,哎,自己的语言表达能力越来越差了。。。

    技术选型

    PhoneGap主要依赖于webkit浏览器的内核解析,所以它的运行效率不及于原生。但是为了提高APP性能,选择一个小而灵活的框架就显得尤为重要。其实phonegap可以和很多移动框架搭配,但是前期不考虑合适的框架,后期维护的成本就高,坑就越多,来看下以下的一些框架情况:

    jQuery Mobile:资源载入慢,流量损耗大

    Sencha Touch:比较旧,学习成本相对较高,也比较笨重

    jqmobi:Intel的app框架,比jQuery Mobile体积小,兼容性也不错

    ratchet ui:轻量级ui,上手比较快

    handlebarsjs:前端模板引擎,是Mustache的升级版,推荐

    ionic:体积小,基于html5的hybird app框架,没用过

    功能点和解决方案

    在开发过程中遇到的问题和解决方案主要有以下点,代码就不贴了:

    • 数据初始化和下拉加载:iscroll5.js,也用于局部内容滚动
    • 切换页面闪烁:定义不同页面模板,根据定义的路由规则渲染模板
    • 汉字转拼音:表情搜索和中英文识别,这个还没做
    • 表情资源准备:svg矢量图,体积小,缩放不失真,本地化和托管到github服务器上
    • 社会化分享:umeng phonegap平台,微信不支持,svg转为png图
    • 地理位置获取:html5 geolocation,百度地图api
    • 图片上传/下载:phonegap FileTransfer插件,图片资源是外部链接
    • 安卓手机sd卡位置获取:生成图片保存的目录
    • 摇一摇:html5 devicemotion,phonegap accelerometer插件
    • 本地存储:localStorage?web sql?ajax json?、index db?
    • 前端依赖包管理:bower
    • 前端自动化构建工具:gulp

    总结

    其实还有很多的功能点可以做,但时间有限,苹果版就不搞了,先来个安卓版v1.0.0吧,app下载地址:http://pan.baidu.com/s/1i3HyRrf   github代码(完整版):https://github.com/hcy2367/iEmoji/

    岁月安好!

  • 相关阅读:
    区分浏览器的刷新与关闭(网上查到,记录一下)
    echarts中设置markPoint
    Vue自定义指令,ref ,sync,slot
    手动封装on,emit,off
    数组的一些操作
    ES6-字符串扩展-padStart(),padEnd()
    MongoDB 数据库
    新地方
    使用echarts踩过的一些坑
    IE无法访问vue项目
  • 原文地址:https://www.cnblogs.com/cyStyle/p/4244929.html
Copyright © 2011-2022 走看看