uni-app 结合云函数开发小程序博客（二）：云函数实现登录注册

本文由图雀社区认证作者 测不准 写作而成，图雀社区将连载其 uni-app 结合云函数开发小程序博客系列，感谢作者的优质输出，让我们的技术世界变得更加美好????

不好意思大家，个人原因拖了一周时间才发表第二篇，没想到还有朋友在支持，非常感谢和抱歉。第一篇中已经引入了第三方样式，实现了主题和语言的切换；本篇主要开始页面的搭建和云函数创建，前端代码通过uniCloud.callFunction()方法调用云函数，云函数中可执行js运算、读写云数据库（NoSQL），直接返回json数据，也可以使用npm安装第三方依赖。服务端环境安装配置和安全等方面完全不需要去考虑。

登录界面

• 我们开发uni-app的工具是HbuilderX，在 pages 文件夹右键新建页面 ，取名login，这时会生成 /pages/login/login.vue， 会自动在 pages.json 文件中添加 如下：（新增的文件会放在 pages 数组最后）

// 以下代码在 pages.json 中
{
       "path" : "pages/login/login",
       "style" : {}
}

• 定义 page 背景

// 以下代码在 login.vue 中
// 我只在登录和注册界面填充了背景色，其他页面使用默认白色，如果想定义全局的page背景，在全局css文件中定义，再在app.vue文件中引入样式

page {
      background: #999;
}

• 字体大小和边距直接使用 colorui 自带样式，自己的样式可以在 style 中书写

// 以下 字体大小 文件在 colorui main.css 的 3748 行
// 统一一个类名，不需每个vue界面单独定义，解析重复的东西
.text-xs {
 font-size: 20upx;
}
.text-sm {
 font-size: 24upx;
}
.text-df {
 font-size: 28upx;
}
.text-lg {
 font-size: 32upx;
}
.text-xl {
 font-size: 36upx;
}

// 以下代码在 colorui/main.css 的 2999行 （padding同理）

.margin-0 {
 margin: 0;
}
.margin-xs {
 margin: 10upx;
}
.margin-sm {
 margin: 20upx;
}
.margin {
 margin: 30upx;
}

// 由于 使用 flex 布局，可能会使用到 auto 的场景， 自己加了几个样式

.margin-top-auto {
 margin-top: auto;
}
.margin-bottom-auto {
 margin-bottom: auto;
}
.margin-left-auto {
 margin-left: auto;
}
.margin-right-auto {
 margin-right: auto;
}

• 页面代码如下 （事件绑定 @tap，移动端点击，后面使用）

<view class="login">
        // lang. 第一节中做的全局混入，国际化
 <view class="login-title text-white text-sl text-center">{
   {lang.login_title}}</view>
 <view class="form-wrapper flex flex-direction margin-0-auto">
  <view class="bg-white radius flex flex-direction align-center">
   <view class="login-form-title text-bold text-xl margin-top-xl margin-bottom-xl">{
   {lang.login_form_title}}</view>
   <view class="login-form-username border-3-ccc margin-top-xs margin-bottom-xl">
    <input v-model='form.username' class="w-100 h-100 text-center text-df" type="text" value="" :placeholder="lang.login_form_username_placeholder" />
   </view>
   <view class="login-form-password border-3-ccc margin-top-xs margin-bottom-xl">
    <input v-model="form.password" class="w-100 h-100 text-center text-df" type="password" value="" :placeholder="lang.login_form_password_placeholder" />
   </view>

   <button type="primary" @tap='login' class="cu-btn login-btn text-xl margin-top-sm" :class="['bg-' + themeColor.name]">{
   {lang.login_submit_btn}}</button>
   <view @tap='loginWithWechat' class="login-with-wechat text-df margin-top-sm text-center text-btn" :class="['text-'+themeColor.name]">
    {
   {lang.login_with_wechat}}
   </view>
  </view>

  <view @tap='register' class="login-with-wechat text-df margin-top-auto text-white text-center text-btn">
   {
   {lang.login_register}}
  </view>
 </view>
 <open-data type="userAvatarUrl"></open-data>
 <open-data type="userNickName"></open-data>
 <button type="default" @getuserinfo="getuserinfo" open-type="getUserInfo">getUserInfo</button>
</view>

// 如果没安装 scss 插件， 点击菜单中的设置 安装插件
// (小编自己小改了下样式， 官方推荐使用 rpx 单位，设计稿为 750px，单位长度自适应。手机端，或者平板直接兼容)
.login {
 .login-title {
  padding: 212rpx 0 50rpx 0;
 }

 .form-wrapper {
  width: 580rpx;
  height: 808rpx;

  .bg-white {
   height: 660rpx;

   .login-form-username {
    width: 400rpx;
    height: 88rpx;
    border-radius: 44rpx;
    overflow: hidden;
   }

   .login-form-password {
    @extend .login-form-username;
   }

   .login-btn {
    width: 400rpx;
    height: 88rpx;
    border-radius: 44rpx;
   }
  }
 }
}

简单封装操作

• 根目录下新建/utils/plugins.js， 在main.js中引入 require('./utils/plugins.js')

• 放入 vuex

// 以下内容在 /utils/plugins.js 中
import Vue from 'vue'
import store from '../store';
// uni中的store不需要注册到main.js的 new Vue 中
Vue.prototype.$store = store;

• 封装 toast 提示框

// 以下内容在 /utils/plugins.js 中
Vue.prototype.$toast = (title, duration = 1500) => uni.showToast({
 icon: 'none',
 title,
 duration
})

• 封装路由跳转 navigateTo， switchTab，reLaunch

Vue.prototype.$router = (url) => uni.navigateTo({
 url: '/pages' + url,
 animationType:"slide-in-left", // 跳转动画
 animationDuration: 800
})
// 跳转底部 tabbar 对应的页面
Vue.prototype.$switchTab = (url) => uni.switchTab({
 url: '/pages' + url
})
// 关闭其它页面，跳转
Vue.prototype.$relaunch = (url) => uni.reLaunch({
 url: '/pages' + url
})

• 封装 云函数请求 文档^[1]

Vue.prototype.$uniCloud = async (name, data) => {
 uni.showLoading()
 try{
  let res = await uniCloud.callFunction({
   name, // 云函数名字
   data // 传输数据
  })
  return res
 } catch(e) {
  return e
 } finally{
  uni.hideLoading()
 }
}

请求云函数

我们的根目录下有个 cloudfunctions-aliyun 文件夹，右键创建云函数，取名为 user， 目录下会生成 user/index.js ，这个user 就是 上文封装的云函数的名字。index.js 内容如下：

'use strict';
// 对云数据库的操作一定要是等待读取的， async await
exports.main = async (event, context) => {
  //event为客户端上传的参数  对应上传的 data 数据 {}
  console.log('event : ' + event)
  //返回数据给客户端
  return event
};

我们有了去操作云数据库的函数，也得有云数据库，初始化我们的云数据库， 在 cloudfunctions-aliyun 文件夹下创建 db_init.json 文件 （参考^[2]），json格式，因为我们做的是登录注册，所以创建 user 表（集合）