记录微信小程序开发1.请求封装

最新推荐文章于 2023-12-23 14:28:54 发布

雨中人呀

最新推荐文章于 2023-12-23 14:28:54 发布

阅读量39

点赞数

分类专栏：微信小程序开发记录文章标签：微信小程序小程序 tdesign

本文链接：https://blog.csdn.net/weixin_72915006/article/details/134441336

版权

微信小程序开发记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.项目下的app.js（小程序初始化时判断是否有token，有则跳转首页，没有则跳转登录页，页面闪烁可以加一个启动屏，单纯的放一张图片，默认是这个页面，等判断token后延迟一秒跳转到相应的页面），登录的时候获取用户信息，将其存到globalData里面，如果已经登录，也要再调一遍获取个人信息的接口，存储个人信息。

// app.js
App({
    baseURL: 'http://10.7/prod-api', // 默认后端接口地址
    // 小程序初始化调用
    onLaunch() {
        // 封装后台端口
        // 获取小程序当前版本信息（链接是介绍）             https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
        // 自动根据版本切换接口请求地址
        const {
            miniProgram: {
                envVersion
            }
        } = wx.getAccountInfoSync();
        switch (envVersion) {
            //   开发
            case 'develop':
                this.baseURL = 'http://10.7/prod-api';
                break;
                //   体验
            case 'trial':
                this.baseURL = 'https://dj.com/prod-api';
                break;
                //   正式
            case 'release':
                this.baseURL = 'https://dj.com/prod-api';
                break;
            default:
                this.baseURL = 'https://dj.com/prod-api';
                break;
        }
        // 如果登录过了
        if(this.isLogin()){
            // 获取用户信息，跳转首页
            this.getInfo()
            wx.switchTab({
                url: '/pages/home/home',
              })
        }else{
            // 未登录跳转登录页
            wx.navigateTo({
                url: '/pages/login/login',
              })
        }
    },
    // 封装请求
    request(url, params = {}) {
        console.log(url, params);
        return new Promise((resolve, reject) => {
            wx.showLoading({
                title: '...加载中'
            })
            wx.request({
                url: this.baseURL + url,
                data: params.data || '',
                header: {
                    // 'Accept': 'application/json',
                    'content-type': 'application/json',
                    'Authorization': ('Bearer ' + wx.getStorageSync('wx_token')) || ''
                },
                method: params.method || "GET",
                timeout: 6000,
                success: (result) => {
                    const errcode = [401, 403]
                    if (errcode.includes(result.data.code)) {
                        wx.showToast({
                            title: '登录过期或者未登录',
                            icon: 'none'
                        })
                        wx.removeStorageSync('token')
                        wx.redirectTo({
                            url: '/pages/login/login',
                        })
                    }
                    resolve(result)
                },
                fail: (res) => {
                    reject(res)
                },
                complete: (res) => {
                    wx.hideLoading()
                },
            })
        })
    },
    // 判断是否登录过了，登录过去会存储token，登录的时候存下token
    isLogin(){
        return !!wx.getStorageSync('wx_token')
    },
    // 获取登录人系统的账户信息（不是微信账号的信息）
    getInfo(){
        this.request('/getInfo', {method: 'get'}).then(res=>{
            if(res.data.code != '200'){
                return
            }
            // 将用户信息挂载到globalData上面，方便拿取
            this.globalData.userInfo = res.data.user
            this.globalData.roles = res.data.roles
            this.globalData.permissions = res.data.permissions
        })
    },
    globalData: {
        userInfo: null, // 系统用户信息（系统内部的账号，部门）
        roles: [], // 用户角色
        permissions: [], // 用户的权限字符
        wxUserInfo: null, // 微信用户的个人信息（微信号，微信昵称等）
        tabIndex: 0
    }
})

2.登录页面的代码，doLogin.js, 跳转到登录页面之后，输入账号密码（可能还有图片验证码）来进行登录，此处密码进行了加密，如果只是要拿到用户的微信账号信息，可以在登录之前调用wx.getUserProfile的方法来获取用户的信息，wx.login是用于获取用户的code（如果需要使用，有效时间五分钟）

const {
    request,
    getInfo,
    globalData
} = getApp()
import Base64 from "../../utils/base64.js";
Page({
    /**
     * 页面的初始数据
     */
    data: {
        userName: '',
        password: '',
        codeUrl: '',
        uuid: '',
        code: ''
    },
    // 账号
    userNameInput(e) {
        this.setData({
            userName: e.detail.value
        })
    },
    // 密码
    pwdInput(e) {
        this.setData({
            password: e.detail.value
        })
    },
    // 验证码输入
    codeInput(e) {
        this.setData({
            code: e.detail.value
        })
    },
    // 更新验证码
    getCode() {
        request('/captchaImage', {}).then((res) => {
            console.log(res.data.img);
            this.setData({
                codeUrl: "data:image/gif;base64," + res.data.img,
                uuid: res.data.uuid
            })
        });
    },
    // 登录按钮
    login() {
        // 判断账号和密码
        let readonly = false
        let message = ''
        if (!this.data.userName) {
            readonly = true
            message = '请先输入账号'
        }
        if (!this.data.password) {
            readonly = true
            message = '请先输入密码'
        }
        if (!this.data.code) {
            readonly = true
            message = '请输入验证码'
        }
        if (readonly) {
            wx.showToast({
                title: message,
                icon: 'error'
            })
            return
        }
        let base64 = new Base64()
        const params = {
            username: this.data.userName,
            password: base64.encode(this.data.password.toString()), // 密码加密
            uuid: this.data.uuid,
            code: this.data.code,
        }
        // 看是否需要获取用户的微信个人信息（登录时调用一次）
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
            desc: '用于完善信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {
                globalData.wxUserInfo = res.userInfo
                console.log('globalData.wxUserInfo', globalData.wxUserInfo,'res', res);
                this.doLogin(params)
            }
        })
    },
    // 登录方法
    doLogin(params){
        wx.login({
            success: res => {
                console.log(res);
                wx.setStorageSync('code', res.code)
                request('/login', {
                    method: 'POST',
                    data: params
                }).then(res => {
                    if (res.data.code != 200) {
                        wx.showToast({
                            title: res.data.msg, // 有icon时最多七个文字，icon为none，可有两行，没有图标
                            icon: 'error'
                        })
                        ruturn
                    }
                    wx.switchTab({
                        url: '/pages/home/home',
                    })
                    wx.setStorageSync("wx_token", res.data.token)
                    // 调用getInfo接口将数据存放在globalData下
                    getInfo()
                })
            }
            
        })
        
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getCode()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

3.如果是登录需要60秒倒计时可以使用tdesign插件进行开发，地址tdesign，效果图（样式可以自行调整）

代码：login.wxml

<view>
    <t-image src="https://img2.baidu.com/it/u=1448293250,1259490092&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" width="100vw" height="100vh" />
    <view class="content">
        <view style="padding-bottom: 20rpx;">
            欢迎您的加入！
        </view>
        <view class="containe">
            <t-input prefixIcon="logo-github-filled" label="手机号" placeholder="请输入手机号" />
            <t-input prefixIcon="lock-off" label="验证码" placeholder="请输入验证码">
                <view slot="suffix">
                    <t-button theme="light" size="extra-small" variant="outline" wx:if="{{ readonly }}" bindtap="getCode"> 获取验证码 </t-button>
                    <view style="display: flex;" wx:if='{{ !readonly }}'>
                        <t-count-down size="large" format="ss" time="{{ time }}" theme="round" bind:finish='timeFinish'>
                        </t-count-down>
                        <view> 秒后重发</view>
                    </view>

                </view>
            </t-input>
        </view>
    </view>
    <view class="footer">
        <t-button theme="primary" size="medium" variant="outline" style="width: 75%">注 册</t-button>
    </view>
</view>

代码：login.json

{
    "usingComponents": {
        "t-image": "tdesign-miniprogram/image/image",
        "t-button": "tdesign-miniprogram/button/button",
        "t-input": "tdesign-miniprogram/input/input",
        "t-count-down": "tdesign-miniprogram/count-down/count-down"
    }
}

代码：login.js

// pages/logon/logon.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        readonly: true,
        time: 60000
    },
    // 60秒倒计时
    getCode(){
        // 获取验证码的接口，在成功的回调里面
        this.setData({
            readonly: false
        })
    },
    // 倒计时结束触发
    timeFinish(){
        this.setData({
            readonly: true
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})