微信小程序开发——注册登录（需要云服务器支撑噢）

话不多说，先上图： （这是我实现的注册登陆界面，而且登陆实现后可以长时间保留）

 前景工作：

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>

 6、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;
}