私は学部課程の宿題のための基本的な小さなプログラムを書き、それを記録してここで共有しました。間違いがあれば指摘してください。
ボタンを非表示にするためにログインするかどうかを決定します
最初にログインと登録を作成しましたが、正常にログインしても、パーソナルセンターページにログインと登録ボタンが残っていることがわかりました。そこで、WeChatアプレット開発ドキュメントを読んで、ボタンを非表示にする方法を見つけました。
公式のWeChat開発ドキュメントで条件付きレンダリングステートメントの使用法を見つけます。
次に、非表示と表示に複数のビューが含まれていることを考慮して、ブロックを使用してこの条件付きレンダリングを実行します。
wxmlコード
<scroll-view scroll-y class="scrollPage">
<view class="UCenter-bg">
<block wx:if="{
{id}}">//判断条件 id是否为空
<image src="{
{userimg}}" class="png" mode="widthFix" bindtap="userimgsc"></image>
<view class="margin-top-sm">
<text>欢迎回来,{
{
username}}!</text>
</view>
</block>
<block wx:else>//id为空则显示登录注册按钮
<button bindtap='signzhuan' class="button">注册</button>
<button bindtap='loginzhuan' class="button">登录</button>
</block>
<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
<view class="cu-item arrow">
<view class="content" bindtap="shoucangjia">
<text class="cuIcon-writefill text-cyan"></text>
<text class="text-grey">我的收藏</text>
</view>
</view>
<view class="cu-item arrow">
<view class="content" bindtap="wdsc">
<text class="cuIcon-formfill text-green"></text>
<text class="text-grey">我的上传</text>
</view>
</view>
<view class="cu-item arrow">
<view class="content" bindtap="photostop">
<text class="cuIcon-creativefill text-orange"></text>
<text class="text-grey">上传图片</text>
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
wxssのcolorUI
jsコード
ログインが成功すると、ユーザーのopenidがグローバル変数に渡され、ユーザーはグローバル変数のフィールドに従ってログインしているかどうかが判断されます。
- app.jsに新しいフィールドを追加します
this.globalData = {
nowuseropid:null
}
- ログインjsに着信変数コードを追加します（このコードはログイン成功の条件に追加されます）
app.globalData.nowuseropid = app.globalData.openid
- パーソナルセンターのjsでopenidを使用して、ユーザーコレクション内のユーザーのユーザー名とアバター情報をクエリします
const app = getApp()
const db = wx.cloud.database({
//引用云数据库
env: '云开发环境名' //云开发环境ID
});
const 自己起的名userListDB = db.collection('集合名');
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
console.log('id', app.globalData.nowuseropid)
this.setData({
id:app.globalData.nowuseropid//传入视图层 判断是否登录
})
if(app.globalData.nowuseropid!=null){
//进行判断 不为空则进行查询
userListDB.where({
_openid:app.globalData.nowuseropid
}).get({
success: function (res){
that.setData({
username:res.data[0].name,
userimg:res.data[0].userimg
})
console.log('姓名',res.data[0].name)
console.log('图片',res.data[0].userimg)
}
})
}
},
signzhuan() {
//注册按钮
wx.navigateTo({
url: '/pages/sign/sign',
})
},
loginzhuan() {
//登录按钮
wx.navigateTo({
url: '/pages/login/login',
})
},
photostop(){
//上传按钮
let that = this;
if(that.data.username==null){
wx.showModal({
title: '提示',
content: '请先登录！',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
that.loginzhuan();
}
}
})
}else{
wx.navigateTo({
//跳转上传界面
url: '/pages/sc/sc',
})
}
},
wdsc(){
//查看我的上传按钮
let that = this;
if(that.data.username==null){
wx.showModal({
title: '提示',
content: '请先登录！',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
that.loginzhuan();
}
}
})
}else{
wx.navigateTo({
//跳转我的上传页面
url: '/pages/wdsc/wdsc',
})
}
},
shoucangjia(){
//查看收藏夹按钮
let that = this;
if(that.data.username==null){
wx.showModal({
title: '提示',
content: '请先登录！',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
that.loginzhuan();
}
}
})
}else{
wx.navigateTo({
//跳转收藏夹界面
url: '/pages/shoucangjia/shoucangjia',
})
}
},
})