本文檔主要介紹使用vue.js的制作App應(yīng)用，調(diào)用手機分享，在HBuilder下運行調(diào)試打包

1.使用代碼生成一個vue.js的web空項目

? ?(1)使用代碼生成一個vue.js的項目 ? vue init webpack vueAppDemo

執(zhí)行以下命令運行項目

cd vueAppDemo?

npm install

npm run dev

2.使用H5+調(diào)用手機分享

(1).使用HBuilder打開項目，進(jìn)入src-->components-->HelloWorld.vue

編碼：

3.將項目轉(zhuǎn)化成app項目

(1).將項目目錄下config文件內(nèi)index.js中assetsPublicPath修改為 assetsPublicPath: './'

(2).在終端中運行 npm run build

(3).運行成功后在HBuilder 項目管理器中，查看項目目錄，會多一個dist的文件夾

(4).在HBuilder工具欄中，選擇文件->打開目錄 ? 選擇dist的路徑，并且給項目名稱命名

(5).右鍵選擇新生成的項目，將web項目轉(zhuǎn)化成app項目

(6).轉(zhuǎn)化之后可以看到項目圖標(biāo)及目錄結(jié)構(gòu)發(fā)生變化

轉(zhuǎn)化前

轉(zhuǎn)化后

(7).新增的manifest.json文件為app項目的配置文件

在manifest.json文件中配置分享設(shè)置

進(jìn)入sdk配置模塊，勾選需要的分享對象，填寫申請到的ID和秘鑰

4.在手機上運行調(diào)試

(1).使用數(shù)據(jù)線連接手機

(2).在HBuilder的工具欄中選擇運行-->真機運行-->HBuilder基座運行

(3).選擇需要運行的項目

(4).運行成功后，控制臺輸出

5.手機運行

手機點擊運行HBuilder基座

點擊分享按鈕

分享調(diào)用成功

先寫到這里，之后再逐步補充