整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
2h.cn是國內最早推出psd轉html5服務的網站，psd轉html5是我們的主要核心服務，但是我們發現，越來越多的設計師客戶們開始采用sketch來做網頁設計了 ，在我們與這樣客戶接觸合作過幾例項目之后，我們正式推出sketch轉html服務。sketch和我們傳統的psd切圖有些不一樣的地方，而且需要在mac系統下切圖，不過我們適應了所有的不同。
歡迎來詢。
什么是sketch？
Sketch 是一款適用于所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁，圖標以及界面設計的最好方式。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具，比如模糊和色彩校正。我們盡力讓 Sketch 容易理解并上手簡單，有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。對于絕大多數的數字產品設計，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。
歡迎轉載，轉載請注明來源：http://www.p2h.cn/sketch-2-html/
、引言
2018年3月份，由小米，中興，華為等10家廠商成立了快應用聯盟，共同發布了快應用的標準。 自此我們可以采用一套標準去開發應用，而無縫的運行在各個手機廠商上。一次開發，一次上傳，自動分發到所有聯盟廠商的設備。根據快應用官方的說法，快應用官方是采用前端的技術棧來開發的，這篇文章以一個前端開發者的角度，來介紹怎么開發快應用，快速入門快應用的開發。
1.什么是快應用
2.快應用技術特點
從上面我們可以了解到：
1. 快應用不是HTML5,但是可以用前端已有技術棧直接上手開發；
2. 快應用是原生渲染,有著比H5更加完備的功能及原生體驗；
3. 快應用即點即用,無需安裝。
二、快應用 vs HTML5開發
首先，我們來回顧一下，在web項目中是怎么進行開發的？
簡單的說下，可以分為以下9個步驟：
如下圖所示：
做過前端的同學對這個步驟應該很熟悉了，快應用的開發步驟和這差不多，主要有2點差別，我們來比較一下：
如下圖所示，下面是快應用的開發過程：
下面從 搭建環境，hap-toolkit的使用，靜態頁面書寫（PSD轉成html），js業務邏輯的書寫，調試這5個方面來說說如何開發快應用。其他的步驟都是html5開發常見的步驟，和html5一樣，直接遷移過來就行。
1.搭建開發環境
快應用開發是基于前端技術棧的，官方團隊提供了基于nodejs的開發環境，可以參考官網的詳細教程。
主要是：
當然快應用官方也提供了IDE，也可以直接安裝一個IDE。
2.hap-toolkit的使用
安裝好hap-toolkit后，可以在控制臺輸入hap -v 看看當前的版本。
當前的最新版本是0.1.1
下面是hap-toolkit的一些常見用法
具體可以參考：
https://doc.quickapp.cn/tools/toolkit-tools.html
3.靜態頁面書寫
快應用提供了組件和指令，方便PSD轉化成html。
01.組件
快應用中組件與Vue中組件類似，一個快應用，可以組織為一個嵌套的組件樹，如下圖所示：
組件分類：
當一個頁面的業務邏輯變得復雜時，就需要將頁面拆成多個模塊，完成解耦。所以，快應用提供了自定義組件的能力，定義自定義組件與開發頁面一致。
（1）text、div等為原生組件,由各平臺 Native 底層渲染；
（2）自定義組件是一個開發者編寫的組件，使用起來和 Native 一樣，最終按照組件的<template>來渲染,頁面也是一種自定義組件；
（3）自定義組件比頁面組件的不同之處在于多了一個props屬性,用于聲明該組件可接受的外部數據傳遞,props是一個數組，數組中每個元素是暴露的屬性名稱,如果屬性名稱使用駝峰定義，如：prop2Object，那么在外部傳遞數據時請使用-連接，如：prop2-object；
（4）引入自定義組件的方式為通過 <import> 標簽引入,如: <import name="comp-part1" src="./part1"></import>；
（5）父子組件之間可以通過事件進行通信,兄弟組件之間通過 Publish/Subscribe 模型來完成通信,詳情請見文檔。
02.指令
框架指令是框架為組件定義的特殊屬性，以及框架提供的特殊組件，用于自定義頁面DOM結構渲染邏輯。
指令主要包含：
注意：
（1）for 循環 自定義變量表示 for 指令的數組索引和數組元素時，變量名不可以用$或_開頭
（2） if/elif/else 節點必須是相鄰的兄弟節點
4.JS業務邏輯的書寫
快應用的js是采用es6語法標準的，支持es6的特性。
這里主要講2個方面：生命周期和事件機制
01.生命周期
生命周期概念為現代前端開發的重要基礎，快應用里，頁面的生命周期指的也就是ViewModel的生命周期，整個頁面生命周期如下:
APP 中可以同時運行多個頁面，但是每次只能顯示其中一個頁面；這點與純前端開發，瀏覽器頁面中每次只能有一個頁面，當前頁簽打開另一個頁面，上個頁面就銷毀了。
02.事件機制
與html5一樣，快應用里面也提供了事件機制。
5.調試
不同于傳統前端開發，快應用運行在廠商聯盟的手機上。因此，官方提供了調試工具。
開發者可通過快應用調試器、hap-toolkit 的遠程調試命令 、chrome devtools 調試界面，來調試快應用。
快應用調試目前支持 chrome devtools 中的elements, console, source, network等模塊。
使用chrome devtools進行調試
三、性能優化
性能優化是前端永恒的主題
性能優化包括兩個大類：
建議開發者了解性能優化的常見方案，提升應用性能
1.簡化ViewModel的數據
在ViewModel的定義中，屬性public、protected、private 主要承擔數據驅動的數據定義與改造功能，會對賦值的數據中每個屬性進行遞歸式的定義。因此，屬性個數的定義越少越好，尤其是數組類型數據，建議過濾不需要用到的對象屬性。
示例如下：
如果頁面僅需要用到 list 中每個 item 的 userId, orderName 屬性的話，則僅賦值這兩個屬性到ViewModel數據中，過濾掉非相關屬性。
// 模擬fetch請求返回的數據
const orderList = [
{
userId: '123',
orderName: 'XX產品',
userName: '張三',
shoppingList: [
{
productId: '001',
productLink: 'http://xxx',
productShop: {
ownerId: '2390',
ownerName: 'XXX店鋪'
}
}
]
},
{
// ...
}
]
export default {
private: {
list: []
},
onInit () {
// 返回頁面中需要的對象屬性，過濾無用的對象屬性
this.list = orderList.map(item => {
userId: item.userId,
orderName: item.orderName
})
}
}
2.合理使用后代選擇器
框架支持 CSS 中的后代選擇、支持 less 預編譯，方便開發者開發，提升代碼可維護性。然而，過多的使用后代選擇器，也會在節點匹配上帶來性能損耗，尤其是當一個節點滿足多個選擇時。
優化建議如下：
3.使用懶加載
懶加載是一項通用的優化手段，傳統 H5 頁面中的圖片懶加載，指的是頁面即將滾動到屏幕可視區域時，才加載資源，渲染頁面。
在框架中，也可以使用懶加載技術：為了加快頁面可視區域的渲染，可以通過指令或者事件觸發等手段推遲不可見區域的渲染。
四、參考文檔
來越多的開發者熱衷于使用html5+JavaScript開發移動Web App。不過，HTML5 Web APP的出現能否在未來取代移動應用，就目前來說，還是個未知數。那么，有什么辦法，既可以使用HTMl5開發應 用，又可以將其簡單封裝成APK文件呢？
一、Android SDK中的WebView
1.在要Activity中實例化WebView組件：WebView webView = new WebView(this);
2.調用WebView的loadUrl()方法，設置WevView要顯示的網頁：
? 互聯網用：webView.loadUrl("http://www.qietu.com");
? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
3.調用Activity的setContentView( )方法來顯示網頁視圖
4.用WebView點鏈接看了很多頁以后為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統回退剪鍵，整個瀏覽器會調用finish()而結束自身，而不是回退到上一頁面
5.需要在AndroidManifest.xml文件中添加權限，否則會出現Web page not available錯誤。
? <uses-permission android:name="android.permission.INTERNET" />
缺點：如果是載入的是普通網頁，沒有什么問題，但如果是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); ?
??????????? //實例化WebView對象 ?
??????????? webview = new WebView(this); ?
??????????? //設置WebView屬性，能夠執行Javascript腳本 ?
??????????? webview.getSettings().setJavaScriptEnabled(true); ?
??????????? //加載需要顯示的網頁 ?
??????????? webview.loadUrl("http://www.qietu.com/"); ?
??????????? //設置Web視圖 ?
??????????? setContentView(webview); ?
??????? } ?
??????? @Override
??????? //設置回退 ?
??????? //覆蓋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文件中添加權限
??? <?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的，創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，
詳細方法請見：http://phonegap.com/start#android
優點：在Eclipse中加入SDK，編程自由，完美適應不同設備屏幕大小，適合高手使用。
缺點：沒有使用布局，直接加載網頁，不能添加廣告。
----------------
切圖網（qietu.com）最早將psd轉html服務模式帶到國內，并首個提供響應式、webapp前端開發的公司。專注web前端開發技術，關注用戶體驗，加我們公眾微信賬號：qietuwang（長按復制）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
