本文出自：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.趋势：大前端趋势

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

写在最后微信扫码提问

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

Android商城开发（一）——一次活动页需求引发的危机感相关推荐

Android商城开发----点击左侧分类列表右侧更新对应列表内容
Android商城开发----点击左侧分类列表右侧更新对应列表内容目录 Android商城开发----点击左侧分类列表右侧更新对应列表内容一.首先说布局: 二.主要说一下,布局完成后实现点击左侧类 ...
Android商城开发----viewPager实现广告轮播（在首页Fragment中实现）
Android商城开发----在商城首页Fragment使用viewPager实现广告轮播写在前面:本篇文章建立在创建底部导航栏之后,对商城首页进行开发.创建底部导航栏的内容请查看:Android开 ...
Android商城开发系列
Android商城开发系列(一)--开篇 Android商城开发系列(二)--App启动欢迎页面制作 Android商城开发系列(三)--使用Fragment+RadioButton实现商城底部导航栏 ...
Android商城开发----点击加入购物车，购物车商品的增删减
Android商城开发----点击加入购物车,购物车商品的增删减上一章节:[分类页面]点击左侧类别,实现右侧对应类别商品的展示本文是在上一章节基础上开发的,点击[分类]页面商品的加入购物车按钮,实 ...
Android商城开发系列（一）——开篇
最近在看尚硅谷的硅谷商城视频,想系统学习一下Android的商城开发流程,打算跟着视频的一步步做出一个商城,然后写博客总结记录一下整个商城的开发过程以及使用到的技术知识点,这个商城的最终效果如下图所示 ...
Android商城开发系列（二）——App启动欢迎页面制作
商城APP一般都会在应用启动时有一个欢迎界面,下面我们来实现一个最简单的欢迎页开发:就是打开商城App,先出现欢迎界面,停留几秒钟,自动进入应用程序的主界面. 首先先定义WelcomeActivity ...
Android商城开发系列（六）——使用 OkHttpUtils 请求网络 + 使用 fastjson解析数据...
OkHttp是Google推荐使用的一个开源的网络请求框架,Android开发中涉及到网络请求和接口调用现在大部分都是使用OkHttp,网上已经有不少人针对OkHttp进行了封装,这里推荐一下鸿洋大神 ...
Android商城开发--实现商城底部导航栏
让我们先看效果图: 图一是默认效果图,图二是点击首页的效果图(图标和字体颜色会变化) 接下来是实现方法 1.先写布局. 我新建了一个ShoppingActivity,在activ ...
Android商城开发系列（十）—— 首页活动广告布局实现
在上一篇博客当中,我们讲了频道布局的实现,接下来我们讲解一下活动广告布局的实现,效果如下图: 这个是用viewpager去实现的,新建一个act_item.xml,代码如下所示: 1 <?xml ...

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