https://www.51zxw.net/list.aspx?page=2&cid=589 //我要自學網 H5+app
視頻2.1 使用Hbuilder IDE創建手機App項目
1.下載開發工具
下載hbuilder作爲開發工具
2.在開發工具新建項目
左邊右鍵 -> 新建 -> 移動app -> mui項目
3.新建項目文件說明
manifest.json是配置文件,包括項目名稱,apoid,頁面入口,app圖標,啓動圖片等
視頻2.2 安裝手機模擬器
(安卓)
1.下載夜神模擬器
2.打開夜神模擬器usb調試
3.把hbuilder的項目在模擬器上運行
點擊hbuilder上方的工具 -> 選項 -> HBuilder -> 第三方Android模擬器端口處改成62001 -> 確認
選中自己的項目 -> 點擊幫助下面的在手機上運行 -> 選第一項
(蘋果,只能真機調試)
1.在hbuilder上安裝ios連接插件
工具 -> 插件安裝 -> ios連接插件
2.下載iTunes
視頻2.3 app設置、雲打包
1.講解了manifest.json配置文件
應用名稱隨便起,儘量有意義(如:我的第一個程序)
appid也隨便起,儘量有意義(如:my_first_app)
2.打包成安裝包
1.發行 -> 發行爲原生安裝包
2.選Android
3.點使用DCloud公用證書
4.點Goodle開發者證書
5.Android包名的com.alibaba.XXX XXX是配置文件裏的appid
6.點打包
視頻2.4 MUI的效果瀏覽
1.新建一個移動app項目 -> Hello mui -> 邊改變看( 或真機調試 )
視頻2.5 使用mui創建一個簡單的app界面
1.在head裏面引入mui框架
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
2.mui初始化
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
3.快速生成導航欄
mheader + 回車鍵
視頻2.6 認識HTML5+
1. 5+Runtime 提供了一套系統的JavaScript的IPI,通過他就可以調用手機系統的底層硬件功能
包括調用攝像頭
包括掃二維碼
包括掃條形碼
包括增刪改查通信錄
等等,很多
2.官網文檔裏有寫法,在視頻2.7裏也有
3.可以在hbuilder裏創建一個演示項目.然後示例代碼在plus文件夾裏
4.也可以電腦瀏覽器輸入dcloud.io/demo/然後微信掃二維碼
視頻2.7 App調試（一）
1.邊改邊看
有h5+調用獲取本手機型號的寫法
2.真機運行
3.通過電腦谷歌瀏覽器遠程調試安卓手機或模擬器的項目(此視頻測試了模擬器,視頻2.8測試了真機)
要求
1.調試的安卓手機或夜神模擬器的安卓版本必須在4.4或更高
2.打開開發者選項的debug調試
3.選中項目,真機運行在模擬器或自己的手機上
4.打開電腦的chrome瀏覽器,輸入 chrome://inspect
5.要翻牆,去下載藍燈
6.要刷新是按Ctrl + r
視頻2.8 App調試（二）
測試了用chrome瀏覽器調整真正的安卓手機
1.用數據線連接電腦,再選擇這臺手機進行真機調試,然後的步驟和視頻2.7一樣
2.如果沒有出現這臺手機,重啓一下hbuilder試試,如果還是不行,回來看這個視頻,裏面有排查方法
3.如果用打包的方式調試的話,打包前主要要開啓manifest.json配置文件裏的debug模式
仿微信實戰項目
視頻3.1 新建項目並劃分目錄
1.新建個common文件夾放公共文件,如mui.css,mui.js,font
2.新建個models存放所有的app界面
3.在models文件夾裏新建login,message,address-book,mine等等文件夾
視頻3.2 登陸界面編寫
視頻3.3 登陸邏輯編寫
視頻3.4 WebView的使用
1.在HTML5+的文檔裏有webview的說明
2.webview是APP中內置的視圖頁面,一個頁面對應一個webview
3.寫法
var mainWv = plus.webview.getWebviewById('main');
if (!mainWv) {
//創建一個webview
mainWv = plus.webview.create('./main.html','main');
console.log("創建了一次")
}
//顯示這個webview
mainWv.show()
4.mui的頁面跳轉寫法
mui.openWindow('./main.html','main')
視頻3.5 微信主界面佈局思路
視頻3.6 微信主界面佈局（一）
視頻3.7 微信主界面佈局（二）
1.調整webview的層級關係,讓頁面蓋着另一個頁面
1.創建webview時距離底部50px
2.獲取當前父webview: var parentWv = plus.webview.currentWebview();
3.創建好子webview只讓一個子webview顯示
4.把剛創建的子webview放在父webview上: parentWv.append(newWv)
視頻3.8 底部Tab導航之間的切換
1.mui的選擇器
mui('.mui-bar').on('tap','.mui-tab-item',function(e){
/在a標籤裏寫了一個data-id的屬性
//這裏的this等於a標籤,然後this.dataset.id可以獲取到data-id的值
console.log(this.dataset.id);
})
視頻3.9 消息列表
1.修改格式代碼的快捷鍵 工具->選項->常規->快捷鍵->輸入"格式"->按enter->選整理代碼格式->點綁定->修改好後點保存
視頻3.10 自定義字體圖標
1.教如何使用阿里的字體圖標
->登陸圖標庫地址: http://iconfont.cn/ 157677*** qw11***
->搜索需要的圖標加到購物車
->點擊購物車
->添加至項目
->選Font class
->查看在線連接
->去項目的index.html文件裏面換一個引入地址就可以
<i class='iconfont icon-roundclosefill'></i>
視頻3.11 通訊錄（一）
1.說了如何根據mui的demo找出對應的代碼
在對應的demo的網址裏找 先找都到examples文件夾,再找後面的html文件就是對應的例子的代碼
視頻3.12 通訊錄（二）
1.說了某個webview的js裏寫了個方法,如何在其他webview裏調用它
//顯示即將點擊的webview
var showWv = 'message';
plus.webview.getWebviewById(this.dataset.id).show('none',0,function(){
//觸發這個Wv界面裏定義的showpage事件
//fire是觸發的意思
mui.fire(plus.webview.getWebviewById(showWv),'showpage'); //第一個參數是: 觸發哪個Wv對象, 第二個參數是: 觸發這個Wv的什麼事件
});
視頻3.13 發現界面
視頻3.14 "我" 界面
視頻3.15 細節修改
視頻3.16 搖一搖佈局（一）
視頻3.17 搖一搖邏輯（二）
mui.plusReady(function(){
//mui監聽移動設備的加速度變化
plus.accelerometer.watchAcceleration(function(a){
console.info(JSON.stringify(a));
//如果xyz三個方向上的加速度的絕對值加起來超過了某個值,就是在搖手機
},function(){
alert("監聽失敗");
},{
frequency:1000
})
})
視頻3.18 搖一搖邏輯（三）
//圖片移動
var up = document.querySelector('.up');
up.style.webkitTransform = 'translateY(-'+up.offsetHeight/2+'px)';
//移動時添加過渡
-webkit-transition: all .5s ease-in-out;
視頻3.19 掃一掃（一）
視頻3.20 掃一掃（二）
視頻3.21 使用leanCloud完善登錄校驗（一）
1.用網易的leanCloud.官網https://leancloud.cn/
2.先創建一個應用
3.在class中添加我們需要的數據
4.點快速入門 -> REST API -> 數據存儲API -> 用戶(自己創建的表點查詢)
5.在線測試在API版本 -> 在線測試 ->API在線測試工具
視頻3.22 使用leanClound完善登錄校驗（二）
1.講了leanCloud的使用例子
視頻3.23 實戰: 退出界面編寫
視頻3.24 退出邏輯
視頻3.25 聊天界面（一）
視頻3.26 聊天界面（二）
視頻3.27 聊天界面（三）
視頻3.28 發送消息（一）
視頻3.29 發送消息（二）
var content = document.querySelector('.content');
content.scrollTop //這是已經滾動的高度
content.offsetHeight //這是屏幕的高度
content.scrollHeight //這是屏幕+已滾動的高度
視頻3.30 集成leanCloud點對點發消息（一）
這個視頻沒跟着做
視頻3.31 集成leanCloud點對點發消息（二）
這個視頻沒跟着做
視頻4.1 [APP通用模塊] 引導頁(1)
視頻4.2 [APP通用模塊] 引導頁(2)
在guide.js裏有本地存儲
//localStorage.setItem(); //這是原生的?
plus.storage.setItem('launchFlag','true'); //存儲,這是HTML5+的寫法,比原生更安全
plus.storage.removeItem('launchFlag'); //清除
視頻4.3 [APP通用模塊] 在線升級(1)
視頻4.4 [APP通用模塊] 在線升級(2)
視頻4.5 [APP通用模塊] 在線升級(3)
視頻4.6 APP錯誤監控
百度搜索bugHD
註冊 => 登陸 => 創建項目 => 把需要的js放到項目裏
視頻4.7 APP上架
先在HBuilder生成一個apk出來
登陸dev.360.cn註冊一個開發者賬號,然後就能上傳到360軟件