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

一只图雀

发布于 2020-05-07 10:54:19

2.8K0

发布于 2020-05-07 10:54:19

本文由图雀社区认证作者 测不准 写作而成，图雀社区将连载其 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 表（集合）

// user表
"user": {
     "data": [ // 数据, 有两个字段，
   {
    "username": "admin",
    "password": "admin"
   }
     ],
     "index": [{ // 索引
         "IndexName": "username", // 索引名称
         "MgoKeySchema": { // 索引规则
             "MgoIndexKeys": [{
                 "Name": "username", // 索引字段
                 "Direction": "1" // 索引方向，1：ASC-升序，-1：DESC-降序
             }],
             "MgoIsUnique": true// 索引是否唯一
         }
     }]
 }
}

我们云数据库有了，操作函数也有了，需要有个地方存储 ---- 服务空间（请参考官网基本概念理解）

右键cloudfunctions-aliyun 文件夹，创建云服务空间，浏览器会自动打开web控制台，服务空间有个唯一标识id，修改好识别的服务空间名字。

右键cloudfunctions-aliyun 文件夹选择你创建的云服务空间，在user云函数上右键上传并运行；一方面可以上传，一方面可以检测函数中是否有错误。刷新web控制台，可以发现上传成功：

// 检验云函数是否正确  以下代码在  login.vue中
async onLoad() {
  await this.$uniCloud('user', {name: 'uncertainty'})
}
// 还记得我们的云函数吧，发送什么返回什么

右键db_init.json 文件，初始化云数据库，同样刷新web控制台，发现初始化成功，当然在编译器的控制台也有相关输出（云数据库的操作都可以web 端操作，创建，删除，新增等）

前端请求

// 以下代码在 login.vue 中
async login() {
 if (!this.form.openid) {
     // 不是微信登录，判断输入是否正确
  if (!this.form.username || !this.form.password) {
   this.$toast('请填写正确信息')
   return
  }
 } else {
  this.form.username = ''
  this.form.password = ''
 }

 
  let res = await this.$uniCloud('user', this.form)
 if (res.result.code === 0) {
  this.$toast('登陆成功')
 } else {
  this.$toast(res.result.msg)
 }
}

输入用户名密码（有需要自己可以写限制），点击登录按钮，查看：（没有弹出登陆成功因为没有code）

登录云函数

集合的常用方法

const db = uniCloud.database()
exports.main = async (event, context) => {
  // 获取 user 表的集合对象
  const collection = db.collection('user')
  let user
  // 操作云数据库必须 等待，查找user表中 username 为 event.username同时password为event.password的对象
  user = await collection.where({
   username: event.username,
   password: event.password
  }).get()
  
  // affectedDocs 当做找到的个数
  if (user.affectedDocs < 1) {
    // 没有找到
   return {
    code: -1,
    msg: '用户名或密码错误'
   }
  } else {
   return {
    code: 0,
    msg: 'success'
   }
  }
}

输入初始化的admin，admin，成功

微信openid登录

小程序请求

// 以下代码在 login.vue 中
loginWithWechat() {
    let _this = this
    uni.login({
      async success(res) {
        let result = await _this.$uniCloud('loginWithWechat', {
            js_code: res.code
          })

        _this.form.openid = result.result.data.openid
        _this.login()
      }
    })
},

创建云函数 loginWithWechat

// 以下代码在云函数 loginWithWechat/index.js 中
exports.main = async (event, context) => {
   // 获取openid 请求地址
 const apiUrl = 'https://api.weixin.qq.com/sns/jscode2session';
  // uniCloud.httpclient 发起请求
 const res = await uniCloud.httpclient.request(apiUrl,
 {
  method: 'GET',
  dataType:"json",
  data: {
   'grant_type' : 'authorization_code',
   'appid'   : '', //你自己小程序的appid
   'secret'  : '', // 在小程序管理平台 -> 开发 -> 开发设置中
   'js_code' : event.js_code // wx.login 拿到的code
  }
 });
 //返回数据给客户端
 return res
};

我们拿到了openid

点击微信登录按钮会显示用户名或密码错误，因为我们没有在user 云函数中做判断。修改user云函数（点击微信登录，发现登录成功）

// 以下代码在 user云函数index.js 中
const db = uniCloud.database()

exports.main = async (event, context) => {
   const collection = db.collection('user')
   let user
   if (event.openid) {
    user = await collection.where({
     openid: event.openid
    }).get()

    if (user.affectedDocs < 1) {
     // 没有就新增
     await collection.add({
      openid: event.openid
     })
    }

    return {
     code: 0,
     msg: 'success'
    }
   } else {
    user = await collection.where({
     username: event.username,
     password: event.password
    }).get()

    if (user.affectedDocs < 1) {
     return {
      code: -1,
      msg: '用户名或密码错误'
     }
    } else {
     return {
      code: 0,
      msg: 'success'
     }
    }
   }
};

查看我们的user表，（nosql不像mysql key value 值必须对应，可以看到两组数据字段不同）

注册界面

页面布局这里就不多说了，直接梭哈

// 以下代码在 register.vue中
<template>
 <view class="register">
  <cu-custom :bgColor="'bg-'+themeColor.name" :isBack="true">
   <block slot="backText">返回</block>
   <block slot="content">注册</block>
  </cu-custom>
  <view class="register-title text-white text-sl text-center">{{lang.login_title}}</view>
  <view class="text-white text-sm text-center">{{lang.create_new_account}}</view>
  <view class="form-wrapper flex flex-direction margin-0-auto">
   <view class="flex flex-direction align-center">
    <view class="register-form-username border-3-white margin-top-xl margin-bottom-xl">
     <input v-model='form.username' class="w-100 h-100 text-center text-df  text-white" type="text" value="" placeholder-class="register-placeholder-class text-white" :placeholder="lang.login_form_username_placeholder" />
    </view>
    <view class="register-form-password border-3-white margin-top-xs margin-bottom-xl padding-left-sm padding-right-sm">
     <input v-model="form.password" class="w-100 h-100 text-center text-df text-white" type="password" value="" placeholder-class="register-placeholder-class text-white" :placeholder="lang.login_form_password_placeholder" />
    </view>
    <view class="register-form-password border-3-white margin-top-xs margin-bottom-xl padding-left-sm padding-right-sm">
     <input v-model="form.confirm_password" class="w-100 h-100 text-center text-df text-white" type="password" value="" placeholder-class="register-placeholder-class text-white" :placeholder="lang.register_form_confirm_password_placeholder" />
     <text v-if='isConfirm' class="text-red wrong-confirm-password animation-fade">{{lang.register_wrong_confirm_password_tips}}</text>
    </view>

    <button type="primary" @tap='register' class="cu-btn register-btn text-xl margin-top-sm" :class="['bg-' + themeColor.name, 'light']">{{lang.register_submit_btn}}</button>
   </view>
   <view class="register-with-wechat text-df margin-top-auto text-white text-center text-btn">
    {{lang.register_policy}}
   </view>
  </view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    form: {
     username: '',
     password: '',
     confirm_password: ''
    },
    isConfirm: false
   }
  },
  onLoad() {

  },
  watch:{
   'form.confirm_password'(val) {
    if (val && val !== this.form.password) {
     this.isConfirm = true
    } else if (val && val === this.form.password) {
     this.isConfirm = false
    }
   }
  },
  methods: {
   async register() {
    if (!this.form.username || !this.form.password || !this.form.confirm_password) {
     this.$toast('请填写正确信息')
     return
    }
    if (this.form.password !== this.form.confirm_password) {
     this.$toast(this.lang.register_wrong_confirm_password_tips)
     return
    }
                                // 这里我们使用原始写法
    let res = await uniCloud.callFunction({
     name: 'user',
                                        // 因为登录注册都属于 use表，感觉index文件可能代码混杂，加个type加以区分，登录的type是get
     data: Object.assign({}, this.form, {
      type: 'add'
     })
    })
    if (res.result.code === 0) {
     this.$toast('注册成功')
     // 跳转
     setTimeout(() =>{
      uni.navigateBack()
     }, 1500)
    } else {
     this.$toast(res.result.msg)
    }
   }
  }
 }
</script>

<style lang="scss">
 page{
  background: #999;
 }
 .register {
  .register-title {
   padding: 212rpx 0 20rpx 0;
  }

  .form-wrapper {
   .flex-direction {
    height: 660rpx;

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

    .register-form-password {
     @extend .register-form-username;
     position: relative;
     .wrong-confirm-password{
      position:absolute;
      top: 100%;
      left: 20rpx;
     }
    }

    .register-btn {
     width: 400rpx;
     height: 88rpx;
     border-radius: 44rpx;
    }
   }
  }
 }
</style>

改造 user 云函数

// 以下代码在 user/index.js
'use strict'; 
const { add } = require('./add/index.js') 
const { get } = require('./get/index.js')
// 这里感觉应该 引个文件 用枚举
// 因为是node 就直接用global全局对象
global.successMsg = 'success' 
global.successCode = 0 
global.wrongCode = -1
 
exports.main = async (event, context) => { 
 switch (event.type) { 
  case 'add':
   return add(event) 
  case 'get':
  // 上文的index代码都移动到 get/index.js中
   return get(event) 
 }
};

注册云函数(add)

//以下代码在 user/add/index.js
 
const db = uniCloud.database()

exports.add = async (data) => {
 const collection = db.collection('user')

 let user = await collection.where({
  username: data.username
 }).get() // 切记获取最后一定要 get()
        
        // 一目了然，感觉不用解释
 if (user.affectedDocs < 1) {
  const res = await collection.add({
   username: data.username,
   password: data.password
  })
  return {
   code: global.successCode,
   msg: global.successMsg
  }
 } else {
  return {
   code: global.wrongCode,
   msg: '用户名重复，请重新录入'
  }
 }

}

修改完云函数记得要上传并运行哦，注册成功

加密密码

查看web端，我们发现数据都是明文存在，这时我们需要把密码加密，同样是user云函数，我们下user云函数下新建utils/index.js，我们使用sha1加密

// 以下代码在 utils/index.js
// 密码加密
function encodeUTF8(s) {
  var i, r = [], c, x;
  for (i = 0; i < s.length; i++)
    if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
    else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
    else {
      if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
        c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
          r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
      else r.push(0xE0 + (c >> 12 & 0xF));
      r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
    };
  return r;
};

// 字符串加密成 hex 字符串
function sha1(s) {
  var data = new Uint8Array(encodeUTF8(s))
  var i, j, t;
  var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
  s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
  for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
  s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
  s[l - 1] = data.length << 3;
  var w = [], f = [
    function () { return m[1] & m[2] | ~m[1] & m[3]; },
    function () { return m[1] ^ m[2] ^ m[3]; },
    function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
    function () { return m[1] ^ m[2] ^ m[3]; }
  ], rol = function (n, c) { return n << c | n >>> (32 - c); },
    k = [1518500249, 1859775393, -1894007588, -899497514],
    m = [1732584193, -271733879, null, null, -1009589776];
  m[2] = ~m[0], m[3] = ~m[1];
  for (i = 0; i < s.length; i += 16) {
    var o = m.slice(0);
    for (j = 0; j < 80; j++)
      w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
        t = rol(m[0], 5) + f[j / 20 | 0]( "0], 5) + f[j / 20 | 0") + m[4] + w[j] + k[j / 20 | 0] | 0,
        m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
    for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
  };
  t = new DataView(new Uint32Array(m).buffer);
  for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);

  var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
    return (e < 16 ? "0" : "") + e.toString(16);
  }).join("");

  return hex;
};

module.exports = {
  sha1
}

注册时加密密码

// 以下代码在 user/add/index.js中 ，部分修改
const util = require('../utils/index.js')
...
const res = await collection.add({
 username: data.username,
 password: util.sha1(data.password) // 加密
})

登录时解密

// 以下代码在 user/get/index.js 中
const util = require('../utils/index.js')
...
user = await collection.where({
 username: data.username,
 password: util.sha1(data.password)
}).get()

加密成功

使用腾讯云开发的朋友，感兴趣可以去尝试使用token 认证 云token[3]

到这里，登录和注册的逻辑基本完成，云函数碰到问题就去查看文档，操作云数据库使用 await，可以打印看看返回数据格式，进行逻辑判断。我习惯用code 判断，但其实自己开发的话，可以不需要使用code，请求逻辑可以使用try catch 进行捕获。云数据库操作可以不使用json文件，直接在web 端进行配置，感觉可能更方便，web端创建数据时候一定要是json格式的，自动添加_id，如果你创建时自己添加了_id，就会使用你提供的值。获取openid时，secret 要保存好，不要泄露，注意安全使用。

进入页面

我上文做的是注册成功后，再返回登录页登录，小伙伴们也可以直接注册成功后直接进入内容页。需要的话可以把登录信息存放在本地，这样就可以记住密码，第二次直接登录。本人习惯页面中使用vuex 读取状态，修改缓存也是用 vuex 操作，第一次初始化直接从缓存读取值赋值到 store 对象中。小伙伴们可自行选择。

创建底部导航

首先在pages.json 下添加 tabBar 字段，配置底部导航最少需要两个跳转。点击底部跳转的页面也需要在pages目录下创建，对应的按钮图标，我在阿里的字体图标库中选取的 链接[4]

// 以下代码在 pages.json中
"tabBar": {
 "color": "#666666", //文字默认颜色
 "selectedColor": "#1296DB", //文字选中的颜色
 "backgroundColor": "#FFFFFF", //背景色
 "list": [{
   "pagePath": "pages/home/home", // 点击跳转的路径
   "text": "故事", // 底部文字
   "iconPath": "static/images/tabbar/story.png", // 默认的图标
   "selectedIconPath": "static/images/tabbar/story_active.png" // 选中后的图标
  },
  {
   "pagePath": "pages/gallery/gallery",
   "text": "画廊",
   "iconPath": "static/images/tabbar/gallery.png",
   "selectedIconPath": "static/images/tabbar/gallery_active.png"
  },
  {
   "pagePath": "pages/activities/activities",
   "text": "活动",
   "iconPath": "static/images/tabbar/activities.png",
   "selectedIconPath": "static/images/tabbar/activities_active.png"
  },
  {
   "pagePath": "pages/my/my",
   "text": "我的",
   "iconPath": "static/images/tabbar/my.png",
   "selectedIconPath": "static/images/tabbar/my_active.png"
  }
 ]
}

在登录页面的登陆成功后，使用 this.relaunch('/home/home')或this.switchTab('/home/home')，跳转到 home 页面。

由于默认打开的是 pages.json 中 pages的第一项对应的页面，如果只想开发首页布局，可以把home位置移动到第一个，或者把上面的注释掉

由于底部导航属于原生的配置，所以层级是最高的，这是如果想在页面中使用遮罩层，会出现如下现象：

可以看到遮罩层无法覆盖底部导航，我们可以隐藏底部导航

// 点击弹出遮罩时触发
uni.hideTabBar()
// 隐藏遮罩层是触发
uni.showTabBar()

如果感觉自带的底部导航样式无法满足UI设计，可以自定义底部导航，colorui 为我们提供了几种选择：

简单使用 colorui 中的底部导航（布局在 colorui 原项目的 pages/component/bar.vue中）

// 直接复制到 home.vue 中即可查看 根据自己的需求该样式
// 可以封装成组件，在需要的地方调用
<view class="cu-bar tabbar bg-black" style="position: fixed;bottom: 0;left: 0;width:100%;">
 <view class="action text-green">
  <view class="cuIcon-homefill"></view> 首页
 </view>
 <view class="action text-gray">
  <view class="cuIcon-similar"></view> 分类
 </view>
 <view class="action text-gray add-action">
  <button class="cu-btn cuIcon-add bg-green shadow"></button>
  发布
 </view>
 <view class="action text-gray">
  <view class="cuIcon-cart">
   <view class="cu-tag badge">99</view>
  </view>
  购物车
 </view>
 <view class="action text-gray">
  <view class="cuIcon-my">
   <view class="cu-tag badge"></view>
  </view>
  我的
 </view>
</view>

底部导航国际化

还记得我们上一小节留的小问题，底部导航的中英文切换。回到 vuex 中切换语言的操作

// 以下代码在 store/index.js 中
changeLang: function(state){
 uni.showActionSheet({
  itemList:['简体中文', 'English'],
  success (e) {
   if(e.tapIndex === 0){
    lang = require('../language/zh.js')
   }else{
    lang = require('../language/en.js')
   }
                        // 操作vuex 直接修改缓存
   uni.setStorageSync("userLang", lang.langType)
   state.lang = lang;
   // 改tabbar，添加如下代码即可
   uni.setTabBarItem({
    index:0,
    text: lang.home_stories
   })
   uni.setTabBarItem({
    index:3,
    text: lang.my
   })
  }
 })
}

uni.setTabBarItem() 修改底部导航样式，如显示聊天信息数，右上角显示红点，显示数字

导航条

还记得我们要使用更换主题，所以导航条设置为自定义，这里我们也是用 colorui 提供的写法，实现自定义顶部导航栏。

首先我们在main.js中全局注册

// 以下代码在 main.js中
import cuCustom from './colorui/components/cu-custom/cu-custom.vue'
Vue.component('cu-custom', cuCustom)

页面中引入自定义组件

// 以下代码再home.vue 中
// 动态 属性 实现主题更换
<cu-custom :bgColor="'bg-'+themeColor.name" :isBack="true">
    <block slot="content">{{lang.home_stories}}</block>
</cu-custom>

界面样式如下：

这是因为我们没有获取到导航条的高度，在 app.vue 中引入

// 以下代码在 app.vue 中
import Vue from 'vue'
// onLaunch 应用启动只会执行一次，有推送也放在这里
onLaunch: function() {
 console.log('App Launch')
        // 获取系统信息
 uni.getSystemInfo({
  success: function(e) {
   // #ifndef MP
   Vue.prototype.StatusBar = e.statusBarHeight;

   // #ifdef MP-WEIXIN || MP-QQ
   Vue.prototype.StatusBar = e.statusBarHeight;
   let capsule = wx.getMenuButtonBoundingClientRect();
   if (capsule) {
    Vue.prototype.Custom = capsule;
    // Vue.prototype.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
    Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
   } else {
    Vue.prototype.CustomBar = e.statusBarHeight + 50;
   }
                        // #endif
  }
 })
}

可以看到导航栏正常了（大家可以在小程序上切换手机类型，包括刘海屏测试效果），组件的代码在colorui/components/cu-custom.vue中，就是进入应用时获取系统状态栏的高度，赋值给自定义的view高度，title 使用 slot 赋值。

把上一节的代码放入 my 页面里，自定义导航条也引入

// 由于上一节课介绍了主题更换，这里直接上代码，在 /pages/my/my.vue中
<template>
 <view>
  <cu-custom :bgColor="'bg-'+themeColor.name" :isBack="true" :icon="'sort'">
   <block slot="content">{{lang.my}}</block>
  </cu-custom>

  <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="modalName =''">
   <view class="cu-dialog" @tap.stop="">
    <radio-group class="block" @change="RadioChange">
     <view class="cu-list menu text-left">
      <view class="cu-item" v-for="(item,index) in themeList" :key="index">
       <label class="flex justify-between align-center flex-sub">
        <view class="flex-sub flex">
         <view>{{item.title}}</view>
         <view :style="{backgroundColor: item.color}" style='height: 50rpx;width: 100rpx;margin-left: 30rpx;'></view>
        </view>
        <radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
         :value="item.name"></radio>
       </label>
      </view>
     </view>
    </radio-group>
   </view>
  </view>

  <button class="btn" hover-class="navigator-hover" :class="['bg-' + themeColor.name]" @click='changeLang'>切换语言</button>
  <button class="btn" hover-class="navigator-hover" :class="['bg-' + themeColor.name]" @click='changeTheme' data-target="RadioModal">更改主题</button>
 </view>
</template>

<script>
 import {ColorList} from './theme.js'
 export default {
  data() {
   return {
    radio: '',
    modalName: '',
    themeList: []
   }
  },
  methods: {
   changeLang(){
    this.$store.commit('changeLang')
   },
   changeTheme(e){
    this.themeList = []
    for (let i = 0;i<ColorList.length;i++) {
     let random = Math.floor(Math.random() * ColorList.length)
     let item = ColorList[random]
     this.themeList.indexOf(item) === -1 && this.themeList.push(item)
     if (this.themeList.length > 5) break
    }
    this.modalName = e.currentTarget.dataset.target
   },
   RadioChange(e) {
    let name = e.detail.value
    let obj = this.themeList.filter(item => {
     return item.name === name
    })
    this.$store.commit('setThemeColor', obj[0])
    this.modalName = ''
   }
  }
 }
</script>

<style>
button{
 margin-top: 20rpx;
}
</style>

如果大家不想使用自定义的导航条，使用自带的导航条也可以 api 如下

// 修改title文字
uni.setNavigationBarTitle({
    title: this.lang.title
});
// 修改背景色
uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ff0000',
    animation: {
 duration: 400,
 timingFunc: 'easeIn'
    }
})
// 使用原生导航条比较方便，不用担心不同机型兼容问题，下拉刷新也比较容易
// 更多导航条的操作大家可以查看官网
// 想要更多自定义导航栏样式，如搜索，下拉选择城市等，可查看插件市场

页面中语言对应如下

// 以下代码在 language/en.js
module.exports = {
 // langType 属性为语言包标识，请勿删除
 langType : 'en',
 // login_page
 login_title: 'UBLOG',
 login_form_title: 'LOGIN',
 login_form_username_placeholder: 'please write your username',
 login_form_password_placeholder: 'please write your password',
 login_submit_btn: 'LOGIN',
 login_with_wechat: 'LOGIN WITH WECHAT',
 login_register: 'REGISTER',
 // 注册页
 create_new_account: 'CREATE NEW ACCOUNT',
 register_submit_btn: 'SIGN UP',
 register_form_confirm_password_placeholder: 'please confirm your password',
 register_policy: 'Terms of Service and Privacy Policy',
 register_wrong_confirm_password_tips: 'Password and Confirm Password inconsistent!',
 // 首页
 home_stories: 'STORIES',
 // 我的
 my: 'MY'
}

// 以下代码在language/zh.js 中
module.exports = {
 // langType 属性为语言包标识，请勿删除
 langType : 'zh-CN',
 // 登陆页
 login_title: '博客',
 login_form_title: '登录',
 login_form_username_placeholder: '请输入用户名',
 login_form_password_placeholder: '请输入密码',
 login_submit_btn: '登录',
 login_with_wechat: '微信登录',
 login_register: '注册',
 // 注册页
 create_new_account: '创建新账户',
 register_submit_btn: '注册',
 register_form_confirm_password_placeholder: '确认密码',
 register_policy: '服务条款及隐私',
 register_wrong_confirm_password_tips: '两次密码不一致',
 // 首页
 home_stories: '你的故事',
 // 我的
 my: '我的'
}

下一小节咱们进入首页的制作，与其它插件的结合使用。如果文中有写的不对的地方，希望大家指正，有好的建议也希望大家提出。能力一般，水平有限，如果文章对你有帮助的话，深感欣慰。我是测不准，谢谢您的阅读！