微信小程序賬號(hào)密碼登入和傳值的實(shí)現(xiàn)方法

更新時(shí)間：2022年04月26日 09:20:52 作者：回見(jiàn)青山

傳統(tǒng)的web開(kāi)發(fā)實(shí)現(xiàn)登陸功能,一般的做法是輸入賬號(hào)密碼、或者輸入手機(jī)號(hào)及短信驗(yàn)證碼進(jìn)行登錄,下面這篇文章主要給大家介紹了關(guān)于微信小程序賬號(hào)密碼登入和傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下

<!--pages/login/login.wxml-->
<view class="content">

<view class="account">
<view class="title">賬號(hào)</view>
<view class="num"><input bindinput="inputName" placeholder="教師姓名"  placeholder-style="color:#999999;"/></view>
</view>

<view class="hr"></view>

<view class="account">
<view class="title">密碼</view>
<view class="num">
<input bindinput="inputPassword" placeholder="輸入密碼" password/></view>
</view>

<view class="hr"></view>

<button class="btn" type="primary" bindtap="login">登入</button> 
 
</view>

這個(gè)是login.wxss：

/* pages/login/login.wxss */
.content{
  margin-top: 40px;
}
.account{
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
}
.title{
   margin-right: 30px;
   font-weight: bold;
}
.hr{
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
  background-color: red;
}
.btn{
  width: 90%;
  margin-top:40px;
  color: #999999;
}

這個(gè)是login.js：

let app = getApp();
// 獲取云數(shù)據(jù)庫(kù)引用
const db = wx.cloud.database();
// const admin = db.collection('user');//注意，這里就是剛才的集合的名字——user
let studentname = null;//變量，用于存放用戶輸入的賬號(hào)
let password = null;//變量，用于存放用戶輸入的密碼

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
 // data: {
  //},

  //輸入用戶名
  inputName: function (event) {
    studentname  = event.detail.value//將用戶輸入的賬號(hào)放到變量里面
  },
  //輸入密碼
  inputPassword(event) {
    password = event.detail.value//將用戶輸入的密碼放到變量里面
  },

  //登陸函數(shù)
    async  login() {
    const db = wx.cloud.database()
    let count = await db.collection('user').count()     //獲取數(shù)據(jù)庫(kù)總個(gè)數(shù)
    count=count.total     //將總個(gè)數(shù)賦值給count
  //通過(guò)for循環(huán)做多次請(qǐng)求，并把多次請(qǐng)求的數(shù)據(jù)放在一個(gè)數(shù)組里面
      let all = []
      for(let i = 0; i<count; i+=20){
        let list = await db.collection('user').skip(i).get()
        all=all.concat(list.data);
        console.log('返回的結(jié)果',all)

        for(let i=0;i<all.length;i++ ){
          if (studentname===all[i].stname) {
            if (password===all[i].password) {
              console.log('登入成功')
              wx.showToast({
                title: '登入成功',
                icon:'success',
                duration:2500
              })
              wx.reLaunch({
                url: '/pages/index/index?studentname='+studentname,//這里是成功登錄后跳轉(zhuǎn)的頁(yè)面',
              })


            } else {
              console.log('密碼錯(cuò)誤')
              wx.showToast({
                title: '密碼錯(cuò)誤',
                icon:'none',
                duration:2500
              })
            }

          } else {
            console.log('登入失敗')
            wx.showToast({
              title: '無(wú)此用戶名??！',
              icon:'none',
              duration:2500
            })
          }
  }
      }
        }
        })

在拿去使用的時(shí)候，需要更改和注意的地方如下：

1.我的云數(shù)據(jù)庫(kù)的集合名稱叫做user，在登入的時(shí)候，代碼需要查找賬號(hào)studentname和密碼password。拿去使用后需要更改代碼里面數(shù)據(jù)庫(kù)集合的名稱和里面的命名。

2.在login.js中

3.重點(diǎn)講下帶參傳值

微信路由有很多種方式，因?yàn)槲业男枰D(zhuǎn)到tabBar頁(yè)面，所以使用了wx.reLaunch。

你也可以使用wx.navigateTo來(lái)進(jìn)行帶參傳值。

但是如果你是用wx.switchTab的話是不可以的，這個(gè)微信開(kāi)發(fā)者文檔里面有說(shuō)明可以詳細(xì)的看下：

微信開(kāi)發(fā)者文檔

在進(jìn)行tabBar頁(yè)面跳轉(zhuǎn)時(shí)，你需要做的是在

app.json中進(jìn)行tabBar的代碼說(shuō)明，比如是我是兩個(gè)，所以就寫(xiě)了2個(gè)。

注意?。?！先要在app.json里面建立這2個(gè)文件，才能在進(jìn)行tabBar的代碼。

 "tabBar": {
    "color": "#Fc0",
    "selectedColor": "#f4c903",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/1.png",
        "iconPath": "images/1.png",
        "pagePath": "pages/index/index",
        "text": "登記"
      },

      {
        "selectedIconPath": "images/3.png",
        "iconPath": "images/3.png",
        "pagePath": "pages/center/center",
        "text": "排行榜"
      }
    ]
  },

下面是登入界面的跳轉(zhuǎn)路由，單獨(dú)再拿出來(lái)，給自己解釋下，方便自己下次用。

              wx.reLaunch({                             
             url: '/pages/index/index?studentname='+studentname,//這里是成功登錄后跳轉(zhuǎn)的頁(yè)面
             })

url: '/pages/index/index 這個(gè)是正常的路由地址

因?yàn)槲乙獛з~號(hào)輸入的內(nèi)容過(guò)來(lái)，所以要加英文狀態(tài)下的?，后面的寫(xiě)活的參數(shù)。因?yàn)椴挥美蠋煹妮斎氲馁~號(hào)不一樣。

那為什么是studentname呢，是因?yàn)榇a最上面獲取輸入內(nèi)容的變量命名的是studentname，所以這里用。

4.跳轉(zhuǎn)后接受

跳轉(zhuǎn)后的頁(yè)面index.wxml：

<text>您好！{{orderId}}老師！</text>

跳轉(zhuǎn)后的頁(yè)面index.js：

// index.js
Page({
onLoad: function (options) {
  console.log(options); // options里面是上級(jí)頁(yè)面?zhèn)鱽?lái)的參數(shù)（教師姓名）
  let id = options.studentname;
  this.setData({
    orderId: id
  });
}
})

把傳遞過(guò)來(lái)的studentname賦值給id，然后又setData給orderId，為什么給orderId呢？是因?yàn)樵?strong>index.wxml里面，我的文字顯示代碼變量寫(xiě)的是orderId。當(dāng)然這個(gè)要可以改。當(dāng)你把orderId改了后，請(qǐng)不要忘記js里面的orderId也改了。

總結(jié)

到此這篇關(guān)于微信小程序賬號(hào)密碼登入和傳值的文章就介紹到這了,更多相關(guān)微信小程序賬號(hào)密碼登入傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: