美文网首页Android开发Android开发经验谈Android项目实战
Android商城开发(一)——一次活动页需求引发的危机感

Android商城开发(一)——一次活动页需求引发的危机感

作者: 天一方蓝 | 来源:发表于2018-07-18 17:47 被阅读162次

    本文出自:https://blog.csdn.net/DT235201314/article/details/81027990

    一丶概述

    本文讲述商城活动页需求解决过程,及一些个人想法(危机感),提供问题解决方法及核心代码。

    二丶活动页开发必备技能

    1.切图

    2.js h5

    3.Android webview

    4.Android和js方法互调

    三丶现状陈述

    个人:会Android,webview只做过简单的页面打开,没做过交互;会js(呵呵,好像已经忘了吧),会复制粘贴;切图不会,可以学,Android和js交互,可以学(两篇博客搞定)。

    需求:1.秒杀活动(主要,后面文章再说);2.原生活动页改为js页面(本文重点)

    项目:15年底的外包半成品项目,闲置至2018年初,领导拍板重视紧急上线(紧急改BUG咯),4月原维护同事辞职,商城项目由我主要负责(之前有看代码,没负责开发),秒杀活动发版时间:暂定下周五*(不到一周时间,评估:时间不足)。

    行动:周末加班一天。

    四丶实际操作

    1.查看公司内购项目“碰碰猫”(混合开发,已交给前段组负责)。

    问题:1.使用httpClient,Android studio编译报错。(可以说项目已经很久没维护更新了)2......

    说说碰碰猫,升级空间非常大,功能点很多没完善,有提过需求却一直搁浅...

    可能原因:项目已交付给前段人员维护,不属于移动组项目。新需求需要协作开发,需领导协调办公。很久没维护的项目,网络框架,Android studio配置等都得更新,工作量不小项目却是挂在别的组(容易被当皮球)。

    2.两篇文章搞定需求

    理论篇:Android:你要的WebView与 JS 交互方式 都在这里了

    实战篇:Android与HTML+JS交互入门

    两篇文章讲得很详细,后面再说相关技术

    另外两篇文章就能解决需求,可见自己的可替代性很高。

    3.切图,一下真还学不会,拜托同事帮忙,惊讶的发现居然就是横横横横竖5下搞定,简单的还是能学会的。

    4.寻找js商城模板(后面会粘贴代码)还是交给同事,居然几分钟就搞定了。须快速上手。

    五丶原生开发vs混合开发

    原生开发:

    优点:更流畅,只需移动端(一个人)维护

    缺点:活动更新,另写页面,复用性不高,需重新发版(如果设计图变化不大,显示模板相同可不发版)

    混合开发:

    优点:活动更换只需要更换js页面,不需要发版

    缺点:必要时需要移动端,前段同时维护

    六丶核心代码

    Android提供给js的接口,传值为空跳转到主页面,传值带参数跳转到商品详情页面

    @JavascriptInterface
    public void startFunction(final String text,final String text1) {
        if("".equals(text)&&"".equals(text1)){
            Intent intent = new Intent(this, MainActivity.class);
            startActivity(intent);
        }else {
            Intent intent = new Intent(this, DetailActivity.class);
            intent.putExtra(KeyContants.KEY_INENT_PRODUCT_ID, text);
            intent.putExtra(KeyContants.KEY_INTENT_PROMOTION_PRODUCT_ID, text1);
            startActivity(intent);
        }
    }
    

    商城js模板

    
    <%@page contentType="text/html; charset=utf-8" pageEncoding="UTF-8" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>预售活动</title>
    </head>
     
    <body style="text-align:center; margin:0; padding:0; background-color: black; ">
    <img src="${pageContext.servletContext.contextPath}/static/promotion/img/51/ys-wap.jpg" style="width: 100%;" border="0" usemap="#Map" onClick="return false;"/>
    <map name="Map" id="CribMap">
        <area shape="rect" coords="---" id="---" />
       
    </map>
    </body>
     
    <script type="text/javascript">
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            document.getElementById("area01").onclick = function() { window.webkit.messageHandlers.callFunction.postMessage("{ \"productId\":\"---\",\"promotionId\":\"\" }") };
            document.getElementById("area20").onclick = function() { window.scrollTo(0,0) };
            document.getElementById("area21").onclick = function() { window.webkit.messageHandlers.backAction.postMessage("") };
     
        } else {
            document.getElementById("area01").onclick = function() { window.android.startFunction('---','') };
            document.getElementById("area20").onclick = function() { window.scrollTo(0,0) };
            document.getElementById("area21").onclick = function() { window.android.startFunction('','') };
        }
     
     
     
    </script>
     
    <script type="text/javascript">
        adjust();
        var timeout = null;
        window.onresize = function () {
            clearTimeout(timeout);
            timeout = setTimeout(function () { window.location.reload(); }, 100);
        }
        function adjust() {
            var map = document.getElementById("CribMap");
            var element = map.childNodes;
            var itemNumber = element.length / 2;
            for (var i = 0; i < itemNumber - 1; i++) {
                var item = 2 * i + 1;
                var oldCoords = element[item].coords;
                var newcoords = adjustPosition(oldCoords);
                element[item].setAttribute("coords", newcoords);
            }
            var test = element;
        }
        function adjustPosition(position) {
            var pageWidth = document.body.clientWidth;
            var imageWidth = 640;
            var each = position.split(",");
            for (var i = 0; i < each.length; i++) {
                each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();
                i++;
                each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();
            }
            var newPosition = "";
            for (var i = 0; i < each.length; i++) {
                newPosition += each[i];
                if (i < each.length - 1) {
                    newPosition += ",";
                }
            }
            return newPosition;
        }
    </script>
    </html>
    

    七丶危机感分析

    1.项目:突然重视的商城项目,后期可能不重视。以目前现状花钱烧个商城APP与阿里京东竞争不可能。

    2.项目发展:可能像内购平台一样,后期交由前端维护(事少了,KPI好不了)

    3.个人:js不会,切图不会,说是说可以学却一直没开始学,等着被淘汰

    4.趋势:大前端趋势

    只有不断学习才能防止淘汰

    写在最后微信扫码提问

    如果文章对你有帮助,欢迎点赞关注

    image.png

    相关文章

      网友评论

      本文标题:Android商城开发(一)——一次活动页需求引发的危机感

      本文链接:https://www.haomeiwen.com/subject/bmkapftx.html