更新记录

v1.1.1（2021-05-05）

适配H5页面

v1.1.0（2021-04-26）

插件代码结构调整， 部分优化

v1.0.12（2021-04-26）

去掉了App.vue下的样式配置， 避免影响主应用的样式

查看更多

平台兼容性

阿里云 腾讯云 支付宝云
√ × ×

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

v587-login 云函数登录

顾名思义，集合uni-id 功能，实现登录、注册等功能模板

声明

本插件基于 云端一体登录模板

伊始

打算集成登录功能，插件市场一番搜索之后，发现都是需要耦合进项目中， 改动特别大。 还有文档也不够详细, 已有的项目集成就会一阵头大。

而且为了利于后期维护，方便开发，所以萌生了造轮子的想法。

但是呢， 由于本人比较懒， 所以就一贯作风，轮子上造轮子， O(∩_∩)O哈哈~。

【注意】 示例中包含了免费的所有功能

插件结构

│  package.json
│  README.md
│
├─common
│      uqrcode.js
│
├─components
│  └─uni-qrcode
│          uni-qrcode.vue
│
├─uniCloud-aliyun
│  ├─cloudfunctions
│  │  └─user-center
│  │      │  index.js
│  │      │  package-lock.json
│  │      │  package.json
│  │      │
│  │      └─node_modules
│  │          ├─uni-captcha
│  │          └─uni-id
│  └─database
│          db_init.json
│
└─uni_modules
    ├─uni-captcha
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─uniCloud
    │      └─cloudfunctions
    │          └─common
    │              └─uni-captcha
    │                      index.js
    │                      LICENSE.md
    │                      package.json
    │
    ├─uni-config-center
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─uniCloud
    │      └─cloudfunctions
    │          └─common
    │              └─uni-config-center
    │                  │  index.js
    │                  │  package.json
    │                  │
    │                  └─uni-id
    │                          config.json
    │
    ├─uni-forms
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─components
    │      ├─uni-forms
    │      │      uni-forms.vue
    │      │      validate.js
    │      │
    │      └─uni-forms-item
    │              uni-forms-item.vue
    │
    ├─uni-icons
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─components
    │      └─uni-icons
    │              icons.js
    │              uni-icons.vue
    │              uni.ttf
    │
    ├─uni-id
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─uniCloud
    │      └─cloudfunctions
    │          └─common
    │              └─uni-id
    │                  │  index.js
    │                  │  LICENSE.md
    │                  │  package.json
    │                  │
    │                  └─node_modules
    │                      └─uni-config-center
    ├─uni-load-more
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─components
    │      └─uni-load-more
    │              uni-load-more.vue
    │
    ├─uni-popup
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─components
    │      ├─uni-popup
    │      │      keypress.js
    │      │      message.js
    │      │      popup.js
    │      │      share.js
    │      │      uni-popup.vue
    │      │
    │      └─uni-popup-share
    │              uni-popup-share.vue
    │
    ├─uni-transition
    │  │  changelog.md
    │  │  package.json
    │  │  readme.md
    │  │
    │  └─components
    │      └─uni-transition
    │              uni-transition.vue
    │
    └─v587-login
        │  common.css
        │  index.js
        │  readme.md
        │
        ├─components
        │  └─m-input
        │          m-input.vue
        │
        ├─js_sdk
        │  └─v587-toolbox
        │          common.js
        │
        ├─pages
        │  ├─invite
        │  │      invite.vue
        │  │
        │  ├─invite-reg
        │  │      invite-reg.vue
        │  │
        │  ├─invited-user
        │  │      invited-user.vue
        │  │
        │  ├─login
        │  │      login.vue
        │  │
        │  ├─pwd
        │  │      pwd.vue
        │  │      update-password.vue
        │  │
        │  ├─reg
        │  │      reg.vue
        │  │
        │  └─user
        │          user.vue
        │
        ├─static
        │  └─img
        │          apple.png
        │          logo.png
        │          more.png
        │          qq.png
        │          sinaweibo.png
        │          univerify.png
        │          weixin.png
        │
        └─store
                index.js

使用配置

所有依赖统一放置到插件包， 使用时“ 比较合并” 导入即可

依赖

  • uni-forms插件
  • uni-captcha 云函数插件
  • uni-id 云函数插件
  • uni-config-center 云函数插件
  • uni-load-more 插件
  • uni-popup 插件
  • uni-transition 插件
  • static/uni.ttf

【注意】

如果有相同文件，防止覆盖文件

  • common/uqrcode.js uQRCode二维码生成插件文件

  • common/univerify.js 统一验证登录文件

  • common/utils.js 工具类文件

  • uniCloud/cloudfunctions/user-center 用户管理云函数

  • uniCloud/database/db_init.json 数据库初始化文件（包含表 uni-id-users, uni-id-log, opendb-verify-codes）

  • uniCloud/database/JQL查询.jql 数据库初始化文件

pages.json 文件中pages节点配置如下：

"pages": [
    // #ifdef H5
    {
        "path": "uni_modules/v587-login/pages/login/login",
        "style": {
            "navigationStyle": "custom"
        }
    },
    // #endif
    // #ifndef H5
    {
        "path": "uni_modules/v587-login/pages/login/login",
        "style": {
            "navigationBarTitleText": "登录"

        }
    },
    // #endif
    // #ifdef H5
    {
        "path": "uni_modules/v587-login/pages/reg/reg",
        "style": {
            "navigationStyle": "custom"
        }
    },
    // #endif
    // #ifndef H5
    {
        "path": "uni_modules/v587-login/pages/reg/reg",
        "style": {
            "navigationBarTitleText": "注册"
        }
    },
    // #endif
    // #ifdef H5
    {
        "path": "uni_modules/v587-login/pages/pwd/pwd",
        "style": {
            "navigationStyle": "custom"
        }
    },
    // #endif
    // #ifndef H5
    {
        "path": "uni_modules/v587-login/pages/pwd/pwd",
        "style": {
            "navigationBarTitleText": "找回密码"
        }
    },
    // #endif
    // #ifdef H5
    {
        "path": "uni_modules/v587-login/pages/pwd/update-password",
        "style": {
            "navigationStyle": "custom"
        }
    },
    // #endif
    // #ifndef H5
    {
        "path": "uni_modules/v587-login/pages/pwd/update-password",
        "style": {
            "navigationBarTitleText": "修改密码"
        }
    },
    // #endif
    // #ifdef APP-PLUS
    {
        "path": "uni_modules/v587-login/pages/invite/invite",
        "style": {
            "navigationBarTitleText": "邀请好友"
        }
    },
    // #endif
    {
        "path": "uni_modules/v587-login/pages/invited-user/invited-user",
        "style": {
            "navigationBarTitleText": "受邀用户"
        }
    },
    // #ifdef H5
    {
        "path": "uni_modules/v587-login/pages/invite-reg/invite-reg",
        "style": {
            "navigationBarTitleText": "邀请注册页面",
            "navigationStyle": "custom"
        }
    }, 
    // #endif
    {
        "path": "uni_modules/v587-login/pages/user/user",
        "style": {
            "navigationBarTitleText": "我的"
        }
    }
]

或 subPackages节点配置如下：

"subPackages": [{
    "root": "uni_modules/v587-login/pages",
    "pages": [
        // #ifdef H5
        {
            "path": "login/login",
            "style": {
                "navigationStyle": "custom"
            }
        },
        // #endif
        // #ifndef H5
        {
            "path": "login/login",
            "style": {
                "navigationBarTitleText": "登录"

            }
        },
        // #endif
        // #ifdef H5
        {
            "path": "reg/reg",
            "style": {
                "navigationStyle": "custom"
            }
        },
        // #endif
        // #ifndef H5
        {
            "path": "reg/reg",
            "style": {
                "navigationBarTitleText": "注册"
            }
        },
        // #endif
        // #ifdef H5
        {
            "path": "pwd/pwd",
            "style": {
                "navigationStyle": "custom"
            }
        },
        // #endif
        // #ifndef H5
        {
            "path": "pwd/pwd",
            "style": {
                "navigationBarTitleText": "找回密码"
            }
        },
        // #endif
        // #ifdef H5
        {
            "path": "pwd/update-password",
            "style": {
                "navigationStyle": "custom"
            }
        },
        // #endif
        // #ifndef H5
        {
            "path": "pwd/update-password",
            "style": {
                "navigationBarTitleText": "修改密码"
            }
        },
        // #endif
        // #ifdef APP-PLUS
        {
            "path": "invite/invite",
            "style": {
                "navigationBarTitleText": "邀请好友"
            }
        },
        // #endif
        {
            "path": "invited-user/invited-user",
            "style": {
                "navigationBarTitleText": "受邀用户"
            }
        },
        // #ifdef H5
        {
            "path": "invite-reg/invite-reg",
            "style": {
                "navigationBarTitleText": "邀请注册页面",
                "navigationStyle": "custom"
            }
        }, 
        // #endif
        {
            "path": "/user/user",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ]
}]

【注意】跳转的时候, url前面需要添加 '/' 才能识别， 如 

uni.navigateTo({url: '/uni_modules/v587-login/pages/login/login'})

App.vue 文件中配置

<script>
    import {
        mapMutations
    } from 'vuex'

    export default {
        onLaunch: function() {
            console.log('App Launch');
            let uniIdToken = uni.getStorageSync('uni_id_token')
            if (uniIdToken) {
                this.login(uni.getStorageSync('username'))
            }

            // #ifdef APP-PLUS
            // 一键登录预登陆，可以显著提高登录速度
            uni.preLogin({
                provider: 'univerify',
                success: (res) => {
                    this.setUniverifyErrorMsg()
                    this.setHideUniverify(false);
                    console.log("preLogin success: ", res);
                },
                fail: (err) => {
                    this.setUniverifyErrorMsg(err.errMsg)
                    // 没有开通一键登录
                    this.setHideUniverify(true);
                    console.log("preLogin fail: ", err);
                }
            })
            // #endif
        },
        onShow: function() {
            console.log('App Show');
        },
        onHide: function() {
            console.log('App Hide');
        },
        methods: {
            ...mapMutations('V587Login',['login', 'setUniverifyErrorMsg', 'setHideUniverify']),
        }
    }
</script>

<style>
</style>

main.js 文件中配置

import V587Login from 'uni_modules/v587-login'

Vue.use(V587Login, {store, mainPage: '/pages/main/main'})

其中mainPage 指向登录成功之后，回调页面路径， 注意前面添加 '/'

相关状态


state: {
    // 是否需要强制登录
    forcedLogin: false,
    // 是否登录
    hasLogin: false,
    // 用户名
    userName: "",
    // 验证错误信息
    univerifyErrorMsg: "",
    // 隐藏信息
    hideUniverify: true,
    // 登录成功后回调主页地址, 【注意】以‘/’ 开头
    mainPage: '/pages/index/index'
},
mutations: {
    login(state, userName) ,
    logout(state),
    setUniverifyErrorMsg(state, payload = '') ,
    setHideUniverify(state, payload = false) ,
    SET_MAIN_PAGE(state, mainPage) 
},

actions: {
    univerifyLogin({
        commit
    }),
    univerifyErrorHandler({commit,state }, { err, cb })
}

引入方式

computed: {
    ...mapState('V587Login',['hasLogin', 'forcedLogin', 'userName', 'mainPage'])
}

methods: {
    ...mapMutations('V587Login',['login', 'logout', 'setUniverifyErrorMsg', 'setHideUniverify', 'SET_MAIN_PAGE']),
    ...mapActions('V587Login', ['univerifyLogin','univerifyErrorHandler'])
}

调用

$store.commit('V587Login/{action}', params)

如设置主页回调地址$store.commit('V587Login/SET_MAIN_PAGE', mainPage)

运行

  1. 将插件导入HBuilderX
  2. 创建服务空间，详情参考uniCloud 快速上手
  3. 上传 common 下的公用模块、在云函数 user-center 内安装 uni-id 模块并上传，公用模块参考文档
  4. 在 cloudfunctions 目录下的db_init.json右键初始化云数据库
  5. 运行到 HBuilderX 内置浏览器体验
  6. 如果运行到小程序，注意在小程序后台配置域名白名单，详见

特点

  • 前端基于uni-app实现，支持所有平台

  • 服务端基于 uniCloud 实现，用户管理基于 uni-id 实现

  • 使用 vuex 管理登录状态

  • 支持账号密码、手机号验证等多种登录模式

  • 支持裂变，可以邀请用户注册

更新

本云函数模板包含多个目录， 每次更新需要从插件市场重新导入“比较合并”

关注订阅号

关注订阅号

附

关于云函数加密篇 -- 云函数模板

package.json 文件配置了 "encrypt": ["uniCloud-(tcb|aliyun)/cloudfunctions/function/index.js" ], 为什么没有生效？

  1. 需要加密的云函数需要放置在根目录uniCloud-(tcb|aliyun)下, 并在根目录package.json 文件中配置

    当模板中包含一个或多个云函数时，不能只在插件中放入云函数目录，而需要完整的从项目根目录开始。如uniCloud/cloudfunctions/cf123。uniCloud可以接受-aliyun或-tcb 后缀（阿里云和腾讯云这两个目录也可以同时存在）；

比如我想放置在 uni_modules/v587-login/uniCloud/cloudfunctions/function/index.js, 导入项目之后自动索引到云空间， 这样是不行的（多次多种方式都不许， 会导致找不到加密文件， 如果谁清楚原因，希望告知，不甚感谢！）。

2.云函数有效的入口文件为 index.js，插件包中必须包含至少一个以此命名的文件

正确导入的文件结构为：

├─cloudfunctions
│  └─user-center
│          encrypt
│          index.js
│          package.json
│
└─database
        db_init.json

其中 encrypt 为加密文件, index.js文件为加密之后的文件, 无法正常阅读

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...