I wrote a basic small program for undergraduate coursework, record and share here, if there are any errors, please point out.
Determine whether to log in to hide the button
At the beginning, I wrote the login and registration and found that when I successfully logged in, the personal center page still retained the login and registration button, so I read the WeChat applet development document to find out how to hide the button.
Find the usage of the conditional rendering statement in the official WeChat development document:
Then considering that the hiding and displaying include multiple views, so use block to carry this conditional rendering:
wxml code
<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>
colorUI for wxss
js code
After the login is successful, the user's openid will be passed into the global variable, and it will be judged whether the user is logged in according to the field in the global variable.
- Add new fields in app.js
this.globalData = {
nowuseropid:null
}
- Add the incoming variable code in the login js (this code is added to the condition of successful login)
app.globalData.nowuseropid = app.globalData.openid
- Use openid in the js of the personal center to query the user name and avatar information of the user in the user collection
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',
})
}
},
})