怎么在vue中使用uni-app 實現(xiàn)一個小程序登錄注冊功能

今天就跟大家聊聊有關(guān)怎么在vue中使用uni-app 實現(xiàn)一個小程序登錄注冊功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

思路：

1.使用微信的 open-type="getUserInfo" 獲取用戶信息，將用戶信息保存到userinfoDetails對象中去。

<button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">預(yù)約掛號</button>

2.使用 uni.login() 獲取code,并且把code傳給后臺，后臺會返回openid

3.使用vuex和本地緩存保存相關(guān)狀態(tài)值

備注vuex和本地緩存的區(qū)別:

vuex是響應(yīng)式更新,頁面不刷新數(shù)據(jù)也會實時更新,但是頁面一刷新,數(shù)據(jù)可能會失效

本地緩存不會響應(yīng)式更新,但是一刷新本地緩存就會更新。所以二者結(jié)合使用，前端小白不知道這個做法是否科學(xué)，

我把調(diào)用登錄注冊的方法封裝到公共方法里

代碼如下

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) // 用戶還沒注冊過需調(diào)用此方法
    console.log('我還沒有注冊')
    } else {
    uni.showToast({
     title: '登錄成功',
     icon: 'success',
     duration: 2000
    })
    store.commit('login', res.data) // vuex的方法，存openid，userinfo，和更改isloginstatus狀態(tài)值
    uni.setStorageSync('StorageloginStatus',true) // 補充本地存儲 localStorage解決vuex刷新數(shù)據(jù)不保留
    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狀態(tài)值
   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調(diào)用

用Vuex中的isloginStatus和緩存中的StorageloginStatus來控制是否顯示登錄的按鈕

<button v-if="isloginStatus || StorageloginStatus" type="primary" class="reserve-btn" @click="goreserve">跳轉(zhuǎn)</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是二維碼攜帶的參數(shù) 
  },
  // 當(dāng)注冊或者登錄成功 顯示路由按鈕
  goreserve() {
  console.log('去掛號了')
  }
 }
 }

vuex

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

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 isloginStatus: false,
 userinfo: "", // 狀態(tài)值
 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

看完上述內(nèi)容，你們對怎么在vue中使用uni-app 實現(xiàn)一個小程序登錄注冊功能有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。