整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
來越多的開發(fā)者熱衷于使用html5+JavaScript開發(fā)移動Web App。不過，HTML5 Web APP的出現(xiàn)能否在未來取代移動應(yīng)用，就目前來說，還是個未知數(shù)。那么，有什么辦法，既可以使用HTMl5開發(fā)應(yīng) 用，又可以將其簡單封裝成APK文件呢？
一、Android SDK中的WebView
1.在要Activity中實(shí)例化WebView組件：WebView webView = new WebView(this);
2.調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁：
? 互聯(lián)網(wǎng)用：webView.loadUrl("http://www.qietu.com");
? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
3.調(diào)用Activity的setContentView( )方法來顯示網(wǎng)頁視圖
4.用WebView點(diǎn)鏈接看了很多頁以后為了讓W(xué)ebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點(diǎn)擊系統(tǒng)回退剪鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面
5.需要在AndroidManifest.xml文件中添加權(quán)限，否則會出現(xiàn)Web page not available錯誤。
? <uses-permission android:name="android.permission.INTERNET" />
缺點(diǎn)：如果是載入的是普通網(wǎng)頁，沒有什么問題，但如果是html5,封裝后，在android2.3以上才能正常訪問，android2.2及以下，SDK中的WebView還沒完全支持HTML5
下面是具體例子：
MainActivity.java
??? package com.android.webview.activity; ?
??? import android.app.Activity; ?
??? import android.os.Bundle; ?
??? import android.view.KeyEvent; ?
??? import android.webkit.WebView; ?
??? public class MainActivity extends Activity { ?
??????? private WebView webview; ?
??????? @Override
??????? public void onCreate(Bundle savedInstanceState) { ?
??????????? super.onCreate(savedInstanceState); ?
??????????? //實(shí)例化WebView對象 ?
??????????? webview = new WebView(this); ?
??????????? //設(shè)置WebView屬性，能夠執(zhí)行Javascript腳本 ?
??????????? webview.getSettings().setJavaScriptEnabled(true); ?
??????????? //加載需要顯示的網(wǎng)頁 ?
??????????? webview.loadUrl("http://www.qietu.com/"); ?
??????????? //設(shè)置Web視圖 ?
??????????? setContentView(webview); ?
??????? } ?
??????? @Override
??????? //設(shè)置回退 ?
??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?
??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?
??????????? if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?
??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?
??????????????? return true; ?
??????????? } ?
??????????? return false; ?
??? }
在AndroidManifest.xml文件中添加權(quán)限
??? <?xml version="1.0" encoding="utf-8"?>
??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"
????????? package="com.android.webview.activity"
????????? android:versionCode="1"
????????? android:versionName="1.0">
??????? <uses-sdk android:minSdkVersion="10" />
??????? <application android:icon="@drawable/icon" android:label="@string/app_name">
??????????? <activity android:name=".MainActivity"
????????????????????? android:label="@string/app_name">
??????????????? <intent-filter>
??????????????????? <action android:name="android.intent.action.MAIN" />
??????????????????? <category android:name="android.intent.category.LAUNCHER" />
??????????????? </intent-filter>
??????????? </activity>
??????? </application>
??????? <uses-permission android:name="android.permission.INTERNET"/>
??? </manifest>
二、使用PhoneGap
??? PhoneGap是一個用基于HTML，CSS和JavaScript的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無限的功能。PhoneGap是免費(fèi)的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，
詳細(xì)方法請見：http://phonegap.com/start#android
優(yōu)點(diǎn)：在Eclipse中加入SDK，編程自由，完美適應(yīng)不同設(shè)備屏幕大小，適合高手使用。
缺點(diǎn)：沒有使用布局，直接加載網(wǎng)頁，不能添加廣告。
----------------
切圖網(wǎng)（qietu.com）最早將psd轉(zhuǎn)html服務(wù)模式帶到國內(nèi)，并首個提供響應(yīng)式、webapp前端開發(fā)的公司。專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗(yàn)，加我們公眾微信賬號：qietuwang（長按復(fù)制）
下載hbuildx，這里官方提供了幾種安裝包，有完全版，還有beta版，還有標(biāo)準(zhǔn)版，隨便下一個吧，或者直接下載標(biāo)準(zhǔn)版的，因?yàn)樗钚 ?/p>
1.創(chuàng)建uni-app，直接選擇uni-app 默認(rèn)模版（hello-app項(xiàng)目可以拿來看看，不建議開發(fā)時使用，wap2app是針對wap轉(zhuǎn)app端的，5+app 使用htmlplus，uni-app對html5+ 進(jìn)行了整合，并建議直接使用uni-app即可，小程序那就是小程序咯，讓我們心大一點(diǎn)，練習(xí)多端吧）
關(guān)于目錄結(jié)構(gòu)，可以在開放規(guī)范中看到或者直接創(chuàng)建一個heoll 模版項(xiàng)目看看，各個文件夾之間的關(guān)系和作用都比較明確，對于uni-app的配置文件需要仔細(xì)看看。
2.配置
manifest.json 這個文件在移動應(yīng)用中屢見不鮮，在uni-app也有關(guān)這個文件的解釋https://developer.mozilla.org/zh-CN/docs/Web/Manifest
文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。個人覺得就是映射，在不同的環(huán)境下具體的左右略有不同，比如webpack 中是指向原始文件的映射關(guān)系等。
uni-app 中有一些自定義屬性比如appid，是用來標(biāo)識云端編譯用的。https://ask.dcloud.net.cn/article/35907
在ide中打開這個文件，會有一個新的視圖，是中文的，如果你要詳細(xì)了解關(guān)系，可以到文件目錄下打開這個文件查看或者直接點(diǎn)擊最下方的源碼視圖進(jìn)行查看。另外有一些配置可能找不到，但是在源碼視圖中可以找到，還有一些配置，默認(rèn)項(xiàng)目是沒有的，比如超時時間的設(shè)置。
啟動圖：配置.9 圖片制作流程 https://ask.dcloud.net.cn/article/35527
打開下載工具 draw9patch.bat（這里我沒有打開，處理文件報錯，不去深究了，看第二種方法，通過as，打開as）
新建一個as項(xiàng)目，找一個png圖片丟到as中，右鍵創(chuàng)建.9 圖片
打開這個文件，點(diǎn)擊鼠標(biāo)坐標(biāo)在邊上即可調(diào)整拉伸區(qū)域與內(nèi)容區(qū)域，類似下面這種，關(guān)于四個邊的概念大家去看下文檔，類似下面這種內(nèi)容居中的圖片（一般都是這樣），拉伸的時候左右兩側(cè)和上下兩側(cè)拉伸空白，在操作的時候需要先control選擇拉伸區(qū)域，然后再shift 去掉一部分的拉伸器區(qū)域~
像這樣搞定后就行了，然后根據(jù)uni-app的規(guī)定指定圖片大小上傳。
另外：此用法只適用與android，ios就一個個上傳吧。
查看json源碼，其中有一項(xiàng)為第三方sdk，配置后可使用第三方sdk的集成，一些常用的第三方sdk已集成，比如授權(quán)登錄、分享、支付等。
更多的配置自行看吧，再此不表。
第二個配置文件 pages.json 看名字就看的出來是配置頁面用的
關(guān)于pages，新增的頁面需要追到到page文件中，定義全局樣式后，每個page可以單獨(dú)的配置其style。
另外在pages目錄下新增頁面的時候，配置文件中會自動追加和刪除相關(guān)page。
其中關(guān)于導(dǎo)航欄，官方建議使用原生又uni-app提供的原生導(dǎo)航，如果自定義導(dǎo)航，可能會有很多問題，https://ask.dcloud.net.cn/article/34921
尤其是前端導(dǎo)航與下拉刷新之間的沖突。
關(guān)于subNVue，這里解釋一下nvue，剛開始看的時候我也有點(diǎn)懵，啥意思，vue提供的新擴(kuò)展嗎？并不是，nvue 是與native.js 結(jié)合的一種組件規(guī)范，它可以直接調(diào)用原生代碼中的api，官方建議是只是在有特定需求的地方使用nvue，
而這里提到的subNVue 指的是通過nvue 創(chuàng)建的一種子窗口組件，它使用的是原生渲染的方式，通過窗口進(jìn)行的實(shí)現(xiàn)，在做一些浮動的時候，比如遮罩蒙板，視頻彈幕這種的時候用得上。
所以使用nvue的時候想要調(diào)試必須在終端環(huán)境，模擬器或者微信工具。如果運(yùn)行之前應(yīng)該有記錄，這里不表。
多頁面通訊：有兩種，官方推薦新的方式，注冊監(jiān)聽
uni.$on('page-popup', (data) => {
vm.title = data.title;
vm.content = data.content;
})
uni.$emit('page-popup', {
title: '我是一個title',
content: '我試data content'
});
另，官方提供了一些建議：所以不要濫用它為好
還有就是關(guān)于subNVue的style 并不是我們平時理解的所有樣式表，它自有規(guī)則，具體請看官網(wǎng)，其中有幾個重要的屬性，比如type、position、dock。
conditon：
指定頁面，也就說不要不用每次啟動都要重新點(diǎn)一遍來看，只需要指定我們當(dāng)前調(diào)試的頁面即可，這個配置只在開發(fā)時候生效，正式編譯打包后不起作用。
"condition":{ "current":0, "list":[ { "name":"me", "path":"pages/me/me", "query":"" } ] }
分包：這里是針對小程序的，因?yàn)樾〕绦驅(qū)Π拇笮∮邢拗疲栽谏蟼餍〕绦虻臅r候需要對包進(jìn)行管理，小程序允許分包的存在。
另外在配置這個文檔中還有package.json ，vue-config.json , uni.scss 的介紹
package.json ：因?yàn)閡ni-app 是基于vue的，在編譯時又是依賴與node的，所以可以添加打包文件，若是通過cli創(chuàng)建的項(xiàng)目，必須自己進(jìn)行配置，對于通過ide創(chuàng)建的項(xiàng)目，則看需求。
vue.config.js 類似webpack它們都有配置文件或直接通過cli進(jìn)行打包或編譯。其中有一些uni-app不支持，知曉即可。
對于內(nèi)置的scss，可以進(jìn)行應(yīng)用與修改，其中的變量通過在style標(biāo)簽中指定lang 即可進(jìn)行引用。
另外日志什么的，有的集中類型不多說了，在HBuilder里可以使用代碼塊，可以快速補(bǔ)全。
生命周期：
這個標(biāo)題標(biāo)紅，個人認(rèn)為生命周期對于一個框架來說非常的重要。
1.應(yīng)用生命周期：最后一個監(jiān)聽，比如之前說的nvue和vue之間交互就用它。
應(yīng)用生命周期監(jiān)聽一般都在APP.VUE 中進(jìn)行注冊監(jiān)聽，作為app的主入口。
應(yīng)用啟動會，監(jiān)聽的回調(diào)執(zhí)行相關(guān)邏輯。
h5 打印效果如下：
2.頁面監(jiān)聽函數(shù)
相比應(yīng)用監(jiān)聽函數(shù)，頁面監(jiān)聽函數(shù)使用的是最多的，uni-app 提供了很多內(nèi)置鉤子，不截圖了，比較多。
這里的onLoad 和onShow 給我感覺特別好，相比apicloud 每次新的頁面打開，除非設(shè)置強(qiáng)制刷新，否則會進(jìn)行緩存，要么每次打開的時候發(fā)送消息事件，一個入口還好，
如果多個入口，會特別痛苦，除非自己再定義一個工具類什么，而uni-app的這2個鉤子，可以說完美的避開了這些瑣事，再次顯示的時候，我們可以做一些其他事情了。
另外對于小程序中的一些固定導(dǎo)航按鈕，同樣有他們的鉤子
并且，頁面滾動不要自己再去監(jiān)聽dom什么的了，直接提供了鉤子，方便多了。
還有，對于原生搜索框，也就是之前提到的searchInput 也提供了回調(diào)
關(guān)于nvue的聲明周期：基本上與vue保持一致性。
關(guān)于各個頁面之間通訊：
使用uni-app 提供的事件自定義監(jiān)聽機(jī)制可以對其進(jìn)行監(jiān)聽。（因?yàn)槭莡ni所以只能是終端測試）。
全局監(jiān)聽提供了4個函數(shù)：
uni.$emit(eventName,OBJECT)uni.$on(eventName,callback)uni.$once(eventName,callback)uni.$off([eventName, callback])// 基本上vue、jqeruy 還有一些第三方庫都有類似的函數(shù)
關(guān)注吧
PP封裝是形成APP的最省錢的一種方式。你只需要擁有一個網(wǎng)址就可以通過一些技術(shù)處理封裝成一個跨iOS和Android的APP，這個過程往往只需要幾分鐘。在移動互聯(lián)網(wǎng)時代，擁有一個移動端APP是必不可少的。那么APP是怎樣封裝的呢？
封裝APP大多指Web app封裝，web app 是一種架構(gòu)型APP開發(fā)方式，通過使用框架（HTML5 APP 框架開發(fā)模式）無論是iOS還是Android，都可以實(shí)現(xiàn)跨平臺運(yùn)行。通過這個框架，你可以把網(wǎng)址封裝成APP，安裝到手機(jī)設(shè)備上。網(wǎng)址簡單說就是一個個網(wǎng)頁（html5）組成的，封裝成APP之后打開的的類似瀏覽器訪問網(wǎng)頁（html5）一樣，因此網(wǎng)頁（html5）訪問手機(jī)硬件、手機(jī)權(quán)限等都會受到限制。
優(yōu)點(diǎn)：
1、可以直接封裝成APP，成本低
2、只要有網(wǎng)站（網(wǎng)址）就可以封裝成APP，
3、一次封裝生成跨端APP
4、代碼維護(hù)方便，版本更新靈活，不受原生限制
缺點(diǎn)：
1、用戶手機(jī)端體驗(yàn)感較差，長時間可能降低用戶信任度
2、原生功能使用受限，性能遠(yuǎn)不如原生
由此引發(fā)出混合開發(fā)APP，在保持webapp便捷開發(fā)的基礎(chǔ)上，使用原生性能，提升用戶體驗(yàn)。混合開發(fā)APP（Hybrid app）使用框架（HTML5 + 原生框架）跨端生成iOS和Android APP。相比hybrid app可以使用原生的能力，體驗(yàn)感更好。
優(yōu)點(diǎn)：
1、需要使用HTML5 + 原生框架來開發(fā)APP，開發(fā)完成封裝成APP，成本較低
2、一次封裝生成跨端APP
3、代碼維護(hù)方便，版本更新快
4、用戶體驗(yàn)感好，用戶留存度高
5、支持原生功能使用，性能優(yōu)于web app
缺點(diǎn)：
1、版本更新，如果是原生的問題，需要重新上架應(yīng)用市場
2、原生功能使用受限，性能不如原生
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
