国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）

2年前作者：無名joker分類：Toy博客閱讀(23)違法舉報

這篇具有很好參考價值的文章主要介紹了微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、登陸

在登錄表單里，輸入賬號、密碼進行登錄，在賬號、密碼輸入框里都有友好的提示信息；登錄按鈕
默認是灰色不可用狀態(tài)，只有輸入內(nèi)容后，才會變?yōu)榭捎脿顟B(tài)；在登錄按鈕的下面提供手機快速注
冊、企業(yè)用戶注冊、找回密碼鏈接；界面最下面是微信、QQ第三方登錄方式，如圖所示。
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
示例代碼
(1) 創(chuàng)建一個form項目，填寫AppID，后端服務(wù)選擇“不使用云服務(wù)”，如圖所示，并在pages同
目錄下創(chuàng)建一個images目錄，用于保存項目中需要用到的圖片。

(2) 在app.json文件里添加"pages/login/login",“pages/mobile/mobile”,
“pages/company/company” 3個文件目錄，并刪除默認的文件目錄以及相應(yīng)的文件夾，如圖
所示。
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
(3) 在“pages/login/login.wxml”文件里，進行賬號密碼輸入框布局設(shè)計，代碼如下所示。

<!--pages/login/login.wxml-->
<view class="content">
  <view class="account">
      <view class="title">賬號</view>
      <view class="num">
          <input type="text" bindinput="nameInput" placeholder="賬號/郵箱/手機號" placeholder-style="color:#999;" />
        </view>
  </view>
  <view class="hr"></view>
  <view class="account">
      <view class="title">密碼</view>
      <view class="num">
          <input type="password" bindblur="passwordBlur" placeholder="請輸入密
碼" placeholder-style="color:#999;" />
        </view>
      <view class="see">
         
      <image src="/images/see.jpg" style="width: 42px; height:32px;" />
       
    </view>
  </view>
  <view class="hr"></view>
</view>

(4) 在“pages/login/login.wxss”文件中添加相應(yīng)的樣式，代碼如下所示：

/* pages/login/login.wxss */
.content {
  margin-top: 20px;
}

.account {
  display: flex;
  flex-direction: row;
}

.title {
  margin: 10px;
  font-weight: bold;
}

.num {
  margin: 10px;
}

.hr {
  height: 1px;
  width: 90%;
  background-color: #ccc;
  opacity: 0.2;
}

.see {
  position: absolute;
  right: 20px;
}

運行效果如下圖所示：
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
(5) 在“pages/login/login.wxml”文件里，進行登錄按鈕、手機快速注冊、企業(yè)用戶注冊、找回
密碼以及第三方登錄布局的設(shè)計，代碼如下:

<!--pages/login/login.wxml-->
<view class="content">
  <view class="account">
    <view class="title">賬號</view>
      <view class="num">
      <input type="text" bindinput="nameInput" placeholder="賬號/郵箱/手機號" placeholder-style="color:#999;" />
       
    </view>
  </view>
  <view class="hr"></view>
  <view class="account">
      <view class="title">密碼</view>
      <view class="num">
          <input type="password" bindblur="passwordBlur" placeholder="請輸入密碼" placeholder-style="color:#999;" />
        </view>
      <view class="see">
         
      <image src="/images/see.jpg" style="width: 42px; height:32px;" />
       
    </view>
  </view>
  <view class="hr"></view>
  <button class="btn" disabled="{{disabled}}" type="{{btnType}}" bindtap="login">登錄</button>
  <view class="operate">
      <view>
          <navigator url="../mobile/mobile">手機快速注冊</navigator>
        </view>
      <view>
          <navigator url="../company/company">企業(yè)用戶注冊</navigator>
        </view>
  </view>
  <view class="login">
      <view>
          <image src="/images/wxlogin.jpg" style="width:70px;height:98px;">
      </image>
        </view>
      <view>
          <image src="/images/qqlogin.jpg" style="width:70px;height:98px;">
      </image>
        </view>
  </view>
</view>

(6) 在“pages/login/login.wxss”文件里添加對應(yīng)的樣式，代碼如下：

/* pages/login/login.wxss */
.content {
  margin-top: 20px;
}

.account {
  display: flex;
  flex-direction: row;
}

.title {
  margin: 10px;
  font-weight: bold;
}

.num {
  margin: 10px;
}

.hr {
  height: 1px;
  width: 90%;
  background-color: #ccc;
  opacity: 0.2;
}

.see {
  position: absolute;
  right: 20px;
}

.btn {
  margin-top: 40px;
  color: #999;
}

.operate {
  display: flex;
  flex-direction: row;
}

.operate view {
  margin: 0 auto;
  margin-top: 40px;
  font-size: 14px;
  color: #333333;
}

.login {
  display: flex;
  flex-direction: row;
  margin-top: 150px;
}

.login view {
  margin: 0 auto;
}

運行效果如下：
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
(7) 在“pages/login/login.js”文件中添加nameInput、passwordBlur事件函數(shù)，當(dāng)賬號里輸入
內(nèi)容后，登錄按鈕變?yōu)榭捎脿顟B(tài)，代碼如下所示:

/**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    disabled: true,
    btnType: "default",
    name: "",
    password: ""
  },


  //輸入賬戶觸發(fā)的事件
  nameInput(e) {
    var account = e.detail.value; //獲取賬號的值
    if (account != "") {
      this.setData({ disabled: false, btnType: "primary", name: account });
    }
  },

  //輸入密碼觸發(fā)的事件
  passwordBlur(e) {
    var pwd = e.detail.value;
    if (pwd != "") {
      this.setData({ password: pwd });
    }
  },

運行結(jié)果如下：
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）

二、手機號注冊設(shè)計

在手機號注冊里，需要設(shè)計輸入框用來輸入手機號，設(shè)計同意注冊協(xié)議以及下一步按鈕，如圖所
示。
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
示例代碼
(1) 在“pages/mobile/mobile.wxml”文件里，進行手機號輸入框布局設(shè)計，代碼如下所示。

<view class="content">
  <view class="hr"></view>
  <view class="numbg">
      <view>+86</view>
      <view><input placeholder="請輸入手機號" maxlength="11" bindblur="mobileblur" /></view>
  </view>
</view>

(2) 在“pages/mobile/mobile.wxss”文件里添加相應(yīng)的樣式，代碼如下所示。

.content {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}

.hr {
  padding-top: 20px;
}

.numbg {
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  border: 1pxsolid#cccccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
}

.numbg view {
  margin-left: 20px;
  margin-top: 14px;
}

運行結(jié)果如下所示：
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
(3) 在“pages/mobile/mobile.wxml”文件里，設(shè)計注冊協(xié)議和下一步按鈕操作，代碼如下所
示。

<!--pages/mobile/mobile.wxml-->
<view class="content">
  <view class="hr"></view>
  <view class="numbg">
      <view>+86</view>
      <view><input placeholder="請輸入手機號" maxlength="11" bindblur="mobileblur" /></view>
  </view>
  <view class="xieyi">
        <icon type="success" color="red" size="18"></icon>
        <text class="agree">同意</text>
        <text class="opinion">京東用戶注冊協(xié)議</text>
      </view>
</view>
<view>
  <button class="btn" disabled="{{disabled}}" type="{{btnType}}" bindtap="login">下一步</button>
</view>

(4) 在“pages/mobile/mobile.wxss”文件里添加相應(yīng)的樣式，代碼如下所示。

/* pages/mobile/mobile.wxss */
.content {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}

.hr {
  padding-top: 20px;
}

.numbg {
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  border: 1pxsolid#cccccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
}

.numbg view {
  margin-left: 20px;
  margin-top: 14px;
}

.xieyi {
  margin-top: 15px;
  margin-left: 15px;
}

.agree {
  font-size: 13px;
  margin-left: 5px;
  color: #666666;
}

.opinion {
  font-size: 13px;
  color: #000000;
  font-weight: bold;
}

.btn {
  width: 90%;
  margin-top: 30px;
}

運行效果如下：
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
(5) 在“pages/mobile/mobile.js”文件里，添加mobileblur事件，如果輸入手機號，下一步按
鈕變?yōu)榭捎脿顟B(tài)，代碼如下所示。

/**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    disabled: true,
    btnType: "default",
    mobile: ""
  },


  //當(dāng)輸入手機號結(jié)束以后，失去焦點時觸發(fā)的事件。
  mobileblur(e) {
    var phone = e.detail.value;
    if (phone != "") { //當(dāng)完成輸入時，“下一步”可用
      this.setData({ disabled: false, btnType: "primary", mobile: phone });
    } else {
      this.setData({ disabled: true, btnType: "default", mobile: "" });
    }
  },

運行結(jié)果如下：
微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）
(6) 在mobile.json文件里，添加“navigationBarTitleText”這個屬性，設(shè)置導(dǎo)航標(biāo)題為手機快速
注冊，代碼如下所示：

{
"navigationBarTitleText":"手機快速注冊"
}

微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）

未完

企業(yè)用戶注冊設(shè)計未上傳，待續(xù)。有問題大家可以盡管提出，謝謝大家。文章來源地址http://www.zghlxwxcb.cn/news/detail-482498.html

到了這里，關(guān)于微信小程序登錄與注冊（沒有連接數(shù)據(jù)庫）（2023年3月31日）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • Node.js連接數(shù)據(jù)庫 實現(xiàn)注冊、登錄、判斷注冊

    Node.js連接數(shù)據(jù)庫 實現(xiàn)注冊、登錄、判斷注冊

    Node.js連接數(shù)據(jù)庫實現(xiàn)注冊，登錄，在登錄時檢測賬號是否進行注冊。 此創(chuàng)建文件夾可以不是使用Vue-cli進行創(chuàng)建，只是簡單創(chuàng)建文件夾便可。 使用npm進行mysql插件的安裝,cmd黑窗口運行下列指令 此指令運行完成，文件夾根目錄出現(xiàn) node_modules 文件 黑窗口運行 npm init 指令，出現(xiàn)

    2024年02月09日
    瀏覽(41)
  • 微信小程序連接數(shù)據(jù)庫與WXS的使用

    微信小程序連接數(shù)據(jù)庫與WXS的使用

    ? ????歡迎來到我的CSDN主頁！???? ??我是Java方文山，一個在CSDN分享筆記的博主。???? ??推薦給大家我的專欄《 微信小程序開發(fā)實戰(zhàn) 》。???? ??點擊這里，就可以查看我的主頁啦！???? Java方文山的個人主頁 ??如果感覺還不錯的話請給我點贊吧！???? ??期待

    2024年02月08日
    瀏覽(25)

  • 微信小程序登錄注冊頁面代碼

    以下是一個簡單的微信小程序注冊登錄頁面的代碼示例： 上面代碼中，index.wxml 文件定義了注冊頁面的視圖，包括用戶名、密碼、確認密碼的輸入框以及提交按鈕和一個跳轉(zhuǎn)到登錄頁面的鏈接。index.js 文件定義了注冊頁面的邏輯，當(dāng)用戶點擊提交按鈕時會發(fā)送注冊請求，并根

    2024年02月11日
    瀏覽(88)

  • Flutter框架實現(xiàn)登錄注冊功能，不連接數(shù)據(jù)庫

    要在Flutter框架中實現(xiàn)登錄和注冊功能，而不連接數(shù)據(jù)庫，可以使用本地存儲來存儲用戶信息。以下是一個簡單的示例，演示如何使用本地存儲來實現(xiàn)登錄和注冊功能。 首先，我們需要添加 shared_preferences 插件到 pubspec.yaml 文件中： 然后，在 lib 文件夾中創(chuàng)建一個新的文件夾

    2024年02月08日
    瀏覽(25)
  • MVC框架實現(xiàn)用戶登錄注冊功能（連接數(shù)據(jù)庫）

    MVC框架實現(xiàn)用戶登錄注冊功能（連接數(shù)據(jù)庫）

    一、簡單理解MVC框架 二、項目結(jié)構(gòu) 三、項目源碼 3.1 User 3.2?UserDao 3.3?RegisterDao 3.4?servletControll 3.5 servletControllRegister 3.6?web.xml 3.7?login.jsp 3.8?register.jsp 3.9?success.jsp 3.10?failure.jsp ?四、實現(xiàn)效果 總結(jié) 本篇文章主要介紹利用MVC框架去實現(xiàn)一個簡單的用戶登錄注冊功能，內(nèi)容主

    2024年02月06日
    瀏覽(38)

  • 微信小程序——登錄注冊的簡單實現(xiàn)

    首先在微信開發(fā)者工具中創(chuàng)建一個登錄注冊界面，代碼如下： longin.wxml部分： longin.wxss部分： longin.js部分： 接下來是注冊界面 register.wxml部分： register.wxss部分： register.js部分： 后端部分： 需在navicat中創(chuàng)建user表，在idea中創(chuàng)建User類

    2024年02月11日
    瀏覽(91)
  • JavaWeb實現(xiàn)簡易的注冊登錄功能（與數(shù)據(jù)庫連接）

    JavaWeb實現(xiàn)簡易的注冊登錄功能（與數(shù)據(jù)庫連接）

    一、創(chuàng)建數(shù)據(jù)庫表連接 這里我們創(chuàng)建一個數(shù)據(jù)庫名為db_user，創(chuàng)建庫的使用可視化工具很簡單就不細說了，下面sql代碼塊是我們創(chuàng)建一個簡易用戶表為了方便我們后續(xù)進行登錄注冊操作。 下面就是建好的表： 1、建一個與數(shù)據(jù)庫連接的file文件:db.properties 二、創(chuàng)建前端頁面 1、

    2024年01月19日
    瀏覽(23)
  • 微信小程序?qū)崿F(xiàn)登錄授權(quán)，并將獲取到的用戶授權(quán)信息存儲到數(shù)據(jù)庫中

    微信小程序?qū)崿F(xiàn)登錄授權(quán)，并將獲取到的用戶授權(quán)信息存儲到數(shù)據(jù)庫中

    官方開發(fā)文檔 注意：在實現(xiàn)授權(quán)登錄時，不要使用測試號進行 wx.getUserProfile使用文檔 config文件代碼如下 路由模塊 主要代碼（如果不想多個文件，可以將wxuserHandle.wxuser這個位置內(nèi)容替換為exports.wxuser的內(nèi)容） 注意： 在返回token的字符串拼接時，Bearer 后面必須有一個空格 數(shù)據(jù)

    2024年02月10日
    瀏覽(42)
  • java連接數(shù)據(jù)庫實現(xiàn)登錄與注冊小功能(小白版)

    java連接數(shù)據(jù)庫實現(xiàn)登錄與注冊小功能(小白版)

    準(zhǔn)備工作: 創(chuàng)建數(shù)據(jù)庫stu;? ? ? ? create database stu charset=utf8; 使用數(shù)據(jù)庫stu;? ? ? ? ? ? use stu; 創(chuàng)建用戶表user(id,username,password,nick) create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50)); ? 1.開始創(chuàng)建springboot工程,勾選Web-spring Web,? SQL-MyBatis Frame

    2024年02月08日
    瀏覽(18)
  • 微信小程序——如何實現(xiàn)賬號的注冊、登錄？

    微信小程序——如何實現(xiàn)賬號的注冊、登錄？

    用到的數(shù)據(jù)庫表： 用戶表：chat-user，用于存放用戶的基本信息，比如賬號、密碼、頭像等等 用戶的注冊 1.先獲取用戶信息 使用wx.getUserProfile接口，獲取用戶的基本信息 可以與一個事件進行綁定。 2.用戶輸入賬號密碼，把基本信息添加到數(shù)據(jù)庫chat-user中 完成這一步，用戶的基

    2024年02月09日
    瀏覽(103)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包