最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Page({
/**
- 页面的初始数据
*/
data: {
code:1
},
})
wx:if将判断=号后面的值是否为true，只有值为true的时候才会渲染对应的部分，注意的是wx:if是真的渲染不渲染，假如为false，那么该部分是不会被渲染进DOM树的，如果要使用的是类似于v-show这种渲染进dom树，但是不显示，则使用指令：hidden
{{message}}1
此时的view不管hidden后面的是true还是false，都会将该部分渲染进DOM中，只是true的时候是显示的，false的时候是隐藏的；
如果在项目中的某一部分是需要经常的切换显示隐藏，那么使用hidden比较好，如果不是太频繁，那么使用wx:if比较好；
模版，template，可以理解成一段可重复使用的代码片段，这些代码片段只需要定义一次，就可以不断的重复使用，比如：
//index.wxml
FirstName: {{firstName}}, LastName: {{lastName}}
通过template定义了一个模版，并且给这个模版命名了一个名字staffName，使用的使用只需要通过名字就可以指定需要使用哪个模版了
//index.wxml
//index.js
Page({
data: {
person:{
name:“oliver”,
age:18
}
}
})
这里模版被使用了3次，通过is属性，指定要使用模版的名字，通过data属性注入数据，当然，模版的名字也是支持双花括号语法的，比如
FirstName: {{firstName}}, LastName: {{lastName}}
通常，如果项目中有好些相同的布局，那么就可以考虑抽离出来，单独存放，然后项目中往往是组合使用，比如使用的时候通过条件渲染模版，当获取到的状态是1的时候渲染的是模版1，如果状态是2的时候渲染的是模版2等等；
这里又出现了一个新问题，如果模版在页面a中，那么在这么在页面b中也使用这个模版？答案是通过import或include引入；
引用
import
//在demo1.wxml中定义了一个template
//当然demo1.wxml中肯定还有很多其他代码，但是模版和其他代码不冲突
{{age}}-{{name}}
//在demo2.wxml引入,src后面跟随着的是需要引入的文件的路径
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template，举个例子：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template；
**
include
和import不同，import会引入目标文件中的template，而include则是会引入 、外的所有代码，也就是说，会将整个页面都拷贝过来了；
比如现在所有的页面都需要使用相同的header和相同的footer，那么就可以将header和footer单独写一个文件，其他所有页面都使用include引入
body
header
footer
===============================================================
WXS是小程序的一套脚本语言，它的语法和JavaScript不完全一致，WXS代码可以编写在wxml的标签中，也可以写在以.wxs为后缀的文件内；
为什么要有WXS，作用上看它和JavaScript几乎一致，官网上写到：由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。这个速度差异其实很明显，尤其是项目比较大的时候；
每个.wxs文件和标签都是一个独立的模块；都有其自己独立的作用域，每一个模块内的变量与函数，默认都是私有的，这就代表如果要被其他模块使用，必须通过module.exports实现，看个例子
var msg = “hello world”;
module.exports.message = msg;
{{m1.message}}
这个是一个页面渲染的例子，基本上就是如果要使用wxs内的变量，必须通过module.exports导出，否则就无法识别，再看一个数据处理的例子：
// index.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
//index.wxml
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
// 调用 wxs 里面的 getMax 函数，参数为 index.js 里面的 array
{{m1.getMax(array)}}
同样，如果是新建了一个wxs文件
var name = “我的名字是Oliver”;
var bar = function(d){
return d;
}
module.exports = {
name:name,
func:bar
}
那么在wxml文件中需要先指明路径，比如：
//wxml文件
//通过src属性引入wxs文件，然后通过module命名模块
{{m2.name}}
{{m2.func(“大家好”)}}
另外，如果现在有两个wxs文件，分别为a.wxs和b.wxs，如果要在b.wxs中引用a.wxs，那么可以通过require引入，比如：
//a.wxs
var foo = “‘hello world’ from tools.wxs”;
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = “some msg”;
//b.wxs
var tools = require(“./a.wxs”);
console.log(tools.FOO);
console.log(tools.bar(“logic.wxs”));
console.log(tools.msg);
注意的是，require后面的路径必须是相对路径，另外如果多个wxs文件的module重名了，那么写在后面的将覆盖前面的；
==============================================================
小程序的事件系统和JS的事件系统的用法基本是一致的，区别在于事件名不一样，因此具体的事件相关请看参考文档 WXML - 事件；
先看个简单的例子：
Click me!
//错误示例
<view bindtap=“tapName(“oliver”)”> Click me!
这种传递参数是错误的，微信小程序不支持这种方式传递参数
这里view标签上通过bindtap绑定了一个tapName事件，作用是当用户点击到当前这个view时就会触发tapName函数，而tapName函数则写在对应的js文件中
Page({
/**
- 页面的初始数据
*/
data: {
message: “你好”,
id:“adb”,
person:{
name:“oliver”,
age:18
}
},
tapName: function(event) {
console.log(event)
}
})
同样，小程序中的事件分为冒泡事件和非冒泡事件，冒泡事件简单的说，就是组件上的事件被触发以后，会向其父节点传递，举个例子
Click me!
点击了button上的bindtap触发click函数之后，其父元素伤的bindtap同样会被触发，这就是冒泡，小程序中的冒泡事件大致有以下：
看到这里可能有疑惑，为什么事件类型中没有bind这个词，上面例子中明明是用的bindtap，表里面为什么仅仅是tap?实际上bind是一个修饰词，可以理解成是类似于bue中的v-on，v-bind这种，在小程序中bind代表的是普通事件绑定，换个可以更好理解的写法，bind:，具体示例：
Click me!
通过bind修饰的事件，就是普通事件，普通事件不会对事件进行处理，但处理事件的函数名必须是字符串，因此，传参，如下例是不行的，因为小程序会将后面整体视作是一个字符串
Click here!
通过catch修饰事件，通过catch修饰的事件，会阻止其冒泡行为
Click here!
通过mut-bind修饰的事件，代表互斥事件，一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发；
outer view
middle view
inner view
上例中，函数handleTap3被触发后，事件冒泡到父节点，之后handleTap2会被触发，再之后事件继续冒泡到父节点，但是此时的outer上的绑定也是互斥事件，因此handleTap1将不会被触发；
捕获阶段在冒泡阶段之前，采用的修饰是capture-bind和capture-catch，
capture-bind：代表当组件处于捕获阶段时监听事件并触发相关函数，之后按正常的捕获和冒泡流程走；
capture-catch：和capture-bind不同，capture-catch在触发事件后，会取消之后的捕获和冒泡流程，相当于直接终止了之后的流程；
outer view
inner view
这段代码中，如果是capture-bind，那么所有的事件都会被触发，并且触发的流程是：handleTap2、handleTap4、handleTap3、handleTap1；
但如果将capture-bind替换成capture-catch，在触发第一个touchstart后，它就会终止之后的所有流程，因此，只会触发一个handleTap2函数；
==============================================================
理解起来和vue的生命周期有点类似，简单的说，就是在小程序在运行的过程中，会经历过不同的阶段，在不同的阶段会抛出一些函数，称为钩子函数，这些钩子函数中的代码会在这个阶段中被运行，因此在不同的阶段可以做一些特定的处理，比如获取服务器信息，比如初始化数据等等，而这些钩子函数统称为生命周期，因为运行这些钩子函数的阶段囊括了从小程序的创建到销毁；
小程序的生命周期分为两种，一种是小程序本体的，另外一种是各个页面的
小程序的生命周期是写在app.js中的
//app.js
App({
//监听小程序初始化
onLaunch: function () {},
//监听小程序启动或切前台，小程序在后台切到前台的时候会调用；
onShow: function(){},
//监听小程序切后台，小程序从前台切到后台的时候会调用；
onHide: function(){},
/*
-
发生错误是调用函数，在这个函数内，通常是用在监听线上小程序有没有发生错误的，
-
当发生错误时，触发这个函数，在这个函数内可以将错误提交到后台；
*/
onError: function(){},
/*
-
页面不存在时调用函数，比如，有时候印刷了一些小程序二维码做推广，但是因为一些特殊原因，
-
页面被删除了，那么此时就可以通过这个函数监听错误，提交后台，然后做一些兼容；
*/
onPageNotFound: function(){},
globalData: {
userInfo: null
}
})
这个globalData，这个属性是定义的一些全局属性，比如示例中的userInfo是存储的用户信息，比如在打开小程序后，获取当前用户的信息，赋值给userInfo，那么在之后的页面显示中都可以获取到当前的用户信息了；
//index.js等其他页面
var app = getApp()
Page({
/**
- 页面的初始数据
*/
data: {
message: “你好”,
id:“adb”,
person:{
name:“oliver”,
age:18
}
},
//打印
tapName: function(event) {
console.log(app.globalData.userInfo)
}
})
小程序的每个页面都有自己的生命周期，它的接收一个对象作为参数，其上有页面的初始化数据，生命周期回调，事件处理函数
Page({
/**
- 页面的初始数据
*/
data: {},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {},
/**
- 生命周期函数–监听页面初次渲染完成，第一次打开页面完成之后触发
*/
onReady: function () {},
/**
-
生命周期函数–监听页面显示
-
如果小程序主体和页面都有onShow事件，那么会先触发小程序的，再触发页面的
*/
onShow: function () {},
/**
-
生命周期函数–监听页面隐藏，
-
如果小程序主体和页面都有onHide事件，那么会先触发页面的，再触发小程序的
*/
onHide: function () {},
/**
- 生命周期函数–监听页面卸载，比如打开页面后路由地址被重定向了，那么此时会触发这个函数
*/
onUnload: function () {},
/**
-
页面相关事件处理函数–监听用户下拉动作，当用户在顶部有下拉操作的时候，触发该函数
-
比如下拉刷新操作
*/
onPullDownRefresh: function () {},
/**
-
页面上拉触底事件的处理函数，当页面上的数据够多，有滚动条时，如果此时滚动条拉到底部
-
会触发该函数，默认是距离底部50px时触发
*/
onReachBottom: function () {},
/**
- 用户点击右上角分享，点击的是右上角的三个点按钮
*/
onShareAppMessage: function () {}
/**
- 页面滚动触发事件的处理函数
*/
onPageScroll: function () {}
/**
-
页面尺寸改变时触发
-
比如横屏竖屏切换的时候触发
*/
onResize: function () {}
/**
-
当前是tab页时，点击tab触发
-
比如实现点击tab栏的时候触发刷新页面操作
*/
onTabItemTap: function () {}
})
具体的生命周期函数运行的顺序如下：
前台/后台状态
小程序启动后，界面会被展示给用户，此时的小程序处于前台状态；
当用户点击右上角胶囊按钮关闭小程序，或者按了Home键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，此时的小程序还可以运行一段时间；
当再次打开小程序时，小程序又会从后台进入前台，但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。
小程序启动
小程序启动可以分为两种情况，一种是冷启动，一种是热启动。
-
冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
-
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
小程序销毁时机
通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁。具体而言包括以下几种情形
- 当小程序进入后台，可以维持一小段时间的运行状态，如果这段时间内都未进入前台，小程序会被销毁。
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
olor_FFFFFF,t_70)
前台/后台状态
小程序启动后，界面会被展示给用户，此时的小程序处于前台状态；
当用户点击右上角胶囊按钮关闭小程序，或者按了Home键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，此时的小程序还可以运行一段时间；
当再次打开小程序时，小程序又会从后台进入前台，但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。
小程序启动
小程序启动可以分为两种情况，一种是冷启动，一种是热启动。
-
冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
-
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
小程序销毁时机
通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁。具体而言包括以下几种情形
- 当小程序进入后台，可以维持一小段时间的运行状态，如果这段时间内都未进入前台，小程序会被销毁。
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-cZBhD3Vz-1715516847131)]
9158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
