本文出自：https://blog.csdn.net/DT235201314/article/details/81027990
一丶概述
本文講述商城活動(dòng)頁需求解決過程揍瑟，及一些個(gè)人想法（危機(jī)感）铡俐，提供問題解決方法及核心代碼踊跟。
二丶活動(dòng)頁開發(fā)必備技能
1.切圖
2.js h5
3.Android webview
4.Android和js方法互調(diào)
三丶現(xiàn)狀陳述
個(gè)人：會Android寂祥，webview只做過簡單的頁面打開吵取，沒做過交互俭缓；會js（呵呵刑赶，好像已經(jīng)忘了吧）捏浊，會復(fù)制粘貼；切圖不會撞叨，可以學(xué)金踪，Android和js交互，可以學(xué)（兩篇博客搞定）牵敷。
需求：1.秒殺活動(dòng)（主要胡岔，后面文章再說）；2.原生活動(dòng)頁改為js頁面（本文重點(diǎn)）
項(xiàng)目：15年底的外包半成品項(xiàng)目枷餐，閑置至2018年初靶瘸，領(lǐng)導(dǎo)拍板重視緊急上線（緊急改BUG咯），4月原維護(hù)同事辭職尖淘，商城項(xiàng)目由我主要負(fù)責(zé)（之前有看代碼奕锌，沒負(fù)責(zé)開發(fā)），秒殺活動(dòng)發(fā)版時(shí)間：暫定下周五*（不到一周時(shí)間村生，評估：時(shí)間不足）惊暴。
行動(dòng)：周末加班一天。
四丶實(shí)際操作
1.查看公司內(nèi)購項(xiàng)目“碰碰貓”（混合開發(fā)趁桃，已交給前段組負(fù)責(zé)）辽话。
問題：1.使用httpClient，Android studio編譯報(bào)錯(cuò)卫病。（可以說項(xiàng)目已經(jīng)很久沒維護(hù)更新了）2......
說說碰碰貓油啤，升級空間非常大，功能點(diǎn)很多沒完善蟀苛，有提過需求卻一直擱淺...
可能原因：項(xiàng)目已交付給前段人員維護(hù)益咬，不屬于移動(dòng)組項(xiàng)目。新需求需要協(xié)作開發(fā)帜平，需領(lǐng)導(dǎo)協(xié)調(diào)辦公幽告。很久沒維護(hù)的項(xiàng)目梅鹦，網(wǎng)絡(luò)框架，Android studio配置等都得更新冗锁，工作量不小項(xiàng)目卻是掛在別的組（容易被當(dāng)皮球）齐唆。
2.兩篇文章搞定需求
理論篇：Android：你要的WebView與 JS 交互方式 都在這里了
實(shí)戰(zhàn)篇：Android與HTML+JS交互入門
兩篇文章講得很詳細(xì)，后面再說相關(guān)技術(shù)
另外兩篇文章就能解決需求冻河，可見自己的可替代性很高箍邮。
3.切圖，一下真還學(xué)不會叨叙，拜托同事幫忙锭弊，驚訝的發(fā)現(xiàn)居然就是橫橫橫橫豎5下搞定，簡單的還是能學(xué)會的擂错。
4.尋找js商城模板（后面會粘貼代碼）還是交給同事廷蓉，居然幾分鐘就搞定了。須快速上手马昙。
五丶原生開發(fā)vs混合開發(fā)
原生開發(fā)：
優(yōu)點(diǎn)：更流暢，只需移動(dòng)端（一個(gè)人）維護(hù)
缺點(diǎn)：活動(dòng)更新刹悴，另寫頁面行楞，復(fù)用性不高，需重新發(fā)版（如果設(shè)計(jì)圖變化不大土匀，顯示模板相同可不發(fā)版）
混合開發(fā)：
優(yōu)點(diǎn)：活動(dòng)更換只需要更換js頁面子房，不需要發(fā)版
缺點(diǎn)：必要時(shí)需要移動(dòng)端，前段同時(shí)維護(hù)
六丶核心代碼
Android提供給js的接口就轧，傳值為空跳轉(zhuǎn)到主頁面证杭，傳值帶參數(shù)跳轉(zhuǎn)到商品詳情頁面
@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>預(yù)售活動(dòng)</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>
七丶危機(jī)感分析
1.項(xiàng)目：突然重視的商城項(xiàng)目，后期可能不重視妒御。以目前現(xiàn)狀花錢燒個(gè)商城APP與阿里京東競爭不可能解愤。
2.項(xiàng)目發(fā)展：可能像內(nèi)購平臺一樣,后期交由前端維護(hù)（事少了，KPI好不了）
3.個(gè)人：js不會乎莉，切圖不會送讲，說是說可以學(xué)卻一直沒開始學(xué)，等著被淘汰
4.趨勢：大前端趨勢
只有不斷學(xué)習(xí)才能防止淘汰
寫在最后微信掃碼提問
如果文章對你有幫助惋啃，歡迎點(diǎn)贊關(guān)注
