[Mini programa WeChat] 6 días de introducción precisa (Día 5: Casos de uso para interactuar con datos de fondo) con código fuente

Mobile 2023-10-27 18:23:54 views: null

1. ¿Qué es la interacción en segundo plano?

        En un mini programa, la interacción con el backend se refiere a la comunicación de datos y el proceso de procesamiento de solicitudes entre el front-end del mini programa y el servidor backend. Al interactuar con el fondo, el mini programa puede obtener datos del lado del servidor, cargar datos del usuario, enviar solicitudes, etc.

        La interacción entre el miniprograma y el backend puede realizar funciones como transmisión de datos, autenticación de usuario y envío de mensajes en tiempo real, proporcionando a los usuarios experiencias y funciones más ricas.

La interacción con el backend se puede lograr de las siguientes maneras:

  1. Iniciar una solicitud de red : el subprograma puede utilizar la API de solicitud de red (como wx.request) para enviar una solicitud HTTP en segundo plano para obtener los datos devueltos por el servidor en segundo plano. Se pueden utilizar diferentes tipos de solicitudes, como GET, POST, PUT y DELETE, para implementar diferentes operaciones.
  2. WebSocket : El subprograma puede utilizar la tecnología WebSocket para establecer una conexión larga con el servidor para lograr una comunicación bidireccional en tiempo real. A través de WebSocket, el subprograma puede recibir mensajes enviados por el servidor de manera oportuna y lograr actualizaciones e interacciones en tiempo real.
  3. Funciones de la nube : los miniprogramas proporcionan una plataforma de desarrollo de la nube, en la que las funciones de la nube se pueden ejecutar en el servidor en segundo plano para manejar la lógica empresarial y el procesamiento de datos complejos. Los mini programas pueden interactuar con el fondo y obtener resultados de procesamiento llamando a funciones de la nube.

2. Interacción de datos en segundo plano y encapsulación de solicitudes.

1. Preparación

  • Al utilizar la interacción de datos, debemos preparar los datos de fondo con anticipación para facilitar nuestra llamada.
  • No prepararé los datos de fondo aquí.

2. Interacción de datos de fondo

1. En el blog anterior, escribimos un archivo api.js utilizado específicamente para llamar al backend de datos . Necesitamos asegurarnos de que estos datos puedan llamarse al backend. ¡Recuerde iniciar su backend!

// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/wx/';
 
 module.exports = {
   IndexUrl: WxApiRoot + 'home/index' //首页数据接口
 };

2. Escriba el método de llamada en el js de la página que desea llamar. Recuerde imprimir en qué atributo se encuentran sus datos. Recuerde llamar el ejemplo de utilidad fuera de la página .

// 获取应用实例
const app = getApp()
const api = require("../../config/api")
 //首页会议信息的ajax
    loadMeetingInfos() {
        let that = this;
         wx.request({
             url: api.IndexUrl,
             dataType: 'json',
             success(res) {
                 console.log(res)
                 that.setData({
                     lists: res.data.data.infoList
                 })
             }
         })

    }

Luego llámelo en el método onLoad definido

    onLoad() {
        if (wx.getUserProfile) {
            this.setData({
                canIUseGetUserProfile: true
            })
        }
        this.loadMeetingInfos();
    }

Tres, solicitar encapsulación

  1. Hay un archivo utils/util,js en nuestro proyecto y en él está escrito un método.
    
/**
 * 封装微信的request请求
 */
function request(url, data = {}, method = "GET") {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            method: method,
            header: {
                'Content-Type': 'application/json',
            },
            success: function (res) {
                if (res.statusCode == 200) {
                    resolve(res.data);//会把进行中改变成已成功
                } else {
                    reject(res.errMsg);//会把进行中改变成已失败
                }
            },
            fail: function (err) {
                reject(err)
            }
        })
    });
}
module.exports = {
    formatTime,request
}

  2. Llame a un método en la página que necesita llamar para optimizar el código; tome lo anterior como ejemplo:

    // 获取应用实例
const app = getApp()
const api = require("../../config/api")
const util = require("../../utils/util.js")
 //首页会议信息的ajax
    loadMeetingInfos() {
        let that = this;

        util.request(api.IndexUrl).then(res => {
            console.log(res)
            this.setData({
                lists: res.data.infoList
            })
        }).catch(res => {
            console.log('服器没有开启，使用模拟数据!')
        })
    }

  3. El efecto es el mismo, excepto por una optimización del código.

El código completo está disponible aquí.

util.js

const formatTime = date => {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()

    return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}

const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : `0${n}`
}

/**
 * 封装微信的request请求
 */
function request(url, data = {}, method = "GET") {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            method: method,
            header: {
                'Content-Type': 'application/json',
            },
            success: function (res) {
                if (res.statusCode == 200) {
                    resolve(res.data);//会把进行中改变成已成功
                } else {
                    reject(res.errMsg);//会把进行中改变成已失败
                }
            },
            fail: function (err) {
                reject(err)
            }
        })
    });
}
module.exports = {
    formatTime,request
}

index.js

// index.js
// 获取应用实例
const app = getApp()
const api = require("../../config/api")
const util = require("../../utils/util.js")
Page({
    data: {
        imgSrcs: [{
            "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
            "text": "1"
        },
        "lists": []
    },
    //首页会议信息的ajax
    loadMeetingInfos() {
        let that = this;
        util.request(api.IndexUrl).then(res => {
            console.log(res)
            this.setData({
                lists: res.data.infoList
            })
            console.log(res.data.infoList)
        }).catch(res => {
            console.log('服器没有开启，使用模拟数据!')
        })
    },
    onLoad() {
        if (wx.getUserProfile) {
            this.setData({
                canIUseGetUserProfile: true
            })
        }
        this.loadMeetingInfos();
    }
})

3. Uso de wxs

Podemos ver los documentos abiertos de WeChat y el uso de wxs en los documentos de desarrollo de WeChat .

1. Pasos para usar wxs

  1. Primero creamos un nuevo archivo wxs en una ubicación
  2. Luego define el método dentro
    function getState(state){}
module.exports = {
    getState: getState
};
  3. Al llamar a wxml, src: es la ruta de su wxs; module: el nombre al que necesita llamar más tarde, puede elegirlo casualmente.
        <wxs src="/utils/comm.wxs" module="tools" />

  4. transferir

    <text class="list-num">{
      
      {tools.getState(item.state)}}</text>

2. Método completo

wxs


function getState(state) {
    // 状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1
    if (state == 0) {
        return '取消会议';
    } else if (state == 1) {
        return '待审核';
    } else if (state == 2) {
        return '驳回';
    } else if (state == 3) {
        return '待开';
    } else if (state == 4) {
        return '进行中';
    } else if (state == 5) {
        return '开启投票';
    } else if (state == 6) {
        return '结束会议';
    }

    return '其它';

}
function getNumber(canyuze, liexize, zhuchiren) {
    var person = canyuze + ',' + liexize + ',' + zhuchiren;
    return person.split(',').length;
}
function formatDate(ts, option) {
    var date = getDate(ts)
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var week = date.getDay()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()

    //获取 年月日
    if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

    //获取 年月
    if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

    //获取 年
    if (option == 'YY') return [year].map(formatNumber).toString()

    //获取 月
    if (option == 'MM') return [mont].map(formatNumber).toString()

    //获取 日
    if (option == 'DD') return [day].map(formatNumber).toString()

    //获取 年月日 周一 至 周日
    if (option == 'YY-MM-DD Week') return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

    //获取 月日 周一 至 周日
    if (option == 'MM-DD Week') return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

    //获取 周一 至 周日
    if (option == 'Week') return getWeek(week)

    //获取 时分秒
    if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

    //获取 时分
    if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

    //获取 分秒
    if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

    //获取 时
    if (option == 'hh') return [hour].map(formatNumber).toString()

    //获取 分
    if (option == 'mm') return [minute].map(formatNumber).toString()

    //获取 秒
    if (option == 'ss') return [second].map(formatNumber).toString()

    //默认 时分秒 年月日
    return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}

function getWeek(n) {
    switch (n) {
        case 1:
            return '星期一'
        case 2:
            return '星期二'
        case 3:
            return '星期三'
        case 4:
            return '星期四'
        case 5:
            return '星期五'
        case 6:
            return '星期六'
        case 7:
            return '星期日'
    }
}
module.exports = {
    getState: getState,
    getNumber: getNumber,
    formatDate:formatDate
};

índice.wxml

<view class="indexbg">
    <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
        <block wx:for="{
   
   {imgSrcs}}" wx:key="text">
            <swiper-item>
                <view>
                    <image src="{
   
   {item.img}}" class="swiper-item" />
                </view>
            </swiper-item>
        </block>
    </swiper>
    <wxs src="/utils/comm.wxs" module="tools" />
    <view class="mobi-title">
        <text class="mobi-icon">❤</text>
        <text class="mobi-text">会议信息</text>
    </view>
    <block wx:for-items="{
   
   {lists}}" wx:for-item="item" wx:key="item.id" class="bg">
        <view class="list" data-id="{
   
   {item.id}}">
            <view class="list-img">
                <image class="video-img" mode="scaleToFill" src="{
   
   {item.image != null ? item.image:'/static/persons/8.jpg'}}"></image>
            </view>
            <view class="list-detail">
                <view class="list-title"><text>{
   
   {item.title}}</text></view>
                <view class="list-tag">
                    <view class="state">{
   
   {tools.getState(item.state)}}</view>
                    <view class="join"><text class="list-num">{
   
   {tools.getNumber(item.canyuze,item.liexize,item.zhuzhiren)}}</text>人报名</view>
                </view>
                <view class="list-info"><text>{
   
   {item.location}}</text>|<text>{
   
   {tools.formatDate(item.starttime,'YY-MM-DD hh-mm-ss')}}</text></view>
            </view>
        </view>
    </block>
    <view class="section">
        <text>到底啦</text>
    </view>
</view>

Supongo que te gusta

Origin blog.csdn.net/weixin_74383330/article/details/133949559
Recomendado
Clasificación
Diario
Más
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)

Code World

© 2018 codetd.com