快應用安裝流程和統計打點

時間 2019-12-01

標籤應用安裝流程統計打點简体版

原文原文鏈接

快應用生態已經發展的很是完善，今天我就快應用的安裝開發和統計打點，作一個總結，但願有所收穫，歡迎指導。node

1、安裝快應用開發工具

1.安裝nodeJs

安裝nodeJs，首先必須是8.0以上，不然不兼容，建議10.0+，並且要從官網下載。
官網地址：nodejs.org/en/

2.安裝hap-toolkit

安裝hap-toolkit，命令行爲 npm install -g hap-toolkit
校驗：Hap –v （提示安裝成功便可）

3.安裝調試器

安裝調試器，經過下載地址：https://www.quickapp.cn/docCenter/post/69
下載好的apk文件是 (quickapp_debugger.apk) ，QQ或者微信都可傳送，建議QQ傳送安裝。

4.安裝預覽版

安裝預覽版，經過下載地址：https://www.quickapp.cn/docCenter/post/69
下載好的apk文件是 (quickapp_platform_preview_release_v1030.apk) ，QQ或者微信都可傳送，建議QQ傳送安裝。
按照目前的兼容狀況和各個版本市場佔有率來講，推薦1030，快應用的最低版本薦1030，快應用是向上兼容不向下兼容。

5.安裝rpk文件過程

如圖所示，在手機上安裝並打開調試器webpack

掃碼安裝：配置 HTTP 服務器地址，下載 rpk 包，並喚起平臺運行 rpk 包
本地安裝：選擇手機文件系統中的 rpk 包，並喚起平臺運行 rpk 包

例qq接收：本地安裝→文件管理→內部存儲設備→tencent（騰訊）→QQfile_recv 這是對應文件的查找路徑

在線更新：從新發送 HTTP 請求，更新 rpk 包，並喚起平臺運行 rpk 包
開始調試：喚起平臺運行 rpk 包，並啓動遠程調試

2、建立項目和開發調試

1.手動建立項目

創建項目模板

hap init myproject

安裝依賴

npm install 安裝模塊到node_modules目錄
若是出現 Cannot find module '.../node_modules/hap-tools/webpack.config.js 報錯，則hap update -force ，進行升級便可，升級後無需從新npm install

編譯項目

npm run watch 監聽
npm run build 手動編譯打包

啓動http服務

npm run server
手動設置端口 npm run server -- -- port 8080

手機預覽

將http服務的地址，複製到瀏覽器，生成二維碼，用手機掃一掃便可

項目簽名

凡是上線的項目，必需要作簽名，而且線上簽名不可更改。最好在第一次項目簽名後，將簽名進行保存。以防後期修改項目意外變動。未上線項目簽名還可更改，可是隻要上線後，簽名則不能更改，請注意。
手動簽名命令是 openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem

2.自動新建快應用工程

快應用的IDE 具備一鍵建立快應用工程的操做。
打開快應用IDE-文件-新建快應用工程
能夠選擇模板，若是沒有特殊須要，默認模板簡單明瞭。
web
以上的建立工程的對應理解以下

選擇項目路徑
項目名稱-文件夾名稱
應用名稱-某某應用
應用包名-com.moumou.com相似格式
選擇模板-默認就是默認模板
確認

3.項目結構

src-項目源文件夾
npm
sign-簽名模塊分爲(debug 和 release) 線上必須有release簽名
瀏覽器

4.項目編譯

watch

npm run watch
若是但願每次修改源代碼文件後，都自動編譯項目 IDE->調試-啓動調試

build

npm run build
最終產出生成 rpk 包-不可上線 IDE->Hap-生成rpk包
按照build的目錄結構

build ---build：臨時產出，包含編譯後的頁面 js，圖片等
build ---dist：最終產出，包含 rpk 文件。實際上是將 build 目錄下的資源打包壓縮爲一個文件，後綴名爲rpk，這個rpk文件就是項目編譯後的最終產出

release

npm run release
上線rpk包-必須作簽名

5.啓動http服務器

如圖所示 npm run server 啓動服務
複製地址到瀏覽器生成二維碼
可直接掃碼

6.項目簽名

第一種方式就是openssl命令形式

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem

第二種方式是經過快應用IDE 一鍵簽名

快應用ide- Hap -生成證書
按照如上簽名格式，給予一個demobash

CH
BeiJing
BeiJing
Company
CompanyCn
abc@163.com

7.manifest配置文件詳解

mainfest的配置文件內容較多，這裏只列舉項目中咱們經常使用且須要注意的一部分服務器

package-應用包名，例 com.demo.com
name-應用名稱，例某某應用
icon-應用圖標，標準（192 *192），按照官方給予的icon爲標準
versionName-應用版本名稱例 1.0.0.0
versionCode-應用版本號，若是已經上線，再次傳包，要更改，好比+1，每次均不一樣且不重複。
minPlatformVersion-最小平臺，例1030
features-接口列表，不聲明不能直接調用，全部須要調用的必須在這聲明
config-系統配置信息

designWidth 寬度比例，例1080 750經常使用手機適配寬度
logLevel 日誌模式，重中之重，若是你沒踩過這個坑，你該高興，若是你各類打印不出現，想必就是這裏忘了改了，通常是 debug模式。
data 一些data配置。好比後面咱們要說到的打點，就須要在這配置appkey

router-路由信息

entry：入口文件，好比home
pages：其餘的路由文件

display-UI顯示相關信息

fullScreen ，是否全屏
titleBar ，是否顯示titleBar
menu ，是否顯示標題欄右上角菜單按鈕，若是須要本身的一些判斷邏輯，須要本身編寫
pages ，各個頁面的顯示樣式，key 爲頁面名，與路由一致。路由寫了。這裏也要寫，要互相匹配上，不然編譯可能就會報一些莫名其妙的錯誤，單個頁面樣式可覆蓋總體頁面樣式哦。
Bgcolor ，窗口背景色，若是你想改狀態欄的顏色，那就要修改這裏了。

3、快應用的差別性簡述

這裏就說一些標籤類的差別微信

img和image

img是單標籤 <img src="../images/icon.png" alt="頭像">
image是雙標籤， <image class=「cosPicture」 src=「」alt="不見了"></image> 是的，雙標籤，別寫着寫着就丟了

text 和p span div ，承載文字的標籤

<text >文字</text>
<text > <span>文字內部</span>文字外部</text>
<p >文字</p>
<span >文字</ span >
<div>文字</ div >

list和list-item

<list class="tutorial-page" onscrollbottom="loadMoreData">
    <!-- 商品列表 -->
    <block for="productList">
      <list-item type="product" class="content-item" onclick="route($item.url)">
<text class="bottom-line">{{$item.brief}}</text>
        </div>
      </list-item>
    </block>

    <!-- 加載更多，type屬性自定義命名爲loadMore -->
    <list-item type="loadMore" class="load-more">
      <progress type="circular"></progress>
      <text>加載更多</text>
    </list-item>
  </list> 複製代碼

list裏面，只能是list-item
list-item結構必須一致，尤爲結構十分複雜的狀態，這裏已經要注意，若是非結構一致類型，type屬性要修改，好比第一個list-item的type值爲one，第二個list-item的type爲two
list-item內部慎用 if 和 for ，由於 if 和 for 可能形成type的lsit-item的DOM結構改變，從而報錯
scrollbottom，這是監聽列表是否滑動到底部，只要是列表，必不可少

stack

瞭解stack，在快應用的佈局上，應該是不會有太大問題。 stack顛覆了以往的標籤模式，採用層疊式佈局，如下代碼和圖片是我對stack的詳解

<stack class="stack">
<image class="image「 src="pic2.webp"> </image> <text class="title">stack容器排列方式爲層疊，每一個子組件按照前後順序依次堆疊，覆蓋前面的組件</text> <div class="wrap"> <image class="btn「  src="demo.png">
	</image>
 </div>
 </stack>
複製代碼

相信看見這個圖你就能夠明白了。他的結構都是一層一層羅列上去的，最外層是stack，stack裏面包含的image，text，div，這三者的佈局是，text顯示在image上面，div在text上面，而div內部的image，直接顯示。通俗來講，摞壓摞！
app

border

border-width+ border-style + border-color =border
例如：

border-bottom-width:3px;
border-bottom-style:solid;
border-bottom-color:#fff000
等同於border-bottom：3px solid #fff000；的確有點小累啊

border-radius

左上角+右上角+左下角+右下角= 四角
例如

border-top-left-radius:15px
border-top-right-radius:15px
border-bottom-left-radius:15px
border-bottom-right-radius:15px
等同於 border-radius：15px

注意

圓角時只使用 border-width，border-[left|top|right|bottom]-width 無效
圓角時只使用 border-color，border-[left|top|right|bottom]-color 無效

快應用的flex佈局

flex-direction

column | row | column-reverse 1040+ | row-reverse 1040+
默認：row水平

flex-wrap

nowrap | wrap | wrap-reverse
默認： nowrap不換行

justify-content

flex-start | flex-end | center | space-between | space-around
默認：flex-start 左對齊 -上對齊

align-items

stretch | flex-start | flex-end | center
默認：stretch容器高度

align-content

stretch | flex-start | flex-end | center | space-between | space-around
默認：stretch軸線佔滿整個交叉軸

align-self

1010+ auto | stretch | flex-start | flex-end | center | baseline
默認：auto繼承父元素的align-items屬性

4、快應用小坑總結

缺乏依賴

Can’t resolve ‘less-loader’ ,證實缺乏 less-loader依賴，直接從新安裝依賴便可，即 npm install less-loader ，其餘依賴同理。

swiper中多圖片加載

部分機型(小米)出現一些圖片被切割現象。（不可恢復）部分機型（華爲、oppo）滑動過快，出現圖片被切割現象，從新加載能夠還原頁面。多是手機渲染的問題。圖片屬性： resize-mode: contain;相信版本的更新會修復和完善！

頁面調試

最初調試時注意版本號以及是否在同一網段。若是手機電腦都使用一個wifi 。可是電腦安裝了360wifi等，則會改變網段。請注意必須在同一網段。

input特例

獲取input的value值必須有change <input id="phone" type="text" placeholder="請輸入手機號碼" maxlength ="11" class="phone" value="{{phoneInput}}" @change="bindPhoneChange"/>
修改和獲取 this.$element('phone').value

5、快應用的打點總結

目前打點接觸的友盟和輕粒子兩家，都是很好的快應用統計平臺下面我針對統計打點，作一個簡單的對比less

友盟-流程和植入

Appkey申請——登陸友盟+官網，在個人產品頁面添加新應用，而後獲取到Appkey
建立快應用並接入SDK——umengannlysis.es.min.js
項目導入SDK——將umengannlysis.es.min.js拷貝到您的快應用項目src/路徑下
添加依賴——npm install js-base64 --save 和 npm install md5 --save

爲SDK添加相應權限——

"features": [
    { "name": "system.storage"},
    { "name": "system.fetch"},
    { "name": "system.network"},
    { "name": "system.device"}
  ]
複製代碼

appkey植入——

"config": {
    "data":{
      "umeng_appkey" : "5ad7fb4**********d0000d5",//umeng_appkey即爲上步申請的Appkey
    }}複製代碼

app.ux文件-初始化打點 ——

import './umenganalysis.es.min';
onCreate(){
      $umeng_stat.init(this);   //在onCreate函數中加入該行代碼，必須添加！！！
 }複製代碼

輕粒子-流程和植入

Appkey申請——註冊帳號並登陸輕粒子官網在「個人快應用」頁面點擊建立快應用，成功建立快應用後便可獲取到對應快應用 app_key。
建立快應用並接入SDK ——appStatistics.min.js 和 statistics.config.js
項目導入SDK ——把 sdk 中的 appStatistics.min.js、statistics.config.js 拷貝到項目中和 app.ux 同級的目錄
添加依賴 ——須要md5 （自帶）

爲SDK添加相應權限 ——

"features": [
        { "name": "system.fetch"},
        {"name": "system.storage"},
        {"name": "system.device"},
        {"name": "system.network"},
        {"name": "service.account"},
        {"name": "system.shortcut"}
  ]
複製代碼

appkey——在statistics.config.js 文件中

export default {
    'app_key' : '0000000000000'   //請在此行填寫統計平臺獲取的 app_kye
    }
複製代碼

app.ux文件-初始化打點 ——

import "./appStatistics.min.js"
onCreate(){
    APP_STATISTICS.app_sta_init( this );//在onCreate函數中加入該行代碼，
//必須添加！！！}複製代碼

友盟和輕粒子打點自定義事件對比

輕粒子

onShow(){     
  APP_STATISTICS.page_show( this );
}    複製代碼

onHide(){     
  APP_STATISTICS.page_hide( this );
}, 複製代碼

APP_STATISTICS.track_event('事件id');複製代碼

APP_STATISTICS.track_event('homeLikeDot', countLikeStatus);複製代碼

APP_STATISTICS.track_event('homeShareDot' , {
shareEveId: item.id,
share_count_str: item.share_count_str        
            });複製代碼

友盟

onShow(){     
  $umeng_stat.resume(this)
}複製代碼

onHide(){     
  $umeng_stat.pause(this);
}複製代碼

$umeng_stat.trackEvent('事件ID'); 複製代碼

$umeng_stat.trackEvent('homeLikeDot',countLikeStatus); 複製代碼

$umeng_stat.trackEvent('homeShareDot' , {
shareEveId: item.id,
share_count_str: item.share_count_str        
}); 複製代碼

備註

自定義事件打點接口及調用
$umeng_stat.trackEvent(id,attr);
APP_STATISTICS.track_event(id,attr);
該方法接收兩個參數，第一個參數 id 爲事件ID（必傳）。第二個參數 attr 爲事件攜帶參數（非必傳）。該參數能夠爲一個字符串( String )或者一個 JavaScript 對象 ( Object )。

差別性，輕粒子有一個錯誤分析

輕粒子的錯誤分析，建議項目添加
監聽應用錯誤的生命週期函數

onError(err) {
        try {
            // 錯誤統計打點代碼
            APP_STATISTICS.on_err(err);
        } catch (error) {}

    } 複製代碼

6、最後

感謝你們的閱讀，歡迎提出寶貴意見，但願本篇文章能夠給快應用開發的小夥伴，帶來一些新的體驗，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。