专栏首页图雀社区uni-app 结合云函数开发小程序博客(二):云函数实现登录注册

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 表(集合)

// 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: '我的'
}

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

参考资料

[1]

文档: https://uniapp.dcloud.io/uniCloud/README

[2]

参考: https://uniapp.dcloud.io/uniCloud/cf-database

[3]

云token: https://uniapp.dcloud.io/uniCloud/authentication

[4]

链接: https://www.iconfont.cn/

本文分享自微信公众号 - 图雀社区(tuture-dev),作者:测不准

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uni-app 结合云函数开发小程序博客(三):接入云函数,实现完善的列表刷新机制

    因为项目做的是博客demo, 首页进来想给人直观的就能看到文章,看到分类。所以想的一个是可以左右滑动,切换分类,一个是页面以列表形式,直接 list 渲染。类似...

    一只图雀
  • CSS Flexbox 布局完全指南 (二):3000字,多示例讲解

    理解 Flexbox 最好的方式是什么?学好基础,再大量练习。这正是我们要在这篇文章中做的事情。

    一只图雀
  • 前端学习数据结构与算法系列(四):哈希、堆和二叉查找树

    当元素进行 mod 运算后,可能会与其他元素的 mod 值一样,此时数组中已经有其他元素占了这个下标位置,这种存储位置重复了的情况便叫做 冲突,我们来看个例子:

    一只图雀
  • datatables 配套bootstrap样式使用小结(2) ajax篇

    上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学,所以ajax方式是必须...

    _淡定_
  • 【回顾】飓风(SIGGRAPH ASIA 2014)来袭,登陆深圳!

      由国际计算机学会(ACM - Association for Computing Machinery)举办的SIGGRAPH是世界上影响最广、规模最大,同时...

    腾讯高校合作
  • 5.登录验证,重定向及访问限制

    这里登陆接口的服务端逻辑是在easy-mock中写的 账号:rty 密码:123,只是做一个简单的验证,可以直接调我的接口,也可以自己写验证密码的模拟逻辑,下...

    RtyXmd
  • 飓风(SIGGRAPH ASIA 2014)来袭,登陆深圳!

      由国际计算机学会(ACM - Association for Computing Machinery)举办的SIGGRAPH是世界上影响最广、规模最大,同时...

    腾讯高校合作
  • 一张图看懂世界石油分布?用Python轻松搞定!

    【导语】:今天我们教你用Python画出世界石油分布桑基图,Python技术部分可以直接看第四部分。

    CDA数据分析师
  • GDC server down解决方案

    Y大宽
  • bootstrap3 css样式

    <p class="lead"> Packtís mission is to help the world put software to work in n...

    用户5760343

扫码关注云+社区

领取腾讯云代金券