前端笔记3.1 实验代码改进与react环境搭建 - 好文

目录

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:

[email protected] E:\studyMaterial\work\web\react\rndemo1

`-- [email protected] <mailto:[email protected]>
（E:\studyMaterial\work\web\react\rndemo1\node_modules\.bin）

+-- [email protected]

`-- [email protected]

`-- [email protected] deduped

解决：在无干扰的文件夹新建项目

然后正常按照 ES6编写项目代码即可。

打开项目后，修改App.js中的代码即可改变里面的内容。

热门工具换一换