连接真机开发安卓(Android)移动app MUI框架——混合式开发（一） （敲详细）
從接觸安卓開發(fā)的第一天起，我想我已經(jīng)愛上了開發(fā)，哈哈哈，愿你我堅持下去的理由都是熱愛，共勉！這幾天沒有更新博客，是因為我學習去了（沒有相見的日子，我在努力哈哈哈）。有想過用模擬器來運行的，但是模擬器太占內(nèi)存，而且感覺沒有真機體驗感好，于是直接上真機。為了把這篇文章寫好，我在多臺電腦上都試過了哈哈哈，希望可以幫助到更多的和我一樣的友友們。
https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人鴨
歡迎您的關(guān)注！ 歡迎關(guān)注微信公眾號：寶藏女孩的成長日記 如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）
目錄
- 一、混合式開發(fā)簡單介紹
- 二、前提準備
- 三、新建移動app項目
- 四、編寫代碼（沉浸式開發(fā)）
- 五、json文件的配置
- 六、云端發(fā)布
- 6.1生產(chǎn)證書
- 6.2在HBuilder云端選擇認證
- 6.3發(fā)行
- 6.4下載移動apk文件
一、混合式開發(fā)簡單介紹
??HybridApp 是指在開發(fā)一款App產(chǎn)品的時候，為了提高效率、節(jié)省成本而利用原生與H5的開發(fā)技術(shù)的混合應用。APP外殼+H5網(wǎng)頁=混合模式的APP。
??混合開發(fā)是結(jié)合原生和H5開發(fā)的技術(shù)，取長補短的一種開發(fā)模式，原生代碼部分利用WebView插件或者其它的框架為H5提供了一個容器，程序主要的業(yè)務實現(xiàn)、界面展示是利用H5相關(guān)的Web技術(shù)進行實現(xiàn)的。
??比如現(xiàn)在的京東、淘寶、天貓、今日頭條、微信等都是利用的混合開發(fā)模式。
二、前提準備
2.1工具：Hbuilder
2.2框架mui
補充一下mui（高性能前端框架）的知識
https://dev.dcloud.net.cn/mui/window/
2.3連接真機
每款手機的開發(fā)者模式都是不一樣的，百度一下自己的開發(fā)者模式怎么開啟
反正一般都有三部：
以安卓6.0為例：點擊此處
這里需要注意的是
如果連接不上，那就下載一個360手機助手（電腦和手機都下載），操作很簡單，因為我的手機就沒有連接上，但是一般都是可以連接上的，因為我看其他人都連接上了。
三、新建移動app項目
新建一個移動app項目
點擊文件——》新建——》移動App
自己編寫應用名稱，選擇mui項目的模板，點擊確定
這樣一個移動app項目就創(chuàng)建好了！
四、編寫代碼（沉浸式開發(fā)）
哈哈哈，例如來個簡單的
在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">歡迎關(guān)注這個超級無敵可愛的人鴨</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">設(shè)置</span></a></nav><div id="slider" class="mui-slider" ><div class="mui-slider-group mui-slider-loop"><!-- 額外增加的一個節(jié)點(循環(huán)輪播：第一個節(jié)點是最后一張輪播) --><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><!-- 額外增加的一個節(jié)點(循環(huán)輪播：最后一個節(jié)點是第一張輪播) --><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>（由于時間關(guān)系就只寫了這樣一個頁面）
在HBuilder當中，我們可以點擊右上角，選擇邊點邊看的模式，這樣再右邊就可以看到我們運行的東西了。
我在手機上面看到的是這樣的
五、json文件的配置
點擊這個文件
點擊左下角的應用信息，我們來看每一項都代表什么意思
應用名稱就是app下面的名稱
appid是id號，這個登錄了HBuilder自動生成
app版本號這個好像可以改
頁面入口就是加載出來的第一個頁面
最下方的根據(jù)重力感應自動橫豎屏這個看字面意思就可以懂啦！
點擊圖標信息，你可以設(shè)置自己app的logo，下面那就是根據(jù)不同的手機版本來調(diào)整不同的尺寸。
啟動頁面就是曇花一現(xiàn)，打開app，就彈出來那一張。
SDK配置就是第三方工具，例如百度地圖，QQ微信登錄
模塊權(quán)限設(shè)置，顧名思義，就是給這個app的權(quán)限
后面兩個我再琢磨琢磨。。。
接下來我們就可以試試如何云端發(fā)布~
六、云端發(fā)布
6.1生產(chǎn)證書
打開cmd（注意：這里應該右鍵管理員運行，哈哈哈要養(yǎng)成良好的習慣，一般都是管理員運行）
輸入命令
keytool -genkey -alias swetty -keyalg RSA -validity 10000 -keystore d:/mykey1.keystoreswetty表示證書的別名
keyalg：RSA 表示采用的RSA算法
validity：10000 表示證書的有效期是10000天
(當然盤符可以自己定)
接下來可以輸入你的密碼
如圖
上面的操作完了就會在D盤產(chǎn)生一個這樣的文件
這個文件后面要用。
6.2在HBuilder云端選擇認證
選擇幫助，點擊問答互助
基本資料認證，輸入電話號碼
點擊
手機號碼驗證（也就手機號碼驗證就可以了）
你的HBuilder賬號必須在社區(qū)認證，這樣才能上傳。
6.3發(fā)行
點擊發(fā)行——》點擊發(fā)行為原生安裝包
點擊使用自有證書——》私鑰密碼就是你剛剛生產(chǎn)證書在cmd里面輸入的密碼
點擊打包——》忽略并繼續(xù)打包
繼續(xù)打包
點擊確定
6.4下載移動apk文件
這時，就可以手動下載了，點擊手動下載
下載下來之后，再把這個apk文件發(fā)送到自己的QQ，用手機下載下來，再點擊安裝
就ok啦！！！
這就是安裝好的樣子（最后一個app就是剛剛下載的）
這樣一個app就發(fā)行成功了，終于寫完了。
https://blog.csdn.net/hanhanwanghaha歡迎關(guān)注這個超級無敵可愛的人鴨，有什么問題留言私信皆可，看見必回！
如有轉(zhuǎn)載，請注明出處
總結(jié)
以上是生活随笔為你收集整理的连接真机开发安卓(Android)移动app MUI框架——混合式开发（一） （敲详细）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java入门代码注释与编码规范（羊驼）
- 下一篇： Android阿面试积累，讲的真透彻