問題

<!--index.wxml-->
<navigation-bar title="快乐摇奖" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view class="container">
<view class="wheel-container">
<canvas canvas-id="wheelCanvas" style="width: 300px; height: 300px;" animation="{{wheelAnimation}}"></canvas>
<view class="pointer">▼</view> <!-- 倒置的指针 -->
</view>
<!-- 抽奖按钮 -->
<button class="draw-button" bindtap="startDraw" disabled="{{isDrawing}}">
{{isDrawing ? '抽奖中...' : '开始抽奖'}}
</button>
</view>
</scroll-view>

<!--login.wxml-->
<view data-weui-theme="{{theme}}">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<mp-form>
<mp-cells>
<mp-cell title="昵称">
<input bindinput="bindKeyInput" bindblur="bindKeyBlur"value="{{nickName}}" type="nickname" class="weui-input" placeholder="请输入昵称"/>
</mp-cell>
</mp-cells>
</mp-form>
</view>

/**login.js */
const app = getApp()
Page({
data: {
avatarUrl: '',
nickName: ''
},
onLoad() {
let That = this
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
console.log('用户信息', res.userInfo)
That.setData({
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
})
}
})
}
}
})
},
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
},
bindKeyInput(e){
this.setData({
nickName: e.detail.value
})
}
})

把代码修改成点击index.wxml 的开始抽奖 按钮,判断有没有获取微信昵称,如果没有则不能进行抽奖,只有使用微信昵称才能抽奖。

思考

修改按钮功能

用户希望调整代码,使得点击 "开始抽奖" 按钮时,先检查用户是否授权使用微信昵称,未授权则无法进行抽奖。

修改代码

正在修改代码以确保用户已授予获取微信昵称的权限,才能参与抽奖。涉及修改index.wxml中抽奖按钮的设置,并在index.js中检查用户是否拥有微信昵称。

修改代码

我正在将“开始抽奖”按钮的功能调整为先检查用户是否获取了微信昵称,否则无法进行抽奖。

如何传递信息

我正在考虑在 WeChat 小程序中如何实现用户信息的全局访问,以便在登录状态改变后,其他页面能够及时获取到更新的信息。这将帮助提升用户体验。

管理存储和提示

在登录页面,获取用户信息后,存储昵称。点击抽奖按钮时,检查昵称存储状态,若无存储,提示用户前往登录页面。

更新存储设置

程序设置用户的昵称,并将其存储在本地。用户获取权限后,将直接调用获取用户信息 API。

实施登录检测

在 index.js 中,通过检测用户是否绑定昵称,决定是否展示登录提示框。若无绑定,则跳转到登录页。

分步实现功能

我正逐步解决用户昵称存储问题。首先,在登录时存储昵称,然后在绘制时检测。这样,功能的实现变得连贯且合理。

回答

好的,您希望修改代码,使得在点击 index.wxml 的“开始抽奖”按钮时,首先判断用户是否已经获取了微信昵称,如果没有,则不能进行抽奖,只有使用微信昵称的用户才能抽奖。

为实现这个功能,我们需要在 index.js 中的 startDraw 方法中添加对用户昵称的判断。如果用户没有昵称,我们将提示用户前往登录页面获取微信昵称。

以下是修改后的代码:

1. 修改 login.js,在获取到用户昵称后,将其保存到本地存储:

/** login.js */ const app = getApp() Page({ data: { avatarUrl: '', nickName: '' }, onLoad() { let That = this wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function (res) { console.log('用户信息', res.userInfo) That.setData({ avatarUrl: res.userInfo.avatarUrl, nickName: res.userInfo.nickName }) // 将昵称保存到本地存储 wx.setStorageSync('nickName', res.userInfo.nickName) } }) } } }) }, onChooseAvatar(e) { const { avatarUrl } = e.detail this.setData({ avatarUrl, }) }, bindKeyInput(e){ this.setData({ nickName: e.detail.value }) // 将用户输入的昵称保存到本地存储 wx.setStorageSync('nickName', e.detail.value) } })

2. 在 index.js 中的 startDraw 方法中,添加对昵称的判断:

/** index.js */ Page({ data: { isDrawing: false, // 其他数据 }, startDraw() { // 检查是否有昵称 const nickName = wx.getStorageSync('nickName') if (!nickName) { wx.showModal({ title: '提示', content: '请先登录以获取微信昵称,才能参加抽奖。', showCancel: false, success(res) { if (res.confirm) { // 跳转到登录页面 wx.navigateTo({ url: '/pages/login/login' // 请确保路径正确 }) } } }) return } // 已经有昵称,开始抽奖逻辑 this.setData({ isDrawing: true }) // 这里添加您的抽奖逻辑代码 } })

3. 确保您的登录页面路径正确,并在需要的地方修改路径。

4. 如果您还没有 index.js 文件,需要创建并添加上述代码。

通过上述修改,当用户点击“开始抽奖”按钮时,程序会先检查本地存储中是否有用户的微信昵称。如果没有,用户将被提示前往登录页面获取昵称;如果有,则正常进行抽奖流程。

这样,就实现了只有获取了微信昵称的用户才能进行抽奖的功能。

分享這個問答