HBuilderX,DCloud推出的一款HTML5的Web開發工具,軟件體積小,啟動快。
uni-app,一個使用Vue.js開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、Web(響應式)、以及各種小程序、快應用等多個平臺。
準備IDE HBuilderX,下載地址:https://www.dcloud.io/hbuilderx.html,當前的使用的版本是:HBuilder X 3.5.3。
1、菜單:文件->新建->項目
2、填寫項目名稱及存儲路徑,選擇對應的模板
3、修改項目文件:hello\pages\index.vue
<template>
<view class="container">
<view class="intro">HelloWorld~</view>
<text class="intro">佚名今人</text>
</view>
</template>
4、運行項目
注: 第一次運行會自動安裝插件~
5、預覽運行效果
線緩存為HTML5開發移動應用提供了基礎
HTML5 Web Storage API可以看做是加強版的cookie,不受數據大小限制,有更好的彈性以及架構,可以將數據寫入到本機的ROM中,還可以在關閉瀏覽器后再次打開時恢復數據,以減少網絡流量。同時,這個功能算得上是另一個方向的后臺“操作記錄”,而不占用任何后臺資源,減輕設備硬件壓力,增加運行流暢性。在線app支持邊使用邊下載離線緩存,或者不下載離線緩存;而離線app必須是下載完離線緩存才能使用。
css選擇器:
(1)標記選擇器(簡單選擇器)
(2)class選擇器
.s1{
屬性名:屬性
}
還有一種有名字的class選擇器,如下:
div.s1{
font-size;120px;
}
(3)id選擇器
#d1{
font-size:italic;
font-weight:900;
}
除此之外,寫第一個HTML5 App
啟動Eclipse,然后在菜單“File”下選擇“New > Android Project”。
在項目根目錄下,創建兩個新目錄:
/libs
/assets/www
復制phonegap.js(從PhoneGap解壓縮后的Android目錄中,將解壓縮后的帶版本號的js文件名修改為phonegap.js)到/assets/www。
復制phonegap.jar(從PhoneGap解壓縮后的Android目錄中,將解壓縮后的帶版本號的jar文件名修改為phonegap.jar)到/libs。
復制xml整個目錄(從PhoneGap解壓縮后的Android目錄中,包括一個plugins.xml)到/res。【v1.0 rc2以上】
對Eclipse的src文件夾中的主要Java文件進行少量調整。
將class的繼承由Activity改為DroidGap
將setContentView()替換為super.loadUrl(“file:///android_asset/www/index.html”);
添加import com.phonegap.*;
移除import android.app.Activity;
在這里你可能會遇到Eclipse找不到phonegap-1.0.0.jar的錯誤。在這種情況下,右鍵單擊/libs文件夾找到Build Paths/ > Configure Build Paths。然后在Libraries標簽頁中添加phonegap-1.0.0.jar到項目中。如果Eclipse不是很穩定,你需要點擊F5刷新一次項目。
重要標記
(1)鏈接
<a href="地址” target="打開的窗口" title="提示信息"></a>
target="_black":在新的窗口中打開鏈接
target="_selt":缺省值,在當前窗口中打開
(2)圖片鏈接
<a href="地址" border="0"><img src="test.jpg"></a>
border屬性值:為了去掉默認邊框。
(3)發郵件
<a href="mailto:739299362@qq.com?subject=hello">發郵件</a>
(4)錨點(在同一頁面進行跳轉)
<a name="top">跳到這里</a>
<a href="#top">跳到top</a>
(5)表格
<table border="1" width="60%" cellpadding="10" cellspacing="0">
<tr><td>表格一</td><td>表格二</td></tr>
<tr><td>BIAOGE</td><td>BIAOGE</td></tr>
</table>
我們來回顧用HTML5框架創建移動web App的一些優勢。在移動開發方面,移動web App已經比原生App以及響應式設計這兩個時髦術語炒作得少了。然而他們提供了大多數上述兩種移動技術的最佳特性。進一步閱讀以了解為什么要選擇創建HTML5 web App!
1. HTML5作用于每一個平臺
建立一個HTML5 web App允許您創建一個跨平臺兼容并無縫跨越所有瀏覽器運行的App。這使得開發和部署App非常有利可圖。
2.即時訪問與更新
移動Web App可以通過瀏覽器快速訪問。而且,數據和內容可以實時當場更改。你不需要等待應用商店的批準或用戶去安裝更新,你做的任何改變是現場立即的。
3.利用設備的功能
Web App創建以HTML5作為主干,可以獲取該設備的特殊功能,包括但不局限于:整合一個用戶可以上傳照片的App內置相冊;使用“搖”功能啟動GPS。
4. 應用商店?
如果你用我們的工具包建立一個HTML5 App,你不必理會平臺和應用商店。首先,你的App自動在iOS,Android,黑莓和Windows Phone上運行。其次,你的用戶將不必在應用商店下載App。
5.完全的設計自由
用web App工具構建HTML5 web App的一個優勢是我們預先設定的100多個種類的極好功能!無論你是否進行編程,用我們的工具包,你有完全的編碼和設計自由。
不相信嗎?開始一個免費體驗或者請求一個個人DEMO并自己體驗HTML5的優勢。
本文由 專業App開發公司www.256app.com軟捷科技首發,轉載請注明信息來源。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。