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

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

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


在微信开发者工具控制台中会看到以下效果


image.png


2、let、const作用域


(1)let用来声明变量,允许创建块级作用域,代替了var


test () {
  console.log("测试方法运行成功")
  //let声明变量
  let a = 2
  {
    let a = 3
    console.log("第一个a:",a)
  }
  console.log("第二个a:",a)
}


控制台返回结果:


image.png


(2)const用来声明常量,不可以被修改


test () {
  console.log("测试方法运行成功")
  //const声明常量
  const b = 3
  b = 2  
}


保存代码之后,回到微信开发者工具,效果没有更新。这就可能是报错了,这时我们回到终端,看到返回的结果,常量被const声明了之后,就不可以修改了。


image.png


3、字符串


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


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

image.png

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


控制台返回结果


image.png


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导入代码


//参考代码,无需粘贴
//<script>
  //需要添加的代码
  import host from '@/config'
  //参考代码,无需粘贴
  //export default {


(3)在test方法中引用config.js文件中的常量


test () {
  console.log("测试方法运行成功")
  console.log("打印出config.js文件中定义的host变量:",host)
}


7、Promise异步执行


(1)Promise介绍


一个 Promise 是一个等待被异步执行的对象。当它执行成功,状态会变成resolved;执行失败状态会变成rejected


resolved状态说明是正常执行返回的信息,rejected状态相当于抛出错误信息,会被try…catch…捕捉到


什么是异步执行?同步执行?


异步执行,就是执行某项任务时,可以在它完成之前就执行下一个任务


同步执行,就是执行某项任务时,必须等待它完成才能执行下一个任务


(2)代码演示


添加一个promiseTest方法,里面包含Promise对象。然后在test方法中调用promiseTest方法,查看返回的结果


test () {
  console.log("测试方法运行成功")
  //调用promiseTest方法
  let promise_result = this.promiseTest(3)
  console.log(promise_result)
},
//注意两个方法之间要用逗号间隔
promiseTest (num) {
  var result = new Promise(function(resolve, reject) {  
    if (num > 2) {
      console.log(`num的值为${num}`)
      resolve("我执行成功了,状态变成了resolved");  
    } else {
      console.log(`num的值为${num}`)
      reject("我执行失败了,状态变成了rejected");  
    }
  });
  return result
}


在test方法中调用promiseTest方法时,参数为3,满足>2的条件,会返回resolve执行成功的结果


image.png


将参数改为1,不满足>2的条件,会返回reject执行失败的结果


image.png


8、async、await异步等待


(1)async、await介绍


async就是异步的意思,会作为一个关键字放到函数前面,用来表示函数是一个异步函数


await是等待的意思,后面常放一个promise对象。await关键字只可以放到async函数里面


(2)代码演示


在test方法前面加上async表明这是一个异步函数,创建setTime方法,里面定义一个延时器,会延时2秒执行程序,方便我们查看效果


async test () {
  console.log("测试方法运行成功")
  let result = await this.setTime(1);
  console.log("await后面的方法执行完成后,才能执行下面的语句");
  console.log(result);
},
setTime(num) {
  return new Promise(function(resolve, reject) {
    setTimeout(function(){
      resolve("第" + num + "个延时器");
    },2000)
  })
}


打开控制台,2s 之后,输出结果如下:


image.png


(3)代码执行过程


下面我们看看代码的执行过程:


执行test异步函数,遇到了await, await 表示等一下,要等后面的setTime(1)方法执行完才能继续执行下面的代码,现在代码暂停在await这里;


开始执行setTime(1)方法,setTime(1)方法中有一个setTimeout延时器,等待2000毫秒(2秒)之后,执行resolve拿到了返回值----「第1个延时器」;


将这个返回值赋值给result,await这里的暂停结束,代码继续向下执行console.log语句。



目录
相关文章
|
20天前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
701 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
13天前
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
74 11
|
5月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1213 7
|
5月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1044 1
|
1月前
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
2月前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
348 12
|
4月前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
5月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
170 2
|
5月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
903 0
|
5月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念

热门文章

最新文章