话不多说,先上图: (这是我实现的注册登陆界面,而且登陆实现后可以长时间保留)
前景工作:
1、在云环境下构建:login云函数
2、一张图片:
3、pages下面构建pages/mine/index路径。
1、app.js代码
// app.js App({ onLaunch(){ wx.cloud.init({ env:'自己构建的云环境名字', traceUser:true, }) } })
2、云环境下面构建的login云函数的index.js文件代码
// 云函数入口文件 const cloud = require('wx-server-sdk') /* 指定云函数环境 使用云函数前,必须指定环境 */ cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境 // 云函数入口函数 event:前端传向后端的字段 exports.main = async (event) => { const { nickName,avatarUrl } = event const { OPENID } = cloud.getWXContext() /** 1、初始化集合 */ const db = cloud.database() /** 2、指定集合 */ const userInfo = db.collection('userInfo') /* 3、查询当前用户是否注册过 */ const { data } = await userInfo.where({ _openid:OPENID }).get() if(data.length === 0){ /** a、数据库内没有当前用户的信息(注册) */ /** 3、数据库内新增数据 */ const { _id } = await userInfo.add({ data:{ nickName, avatarUrl, love:0, follow:0, message:0, _openid:OPENID } }) /* doc:是接收_id,快速返回该id的数据 */ const user = await userInfo.doc(_id).get() return{ data:user.data } }else{ /** b、数据库存在当前用户信息,则直接返回当前用户信息(登录) */ return{ data: data[0] } } }
3、pages下面的mine,mine下面的index.js代码
// pages/mine/index.js Page({ /** * 页面的初始数据 */ data: { userInfo:null }, /* 用户授权*/ async login(){ //1、用户授权获取信息 const { userInfo:{nickName,avatarUrl} } = await wx.getUserProfile({ desc:'用于完善用户信息' }) //2、把当前的用户信息交付给后端,存储生成账号 const { result: { data } } = await wx.cloud.callFunction({ //云函数login name:'login', //data: 传递字段 data:{ nickName, avatarUrl } }) //3、将用户信息进行本地存储 wx.setStorageSync('userInfo', data) this.setData({ userInfo: data }) }, /** 获取用户信息 */ async getUserInfo(){ /** 判断用户是否登录 */ const data = wx.getStorageSync('userInfo') if(data){ //登陆了,更新数据 const userInfo = await wx.cloud.database().collection('userInfo').doc(data._id).get() this.setData({ userInfo: userInfo.data }) } }, /* 退出登录 ---- 实际过程中,要调用接口通知后端清空存储 log日志 计算用户登陆时长*/ close(){ wx.clearStorage() this.setData({ userInfo: null }) }, /** 生命周期函数--监听页面显示 进入页面触发 */ onShow() { this.getUserInfo() }, /*生命周期函数--监听页面加载*/ //页面初始化执行1次,tabbar页面切换时不会销毁 onl oad(options) { //当前页面 this.getTabBar() 等同于 在tabbar页直接写this this.getTabBar().setData({ active: 'mine' }) }, })
4、pages下面的mine,mine下面的index.json代码
{ "navigationBarTitleText": "我的", #界面顶上文字内容 "navigationBarTextStyle":"white", #界面顶上文字颜色 "navigationBarBackgroundColor": "#ff6034", #界面顶上背景色 "usingComponents": { "van-notice-bar": "@vant/weapp/notice-bar/index", "van-cell": "@vant/weapp/cell/index", "van-cell-group": "@vant/weapp/cell-group/index" #vant网站组件引用 } }
组件引用:快速上手 - Vant Weapp
请按照这个界面的操作进行。
博主是:通过 npm 安装
于是乎:操作:
步骤一 通过 npm 安装
# 通过 npm 安装
npm i @vant/weapp -S --production
步骤二 修改 app.json
将 app.json 中的
"style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。步骤三 构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
具体组件使用流程,请参见vant官网:Button 按钮 - Vant Weapp(这里是按钮组件示例)
5、pages下面的mine,mine下面的index.wxml代码
<view id="mine"> <view class="header"> <van-notice-bar color="#ffffff" background="rgba(0,0,0,0.2)" left-icon="volume-o" text="绕梁遏云“啰儿调”,非遗振乡创新高。重庆人文科技学院实践团参观“啰儿调”文化长廊,学习“啰儿调”历史背景,向民众派发调查问卷,广泛征集想法建议,让更多的人了解和认识到“啰儿调”这一非遗项目的魅力所在,引导群众共同参与保护和传承工作,唤起了群众对乡村振兴事业的关注和热情,实践团将与民众共同为实现乡村全面振兴而努力。" /> <!-- 第一套 --> <view wx:if="{{ userInfo }}"> <image class="image" src="{{ userInfo.avatarUrl }}" /> <view class="name"> {{ userInfo.nickName }} </view> </view> <!-- 第二套 --> <view wx:else> <image class="image" src="/assets/image/header.png" /> <view class="name" bind:tap="login"> 登录 / 注册 </view> </view> <view class="nav"> <view class="nav-item"> <view> {{ userInfo.love || 0 }} </view> <view class="nav-item-title">关注</view> </view> <view class="nav-item"> <view> {{ userInfo.follow || 0 }} </view> <view class="nav-item-title">粉丝</view> </view> <view class="nav-item"> <view> {{ userInfo.message || 0 }} </view> <view class="nav-item-title">消息</view> </view> </view> </view> <view class="group"> <van-cell-group> <van-cell icon="records-o" title="问卷调查" is-link /> <van-cell icon="like-o" title="我的关注" is-link /> <van-cell icon="phone-o" title="联系客服" is-link /> </van-cell-group> </view> <View class="group"> <van-cell-group> <van-cell icon="comment-o" title="线上交流平台" is-link /> <van-cell wx:if="{{ userInfo }}" bind:tap="close" icon="close" title="退出登录" is-link /> </van-cell-group> </View> </view>
标签:index,const,微信,程序开发,mine,userInfo,服务器,data,wx From: https://blog.csdn.net/m0_61883479/article/details/1432578256、pages下面的mine,mine下面的index.wxss代码
/* pages/mine/index.wxss */ #mine{ width: 100%; height: 100%; background: #f3f3f3; } .header{ width: 100%; height: 410rpx; background: #ff6034; position: relative; } .van-notice-bar{ height: 40rpx !important; line-height: 40rpx !important; } .image{ width: 120rpx; height: 120rpx; border-radius: 50%; margin-top: 30rpx; position: relative; left: 50%; margin-left: -60rpx; } .name{ text-align: center; color:#fff; margin-top: 10rpx; } .nav{ width: 100%; display:flex ; position:absolute; bottom: 30rpx; } .nav-item{ flex:1; text-align: center; color:#fff; } .nav-item-title{ font-size: 26rpx; margin-top: 10rpx; } .group{ margin-top: 20rpx; }