從接觸安卓開發的第一天起，我想我已經愛上了開發，哈哈哈，愿你我堅持下去的理由都是熱愛，共勉！這幾天沒有更新博客，是因為我學習去了（沒有相見的日子，我在努力哈哈哈），有想過用模擬器來運行的，但是模擬器太占記憶體，而且感覺沒有真機體驗感好，于是直接上真機，為了把這篇文章寫好，我在多臺電腦上都試過了哈哈哈，希望可以幫助到更多的和我一樣的友友們，
目錄
- 一、混合式開發簡單介紹
- 二、前提準備
- 三、新建移動app專案
- 四、撰寫代碼（沉浸式開發）
- 五、json檔案的配置
- 六、云端發布
- 6.1生產證書
- 6.2在HBuilder云端選擇認證
- 6.3發行
- 6.4下載移動apk檔案
一、混合式開發簡單介紹
??HybridApp 是指在開發一款App產品的時候，為了提高效率、節省成本而利用原生與H5的開發技術的混合應用，APP外殼+H5網頁=混合模式的APP，
??混合開發是結合原生和H5開發的技術，取長補短的一種開發模式，原生代碼部分利用WebView插件或者其它的框架為H5提供了一個容器，程式主要的業務實作、界面展示是利用H5相關的Web技術進行實作的，
??比如現在的京東、淘寶、天貓、今日頭條、微信等都是利用的混合開發模式，
二、前提準備
2.1工具：Hbuilder
2.2框架mui
補充一下mui（高性能前端框架）的知識
https://dev.dcloud.net.cn/mui/window/
2.3連接真機
每款手機的開發者模式都是不一樣的，百度一下自己的開發者模式怎么開啟
反正一般都有三部：
- 一直點擊自己的軟體版本號，直到出現您已處于開發者模式
- 開啟開發者選項
- 開啟USB除錯
以安卓6.0為例：點擊此處
這里需要注意的是
- 要使用資料線連接電腦usb介面和手機，（有的資料線只能充電，不能傳輸資料）
- 手機連電腦后，默認是充電模式，要選擇資料傳輸模式，（充電 傳輸照片 傳輸資料），
如果連接不上，那就下載一個360手機助手（電腦和手機都下載），操作很簡單，因為我的手機就沒有連接上，但是一般都是可以連接上的，因為我看其他人都連接上了，
三、新建移動app專案
新建一個移動app專案
點擊檔案——》新建——》移動App
自己撰寫應用名稱，選擇mui專案的模板，點擊確定
這樣一個移動app專案就創建好了！
四、撰寫代碼（沉浸式開發）
哈哈哈，例如來個簡單的
在body里面依次輸入
1. mh回車 標題
2. mt回車 底部選項卡
3. ms 回車選擇第二個 輪播
4. mg 回車 九宮格
注：快捷鍵：https://dev.dcloud.net.cn/mui/snippet/
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">歡迎關注這個超級無敵可愛的人鴨</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設定</span>
</a>
</nav>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增加的一個節點(回圈輪播：第一個節點是最后一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增加的一個節點(回圈輪播：最后一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
</body>
</html>
（由于時間關系就只寫了這樣一個頁面）
在HBuilder當中，我們可以點擊右上角，選擇邊點邊看的模式，這樣再右邊就可以看到我們運行的東西了，
我在手機上面看到的是這樣的
五、json檔案的配置
點擊這個檔案
點擊左下角的應用資訊，我們來看每一項都代表什么意思
應用名稱就是app下面的名稱
appid是id號，這個登錄了HBuilder自動生成
app版本號這個好像可以改
頁面入口就是加載出來的第一個頁面
最下方的根據重力感應自動橫豎屏這個看字面意思就可以懂啦！
點擊圖示資訊，你可以設定自己app的logo，下面那就是根據不同的手機版本來調整不同的尺寸，
啟動頁面就是曇花一現，打開app，就彈出來那一張，
SDK配置就是第三方工具，例如百度地圖，QQ微信登錄
模塊權限設定，顧名思義，就是給這個app的權限
后面兩個我再琢磨琢磨，，，
接下來我們就可以試試如何云端發布~
六、云端發布
6.1生產證書
打開cmd（注意：這里應該右鍵管理員運行，哈哈哈要養成良好的習慣，一般都是管理員運行）
輸入命令
keytool -genkey -alias swetty -keyalg RSA -validity 10000 -keystore d:/mykey1.keystore
swetty表示證書的別名
keyalg：RSA 表示采用的RSA演算法
validity：10000 表示證書的有效期是10000天
(當然盤符可以自己定)
接下來可以輸入你的密碼
如圖
上面的操作完了就會在D盤產生一個這樣的檔案
這個檔案后面要用，
6.2在HBuilder云端選擇認證
選擇幫助，點擊問答互助
基本資料認證，輸入電話號碼
點擊
手機號碼驗證（也就手機號碼驗證就可以了）
你的HBuilder賬號必須在社區認證，這樣才能上傳，
6.3發行
點擊發行——》點擊發行為原生安裝包
點擊使用自有證書——》私鑰密碼就是你剛剛生產證書在cmd里面輸入的密碼
點擊打包——》忽略并繼續打包
繼續打包
點擊確定
6.4下載移動apk檔案
這時，就可以手動下載了，點擊手動下載
下載下來之后，再把這個apk檔案發送到自己的QQ，用手機下載下來，再點擊安裝
就ok啦！！！
這就是安裝好的樣子（最后一個app就是剛剛下載的）
這樣一個app就發行成功了，終于寫完了，
https://blog.csdn.net/hanhanwanghaha歡迎關注這個超級無敵可愛的人鴨，有什么問題留言私信皆可，看見必回！
如有轉載，請注明出處
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204897.html
標籤：其他
上一篇：javaWeb-百斯特電子商城-在jsp頁面中側邊欄點擊，右邊進行變化（java實作）（持續完善）
下一篇：jQuery是什么?和它的優缺點