2.4【微信小程序全栈开发课程】ES6知识点详解--创建config.js配置文件

ES6是JavaScript的一个版本,因为我们前面用到的vue默认使用ES6语法开发,所以我们在这一节补充ES6的知识点,先了解我们项目经常用到的ES6的一些语法。

ES6文档参考
https://www.runoob.com/w3cnote/es6-concise-tutorial.html

1、创建测试方法

(1)编辑index.vue文件

为了方便我们理解,直接在src/pages/index/index.vue文件中编辑,这样可以在微信开发者工具控制台中看到效果。在script部分methods中添加test方法

methods: {
  addMark (add) {
    this.mark = this.mark + add
    console.log("mark为:",this.mark)  
  },
  //新添加的test方法,注意上一行的逗号“,”不要落下哦~
  test () {
    console.log("测试方法运行成功")
  }
},

//mounted是vue生命周期方法,在页面渲染完成后执行
mounted () {
  this.test()
}
(2)代码解析

1)在methods中,每个方法之间需要有逗号间隔

2)mounted是vue生命周期方法,在页面渲染完成后执行,我们在mounted中执行test方法,这样每次修改test方法,都会自动执行,我们就会在微信开发者工具控制台中看到效果。

(3)测试

保存代码后,在项目目录中运行npm run dev启动项目

~/WeChatProjects/truth_hold$ npm run dev

在微信开发者工具控制台中会看到以下效果
2.4【微信小程序全栈开发课程】ES6知识点详解--创建config.js配置文件_第1张图片

2、let、const作用域

(1)let用来声明变量,允许创建块级作用域,代替了var
test () {
  console.log("测试方法运行成功")
  //let声明变量
  let a = 2
  {
    let a = 3
    console.log("第一个a:",a)
  }
  console.log("第二个a:",a)
}

控制台返回结果:

(2)const用来声明常量,不可以被修改
test () {
  console.log("测试方法运行成功")
  //const声明常量
  const b = 3
  b = 2  
}

保存代码之后,回到微信开发者工具,效果没有更新。这就可能是报错了,这时我们回到终端,看到返回的结果,常量被const声明了之后,就不可以修改了。
2.4【微信小程序全栈开发课程】ES6知识点详解--创建config.js配置文件_第2张图片

3、字符串

拼接字符串,可以直接在${ }里面写变量,用反引号 ` 包裹字符串。这样可以代替用加号拼接字符串

test () {
  console.log("测试方法运行成功")
  //字符串拼接
  let name = "maoning"
  console.log("第一种拼接方法:my name is " + name + "")
  console.log(`第二种拼接方法:my name is ${name}`)
}

4、箭头函数

就是函数的一种简写形式

//函数普通形式
var add = function(a,b) {
  return a+b;
};

//箭头函数简写形式
var add = (a,b) => {
  return a+b;
};

5、数组批量赋值

test () {
  console.log("测试方法运行成功")
  //数组批量赋值
  let arr = [1,2]
  let [a,b] = arr
  console.log("a的值为:",a)
  console.log("b的值为:",b)
}

控制台返回结果:

6、模块化

(1)创建src/config.js配置文件

我们在src/config.js文件里面定义一个常量,通过export的意思是向外暴露接口,然后在index.vue文件中引用这个常量

//定义一个常量
const host = '[http://localhost:5757](http://localhost:5757)'

//通过export的意思是向外暴露接口
export default config
(2)在index.vue文件中导入config.js文件

在script和export default {这两行之间,添加import导入代码

//参考代码,无需粘贴
//
                    
                    

你可能感兴趣的:(微信小程序全栈开发课程)