【小程序商城入门实战教程】1-实现注册登录业务

1、系列目录

---

• 【小程序商城入门实战教程】1-实现注册登录业务

---

2、概览

该文章适用于拥有前端基础的同学。通过本篇文章，你将会掌握小程序的一些基本开发流程。当前教程主要以本地开发为主，不涉及云开发。本地测试需点击小程序开发工具右侧详情-本地设置-勾选不校验合法域名，否则无法访问本地测试接口

该篇主要分为封装请求，编写登录注册接口及页面功能调用，主要目录结构如下

│  .eslintrc.js
│  app.js
│  app.json
│  app.wxss
│  jsconfig.json
│  project.config.json
│  project.private.config.json
│  README.md
│  sitemap.json
├─images
│      account.png
│      home_no_selected.png
│      home_selected.png
│      logo.png
│      my_no_selected.png
│      my_selected.png
│      password.png
│
├─pages
│  ├─home
│  ├─login
│  │      login.js
│  │      login.json
│  │      login.wxml
│  │      login.wxss
│  ├─register
│  │      register.js
│  │      register.json
│  │      register.wxml
│  │      register.wxss
│  └─splash
│          splash.js
│          splash.json
│          splash.wxml
│          splash.wxss
└─utils
        request.js
        requestAddress.js
        util.js

2、定义登录注册接口

2.1、定义通用请求接口

为方便统一接口请求管理，我们可以在utils目录下，新建request.js和requestAddress.js文件。

先在app.js全局配置文件中定义baseUrl

globalData: {
    baseUrl: "http://localhost:8000"
}

request.js文件封装基础请求，常用返回码有token过期（304），成功（200），登录注册即其他请求失败事件返回（500）

const app = getApp();
let baseUrl = app.globalData.baseUrl;
let loginType = app.globalData.loginType;
let registerType = app.globalData.registerType;

// 构建通用请求头，带入token值
function CreateHeader(url, type){
    let header = {}
	if (type == 'POST') {
		header = {
			'content-type': 'application/json',
			'token': wx.getStorageSync('token')
		}
	} else {
		header = {
			'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
			'token': wx.getStorageSync('token')
		}
	}
	return header;
}

//封装POST请求
function postRequest(url, data, type){
    let header = CreateHeader(url, 'POST');
    if(type == null){
        wx.showLoading({
            title: "加载数据中...",
            mask: true,
        });
    }
    return new Promise((resolve, reject) => {
        wx.request({
            // 拼接请求url
            url: baseUrl + url,
            // 发往后台的json数据
            data: data,
            // 请求头
            header: header,
            method: 'POST',
            dataType: 'json',
            success: (res)=>{
                console.log("res:"+ res)
                if(type == null){
                    wx.hideLoading();
                }
                var data = res.data;
                if(data.code == 200){
                    if(type == loginType){
                        // 保存token
                        wx.setStorage({
                            key: 'token',
                            data: data.token,
                        });
                        wx.showToast({
                            title: data.message,
                            icon: 'none',
                            duration: 1500,
                        })
                        wx.switchTab({
                            url: 'pages/home/home',
                        })
                    }else if (type == registerType){
                        wx.showToast({
                            title: data.message,
                            icon: 'none',
                            duration: 1500,
                        })
                        wx.navigateTo({
                            url: 'pages/login/login',
                        })
                    }
                }
                // token过期
                if(data.code == 304){
                    if(flag){
                        flag = false;
                        wx.showToast({
                            title: '请先登录',
                            icon: 'none',
                            duration: 1500,
                            success() {
                                var timer = setTimeout(function () {
                                    flag = true;
                                    // 跳转登录
                                    wx.navigateTo({
                                        url: '/pages/login/login',
                                    })
                                    
                                    clearTimeout(timer)
                                }, 1600);
                            }
                        })
                    }
                }else if(data.statusCode == 500){
                    wx.showToast({
                        title: data.message,
                        icon: 'none',
                        duration: 1500,
                    })
                }
                reject(data)
            },
            fail: (res)=>{
                if(type == null){
                    wx.hideLoading();
                }
                reject(res)
            },
            complete: ()=>{}
        });
    })

}

function getRequest(url){
    let header = CreateHeader(url, 'GET');
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseUrl + url,
            data: '',
            header: header,
            method: 'GET',
            success: (res)=>{
                var data = res.data;
                if(data.code == 200){
                    
                }
                // token过期
                if(data.code == 304){
                    if(flag){
                        flag = false;
                        wx.showToast({
                            title: '请先登录',
                            icon: 'none',
                            duration: 1500,
                            success() {
                                var timer = setTimeout(function () {
                                    flag = true;
                                    // 跳转登录
                                    wx.navigateTo({
                                        url: '/pages/login/login',
                                    })
                                    
                                    clearTimeout(timer)
                                }, 1600);
                            }
                        })
                    }
                }else if(data.statusCode == 500){
                    wx.showToast({
                        title: data.message,
                        icon: 'none',
                        duration: 1500,
                    })
                }
                reject(data)
            },
            fail: (res)=>{
                reject(data)
            },
            complete: ()=>{}
        });
    })
}

module.exports = {
    postRequest,
    getRequest,
}

requestAddress.js配置文件

// 引入上边写好的request
import { postRequest } from './request'

const app = getApp();
let loginType = app.globalData.loginType;
let registerType = app.globalData.registerType;

// 定义login请求
export const login = data => postRequest('/account/login',data,loginType)
// 定义register请求
export const register = data => postRequest('/account/register',data,registerType)

login.js中调用请求

//登录事件
goLogin(){
    //相关判断逻辑
      
    // 登录请求
    login({
        phone: phone,
        password: password
    }).then(res => {
    }).catch(err => {
    })
}

register.js调用注册请求

//注册事件
goRegister(){
    //相关判断逻辑
      
    // 注册请求
    register({
        phone: phone,
        password: password
    }).then(res => {
    }).catch(err => {
    })
}

2.2、通过页面按钮调用接口请求

页面按钮通过bindtap绑定js中定义的对应方法，当用户输入账号密码点击按钮，即可触发请求操作，完成登录注册的流程

login.wxml页面登录按钮

<!-- 登录按钮 -->
<view class="login">
	<button class="btn-dl" type="primary" bindtap="goLogin">登录</button>
</view>

register.wxml页面注册按钮

<!-- 注册按钮 -->
<view class="register">
    <button class="btn-dl" type="primary" bindtap="goRegister">注册</button>
</view>