1.上次回顾

类和继承

Set和Map集合

箭头函数

Promise和Generator

抽奖：

<!DOCTYPE html>

<html>

<head>

// 编写一个操作方法，把倒计时和结果处理封装到同一个操作方法中

// 建议把这个方法放到一个类中，可以作为静态方法来使用。

class Timer {

end：倒计时结束的时间点，用毫秒数

update：当没有到时间节点，但是需要进行页面内容的更新时，调用这个方法。

handler：当到了时间节点，自动调用这个结果处理方法。

step：时间间隔，单位：毫秒

countDown(end,update,handler,step) {

// 取得当前系统时间，取得毫秒数

let now = new Date().getTime();

// 比较是否到了结束的时间

if (now < end) {

// 还没到时间

// 倒计时的显示，将剩余的时间数传入

update.call(null,(end - now));

// 设置定时重新调用的操作

window.setTimeout(() => {

this.countDown(end,update,handler,step);

},step);

} else {

// 到时间了

// 需要调用结果操作

handler.call();

}

function init() {

// 设置结束时间

let end = new Date().getTime() + 1000 * 5;

// 调用倒计时的操作

new Timer().countDown(end,changeCountDownSpan,kaijiang,1000);

// 再进行页面所有可选的ball的初始化。

initAllBall();

}

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);

}

function initAllBall() {

let allBallDiv = document.querySelector("#all_ball");

for (let i = 0;i < 10 ;i ++) {

let ball = new Ball(i,{

float:true,

canSelected:true,

marginRight:"10px"

});

ball.addToPage(allBallDiv);

}

class Ball {

constructor (value,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.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",() => {

this.selected = !this.selected;

if (this.selected) {

this.div.style.background = "red";

this.div.style.color = "white";

} else {

this.div.style.background = "white";

this.div.style.color = "red";

}

});

}

this.div.innerHTML = value;

}

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;

}

</style>

</head>

本次中奖号码：

<hr/>

</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:

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

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

+-- [email protected]

`-- [email protected]

`-- [email protected] deduped

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

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

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

前端笔记3.1 react环境搭建

1.上次回顾

2、本次内容

2.1、搭建开发环境

猜你喜欢