Uni-App之微信小程序实际开发之登录

左手的ㄟ右手 2023-07-19 08:12 21阅读 0赞

**小程序的登录有好几种方式吧，我目前接触过的就只有微信授权登录和账号密码登录，那现在这个项目讲的就是*账号密码登录***  
实现效果：输入账号密码进行登录，登录判断成功跳转到首页  
实现原理：

*  搭建静态页面  
    1.搭建静态页面就是按照UI图来搭建。  
    2.其中style里会用到scss或者less需要编译的样式方法，就需要额外配置  
    开启方式：工具->插件安装->安装完成，启用即可  
    （图片来自于[https://www.cnblogs.com/cisum/p/10009189.html][https_www.cnblogs.com_cisum_p_10009189.html]）  
    ![在这里插入图片描述][20200330101608872.gif]  
    3.form提交表单可以参照HelloUni（在创建一个新项目时选择hello Uni-app）中的组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]  
    HelloUni项目中有很多案例和组件可以给我们作为参照去编写的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
    form表单登录还可以做验证，但是要注意需要引入的验证文件  
    **Uni-app的input框也可以使用v-modle的双向绑定**
 *  网络请求登录  
    1.官方请求方式（[https://uniapp.dcloud.io/api/request/request][https_uniapp.dcloud.io_api_request_request]）  
    2.npm插件请求（[https://www.cnblogs.com/syncmr/p/11139611.html][https_www.cnblogs.com_syncmr_p_11139611.html]）  
    npm 下载和vue项目一样，打开终端输入命令行安装即可。  
    插件请求UniRequest的全局配置可写在main.js文件中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]  
    ***!!!请求时需要注意 当请求的参数有数组时，请求方法需要用官方的请求方式!!!***
 *  登录 成功后就要存储登录状态和返回信息就要用到Vuex  
    参考案例（[https://www.cnblogs.com/qiu-Ann/p/11346854.html][https_www.cnblogs.com_qiu-Ann_p_11346854.html]）  
    （[https://ask.dcloud.net.cn/article/35661][https_ask.dcloud.net.cn_article_35661]）

**！！！注意！！！**  
在使用vueX中的内容是需要在引用的页面引入

vuex代码块

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({
    	state:{
    		 userInfo:{},//全局用户信息
    		 haslogin:false,//是否登录
    		 firewaringred:false,
    	},
    	mutations:{
    		login(state,userdata){
    			state.haslogin = true;
    			state.userInfo = userdata;
    			uni.setStorage({//将数据存储在本地缓存中指定的key中，这是异步
    				key:'userInfo',
    				data:userdata
    			})
    		},
    		isread(state,status){
    			state.firewaringred = status
    		},
    		logout(state){
    			state.haslogin = false;
    			state.userInfo ={}
    			uni.removeStorage({//从本地缓存中异步移除指定key
    				key:'userInfo'
    			})
    		}
    	}
    })
    export default store

在main.js中注册为全局

import store from './stroe/index.js'
    Vue.prototype.$store = store;

![在这里插入图片描述][20200330104858577.png]  
mutations中方法使用，要展开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]  
State里的值使用  
![在这里插入图片描述][20200330105104234.png]

完成以上的就实现登录效果了

[https_www.cnblogs.com_cisum_p_10009189.html]: https://www.cnblogs.com/cisum/p/10009189.html
[20200330101608872.gif]: /images/20230528/b7a2185976ed40ef8c74413e0a1c1bd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20230528/598b6169612c4aca92cebef5d4cece49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/05a9801cb0c949d9a85d39669e5d0b68.png
[https_uniapp.dcloud.io_api_request_request]: https://uniapp.dcloud.io/api/request/request
[https_www.cnblogs.com_syncmr_p_11139611.html]: https://www.cnblogs.com/syncmr/p/11139611.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/4efb85bf19734769b964b6958f504295.png
[https_www.cnblogs.com_qiu-Ann_p_11346854.html]: https://www.cnblogs.com/qiu-Ann/p/11346854.html
[https_ask.dcloud.net.cn_article_35661]: https://ask.dcloud.net.cn/article/35661
[20200330104858577.png]: /images/20230528/61ba1836994747718b9333bb42cdd574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]: /images/20230528/ddc3820dc5394dcdb75127596eeabacb.png
[20200330105104234.png]: /images/20230528/ce2886b44bbb4571ad40813a3de73daa.png