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软件