uni-app 实现小程序登录注册功能

2019-10-11 admin

思路:

1.使用微信的open-type="getUserInfo"获取用户信息,将用户信息保存到userinfoDetails对象中去。

<button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button>

2.使用uni.login()获取code,并且把code传给后台,后台会返回openid
3.使用vuex和本地缓存保存相关状态值

备注vuex和本地缓存的区别: vuex是响应式更新,页面不刷新数据也会实时更新,但是页面一刷新,数据可能会失效 本地缓存不会响应式更新,但是一刷新本地缓存就会更新。所以二者结合使用,前端小白不知道这个做法是否科学,

我把调用登录注册的方法封装到公共方法里

代码如下

import store from '@/store'
const app = {
    apiUrl: 'https://hoxxxxxxxxop.com/', //请求的地址
    _getuserinfo(res,ppid) {
        var that = this
        var userinfoDetails = {}
        userinfoDetails = res.detail.userInfo
        uni.getUserInfo({
          provider: 'weixin',
          success: function () {
            uni.login({
                success:function(res){
                    uni.showLoading({
                        title: '登陆中...',
                        mask: false
                    });
                    uni.request({
                        url: that.apiUrl + 'small/id?code=' + res.code,
                        success: (res) => {
                            console.log(res)
                            if (res.data.openid) {
                                userinfoDetails.openid = res.data.openid
                                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/avatarUrl/g, "headimgurl"));
                                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/gender/g, "sex"));
                                userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/nickName/g, "nickname"));
                                delete userinfoDetails.language;
                                userinfoDetails.ppid = ppid || ''
                                console.log(userinfoDetails)
                                uni.setStorageSync('userinfoDetails',userinfoDetails)
                            }
                            if(res.data.status == 0) {
                                that.sendInfo(userinfoDetails) // 用户还没注册过需调用此方法
                                console.log('我还没有注册')
                            } else {
                                uni.showToast({
                                    title: '登录成功',
                                    icon: 'success',
                                    duration: 2000
                                })
                                store.commit('login', res.data) // vuex的方法,存openid,userinfo,和更改isloginstatus状态值
                                uni.setStorageSync('StorageloginStatus',true) // 补充本地存储 localStorage解决vuex刷新数据不保留
                                uni.setStorageSync('Storageopenid',res.data.openid)
                                uni.setStorageSync('Storageuserinfo',res.data.userinfo)
                            }
                            if (res.data.status == 0 && res.data.userinfo == 0) {
                                uni.showToast({
                                    title: '登录失败',
                                    duration: 2000
                                })
                            }
                        }
                    })
                }
            })
          }
        });
    },
    sendInfo(userinfoDetails) {
        var that = this
        uni.request({
            url: this.apiUrl + 'sm/vip', //注册接口
            data: userinfoDetails,
            method: 'POST',
            success: (res) => {
                if(res.data.userinfo == 1) {
                    uni.hideLoading()
                    uni.showToast({
                        title: '注册成功',
                        icon: 'success',
                        duration: 2000
                    })
                    store.commit('login', res.data) // vuex的方法,存openid,userinfo,和更改isloginstatus状态值
                    uni.setStorageSync('StorageloginStatus',true)
                    uni.setStorageSync('Storageopenid',res.data.openid)
                    uni.setStorageSync('Storageuserinfo',res.data.userinfo)
                } else {
                    uni.hideLoading()
                    uni.showToast({
                        title: res.data.msg,
                        duration: 2000
                    })
                }
            }
        })
    }
}
export default app;

在index.vue调用

用Vuex中的isloginStatus和缓存中的StorageloginStatus来控制是否显示登录的按钮
<button v-if="isloginStatus || StorageloginStatus" type="primary" class="reserve-btn" @click="goreserve">跳转</button>
<button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">登录</button>

import app from '../../common/config.js'

export default {
        data() {
            return {
                ppid: "",
                StorageloginStatus: false
            }
        },
        computed: mapState({
            isloginStatus: state => state.isloginStatus,
        }),
        onLoad(option) {
            this.ppid = this.scene_decode(option.scene).ppid //封装的scene_decode() 方法
            this.StorageloginStatus = uni.getStorageSync('StorageloginStatus')
        },
        methods: {
            // 获取用户信息
            getuserinfo(res) {
                app._getuserinfo(res,this.ppid) // 封装好的方法 res是微信返回的用户信息,ppid是二维码携带的参数    
            },
            // 当注册或者登录成功 显示路由按钮
            goreserve() {
                console.log('去挂号了')
            }
        }
    }

vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        isloginStatus: false,
        userinfo: "", // 状态值
        openid: "", 
        userinfoDetails: {} ,// 头像姓名城市等。。。
        ppid: ""
    },
    mutations: {
        login(state,res) {
            state.isloginStatus = true,
            state.userinfo = res.userinfo, // 如果userinfo==1 --->已登录
            state.openid = res.openid 
        },
        saveUserinfoDetails(state,res) {
            state.userinfoDetails = res
        },
        savePPid(state,id) {
            stage.ppid = id // 存ppid
        }
    },
})

export default store

[转载]原文链接:https://segmentfault.com/a/1190000020648835

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77126.html

文章标题:uni-app 实现小程序登录注册功能

相关文章
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
回到顶部