/* 头像图片 */
.about_img{
width: 375rpx;
height: 375rpx;
border-radius: 50%;
}
/* 电影周周看 */
#about_zzk{
font-weight: bold;
font-size: 60rpx;
}
vh 说明：
相对于视口的高度。视口被均分为100单位的vh
示例代码：
h1 {
font-size: 8vh;
}
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
2.7 新增“每周推荐”WEEKLY页并快速调试
每一个用户可能访问到的页面，都需要在前局配置中来登记他的访问路径。
weekly.js：调用page配置函数，来给页面注册一个空对象 Page({})
weekly.json：使用 { } 创建空的json对象配置文本
weekly.wxml：
weekly.wxss：
.container{
background-color: #eee;
height: 100vh;
display: flex;/变为flex container 元素从左往右/
flex-direction: column;/改为垂直从上往下/
justify-content: space-around;/在主轴方向上的聚集和分布方式/
align-items: center;/居中/
}
2.8 使用NAVIGATOR组件-从ABOUT页跳转到WEEKLY页
display: black 块状元素
display: inline
open-type="redirect"不可返回
open-type=“navigate” 默认可返回
open-type=“redirect” 不可返回
about.wxml
about.wxss
.container{
background-color: #eee;
height: 100vh;
display: flex;/变为flex container 元素从左往右/
flex-direction: column;/改为垂直从上往下/
justify-content: space-around;/在主轴方向上的聚集和分布方式/
align-items: center;/居中/
}
/* 头像图片 */
.about_img{
width: 375rpx;
height: 375rpx;
border-radius: 50%;
}
/* 电影周周看 */
#about_zzk{
font-weight: bold;
font-size: 60rpx;
}
/* 默认蓝色放在前 */
.nav-default{
color: blue;
}
/* 点击后的红色放在后面 */
.nav-hover{
color: red;
}
2.9 配置TABBAR-对若干一级页面的入口链接
元素点击无效，设置
open-type=“switchTab”跳转并改变tabBar图标跳转
在app.json中使用tabBar属性
{
“pages”: [
“pages/about/about”,
“pages/weekly/weekly”
],
“tabBar”: {
“list”: [
{
“pagePath”: “pages/weekly/weekly”,
“text”: “每周推荐”,
“iconPath”: “pages/images/icons/weekly.png”,
“selectedIconPath”: “pages/images/icons/weekly-selected.png”
},
{
“pagePath”: “pages/about/about”,
“text”: “关于”,
“iconPath”: “pages/images/icons/about.png”,
“selectedIconPath”: “pages/images/icons/about-selected.png”
}
],
“color”: “#000000”,
“selectedColor”: “#00f”
}
}
“color”: “#000000”,
“selectedColor”: “#00f”
2.10 配置全局的导航栏样式
顶部导航栏样式默认使用黑底白字
代码直接复制的方法必然会带来代码升级时候的问题
在app.json中使用Windows属性
“window”: {
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “电影周周看”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”,
“enablePullDownRefresh”: false
}
第三讲 电影周周看v2
===========
3.1 数据绑定
一般方法通过ajax调用server的数据
weekly.js 里面添加数据变量：
Page({
data: {
thisWeekMoview: [
{
name: “教父”,
comment: “最精彩的剧本，最真实的黑帮电影。”,
imagePath: “/images/jf.jpg”
}
],
count: 123
}
})
weekly.wxml页面
3.2 小程序运行环境与基本架构 VIDEO
在小程序调试窗口里面的 AppData，可以对页面里的数据进行调试。我们可以看到，小程序给页面 weekly 添加了一个变量 webviewId 等于10。这个是做什么用的呢？
这就需要了解小程序的运行环境和运行架构。
运行环境： 每个小程序都是运行在它所在的微信客户端上的，通过微信客户端给它提供运行环境，小程序可以直接获取微信客户端的原生体验和原生能力。
视力层和逻辑层： 小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。
所以，刚才我们在 AppData 中可以看到，about页和weekly页都内置了一个 webviewId 的内部状态变量，记录它们各自是在几号 webview 进程中进行渲染的。
3.3 条件渲染
条件渲染指的是：条件成立时才渲染生成。
拿上面的例子来看，我们给推荐页面的电影添加一个这段，表明这个电影是不是强烈推荐的。
isHighlyRecommended: true
我们现在要做的一个改动就是，希望在视图中，对于真正想强烈推荐的电影，我们要显示一个强烈推荐的红色标记。
首先我们把强烈推荐的元素定义出来，添加到 weekly.wxml 中：
这时可以看到，在视图中，出现了红色的 “强烈推荐” 的字样。
但是这个是肯定会生成的，但我们需要的效果是，如果电影是要推荐的，就生成；不是推荐的，就不生成。
所以，我们就可能 通过 wx:if 做条件判断来实现。代码可以修改为：
这个意思是，强烈推荐这个 text 元素，渲梁生成的条件是：绑定到了 thisWeekMoview 的 isHighlyRecommended 属性上。当这个属性是 true 的情况下，这个 text 元素会被生成，如果这个属性是 false 的情况下，这个 text 元素就不会生成。
同时，我们也可以使用 hidden 属性来实现这个效果。 代码如下：
这里注意是求反的操作。当用户没有推荐的时候，hidden是true；用户强烈推荐的时候，hidden是false，所以是求反的操作。
此时，我们在 AppData 里面进行查看，可以看到，这个 text 元素无论 hidden 是取 true 还是 false，都始终是生成的。因此，我们可以知道，使用 hidden 属性时，这个元素总是要被渲染生成的，hidden 只是控制了其可见性而已。
那么，在实际应用中，我们该如何选择呢？
从上面的例子我们可以看到，当wx:if的条件值切换时，框架有一个局部渲染的过程，他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的，如果初始渲染条件为false,框架什么也不会做，只有在条件第一次变为真的时候才会开始渲染。因此，对于可见性需要频繁切换的时候，不建议使用条件渲染，因为它的开销会比较大，这个时候就使用 hidden
对于我们的这个例子，我们要如何选择呢？ 当电影列表从服务器获得以后，用户就不会对是否推荐的信息进行修改。意思就是，强烈推荐这个元素的渲染条件，用户是不会去发生切换的。所以这个时候，我们应该使用 条件渲染来做 这件事情。这个时候如果使用 hidden，他的初始化开销会增大。博主没有去推荐这个电影，它也会在初始生成的时候，去生成这么一个元素。
3.4 列表渲染
原来的weekly.wxss
.container{
background-color: #eee;
height: 100vh;
display: flex;/变为flex container 元素从左往右/
flex-direction: column;/改为垂直从上往下/
justify-content: space-around;/在主轴方向上的聚集和分布方式/
align-items: center;/居中/
}
原来的weekly.wxml
现在的：
weekly.wxss
.movie{
display: flex;
}
.movie-details{
display: flex;
flex-direction: column;
width: 550rpx;
}
.movie-image{
width: 200rpx;
height: 200rpx;
}
weekly.wxml
weekly.js
Page({
data: {
WeeklyMovieList:[
{
name: “泰坦尼克号”,
comment: “失去的才是永恒的”,
imagePath: “/images/titanic.jpg”,
isHighlyRecommended: false,
},
{
name: “这个杀手不太冷”,
comment: “小萝莉与怪蜀黍纯真灿烂的爱情故事”,
imagePath: “/images/leon.jpg”,
isHighlyRecommended: false,
},
{
name: “教父”,
comment: “最精彩的剧本，最真实的黑帮电影。”,
imagePath: “/images/jf.jpg”,
isHighlyRecommended: true,
}
]
}
})
3.5 使用SWIPER组件
weiper元素默认：150像素高，image元素默认：240元素高
sweiper元素设置的宽高weiper-item百分百比例显示
indicator-dots=“ture” 属性显示面板指示
3.6 页面的生命周期函数
需求1：
对于 swiper ，要设置默认显示的那页幻灯片，可以添加一个 current 属性，这个属性默认值是0。也就是说，首张幻灯片页是默认显示的。现在要做的是，因为用户每次最想看到的是，本周推荐的页。所以，要把 swiper 默认设置成最后一页幻灯片。
最后一页的序号是 数组长度减1。解决方案是，把 current 属性这样绑定：
current = ‘{{weeklyMovieList.length-1}}’
需求2：
-
进而会引出 onLoad 生命周期函数，可以查看如何对元素进行初始化；
-
介绍 onShow, onReady, onHide, onUnload 生命周期函数。
bindtap绑定事件处理函数f0
onLoad: function (options) {
this.setData({
currentIndex: this.data.weeklyMovieList.length - 1
})
},
onload，事件会在页面或图像加载完成后立即发生。
onShow, 当页面每一次显示，都要调一次，每一次页面从隐藏到可见，都会调用
onReady, 等页面渲染完成，全部好了，已经可以交互的时候被调用一次
onHide, 当页面每次隐藏的时候调用一次
onUnload，当页面被关闭或卸载的时候调用
position：relative；相对定位
position：absolute；相对定位
3.7 更新数据
在这里，展示了一种数据更新的方式，就是直接像下面函数的形式来进行更新：
f0: function(event){
this.data.count = this.data.count + 1
}
反复点击按钮，会发现页面显示并没有更新。但是进入 AppData 查看，可以发现 count 的值已经更新到了 9。
所以，这种通过对变量直接赋值写入的方式，不能让框架自动更新，而且，非常容易引起数据不一致问题。所以，对小程序中的变量进行更新，不能采取直接赋值的方式，而必须采用小程序提供的 this.setData 方法。
发现实际的写法为：
f0: function (event) {
this.setData({
currentIndex: this.data.weeklyMovieList.length - 1
})
}
3.8 事件机制
前面的应用里，我们已经使用了事件函数。这一节我们要讲解如下事项：
-
事件绑定
-
冒泡事件与非冒泡事项
-
bind 绑定 VS catch 绑定
-
事件对象简介
-
对于点击的操作有两种处理方式：
+1
+1
这两种有什么区别呢？首先我们要了解冒泡事件和非冒泡事件。小程序中事件分为冒泡事件和非冒泡事件：
-
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
-
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
-
在小程序事件系统文档中，给出了哪些是冒泡事件。
对于 bindtap ，如果事件触发了，就会向上传递给父元素。也就是说，button 如果点击了，就会传递给外边的 view 元素，如果 view 元素里面自己也有一个 bindtap 函数，它也会调用这个函数进行处理。
相反，如果这里使用 catchtap ，那么点击以后，就会阻止元素向上传递。也就是说，按钮点击以后，只会处理自己的函数，但外层的 view 元素，就不会进行相应处理。
接着，我们看看事件对象包含哪些信息。我们把f0函数修改如下：
f0: function(event){
console.log(event)
}
点击以后，可以在 log 里看到如下事件触发后，方方面面的信息，具体如下：
比如说事件的类型，是一个 tap 事件，还有一个是 currentTarget ，指向的是当前事件处理的元素。可以观察到，currentTarget 还有一个 dataset 属性，这个还会在后边讲到。
第四讲 电影周周看v3
===========
4.1 组件的自定义数据属性
继续完善电影周周看微信小程序，
-
需求：从weekly 页面上的电影卡片跳转到电影详情页，因此，要新增 detail页面
-
使用 wx.navigateTo()
-
参数化的 page path
-
组件的自定义数据属性：向逻辑层的业务数据传递
首先，新建details页面，这里给出 detail页的基本代码：
details.wxml
总结
面试难免让人焦虑不安。经历过的人都懂的。但是如果你提前预测面试官要问你的问题并想出得体的回答方式，就会容易很多。
此外，都说“面试造火箭，工作拧螺丝”，那对于准备面试的朋友，你只需懂一个字：刷！
给我刷刷刷刷，使劲儿刷刷刷刷刷！今天既是来谈面试的，那就必须得来整点面试真题，这不花了我整28天，做了份“Java一线大厂高岗面试题解析合集：JAVA基础-中级-高级面试+SSM框架+分布式+性能调优+微服务+并发编程+网络+设计模式+数据结构与算法等”
且除了单纯的刷题，也得需准备一本【JAVA进阶核心知识手册】：JVM、JAVA集合、JAVA多线程并发、JAVA基础、Spring 原理、微服务、Netty与RPC、网络、日志、Zookeeper、Kafka、RabbitMQ、Hbase、MongoDB、Cassandra、设计模式、负载均衡、数据库、一致性算法、JAVA算法、数据结构、加密算法、分布式缓存、Hadoop、Spark、Storm、YARN、机器学习、云计算，用来查漏补缺最好不过。
Target 还有一个 dataset 属性，这个还会在后边讲到。
第四讲 电影周周看v3
===========
4.1 组件的自定义数据属性
继续完善电影周周看微信小程序，
-
需求：从weekly 页面上的电影卡片跳转到电影详情页，因此，要新增 detail页面
-
使用 wx.navigateTo()
-
参数化的 page path
-
组件的自定义数据属性：向逻辑层的业务数据传递
首先，新建details页面，这里给出 detail页的基本代码：
details.wxml
总结
面试难免让人焦虑不安。经历过的人都懂的。但是如果你提前预测面试官要问你的问题并想出得体的回答方式，就会容易很多。
此外，都说“面试造火箭，工作拧螺丝”，那对于准备面试的朋友，你只需懂一个字：刷！
给我刷刷刷刷，使劲儿刷刷刷刷刷！今天既是来谈面试的，那就必须得来整点面试真题，这不花了我整28天，做了份“Java一线大厂高岗面试题解析合集：JAVA基础-中级-高级面试+SSM框架+分布式+性能调优+微服务+并发编程+网络+设计模式+数据结构与算法等”
[外链图片转存中…(img-7FylQGub-1718920793247)]
且除了单纯的刷题，也得需准备一本【JAVA进阶核心知识手册】：JVM、JAVA集合、JAVA多线程并发、JAVA基础、Spring 原理、微服务、Netty与RPC、网络、日志、Zookeeper、Kafka、RabbitMQ、Hbase、MongoDB、Cassandra、设计模式、负载均衡、数据库、一致性算法、JAVA算法、数据结构、加密算法、分布式缓存、Hadoop、Spark、Storm、YARN、机器学习、云计算，用来查漏补缺最好不过。
[外链图片转存中…(img-H2pBnSZY-1718920793247)]
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
