目录

1.上次回顾
<https://blog.csdn.net/lagoon_lala/article/details/83021390#1.%E4%B8%8A%E6%AC%A1%E5%9B%9E%E9%A1%BE>

.call( )
<https://blog.csdn.net/lagoon_lala/article/details/83021390#.call(%20)>

清除浮动
<https://blog.csdn.net/lagoon_lala/article/details/83021390#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8>

静态属性
<https://blog.csdn.net/lagoon_lala/article/details/83021390#%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7>

数组定义
<https://blog.csdn.net/lagoon_lala/article/details/83021390#%E6%95%B0%E7%BB%84%E5%AE%9A%E4%B9%89>

2、本次内容
<https://blog.csdn.net/lagoon_lala/article/details/83021390#2%E3%80%81%E6%9C%AC%E6%AC%A1%E8%AF%BE%E7%A8%8B%E5%86%85%E5%AE%B9>

2.1、搭建开发环境
<https://blog.csdn.net/lagoon_lala/article/details/83021390#2.1%E3%80%81%E6%90%AD%E5%BB%BA%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83>

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
<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
<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 <mailto: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中的代码即可改变里面的内容。