人工智能研究中心快递柜—

2021SC@SDUSC

index.wxml

index.js

本次对小程序主页相关功能进行分析。

index.wxml

在该部分进行了对轮播图的布置，利用微信开发工具中的swiper组件，swiper组件是滑块视图容器，在其中只可以放置swiper-item组件，否则会导致为定义的行为。autoplay定义是否可以自动切换，indicator-active-color指定当前选中的指示颜色，indicator定义指示点颜色，indicator-dots定义是否显示面板指示点。在swiper-item中利用wx:for对轮播的图进行循环，利用view实现对视图容器的布置，image实现对图片的布置。

<swiper autoplay class="index_top_swiper" indicatorActiveColor="#fff" indicatorColor="#808080" indicatorDots="{{swiperList.length>1}}"><swiper-item wx:for="{{swiperList}}" wx:key="url"><navigator appId="{{item.thirdAppId}}" class="swipe_image" path="{{item.param}}" target="miniProgram" wx:if="{{item.thirdAppId}}"><image class="swipe_image" data-index="{{index}}" id="{{item.url}}" src="{{item.url}}"></image></navigator><image bindtap="jumpOther" class="swipe_image" data-index="{{index}}" id="{{item.url}}" src="{{item.url}}" wx:else></image></swiper-item></swiper>

index.js

data中定义全局变量，定义了tipshow用于定义是否显示提示框；tipcontent放置提示内容；tipmap定义提示框内容，将不同的功能以不同的数字进行区分；定义btnlist用于放置按钮列表，同样将不同功能按照不同数字进行区分，分别定义每一个按钮的具体内容，ID用于区分功能，url用于放置图片，name与subTitle对功能进行介绍；定义swiperList放置轮播图url；questionlist放置常见问题列表，同样以ID区分，title与answer定义内容。

 {id: 1,url: '/img/btn/btn_stuff_trans.png',textUrl: '/img/text/text_stuff_trans.png',name: '物品中转',subTitle: '预约即开门',},

 {id: 0,title: '各种模式如何使用？',answer: '教师A申请该模式后，生成两个开箱码。开箱码A发给好友，好友存放 物品后，教师使用开箱码B取出物品。开箱码B使用一次后流程结束。',},

onload中进行轮播图、页面加载和问题列表加载。该方法调用request方法实现。另外进行了页面转换方法的定义，wx.navigateBack用于关闭当前页面返回上一页面实现了返回上一页的方法；

 goBackPage: function() {wx.navigateBack({delta: 1,})},

关于柜子操作页面方法中，利用switch方法对于不同的功能以ID区分进行选择，0123都是对柜子的操作，所以利用wx.navigateTo跳转到进行柜子操作的js文件中，将在后续进行分析；显示柜子位置功能、显示常见问题列表的功能实现方式与之相同，都是跳转到具体的文件。

 switch (event.currentTarget.id) {case '0':case '1':case '2':case '3':wx.navigateTo({url: '../cabinetList/index' + '?operation=' + event.currentTarget.id,})break;

关于提示框定义了显示提示框以及隐藏提示框两个功能，运用到了在data中定义的tipshow、tipcontent、tiptop三个变量，通过对着三个变量的定义实现是否进行提示框的隐藏。

 showTip: function(event) {let id = event.currentTarget.id;this.setData({tipShow: true,tipContent: this.data.tipMap[id].content,tipTop: event.touches[0].pageY + 'rpx',})},

定义常见问题相关的方法，用于找到用户点击的问题并进行问题和答案的显示，显示功能使用到wx.showmodal显示模态对话框，title属性为提示的标题，content属性为提示的内容，showcancel属性用于说明是否显示取消按钮。

 wx.showModal({title: question.title,content: question.answer,showCancel: false,success (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消')}}})

人工智能研究中心快递柜——代码分析四相关推荐

人工智能研究中心快递柜——代码分析八
2021SC@SDUSC 本次开始介绍柜子的具体使用功能的实现. 由于关于wxml方面都是使用view标签设置相应参数,进行展示故不做具体分析,主要是对 wx:if的运用,合理使用js中传入的数据参数 ...
人工智能研究中心快递柜——代码分析七
2021SC@SDUSC 目录 index.wxml index.js 本次分析项目中柜子的定位功能的实现. index.wxml 在微信官方开发文档中,提供了map组件,通过对wx.createMa ...
人工智能研究中心快递柜——源码部署及分析综述
2021SC@SDUSC 目录项目简介 1.格子柜 2.审计柜人员分工源码部署项目简介 1.格子柜格子柜项目主要用于物品的存储和中转功能,项目分为微信小程序.安卓柜子端.web后台三个呈现形 ...
手机自动化测试：Appium源码分析之跟踪代码分析四 1
手机自动化测试:Appium源码分析之跟踪代码分析四控制器模块 // Appium webserver controller methods // https://github.com/hugs/a ...
kkFileView代码分析(四)——office文件的转换(1)office插件管理
2021SC@SDUSC 目录前言: office插件管理分析: 1.public void startOfficeManager(): 启动Office组件进程 2.public OfficeDo ...
手机自动化测试：Appium源码分析之跟踪代码分析四 5
doClick exports.doClick = function (req, res) { var elementId = req.params.elementId || req.body.ele ...
lighttpd1.4.18代码分析
lighttpd1.4.18代码分析(八)--状态机(2)CON_STATE_READ状态 posted @ 2008-09-24 10:50 那谁阅读(2225) | 评论 (1) 编辑 lig ...
Android4.0图库Gallery2代码分析(二) 数据管理和数据加载
Android4.0图库Gallery2代码分析(二) 数据管理和数据加载 2012-09-07 11:19 8152人阅读评论(12) 收藏举报代码分析android相册优化工作 Androi ...
2019级软件工程应用与实践-人工智能快递柜（代码分析2）
2021SC@SDUSC 第一篇博客中学习了Android Studio的基本使用方式. 第二篇主要是利用了第一周的部分时间和第二周的全部时间来学习Android开发所需要的语法,通过学习,终于可以看 ...
丰巢快递柜启动超时收费3元封顶；谷歌市值一夜暴涨5000亿；两行代码构成的npm包影响到了数百万项目 | EA周报...
EA周报 2020年4月30日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 热点大事件丰巢快递柜启动超时收费3元封顶,菜鸟驿站表态继续免费保管从深圳市丰巢科技有 ...

人工智能研究中心快递柜——代码分析四

index.wxml

index.js

人工智能研究中心快递柜——代码分析四相关推荐

最新文章

热门文章