資源本地化,實(shí)現(xiàn)混合開(kāi)發(fā)App
App開(kāi)發(fā)有三種模式:網(wǎng)站打包App,混合開(kāi)發(fā),原生App。隨著手機(jī)速度提高現(xiàn)在混合開(kāi)發(fā)與原生App幾乎無(wú)差別。
網(wǎng)站打包App與混合開(kāi)發(fā)速度主要差別在每次資源全部重新加載,縮小兩種之間的加載速度。
本站提供了兩種混合開(kāi)發(fā)方式:輕混合,混合開(kāi)發(fā)。
一、輕混合開(kāi)發(fā)
什么輕混合:常用資源本地化,如影響加載速度的是JS/模板圖片/CSS等。網(wǎng)頁(yè)打開(kāi)時(shí)不用重復(fù)請(qǐng)求并加載。
1.1、配置文件(replace.txt)
配置文件一定要在最外層目錄下。
文件內(nèi)容
{
“A”:“B”
}
A:網(wǎng)頁(yè)內(nèi)資源目錄,不用填寫(xiě)網(wǎng)址,直接寫(xiě)目錄。如網(wǎng)頁(yè)內(nèi)圖片地址為http://www.baidu.com/img/in.png 寫(xiě) /img/in.png。前面一定增加上'/'
B:壓縮包內(nèi)的文件路徑
通配符:“.*”
例:
{
"/img/ua.png":"img/ua.png",
"/css/style.css":"css/style.css",
"/index.js":"index.js",
"/app.*.js":"app.js",
}
App配置不用對(duì)應(yīng)修改。
注:寫(xiě)的規(guī)則有多條相同的,執(zhí)行最后一個(gè)。
1.2、文件存放
文件存放目錄不限層級(jí)。
注:文件名與目錄名不要用中文。
二、混合開(kāi)發(fā)
資源全部本地化,實(shí)現(xiàn)混合開(kāi)發(fā)。
2.1、配置文件(replace.txt)
文件內(nèi)容
{
“A”:“B”
}
例:
{
"http://www.baidu.com":"index.html",
"http://www.sina.com":"test.html",
}
A:填寫(xiě)要更換的網(wǎng)址,
B:填寫(xiě)本地資源的頁(yè)面
注:寫(xiě)的規(guī)則有多條相同的,執(zhí)行最后一個(gè)。
沒(méi)有菜單欄配置如下:
填寫(xiě)的網(wǎng)址與與配置文件對(duì)應(yīng),打開(kāi)后自動(dòng)打開(kāi)index.html。
有原生菜單欄配置如下:
菜單1對(duì)應(yīng)index.html,菜單2對(duì)應(yīng)test.html
2.2、文件存放
文件存放目錄不限層級(jí)。
注:文件名與目錄名不要用中文。
三、離線文件上傳
進(jìn)入【基礎(chǔ)設(shè)置】--【本地資源上傳】上傳zip包。
四、IOS版本post提交問(wèn)題
4.1、form
頁(yè)面內(nèi)form提交不用修改。
4.2、jquery
在需要POST提交的頁(yè)面,在jquery加載后的位置加入以下代碼:
var delay=1000;//發(fā)送請(qǐng)求的延時(shí)時(shí)間,可按需求修改
$.post1 = $.post;
$.post = function(a,b,c,d,e){
var ua = navigator.userAgent;
if(ua.indexOf('bsl') >=0 ){
if(typeof(BSL.UNReplacementResource) == 'function')BSL.UNReplacementResource();
}
setTimeout(function(){$.post1(a,b,c,d,e);},delay);
if(ua.indexOf('bsl') >=0 ){
if(typeof(BSL.ReplacementResource) == 'function')setTimeout(function(){BSL.ReplacementResource();},delay+200);
}
}
4.3、Axios
在需要POST提交的頁(yè)面,在Axios.js引入后的位置加入以下代碼:
axios.interceptors.request.use(function (config) {
var ua = navigator.userAgent;
if(ua.indexOf('bsl') >=0 ){
if(typeof(BSL.UNReplacementResource) == 'function')BSL.UNReplacementResource();
alert('已關(guān)閉');
}
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
var ua = navigator.userAgent;
if(ua.indexOf('bsl') >=0 ){
alert('已開(kāi)啟');
if(typeof(BSL.ReplacementResource) == 'function')BSL.ReplacementResource();
}
return response;
}, function (error) {
return Promise.reject(error);
});