目录
1.上次回顾
类和继承
Set和Map集合
箭头函数
Promise和Generator
上次作业:
要求:
- 每10分钟开奖1次。
- 在未开奖之前,可以选择任意一个数作为自己选择的彩票号码。
- 设置用户在每次开奖阶段只有3次选号机会。
- 到抽奖时间判断用户是否中奖,并提示中奖金额。
笔记:
每秒显示倒计时时间,不能只用setInterval倒计时总时间执行获得结果,还要每秒执行。总毫秒数转换为分钟
把方法放到类中,作为静态方法使用
模块化
考虑扩展和封装
搭建开发环境:React、react-Native开发移动应用程序
Adb的shell命令
安卓sdk的位置的tools目录下打开现有模拟器
Npm 安装支持库
配置好后adb命令能用
React只在一个页面开发,不同页面切换js
需要:
选择时对原选择重置,设置选号次数限制,倒计时没有重置,到抽奖时间判断用户是否中奖,并提示中奖金额。开奖后重置所选号码
操作div的对象无法逆向获得并改变属性:解决-1.设select数组,队尾标记。(计算金额时需要考虑选了几个号码)2.设对象数组保存对象指针。
.call( )
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj
可选。将作为当前对象使用的对象。
arg1, arg2, , argN
可选。将被传递到该方法的参数列表。
c1.showNam.call(c2);
注意,call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2");
清除浮动
clear 属性规定元素的哪一侧不允许其他浮动元素。
Both
静态属性
静态属性指的是 Class 本身的属性, 即Class.propname, 而不是定义在实例对象( this) 上的属性。
ES6 明确规定, Class 内部只有静态方法, 没有静态属性。只能在外部定义
class Foo {}
Foo.prop = 1;
数组定义
var myArray=new Array()
抽奖作业改进代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
<title>ES6实战</title>
<script type="text/javascript">
let sum=0;
let selectNum=-1;//初始化时重置
let ball=new Array(11);
var generator;
// 编写一个操作方法,把倒计时和结果处理封装到同一个操作方法中
// 建议把这个方法放到一个类中,可以作为静态方法来使用。
class Timer {
/*
end:倒计时结束的时间点,用毫秒数
update:当没有到时间节点,但是需要进行页面内容的更新时,调用这个方法。
handler:当到了时间节点,自动调用这个结果处理方法。
step:重新调用自身的时间间隔,单位:毫秒
*/
countDown(end,update,handler,step) {
// 取得当前系统时间,取得毫秒数
let now = new Date().getTime();
// 比较是否到了结束的时间
if (now < end) {
// 还没到时间
// 倒计时的显示,将剩余的时间数传入
update.call(null,(end - now));//null,不传入替换参数
// update(end - now);//null不传入替换参数
// 设置定时重新调用的操作
window.setTimeout(() => {
this.countDown(end,update,handler,step);
},step);
} else {
// 到时间了
// 需要调用结果操作
handler.call();
// handler();
}
}
}
function* checkDraw(count) {
while(true){
if (count > 0) {
count--;
console.log("count "+count);
yield true;
} else {
yield false;
}
}
return 0;
}
function init() {
selectNum=-1;
// 设置结束时间,用系统时间计算
let end = new Date().getTime() + 1000 * 10;
// 调用倒计时的操作
new Timer().countDown(end,changeCountDownSpan,kaijiang,1000);
// 再进行页面所有可选的ball的初始化。
initAllBall();
generator = checkDraw(3);
}
/*显示剩余时间,传入剩余毫秒数*/
function changeCountDownSpan(time) {
// 取得span
let span = document.querySelector("#count_down");
// 计算剩余的分钟数和秒数
let m = parseInt(time / 60 / 1000) + "";
let s = parseInt(time / 1000) % 60 + "" ;
// 设置显示的结果
span.innerHTML = `剩余:${m.padStart(2,"0")}分${s.padStart(2,"0")}秒`;
}
function kaijiang() {
// 生成 0 - 9 的随机数
let result = parseInt(Math.random() * 10);
// 创建一个div
let ball = new Ball(result,{marginTop:"34px"});
// 挂到result_div里
let resultDiv = document.querySelector("#result_div");
resultDiv.innerHTML = "";
ball.addToPage(resultDiv);
getMoney(result);
init();
}
function getMoney(result){
// let selectNum=-1;
// let allBallDiv = document.querySelectorAll("#all_ball>div");
// console.log(allBallDiv);
// for(var i=0;i<allBallDiv.length;i++){
// // console.log(i+":"+allBallDiv[i].selected);
// if(allBallDiv[i].selected){
// selectNum=parseInt(allBallDiv[i].innerHTML);
// break;
// }
// }
console.log("选择号码"+selectNum+" 结果"+result);
if(selectNum==result){
sum++;
}
let money = document.querySelector("#money");
money.innerHTML="中奖金额:"+sum+"元";
}
function initAllBall() {
let allBallDiv = document.querySelector("#all_ball");
allBallDiv.innerHTML="";//清空原小球
for (let i = 0;i < 10 ;i ++) {
// let ball = new Ball(i,{
ball[i] = new Ball(i,{
float:true,
canSelected:true,
marginRight:"10px",
marginBottom:"3px"
});
ball[i].addToPage(allBallDiv);
}
}
class Ball {
constructor (value,options) {//用options接收保存属性的对象
this.div = document.createElement("div");
this.div.className = "ball";
this.selected = false;//
if (options != null) {
if (options.float == true) {
this.div.style.float = "left";
}
if (options.marginTop) {
this.div.style.marginTop = options.marginTop;
}
if (options.marginRight) {
this.div.style.marginRight = options.marginRight;
}
if (options.marginBottom) {
this.div.style.marginBottom = options.marginBottom;
}
// 鼠标放上变色
if (options.canSelected) {
this.div.style.cursor = "pointer";
this.div.addEventListener("mouseover",() => {
if (this.selected == false) {
this.div.style.background = "red";
this.div.style.color = "white";
}
});
this.div.addEventListener("mouseout",() => {
if (this.selected == false) {
this.div.style.background = "white";
this.div.style.color = "red";
}
});
this.div.addEventListener("click",() => {
var times=generator.next().value;
console.log("次数 "+times);
if(times){
this.selected = !this.selected;
if (this.selected) {
this.div.style.background = "red";
this.div.style.color = "white";
if(selectNum>=0){
console.log(selectNum+"取消选择 "+ball[selectNum].selected);
ball[selectNum].selected=false;
ball[selectNum].unselect(ball[selectNum].div);
}
selectNum=value;
console.log(selectNum);
} else {
this.div.style.background = "white";
this.div.style.color = "red";
}
}
});
}
}
this.div.innerHTML = value;
}
unselect(div){
div.style.background = "white";
div.style.color = "red";
}
addToPage(el) {
el.appendChild(this.div);
}
}
</script>
<style>
#result_div {
border:1px solid red ;
width:500px;
height:100px;
color:red ;
text-align: center;
line-height: 100px;
}
.ball {
border:1px solid red;
width:30px;
height: 30px;
border-radius: 15px;
color: red;
text-align: center;
line-height: 30px;
margin-left: auto;
margin-right: auto;
/*margin-bottom: 3px;
margin: auto; */
}
#money {
clear:both;
/* margin-top: 30px; */
}
</style>
</head>
<body onload="init();">
<span id="count_down"></span> <br/>
本次中奖号码:
<div id="result_div">尚未开奖</div>
<hr/>
<div id="all_ball"> </div>
<div id="money">中奖金额:0元</div>
</body>
</html>
2、本次内容
2.1、搭建开发环境
下面就需要开始使用React和React-Native开发Android的移动应用程序。
需要准备几个软件:
- Android Studio(3.0以上版本)
- Nodejs
- 模拟器(自带的)
首先启动Android模拟器,可以使用命令行方式,也可以使用Android Studio的软件方式启动。
命令行启动,需要先在命令行中进入到Android SDK的tools目录下,然后执行emulator -list-avds列出现有的模拟器,然后可以通过 emulator @模拟器名称 来启动模拟器。
启动后,通过npm命令,安装react-native-cli支持库。
npm install -g react-native-cli
(在C:\Users\LENOVO\AppData\Roaming\npm\react-native -> C:\Users\LENOVO\AppData\Roaming\npm\node_modules\react-native-cli\index.js)
安装好后,应该可以在命令行中运行react-native命令。
然后在你想创建项目的文件夹下,运行 react-native init 项目名 来创建一个项目。
(mac记得加sudo)
安装配置好后,项目环境就已经建立了,下面就是需要编译项目并自动发布到手机上。
这里需要做一些准备:
- 配置ANDROID_HOME的环境变量(位置就是Android的SDK的根目录)
- 配置PATH,在里面多加入一个Android的adb命令的位置。
如果是mac或Linux系统,需要执行以下操作
修改建立好的项目的权限(简介里打开),设置为所有人都可以读写 |
在项目的android目录下建立一个local.properties文件 在文件中加入:sdk.dir=/Users/kkb/Library/Android/sdk |
修改.bashrc文件,在PATH环境变量中加入adb的位置 加入后,使用 source ~/.bashrc 命令来应用这个环境变量。 |
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; |
测试再次运行时,会发现出现一些错误提示,这是因为React本身的bug造成的。
需要我们单独启动包管理器(将项目打包上传到模拟器的那个程序)
react-native start --reset-cache
然后再打开另一个命令行窗口,执行启动命令(react-native run-android)
adb server version (36) doesn't match this client (39); killing...
* daemon started successfully
Starting the app (E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb shell am start -n com.rndemo/com.rndemo.MainActivity...
error: no devices/emulators found
解决:http://www.cnblogs.com/focus-on-js/p/9198726.html
模拟器的adb不匹配
Running E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb -s 127.0.0.1:62001 reverse tcp:8081 tcp:8081
error: closed
Could not run adb reverse: Command failed: E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb -s 127.0.0.1:62001 reverse tcp:8081 tcp:8081
Starting the app on 127.0.0.1:62001 (E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb -s 127.0.0.1:62001 shell am start -n com.rndemo/com.rndemo.MainActivity)...
Starting: Intent { cmp=com.rndemo/.MainActivity }
https://blog.csdn.net/zys871228/article/details/50732604
用真机就没有问题
由于react-native开发要使用react的各种语法,为了方便学习和使用React,这里再简单配置一个直接编写 react的环境。
在命令行直接通过npm安装一个create-react-app 的工具
npm install -g create-react-app
地址
C:\Users\LENOVO\AppData\Roaming\npm\create-react-app -> C:\Users\LENOVO\AppData\Roaming\npm\node_modules\create-react-app\index.js
安装后,可以用这个工具建立一个项目
create-react-app 项目名
即可。
项目名,必须为小写字母,不许出现大写。
启动项目只需要进入到项目中,通过npm start即可启动。
无法启动,Babel-loader版本?npm ls babel-loader
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.4"
However, a different version of babel-loader was detected higher up in the tree:
rndemo1@0.1.0 E:\studyMaterial\work\web\react\rndemo1
`-- react-scripts@2.0.4(E:\studyMaterial\work\web\react\rndemo1\node_modules\.bin)
+-- babel-loader@8.0.4
`-- babel-preset-react-app@5.0.3
`-- babel-loader@8.0.4 deduped
解决:在无干扰的文件夹新建项目
然后正常按照 ES6编写项目代码即可。
打开项目后,修改App.js中的代码即可改变里面的内容。