小程序云开发学习笔记（二）

控制台Console除了可以显示小程序的错误信息外，还可以用于输入和调试代码。
JavaScript中单引号和双引号都表示字符串。如果字符串中存在双引号，建议最外层用单引号；如果字符串中存在单引号，建议最外层用双引号。并且如果语句是换行的，后面的分号;也可以不写。
JavaScript可以使用let语句声明变量，变量的值可以是任何数据类型。
如果函数没有提供返回值，控制台会返回 undefined。
数组的__proto__里显示的是方法（函数）prototype['proʊtə.taɪp] 原型
命名规范：JavaScript的项目名、函数名、变量等都应该遵循简洁、语义化的原则。函数名推荐使用驼峰法来命名(camelCase)，比如scrollToTop、pageScrollTo，也就是由小写字母开始，后续每个单词首字母都大写，长得跟骆驼的驼峰似的。

操作数组

分隔符join方法

join方法将数组元素拼接为字符串,以分隔符分割，默认是逗号,分割。

数组push方法

push()方法向数组的末尾添加一个或更多元素，并返回新数组的长度。

移除最后一项pop方法

pop() 从数组末尾移除最后一项，并返回移除的项的值：

技术文档：MDN数组Array

操作对象

给已有对象添加属性和值

直接输入对象名.新增属性名=值即可

删除对象的某个属性

比如我们想删除movie的img属性，可以通过delete 方法来删除

常量

有些数据我们希望是固定的（写死，不会经常改变），这个时候可以使用const声明创建一个值的只读引用。

比如开发小程序的时候，我们会确定小程序的色系、颜色等，使用const声明，以后直接调用这个常量，这样就不用记那么多复杂的参数，以后想全网改样式，直接改const的内容即可。比如：

const defaultStyle = {

color: '#7A7E83',

selectedColor: '#3cc51f',

backgroundColor: '#ffffff',

}

字符串的操作

let lesson="云开发技术训练营";

let enname="CloudBase Camp"

console.log(lesson.length); //返回字符串的长度

console.log(lesson[4]); //返回在指定位置的字符

console.log(lesson.charAt(4)); //返回在指定位置的字符

console.log(lesson.substring(3,6)); //从索引3开始到6（不包括6）

console.log(lesson.substring(4)); //从索引4开始到结束

console.log(enname.toLowerCase()); //把一个字符串全部变为小写：

console.log(enname.toUpperCase()); //把一个字符串全部变为大写：

console.log(enname.indexOf('oud')); //搜索指定字符串出现的位置：

console.log(enname.concat(lesson)); //连接两个字符串，也可以用+号

console.log(lesson.slice(4)); //提取字符串的某个部分，并以新的字符串返回被提取的部分

Math对象

Math是一个内置对象，它具有数学常数和函数的属性和方法，但它不是一个函数对象。

Date对象

Date 对象用于处理日期和时间。时间有年、月、日、星期、小时、分钟、秒、毫秒以及时区的概念，因此Date对象属性和方法也显得比较多。

全局对象wx

wx是小程序的全局对象，用于承载小程序能力相关 API。小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，了解网络状态等。

方法、属性很多，要多查MDN来找现成的处理方法。

点击事件

事件是视图层到逻辑层的通信方式，当我们点击tap、触摸touch、长按longpress小程序绑定了事件的组件时，就会触发事件，执行逻辑层中对应的事件处理函数。

ps：小程序所有组件都支持绑定点击事件（所有组件都有属性bind* / catch*）

页面滚动

wx.pageScrollTo()，将页面滚动到目标位置，支持选择器（选中某一组件）和滚动距离两种方式定位

页面路由

页面路由是一个非常重要的概念，打开新页面、页面返回、Tab页面切换、页面重定向等都是也能路由的不同方式。

页面路由API	Navigator open-type值	含义
redirectTo	redirect	关闭当前页面（无法返回），跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
navigateTo	navigate	保留当前页面（有返回按钮），跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
navigateBack	navigateBack	关闭当前页面，返回上一页面或多级页面。
switchTab	switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	reLaunch	关闭所有页面，打开到应用内的某个页面

响应的数据绑定

只要对逻辑层data里的数据进行修改，视图层也会做相应的更新，我们称之为响应的数据绑定，而这是通过Page的setData()方法来实现的。

this.setData和 this.data（在事件处理函数中使用data中的变量）都用到了一个关键字 this。 this和中文里的“这个的”有类似的指代作用，在方法中， this 指代该方法所属的对象，比如这里的是Page对象， this.data就是指Page函数对象里的data对象。

函数与调用函数

函数的定义和结构

function 函数名(参数 1, 参数 2, 参数 3) {

代码块内要执行的语句

}

ps：JavaScript允许传入任意个参数而不影响调用，因此传入的参数可以比定义的参数多，但是不能少。也就是说实参的数量可以多于形参但是不能少于形参。

比如，我们使用开发者工具在data.js的Page()函数前，添加如下代码：

function greet() {

console.log("你好，欢迎来到云开发训练营");

};

greet(); //调用greet()函数

对象的方法（函数）

在小程序里我们会经常将一个匿名函数赋值给对象的一个属性，而这个属性我们可以称之为对象的方法。

匿名函数

函数声明function在语法上是一个语句，但函数也可以由函数表达式创建，这样的函数没有函数名称（匿名）。

使用开发者工具在data.js的Page()函数前，输入以下代码：

let square = function(number) {

return number * number

};

console.log(square(4))//使用console.log()输出变量square

执行后，可以在控制台看到输出的结果为16。上面这个function函数没有函数名，相当于是把函数的返回值赋值给了变量square。

箭头函数

为什么叫箭头函数（Arrow Function），因为它定义一个函数用的就是一个箭头=>，我们来看两个例子，在data.js的Page()函数前输入以下代码：

const multiply = (x, y) => {

return x * y;

}

const sum= (x, y) => x + y;//连{}和return语句都可以省掉

console.log(multiply(20, 4));

console.log(sum(20, 4));

在控制台我们可以看到箭头函数打印的结果。箭头函数相当于匿名函数，它没有函数名，而且也简化了函数定义。箭头函数可以只包含一个表达式，甚至连{ … }和return都可以省略掉。

JavaScript函数的写法

以下这两种写法都是可以执行的：

1 2	scrollToPosition() { },

1 2	yellowTap:function(){ },

生命周期

链接携带数据

URL链接的特殊字符

/ 分隔目录和子目录
? 分隔实际的URL和参数
& URL中指定的参数间的分隔符
= URL中指定的参数的值
# 同一个页面的位置标识符，类似于页面的书签；

通过URL带参数实现页面数据传递

使用开发者工具，新建一个lifecyle的页面，以及在home页面新建一个二级页面detail（也就是在pages配置项新建一个pages/home/detail/detail，以及注意将lifecycle设置为首页）然后在lifecyle.wxml里输入以下代码，这里的url也通过?、&、=添加了很多数据：

最低0.47元/天解锁文章

小张的快乐码农生活

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
小程序云开发学习笔记（二）

JavaScript入门控制台Console除了可以显示小程序的错误信息外，还可以用于输入和调试代码。 JavaScript中单引号和双引号都表示字符串。如果字符串中存在双引号，建议最外层用单引号；如果字符串中存在单引号，建议最外层用双引号。 JavaScript可以使用let语句声明变量，变量的值可以是任何数据类型。如果函数没有提供返回值，控制台会返回 undefined。数组的...
复制链接

扫一扫