資源本地化,實(shí)現(xiàn)混合開發(fā)App
App開發(fā)有三種模式:網(wǎng)站打包App,混合開發(fā),原生App。隨著手機(jī)速度提高現(xiàn)在混合開發(fā)與原生App幾乎無差別。
網(wǎng)站打包App與混合開發(fā)速度主要差別在每次資源全部重新加載,縮小兩種之間的加載速度。
本站提供了兩種混合開發(fā)方式:輕混合,混合開發(fā)。
一、輕混合開發(fā)
什么輕混合:常用資源本地化,如影響加載速度的是JS/模板圖片/CSS等。網(wǎng)頁打開時(shí)不用重復(fù)請(qǐng)求并加載。
1.1、配置文件(replace.txt)
配置文件一定要在最外層目錄下。
文件內(nèi)容
{
“A”:“B”
}
A:網(wǎng)頁內(nèi)資源目錄,不用填寫網(wǎng)址,直接寫目錄。如網(wǎng)頁內(nèi)圖片地址為http://www.baidu.com/img/in.png 寫 /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)修改。
注:寫的規(guī)則有多條相同的,執(zhí)行最后一個(gè)。
1.2、文件存放
文件存放目錄不限層級(jí)。
注:文件名與目錄名不要用中文。
二、混合開發(fā)
資源全部本地化,實(shí)現(xiàn)混合開發(fā)。
2.1、配置文件(replace.txt)
文件內(nèi)容
{
“A”:“B”
}
例:
{
"http://www.baidu.com":"index.html",
"http://www.sina.com":"test.html",
}
A:填寫要更換的網(wǎng)址,
B:填寫本地資源的頁面
注:寫的規(guī)則有多條相同的,執(zhí)行最后一個(gè)。
沒有菜單欄配置如下:
填寫的網(wǎng)址與與配置文件對(duì)應(yīng),打開后自動(dòng)打開index.html。
有原生菜單欄配置如下:
菜單1對(duì)應(yīng)index.html,菜單2對(duì)應(yīng)test.html
2.2、文件存放
文件存放目錄不限層級(jí)。
注:文件名與目錄名不要用中文。
三、離線文件上傳
進(jìn)入【基礎(chǔ)設(shè)置】--【本地資源上傳】上傳zip包。
四、IOS版本post提交問題
4.1、form
頁面內(nèi)form提交不用修改。
4.2、jquery
在需要POST提交的頁面,在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提交的頁面,在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('已開啟');
if(typeof(BSL.ReplacementResource) == 'function')BSL.ReplacementResource();
}
return response;
}, function (error) {
return Promise.reject(error);
});