前端笔记3.1 实验代码改进与react环境搭建
目录
1.上次回顾
.call( )
清除浮动
静态属性
数组定义
2、本次内容
2.1、搭建开发环境
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()
抽奖作业改进代码：
ES6实战
本次中奖号码：
尚未开奖
中奖金额：0元
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:
[email protected] E:\studyMaterial\work\web\react\rndemo1
`-- [email protected]（E:\studyMaterial\work\web\react\rndemo1\node_modules\.bin）
`-- [email protected] deduped
解决：在无干扰的文件夹新建项目
然后正常按照 ES6编写项目代码即可。
打开项目后，修改App.js中的代码即可改变里面的内容。