2. 程式人生 > >微信小程式登入註冊demo+java伺服器(一)

微信小程式登入註冊demo+java伺服器(一)

阿新 • • 發佈：2019-01-02

一.開發平臺和前期準備

1.前端工具：微信web開發者工具


打web開發者工具，新建小程式專案，目錄和名稱自己隨意填，AppID點選體驗：小程式


小程式開啟後，點選右上方的詳情，專案設定，勾選不校驗xxxxx

2.後臺開發工具：eclipse

eclipse要求是java ee版的，並配置好tomcat,後面需要建立Dynamic Web Project

3.伺服器：tomcat

4.資料庫：mysql

二.目錄截圖

1.微信開發者工具目錄截圖

其中，.wxml 字尾檔案相當於網頁的HTML，.wxss檔案相當於網頁的css，.js 字尾檔案是指令碼邏輯檔案，.json 字尾的 是JSON 配置檔案，每一個頁面都必定包含這四類檔案！


2.eclipse目錄截圖

簡單直白的講就是，xxxServlet會接收微信小程式傳過來的請求，然後xxxServlet會呼叫xxxDao完成請求，而無論是xxxServlet還是xxxDao都會呼叫xxxDTO來完成函式的呼叫，util是工具包，這包只有一個類DataAccess，該工具類是為了方便連結資料庫。毫無疑問，一個完整的小程式，不會只向伺服器傳送一個請求，那麼這時候我們就需要用到web.xml檔案來控制請求的跳轉了。

當然，我們還可以用SSM框架或者SSH框架來實現，但需要匯入各種jar包等等一系列操作，並不利於初學者掌握，有興趣的可以自己學習！

三.微信開發者工具

1.login.wxml

<view class="content">
  <view class="account">
    <view class="title">賬號</view>
    <view class="num"><input bindinput="accountInput" placeholder="使用者名稱/郵箱/手機號" placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
   <view class="account">
    <view class="title">密碼</view>
    <view class="num"><input bindblur="pwdBlur" placeholder="請輸入密碼" password placeholder-style="color:#999999;"/></view>
    
  </view>
  <view class="hr"></view>
  <button class="btn" bindtap='login' type="primary">登入</button>
</view>
<view>{{message}}</view>

2.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;
}

3.login.js

Page({
  //定義全域性變數data
  data: {
    account: "",
    password: "",
    message:""
  },
  
   //處理accountInput的觸發事件
  accountInput:function(e){
    var username = e.detail.value;//從頁面獲取到使用者輸入的使用者名稱/郵箱/手機號
    if (username != ''){
      this.setData({ account: username });//把獲取到的密碼賦值給全域性變數Date中的password
    }
  },
  //處理pwdBlurt的觸發事件
  pwdBlur:function(e){
      var pwd = e.detail.value;//從頁面獲取到使用者輸入的密碼
      if (pwd != ''){
        this.setData({ password: pwd });//把獲取到的密碼賦值給全域性變數Date中的password
      }
  },
  //處理login的觸發事件
  login: function (e) {
    wx.request({
      url: 'http://localhost:8080/API/login',//後面詳細介紹
      //定義傳到後臺的資料
      data: {
        //從全域性變數data中獲取資料
        account: this.data.account,
        password: this.data.password,
      },
      method: 'get',//定義傳到後臺接受的是post方法還是get方法
      header: {
        'content-type': 'application/json' // 預設值
      },
      success: function (res) {
        console.log("呼叫API成功");
        console.log(res.data.message);
        if (res.data.message=="ok"){
          wx.showToast({
            title: '登陸成功',
          })
        }
        else{
          wx.showModal({
            title: '提示',
            content:'使用者名稱或者密碼錯誤',
            showCancel:false
          })
        }
      },
      fail: function (res) {
        console.log("呼叫API失敗");
      }
    })
  }
})

其中，url:'http:localhost:8080/API/login'，localhost:8080，只要tomcat預設安裝完成，埠沒有改就是這個了，API是專案的名稱，login是專案檔案web.xml中的url-pattern的屬性名，url很重要，一定要確保自己沒有填錯，不然就連線不了伺服器了

4.登陸圖

5.register.wxml

<!--pages/register/register.wxml-->
<view class="content">
  <view class="account">
    <view class="title">賬號</view>
    <view class="num"><input bindinput="accountInput" placeholder="使用者名稱/郵箱/手機號" placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
   <view class="account">
    <view class="title">密碼</view>
    <view class="num"><input bindblur="pwdBlur" placeholder="請輸入密碼" password placeholder-style="color:#999999;"/></view>
    
  </view>
  <view class="hr"></view>
  <button class="btn" type="primary" bindtap="register">註冊</button>
</view>

6.register.wxss

/* pages/register/register.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;
}
.see{
  position: absolute;
  right: 20px;
}
.btn{
  width: 90%;
  margin-top:40px;
  color: #999999;
}
.operate{
   display: flex;
   flex-direction: row;
}
.operate view{
  margin: 0 auto;
  margin-top:40px;
  font-size: 14px;
  color: #333333;
}
.register{
  display: flex;
  flex-direction: row;
  margin-top:150px;
}
.register view{
  margin: 0 auto;
}

7.register.js

// pages/register/register.js
Page({

  /**
   * 頁面的初始資料
   * data為全域性變數
   */
  data: {
    account: "",
    password: ""
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
  
  },
  
  //處理accountInput的觸發事件
  accountInput: function (e) {
    var username = e.detail.value;//從頁面獲取到使用者輸入的使用者名稱/郵箱/手機號
    if (username != '') {
      this.setData({ account: username });//把獲取到的密碼賦值給date中的password
    }
  },
  //處理pwdBlur的觸發事件
  pwdBlur: function (e) {
    var pwd = e.detail.value;//從頁面獲取到使用者輸入的密碼
    if (pwd != '') {
      this.setData({ password: pwd });//把獲取到的密碼賦值給date中的password
    }
  },
  //處理register的觸發事件
  register: function (e) {
    wx.request({
      url: 'http://localhost:8080/API/register',
      //定義傳到後臺的資料
      data: {
        //從全域性變數data中獲取資料
        account: this.data.account,
        password: this.data.password
      },
      method: 'get',//定義傳到後臺接受的是post方法還是get方法
      header: {
        'content-type': 'application/json' // 預設值
      },
      success: function (res) {
        console.log("呼叫API成功");
        wx.switchTab({
          url: '../login/login'　　// 註冊成功，跳轉到登陸頁面
        })
      },
      fail: function (res) {
        console.log("呼叫API失敗");
      }
    })
  }
})

8.註冊圖

    

9.app.json

{
  "pages": [
    "pages/login/login",
    "pages/register/register"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "登入",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/login/login",
        "text": "登陸"
      },
      {
        "pagePath": "pages/register/register",
        "text": "註冊"
      }
    ]
  }
}

10.小結

以上部分是一個完整的微信小程式的前端部分，對於有一定HTML和CSS基礎的人，應該不難看懂，假如看不懂，可以先去看看微信小程式開發文件

相關推薦

微信小程式登入註冊demo+java伺服器(一)

一.開發平臺和前期準備1.前端工具：微信web開發者工具打web開發者工具，新建小程式專案，目錄和名稱自己隨意填，AppID點選體驗：小程式小程式開啟後，點選右上方的詳情，專案設定，勾選不校驗xxxxx2.後臺開發工具：eclipseeclipse要求是java ee版的，並

微信小程式登入註冊demo+java伺服器(二)

四.eclipse1.關鍵程式碼及註解LoginServletpackage yan.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; im

java解析微信小程式使用者資訊demo

1、引入maven依賴 <dependency>     <groupId>org.bouncycastle</groupId>     <artifactId>bcprov-jdk16</artifactId>

微信小程式登入Java後臺介面(詳解,附示例程式碼)

首先看一下官方文件 我們先對官方給的時序圖進行簡單的分析 1.當小程式呼叫wx.login()時,會獲得一個code(臨時登入憑證),然後我們需要用wx.request()將code傳送到自己的伺服器. 2.在伺服器的介面中,呼叫登入憑證校檢介面,將appid(

微信小程式登入(Java伺服器)

1, 首先前端會呼叫授權介面這個不用管, 呼叫授權介面以後, 會拿到微信使用者的頭像, 名稱, 前端的朋友請往這邊走, 微信小程式登入流程, 你可能走錯片場了,  我們討論的是後臺的登入 2, 我只需要知道, 當前端呼叫微信的授權介面以後, 有一個很重要的引數, 那就是co

Java實現微信小程式登入 獲取使用者資訊

小程式比公眾號授權登入 更加簡單 其實沒什麼是後臺需要處理的 前端傳過來一個code 我們儲存以下通過code獲取過來的openid就可以 其他的使用者資訊 前端小程式那邊可以獲取。首先既然是小程式登入 你要有一個你自己的小程式還是要拿到你自己的appid和appSecret

微信小程式登入狀態java後臺解密

一、登入流程圖 二、微信小程式端 doLogin:function(callback = () =>{}){ let that = this; wx.login({ success:function(loginRes){ if(l

微信小程式登入（Java）

1、思路圖解2、思路描述（1）小程式呼叫wx.login獲取code（2）小程式呼叫wx.getUserInfo得到rawData, signatrue, encryptData.（3）小程式呼叫Server並傳入前兩步獲取的code、rawData、signature、en

微信小程式登入授權

wxml檔案內容 <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInf

微信小程式登入-openid和unionid

本文轉自https://www.cnblogs.com/yaoyuqian/p/8203792.html 　　我們一般都是先獲取到微信的 unionid，然後再通過 unionid 去登入自己的網站，就可以關聯到使用者在自己網站上的 user_id，但是在小程式登入中，有時候可以獲取到

微信小程式，精選Demo合集，你確定不要嗎？

小編最近在開發小程式，也讀到了不少優秀的小程式原始碼，專案中有些需求可以直接從原始碼裡貼上複製過來，雖然這樣做不利於自己獨立編寫程式碼，但比較是給公司做專案啊，秉著效率第一的原則，簡直沒有什麼比ctrl+c,ctrl+v,更加順手了。為了感恩大家長久以來的關注和支援，小編準備了一些福利，整理了130

【※墨痕】微信小程式工具註冊步驟

1、在微信公眾平臺官網首頁（ mp.weixin.qq.com）點選右上角的“立即註冊”按鈕。 2、選擇註冊的帳號型別  選擇“小程式”，點選“檢視型別區別”可檢視不同型別帳號的區別和優優勢 3、填寫郵箱和密碼 填寫未註冊過公眾平臺、開放平臺、企業

微信小程式-03登陸demo

登陸頁面 <view> <form bindsubmit='login'> <label>賬號：</label> <input name='username'></input> <

解決微信小程式登入與釋出的一些問題

解決微信小程式的問題 圖片在電腦上顯示但在手機上卻無法顯示的問題 要使用的是本地圖片，不想把圖片上傳到網路再通過https的方式解決，解決方法如下： 1.image src中的圖片地址對英文字母大小寫敏感，必須確認大小寫對得上； 2.圖片大小問題。本地圖片要小於10KB才能順利在真機上顯示。 為什麼

微信小程式-day03-註冊頁面、路由（微信小程式頁面跳轉）、模組化

1.路由 wx.navigateTo    開啟新頁面 wx.redirectTo      頁面重定向 wx.switchTab      切換 Tab

微信小程式領取卡券 java

一、開發前準備 1：申請微信公眾號 和 微信小程式，這是兩個不同的東西，都需要單獨申請、不同的帳號； 2：微信公眾號需要開通微信卡券的功能； 3：在微信公眾號裡面去繫結小程式； 4：申請微信開放平臺，並將微信公眾號 和 微信小程式繫結到該開放平臺。（注：繫結到開發平臺下的作用只是為了

微信小程式--登入流程梳理

前言 微信小程式凡是需要記錄使用者資訊都需要登入，但是也有幾種不同的登入方式，但是在小程式部分的登入流程是一樣的。之前就朦朦朧朧地用之前專案的邏輯改改直接用了，這個新專案要用就又結合官方文件重新梳理了下，並記錄一下，好記性不如爛筆頭嘛，哈哈。 幾種登入流程設計 利用OpenId 建立新使用者 這種方式

基於Shiro,JWT實現微信小程式登入完整例子

小程式官方流程圖如下，官方地址 : developers.weixin.qq.com/miniprogram… : 如果此圖理解不清楚的地方,也可參看我的部落格 : www.cnblogs.com/ealenxie/p/… 本文是對接微信小程式自定義登入的一個完整例子實現 ，技術棧為 :

微信小程式 登入 獲取授權登入

很簡潔的版本了吧，記憶力奇差，先存起來忘記了自己再點開看 <template> <view class="container"> // 這裡面的東西不要漏 <button type="primary" open-type="g

微信小程式 —— 考勤管理Demo（前後端及資料庫）

原始碼地址： 簡要介紹 這是一個微信小程式的考勤管理Demo，包括前後端及資料庫等內容。如有錯誤或建議，歡迎指出。 前端： 後端： 平臺： Node.js 資料庫： 初始賬戶：admin，初始密碼：ad