介绍 vue的优点 & lt; button v-else 类型=皃rimary",类=皉eserve-btn",开式=癵etUserInfo", @getuserinfo=癵etUserInfo"在预约挂号& lt;/button> import store 得到& # 39;@/商店# 39;
const app =, {
,apiUrl: & # 39; https://hoxxxxxxxxop.com/& # 39;,,//请求的地址
,_getuserinfo (res ppid), {
,var that =,
,var userinfoDetails =, {}=,userinfoDetails res.detail.userInfo
,uni.getUserInfo ({
,,提供者:& # 39;weixin& # 39;
,,成功:function (), {
uni.login({才能
成功:才能函数(res) {
,,uni.showLoading ({
,,,标题:& # 39;登陆中…& # 39;,
,,面具:假
,,});
,,uni.request ({
,,,url: that.apiUrl +, & # 39;?id ?代码=& # 39;,+,res.code,
,才能成功:,(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(/性别/g,“sex"));
,,,userinfoDetails =, JSON.parse (JSON.stringify (userinfoDetails) .replace(/昵称/g,“nickname"));
,,,delete userinfoDetails.language;
,,,userinfoDetails.ppid =, ppid | |, & # 39; & # 39;
,,,console.log (userinfoDetails)
,,,uni.setStorageSync (& # 39; userinfoDetails& # 39;, userinfoDetails)
,,,}
,,,如果(res.data.status ==, 0), {
,,,that.sendInfo (userinfoDetails),//,用户还没注册过需调用此方法
,,,console.log(& # 39;我还没有注册& # 39;)
,,,},{else
,,,uni.showToast ({
,,,,标题:,& # 39;登录成功& # 39;,
,,,,图标:,& # 39;成功# 39;
,,,,时间:2000年
,,,})
,,,store.commit(& # 39;登录# 39;,,res.data),//, vuex的方法,存openid,用户信息,和更改isloginstatus状态值
,,,uni.setStorageSync (& # 39; StorageloginStatus& # 39;,真的),//,补充本地存储,localStorage解决vuex刷新数据不保留
,,,uni.setStorageSync (& # 39; Storageopenid& # 39;, res.data.openid)
,,,uni.setStorageSync (& # 39; Storageuserinfo& # 39;, res.data.userinfo)
,,,}
,,,if (res.data.status ==, 0,,,, res.data.userinfo ==, 0), {
,,,uni.showToast ({
,,,,标题:,& # 39;登录失败& # 39;,
,,,,时间:2000年
,,,})
,,,}
,,}
,,})
,,}
})才能
,,}
,});
},
,sendInfo (userinfoDetails), {
,var that =,
,uni.request ({
url:才能,this.apiUrl +, & # 39; sm/贵宾# 39;,,//注册接口
,,数据:userinfoDetails,
方法:才能,& # 39;文章# 39;
,,成功:(res),=祝辞,{
如果才能(res.data.userinfo ==, 1), {
,,uni.hideLoading ()
,,uni.showToast ({
,,,标题:& # 39;注册成功& # 39;,
,,,图标:& # 39;成功# 39;
,,时间:2000年
,,})
,,store.commit(& # 39;登录# 39;,,res.data),//, vuex的方法,存openid,用户信息,和更改isloginstatus状态值
,,uni.setStorageSync (& # 39; StorageloginStatus& # 39;,真的)
,,uni.setStorageSync (& # 39; Storageopenid& # 39;, res.data.openid)
,,uni.setStorageSync (& # 39; Storageuserinfo& # 39;, res.data.userinfo)
,,},{else
,,uni.hideLoading ()
,,uni.showToast ({
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
今天就跟大家聊聊有关怎么在vue中使用uni-app实现一个小程序登录注册功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
思路:
1。使用微信的,<代码>开式=癵etUserInfo"获取用户信息,将用户信息保存到userinfoDetails对象中去。
2。使用,uni.login()获取代码,并且把代码传给后台,后台会返回openid
3。使用vuex和本地缓存保存相关状态值
<强>备注vuex和本地缓存的区别:
vuex是响应式更新,页面不刷新数据也会实时更新,但是页面一刷新,数据可能会失效
本地缓存不会响应式更新,但是一刷新本地缓存就会更新。所以二者结合使用,前端小白不知道这个做法是否科学,
我把调用登录注册的方法封装到公共方法里
代码如下
