后台交互-首页->与后台数据进行交互,wsx的使用

  • 与后台数据进行交互
  • wsx的使用

1.与后台数据进行交互

// index.js
// 获取应用实例
const app = getApp()
const api=require("../../config/app.js")
const util=require("../../utils/util.js")
Page({data: {imgSrcs:[{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png","text": "1"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png","text": "2"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png","text": "3"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png","text": "4"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png","text": "5"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png","text": "6"},],},// 事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs'})},loadMeetInfos(){util.request(api.IndexUrl).then(res => {console.log(res);this.setData({lists:res.data.infoList})
});// let that=this;//   wx.request({//   url: api.IndexUrl,//   dataType: 'json',//   success(res) {//     console.log(res)//     that.setData({//         lists:res.data.data.infoList//     })//   }// })},loadSwiperImgs(){let that=this;// wx.request({//     url: api.SwiperImgs,//     dataType: 'json',//     success(res) {//       console.log(res)//       that.setData({//           imgSrcs:res.data.images//       })//     }//   })},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}this.loadSwiperImgs();this.loadMeetInfos();},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})
<!--index.wxml-->
<view><swiper indicator-dots="{{true}}" autoplay="{{true}}"><block wx:for="{{imgSrcs}}" wx:key="*text"><swiper-item><image src="{{item.img}}"></image></swiper-item></block></swiper>
</view>
<view class="mobi-title"><text class="mobi-icon"></text><text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><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/1.jpg'}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state">{{item.state}}</view><view class="join"><text class="list-num">{{item.num}}</text>人报名</view></view><view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view></view></view>
</block>
<view class="section bottom-line"><text>到底啦</text>
</view>
//oamin\config\app.js  
// 以下是业务服务器API地址// 本机开发API地址var WxApiRoot = 'http://localhost:8080/wx/';// 测试环境部署api地址// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';// 线上平台api地址//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';module.exports = {IndexUrl: WxApiRoot + 'home/index', //首页数据接口SwiperImgs: WxApiRoot+'swiperImgs', //轮播图MettingInfos: WxApiRoot+'meeting/list', //会议信息};

2.wsx的使用

<!--index.wxml-->
<view><swiper indicator-dots="{{true}}" autoplay="{{true}}"><block wx:for="{{imgSrcs}}" wx:key="*text"><swiper-item><image src="{{item.img}}"></image></swiper-item></block></swiper>
</view>
<wxs src="/utils/comm.wxs" module="tools" />
<view class="mobi-title"><text class="mobi-icon"></text><text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><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/1.jpg'}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state">{{tools.getStateName(item.state)}}</view><view class="join"><text class="list-num">{{tools.getNum(item.cnyuze,item.liexize,item.zhuchiren)}}</text>人报名</view></view><view class="list-info"><text>{{item.location}}</text>|<text>{{tools.formatDate(item.starttime)}}</text></view></view></view>
</block>
<view class="section bottom-line"><text>到底啦</text>
</view>
//utils\comm.wxs
function formatDate(ts, option) {var date = getDate(ts)var year = date.getFullYear()var month = date.getMonth() + 1var 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 '星期日'}
}
function getStateName(state){console.log(getStateName);
if(state==1){return "待审核"
}else if(state==2){
return "审核通过"
}else if(state==3){
return "审核不通过"
}else if(state==4){return "代开会议"
}  
return "其他"
}
function getNum(canyuze,liexize,zhuchiren){var person=canyuze + "," + liexize + "," + zhuchiren;return person.split(",").length;
}
module.exports = {getStateName: getStateName,getNum:getNum,formatDate:formatDate};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/115934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为OD 数组二叉树(200分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应往年部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为OD…

算法随想录算法训练营第四十四天|1143.最长公共子序列 1035.不相交的线 53. 最大子序和 动态规划

1143.最长公共子序列 题目&#xff1a;给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情…

ROI的投入产出比是什么?

ROI的投入产出比是什么&#xff1f; 投入产出比&#xff08;Return on Investment, ROI&#xff09;是一种评估投资效益的财务指标&#xff0c;用于衡量投资带来的回报与投入成本之间的关系。它的计算公式如下&#xff1a; 投资收益&#xff1a;指的是投资带来的净收入&#x…

科学指南针iThenticate自助查重系统重磅上线

科学指南针&#xff0c;一直致力于为科研工作者提供高效、专业的学术支持&#xff0c;近日推出了全新的iThenticate自助查重系统。这一系统的上线&#xff0c;旨在为广大科研工作者提供更加便捷、准确的论文查重服务&#xff0c;进一步规范英文使用&#xff0c;提升科研质量。 …

PyTorch 与 TensorFlow:机器学习框架之战

深度学习框架是简化人工神经网络 (ANN) 开发的重要工具&#xff0c;并且其发展非常迅速。其中&#xff0c;TensorFlow 和 PyTorch 脱颖而出&#xff0c;各自在不同的机器学习领域占有一席之地。但如何为特定项目确定理想的工具呢&#xff1f;本综合指南[1]旨在阐明它们的优点和…

Kotlin中的委托、属性委托和延迟加载

委托模式是一种常用的设计模式&#xff0c;用于将某个对象的责任委托给另一个对象来处理。在Kotlin中&#xff0c;委托可以通过关键字by来实现&#xff0c;主要分为类委托和属性委托两种形式。此外&#xff0c;Kotlin还提供了延迟加载的功能&#xff0c;可以在需要时才进行初始…

WebService SOAP1.1 SOAP1.12 HTTP PSOT方式调用

Visual Studio 2022 新建WebService项目 创建之后启动运行 设置默认文档即可 经过上面的创建WebService已经创建完成&#xff0c;添加HelloWorld3方法&#xff0c; [WebMethod] public string HelloWorld3(int a, string b) { //var s a b; return $"Hello World ab{a …

老卫带你学---leetcode刷题(8. 字符串转换整数 (atoi))

8. 字符串转换整数 (atoi) 问题&#xff1a; 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空…

如何高效率地阅读论文

▚ 01 Active versus passive reading: how to read scientific papers? &#x1f4e2;小疑则小悟&#xff0c;大疑则大悟&#xff0c;不疑则不悟。 If you read/do research with small questions in mind, you learn small things. If you do so with big questions in…

华为OD 食堂供餐(100分)【java】A卷+B卷

华为OD统一考试A卷B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目&#xff0c;A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载&#xff0c;请点击以下链接进入&#xff…

Unable to connect to the server: x509: certificate is valid for问题解决

文章目录 环境描述问题描述问题原因解决方案额外问题问题描述问题解决方案新问题 环境描述 Kubernetes版本1.15测试客户端centos7 问题描述 将构建于内网网络环境上的kubernetes集群的/etc/kubernetes/admin.conf文件拷贝到外网的一台装有kubernetes客户端的设备上&#xff…

机器学习中的核方法

一、说明 线性模型很棒&#xff0c;因为它们易于理解且易于优化。他们受苦是因为他们只能学习非常简单的决策边界。神经网络可以学习更复杂的决策边界&#xff0c;但失去了线性模型良好的凸性特性。 使线性模型表现出非线性的一种方法是转换输入。例如&#xff0c;通过添加特征…

ISP Pipeline典型场景要点SAT、Bokeh、MFNR、HDR

目录 一、概述 二、通用流程 三、典型场景 1. SAT 2. Bokeh背景虚化 MFNR 3. HDR&#xff08;DOL、DCG等&#xff09; 一、概述 本文解释isp pipeline的一些非常典型的场景&#xff0c;不同厂商对pipeline的连接及node的port口设计可能不同&#xff0c;但核心的思想相同…

【面试经典150 | 区间】用最少数量的箭引爆气球

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;合并区间 其他语言python3 写在最后 Tag 【合并区间】【排序】【数组】 题目来源 452. 用最少数量的箭引爆气球 题目解读 每个气球都有一个占据x轴的一个范围&#xff0c;在这个范围里射出一只箭就会引爆该气球&…

matlab常用函数

绘图函数 一、plot()&#xff1a;二维图形绘制 1、plot(y)&#xff1a; 对于只含一个输入参数的plot函数&#xff0c;如果输入参数y为向量&#xff0c;则以该参数为纵坐标&#xff0c;横坐标从1开始至与向量的长度相等&#xff1b;如果输入参数y是矩阵时&#xff0c;则按列绘…

C++笔记之关于函数名前的取址符

C笔记之关于函数名前的取址符 相关博文&#xff1a;C之指针探究(十一)&#xff1a;函数名的本质和函数指针 code review! 文章目录 C笔记之关于函数名前的取址符一.函数名可以被视为指向函数的地址二.sayHello和&sayHello是不是等同?三.Qt信号与槽中的取地址符& 一…

2023全新小程序广告流量主奖励发放系统源码 流量变现系统

2023全新小程序广告流量主奖励发放系统源码 流量变现系统 分享软件&#xff0c;吃瓜视频&#xff0c;或其他资源内容&#xff0c;通过用户付费买会员来变现&#xff0c;用户需要付费&#xff0c;有些人喜欢白嫖&#xff0c;所以会流失一部分用户&#xff0c;所以就写了这个系统…

【2024秋招】2023-9-14 最右后端开发线下一面

1 自我介绍 2 计算机网络 2.1 说说你对tcp滑动窗口的理解 TCP 滑动窗口是 TCP 协议流量控制的一个重要机制。它的主要目的是确保发送方不会因为发送太多数据而使接收方不堪重负。下面我会详细地描述滑动窗口的概念&#xff1a; 窗口的大小&#xff1a; 滑动窗口的大小&#…

Node编写用户登录接口

目录 前言 服务器 编写登录接口API 使用sql语句查询数据库中是否有该用户 判断密码是否正确 生成JWT的Token字符串 配置解析token的中间件 配置捕获错误中间件 完整的登录接口代码 前言 本文介绍如何使用node编写登录接口以及解密生成token&#xff0c;如何编写注册接…

关于 硬盘

关于 硬盘 1. 机械硬盘1.1 基本概念1.2 工作原理1.3 寻址方式1.4 磁盘磁记录方式 2. 固态硬盘2.1 基本概念2.2 工作原理 1. 机械硬盘 1.1 基本概念 机械硬盘即是传统普通硬盘&#xff0c;硬盘的物理结构一般由磁头与盘片、电动机、主控芯片与排线等部件组成。 所有的数据都是…