猜歌需要考虑的问题
# 1. 华为广告组件销毁,必须写在广告组件上面
# 2. (广告组件封装)广告支持传入自定义样式
# 3. 全部广告封装为一个组件
# 4. 登录问题(无论进入任何页面都能获取到用户信息)
小程序登录问题
在 app.js 里面写登录,需要考虑各个页面不一致的问题 解决方案一: 在 onShow 函数中判断全局数据中的 sessionKey 是否已经准备好,如果没有准备好则等待登录成功之后再进行页面的数据初始化等操作。示例代码如下:
// page.js
Page({
data: {
isLoginReady: false, // 用户登录状态是否准备好
},
onShow: function () {
// 获取全局数据中的sessionKey,如果没有则等待登录
const sessionKey = getApp().globalData.sessionKey;
if (sessionKey) {
// 用户已经登录,可以开始页面的数据初始化等操作
this.setData({ isLoginReady: true });
// TODO: 页面数据初始化等操作
} else {
// 用户尚未登录,等待登录成功之后再进行操作
getApp().loginReadyCallback = () => {
this.setData({ isLoginReady: true });
// TODO: 页面数据初始化等操作
};
}
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
然后在 app.js 里面定义
// app.js
App({
globalData: {
sessionKey: null,
loginReadyCallback: null, // 登录成功后的回调函数
},
onLaunch: function() {
// 登录
wx.login({
success: res => {
// 调用登录API获取sessionKey
wx.request({
url: 'https://example.com/login',
data: { code: res.code },
success: res => {
// loginReadyCallback 回调函数,则在登录成功后执行回调函数
}
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 5.组件之间交互
- 父组件调用子组件的方法,之前使用的是官方文档上面的。
<import name="comp3" src="./comp3.ux"></import>
<template>
<div class="parent-demo">
<text>我是父组件count:{{count}}</text>
<comp1 count="{{count}}" onemit-evt="emitEvt"></comp1>
<text>我是父组件num:{{num}}</text>
<comp2 num="{{num}}"></comp2>
<text>我是父组件age:{{age}}</text>
<input type="button" onclick="evtTypeEmit" value="触发$broadcast()"></input>
<comp3></comp3>
</div>
</template>
<script>
export default {
private:{
count:20,
num:20,
age:18
},
onInit(){
this.$on('dispatchEvt',this.dispatchEvt)
},
emitEvt(evt){
this.count = evt.detail.count
},
dispatchEvt(evt){
this.num = evt.detail.num
},
evtTypeEmit(){
this.$broadcast('broadevt',{
age:19
})
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- comp3 -->
<template>
<div class="child-demo">
<text>我是子组件三age:{{compAge}}</text>
</div>
</template>
<script>
export default {
props:[],
data(){
return{
compAge:null
}
},
onInit(){
this.$on('broadevt',this.broadevt)
},
broadevt(evt){
this.compAge = evt.detail.age
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
向下传递:父组件触发,子组件响应;调用 parentVm.$broadcast()完成向下传递,如:broadevt 以上这种情况只针对单一组件的情况,如果有多个组件,所有的组件都能监听到当前时间
- 从外部触发当前组件的话,不适合,
- 比如页面都三个广告,打开按钮是跟第三个广告绑定的,点击打开按钮通过
$broadcast
触发子组件的话,会导致所有的组件都能收到监听信息,不能打开对应的广告
# 解决方案:
使用给子组件绑定 id,然后使用快应用提供的$child
,来获取制定 id 的自定义组件的 ViewModel
this.$child("xxx");
// 获取 id 为 xxx 的 div 组件 ViewModel
1
2
2
获取到的就是当前子组件的this
,然后就可以直接调用子组件的方法,实现触发当前指定的子组件
编辑 (opens new window)
上次更新: 2025/01/07, 6:01:00