微信小程序开发边做边学 课件 操作篇-微信小程序 第5、6章 课程页面模块开发、课程练习模块开发_第1页
微信小程序开发边做边学 课件 操作篇-微信小程序 第5、6章 课程页面模块开发、课程练习模块开发_第2页
微信小程序开发边做边学 课件 操作篇-微信小程序 第5、6章 课程页面模块开发、课程练习模块开发_第3页
微信小程序开发边做边学 课件 操作篇-微信小程序 第5、6章 课程页面模块开发、课程练习模块开发_第4页
微信小程序开发边做边学 课件 操作篇-微信小程序 第5、6章 课程页面模块开发、课程练习模块开发_第5页
已阅读5页,还剩71页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第五章:课程页面模块开发ontents目录申请课程号01课程模块页面逻辑实现02C课程模块页面布局03课前讨论电影《万里归途》热映,认识中国外交官

2022年9月30日上映的《万里归途》由真实外交事件改编而来,影片中对于战乱场景和跋涉沙漠的刻画惊心动魄,在硝烟弥漫的怒米亚,中国外交官最终撤侨成功。怒米亚叛军一次次的羞辱,变态的开枪游戏,狠狠践踏他的性命、尊严。想保全同胞的外交官宗大伟(电影主角)拿命去赌。宗大伟在叛军的威胁下坚定的说出:如果你们杀了我们,正义会审判你,我们国家会让你们血债血还。是使命,也是底气!

因为祖国就在身后,使馆就在身边,国家不会放弃任何一个同胞,一定会带大家回家!

万众一心的的信仰里,中国大使馆为同胞们的归途保驾护航。

撤侨行动异常艰难,国家和大使馆从未放弃任何一个同胞,大家都没有放弃回家的希望。

15天的撤侨,在刀山火海里闯出回家的路,他们做到了!中国近现代外交官之“弱国无外交”的顾维钧1918年,历时四年的第一次世界大战刚结束,西方列强就在法国巴黎召开巴黎和会。作为战胜国之一的中国也被邀请参加和会。时任驻美公使的顾维钧作为本国政府的代表团之一赶赴法国参加巴黎和会。1.刚到达巴黎,就被一群法国士兵围殴;2.开会前中国代表团提交的取消外国在华特权和中日二十一条条约遭到拒绝;3.日本提出要继承德国在山东半岛诸多权益的无理要求;4.中国代表顾维钧以捡到日本代表的金表为引,被日本代表直接污蔑盗窃;顾维钧在巴黎和会上演讲—《我的1919》截图中国近现代外交官之“弱国无外交”的顾维钧顾维钧不慌不忙淡定开口:“日本代表牧野男爵愤怒了,姑且算我偷了他的金表,但是我想问问,你们日本在全世界面前,偷了整个山东省,山东省的三千六百万人民该不该愤怒,四万万中国人该不该愤怒呢?我想请问日本的这个行为算不算盗窃呢?是不是无耻啊?是不是极端的无耻啊?”顾维钧继续说到中国不能失去山东,就像西方不能失去耶路撒冷。紧接着他又拿出来照片,这是中国派往欧洲参战的劳工,用事实来反驳了日本代表说中国未出兵的说法,而且进一步证明了中国是有资格做为战胜国,更有资格要回本就属于中国的山东。各方代表听到顾维钧的发表后纷纷为其鼓掌,表达了他们对中国的基本尊重。日本在沟通无效后,日本开始向和会施加压力,同时当时政府也向代表团陆团长陆徽祥发来训令,指责顾维钧在和会上的行为,并且要求撤销顾维钧的代表身份。同时要求在山东问题上不要和日本过于强硬。这就是当时的外交现状。1919年6月28日,巴黎和会签约仪式举行,各列强按照协议陆续在合约签字,顾维钧作为代表拒绝签字,“我们拒绝签字,请你们记住,请你们记住,中国人永远不会忘记,这沉痛的一天”。中国成为做为战胜国中唯一没有签字的国家。历史教训:落后就要挨打

中国人也是花了数百年,才有如今的富强。

我们如今长在阳光下,都是前辈们努力拼搏而来的。

纵观中国整个近代史,我们如今的安宁,都是烈士们用血肉筑起来的堡垒。

正因为有那些保家卫国,甘愿抛头颅洒热血的战士们,才有如今的安得广厦千万间!

我们享受的安康,有人在替我们负重前行。如果信仰有颜色,那一定是中国红,如果归途有方向,那一定是家的方向!我们必须要走富国强军的民族复兴之路,并将中华民族伟大复兴的意识转化为“力”,即民族的凝聚力和战斗力,国家的综合国力和发展潜力,军队的战争实力和战备潜力。可以坚信:一个意志坚定、矢志不渝、壮志凌云的民族,一个国力盛、民力富、军力强的国家,不惧任何形式的侵略者,不惧任何形式的侵略战争。

申请课程号01ranspageT5.1申请课程号开发者需要向后台申请一个课程,得到课程号,申请链接如下:/index.php/Api/User/createCourse?appid=wx60dbecdccbea11f7&courseName=1028教学&questionSet=1012&creater=大佬

✔appid:开发者小程序的appid✔courseName:要创建的课程的名字(开发者可自定义)✔questionSet代表实现预设的题目集(后续无法更改)✔creater:创建者浙江工商大学浙江工商大学5.1申请课程号开发者的小程序appid是123,创建的课程名字是“一起来学近代史”,对应的题库是下表中的1001,即questionSet是1001,创建者“工商大佬”。那么开发者需要访问以下链接/index.php/Api/User/createCourse?appid=123&courseName=一起来学近代史&questionSet=1001&creater=工商大佬例:对于questionSet的题目集,后台提供了8个题目集供开发者选择注意:1004、1005、1006、1007的题库已作废浙江工商大学5.1申请课程号选择好需要申请的课程后,访问对应的课程申请链接,网页中会即刻返回课程号。此时申请课程号所用的小程序appid与该课程号已经绑定了,课程号可保存下来。所有访问该小程序的用户默认加入该课程。浙江工商大学5.1申请课程号

此外,在config.js文件中加入courseId。以便后面代码中的引用。课程模块页面布局02ranspageT浙江工商大学5.2课程模块页面布局课程模块的页面布局是豆豆云助教的简化版本,豆豆云主页面本案例主页面主要包括课程信息和课程练习模块较于豆豆云助教的主页面,本案例不涉及切换课程,没有教师端,所以不需要“在线签到”模块与“加入课程”。浙江工商大学5.2.1课程信息模块页面布局课程信息模块主要包括课程名称、课程创建者、加入课程的人数以及课程号。对于课程信息模块的页面布局,同样可以参考WeUI样式中表单-List-带图标、说明的列表项。浙江工商大学5.2.1课程信息模块页面布局

找到对应的WeUI样式后,将该样式的对应代码复制黏贴到自己的项目代码中。带图标、说明的列表项具体代码如下:<view

class="weui-cellsweui-cells_after-title"><view

class="weui-cell"><view

class="weui-cell__hd"><image

src="{{icon}}"

style="margin-right:5px;vertical-align:middle;width:20px;height:20px;"></image></view><view

class="weui-cell__bd">标题文字</view><view

class="weui-cell__ft">说明文字</view></view>image组件中src属性对应的图片资源地址改为课程对应的图片,将课程图片放置在images文件夹底下,图片资源地址为课程图片的绝对地址。例如:本案例图片存放在images文件夹下,图片名称为course_head.png,那么图片资源路径为“/images/course_head.png”。另外由于图片太小,需要调整style中width和height值至80px。浙江工商大学5.2.1课程信息模块页面布局

课程名称、创建者、加入人数以及课程号用标题文字的样式即可,无需使用说明文字样式。通过字体大小与字体颜色不同来使得课程名称更加吸引用户注意。课程信息模块布局浙江工商大学5.2.1课程信息模块页面布局课程信息模块wxml代码如下:<viewclass="weui-cellsweui-cells_after-title"><viewclass="weui-cell"><viewclass="weui-cell__hd"><imagesrc="/images/course_head.png"style="margin-right:15px;vertical-align:middle;width:80px;height:80px;"></image></view><viewclass="weui-cell__bd"><viewstyle='font-size:20px'>课程名称</view><viewstyle='font-size:13px;color:#888888'>创建者:</view><viewstyle='font-size:13px;color:#888888'>加入人数:</view><viewstyle='font-size:13px;color:#888888'>课程号:</view></view></view></view>浙江工商大学5.2.2课程练习模块页面布局课程练习模块的布局主要参考了github上一个驾校考题的小程序前端代码,该项目下载地址:/HuBinAdd/calculate-swiperList。课程练习模块主要包括顺序练习、章节练习、专题练习、收藏以及错题。课程练习模块要教给大家的是如何使用现有的开源代码,经过修改后开发出自己的小程序,这可以大大减轻开发者的工作量。浙江工商大学5.2.2课程练习模块页面布局下载驾校考题源代码后,导入项目。驾校考题小程序首页

浙江工商大学5.2.2课程练习模块页面布局找到驾校考题首页对应的index页面,将驾校考题中对应的练习模块前端代码拷贝至自己的项目中,只保留专题练习与章节练习。编译后发现页面效果并不能正常显示。这是因为代码中涉及到的样式不是WeUI样式,而是驾校考题小程序开发者自己写的样式浙江工商大学5.2.2课程练习模块页面布局将index.wxss中的样式拷贝至自己项目的index.wxss中,但是发现课程练习模块样式不全。浙江工商大学5.2.2课程练习模块页面布局导致课程练习模块显示与驾校考题主页面不一致的原因是该部分代码中涉及到的样式col-hg-6和col-hg-3在index.wxss中没有,在驾校考题源代码中,该样式写在app.wxss中,将对应的col-hg-6和col-hg-3样式拷贝index.wxss,具体样式代码如下:.col-hg-6{

float:

left;

box-sizing:

border-box;

width:

50%;}.col-hg-3{

float:

left;

box-sizing:

border-box;

width:

25%;}浙江工商大学5.2.2课程练习模块页面布局编译后发现专题练习与章节练习的布局只占了页面宽度的一半。

专题练习和章节练习使用的是col-hg-3样式,该样式的width属性只有25%,两个元素总共也就50%,因此只占了页面宽度的一半。浙江工商大学5.2.2课程练习模块页面布局将col-hg-3样式改为col-hg-6,专题练习和章节练习撑满整个页面,课程练习模块最终页面布局:浙江工商大学5.2.2课程练习模块页面布局课程练习</view><viewclass="index-exam-inletsrow"><viewbindtap="exercise"data-type='sxlx'class="index-exam-inlets-mkcol-hg-6"><view>顺序练习</view><viewclass="small">做题数:{{ques_count?ques_count:0}}题</view></view><viewbindtap="bindUrlToStore"class="index-exam-inlets-sccol-hg-6"data-urlParem="{{item.subject}}"data-collection="{{item.collection}}"><view>收藏</view><view>({{current_course.question['0'].collection}})</view></view><viewbindtap="bindUrlToWrong"class="index-exam-inlets-ctcol-hg-6"data-urlParem="{{item.subject}}"data-answerError="{{item.answerError}}"><view>答错</view><view>({{current_course.question['0'].answerError}})</view></view>

课程练习模块wxml代码为:将模拟考试元素中文字“模拟考试”改为“顺序练习”,“最高成绩:分”改为“做题数:题”。浙江工商大学5.2.2课程练习模块页面布局<viewclass="row"style="clear:both;"><viewbindtap="exercise"data-type='zjlx'class="index-exam-inlets-listcol-hg-6"><viewclass="icon-index-zj"></view><viewclass="text">章节练习</view></view><viewbindtap="exercise"data-type='ztlx'class="index-exam-inlets-listcol-hg-6"><viewclass="icon-index-sj"></view><viewclass="text">专题训练</view></view></view></view>课程模块页面逻辑实现03ranspageT浙江工商大学5.3课程模块页面逻辑实现请求加入课程主要是用户在第一次进入小程序即发生的请求,为减少请求次数,因此将该逻辑写在app.js中,用户第一次使用时通过getAddedCourse接口向后台发送请求以确认该用户是否已加入课程。若用户已加入该课程,则返回该用户已加入的课程号,当success为false则表示未加入,执行加入课程逻辑。★请求加入课程逻辑浙江工商大学5.3课程模块页面逻辑实现具体代码:wx.request({url:userUrl+'getAddedCourse',data:{

'openid':wx.getStorageSync('jiaoxue_OPENID'),},success:function(res){

if(!res.data.success){wx.request({url:userUrl+'addCourse',data:{openid:wx.getStorageSync('jiaoxue_OPENID'),courseId:courseId},success:function(res){

if(res.data.success){wx.setStorageSync('jiaoxue_courseList',courseId)}},fail:function(res){}})}else{wx.setStorageSync('jiaoxue_addedCourse',res.data.msg)}}})浙江工商大学5.3课程模块页面逻辑实现成功加入课程后,用户首页则需要显示所加入课程的课程信息。获取当前课程主要通过current接口向后台发送请求,获取课程信息后显示在前端。★获取当前课程逻辑浙江工商大学5.3课程模块页面逻辑实现index.js代码:(从左到右)index.js文件中主要在data数组中定义了一个current_course数组,然后写了一个getCurrentCourse函数,函数中主要实现了请求名为current的api,向后台发送current_course_id和openid的值浙江工商大学5.3课程模块页面逻辑实现请求成功后,将res.data.data赋值给current_course,使用console.log(‘res1’,res)打印res的值,即可console面板中看到后台返回的课程信息。浙江工商大学5.3课程模块页面逻辑实现获取课程信息后,需要将课程信息显示在首页中,因此还需要对index.wxml中课程信息模块的代码进行简单修改,其中将“课程名称”改为变{{current_course['name']?current_course['name']:"未知"}},并在“创建者:”、“加入人数:”和“课程号:”后面分别加上变量{{current_course['teacher']['name']?current_course['teacher']['name']:"未知"}}{{current_course['count']?current_course['count']:"未知"}}和{{current_course['id']?current_course['id']:"未知"}}。变量通过三目运算进行判断是否获取到当前课程信息时显示对应的课程信息。课程信息未知界面课程信息正常显示感谢聆听!第六章:课程练习模块开发ontents目录引用驾校考题做题页面01

实现错题与收藏功能02C完成练习功能模块03课前讨论星巴克“大展宏图款”电脑包被指抄袭

北京时间2023年2月1日,星巴克推出官方活动,消费者在星巴克消费满150元即可申请领取星巴克的新春款电脑包。这一活动在网络上引发网友争议,有网友指出星巴克“大展宏兔款”电脑包涉嫌抄袭奢侈品牌alexanderwang。从星巴克中国最新发布的宣传材料看,“大展宏图款”电脑包的相关物料已经撤下,仅保留了剩余三款。针对此事,之后星巴克中国并未做出相关回应。

这也并非是星巴克首次陷入抄袭风波。天眼查App显示,宁波利时日用品有限公司曾因侵害外观设计专利权纠纷,起诉浙江飞洋杯业有限公司、宁波家之良品国际贸易有限公司、星巴克企业管理(中国)有限公司、上海星巴克咖啡经营有限公司宁波分公司、上海星巴克咖啡经营有限公司。最新开庭公告信息显示,该案于2022年11月3日在宁波市中级人民法院开庭。

星巴克大展宏兔电脑包alexanderwang《羊了个羊》火爆登场

2022年中秋假期期间,一款名为《羊了个羊》的小程序游戏突然火爆全网,轮番霸榜微博、抖音等平台热搜榜,热度居高不下。热度持续冲高,仅2022年9月14日,《羊了个羊》就两度登顶热搜榜一,围绕游戏的讨论也不断发散。游戏介绍显示,羊了个羊是一款超难的闯关消除小游戏,通关率不到0.1%。据“羊了个羊”官方社交平台账号,由于该游戏过于火爆,《羊了个羊》出现了宕机的情况,服务器2天崩了3次。

争议:《羊了个羊》抄袭?炒作?

抄袭?众口不一:就在大家玩的火热的时候,有网友发现这则小游戏疑似抄袭了《3tiles》。从曝光的游戏画面来看,《羊了个羊》与《3tiles》在玩法上简直如出一辙,所不同的是二者图标有异常。但也有网友认为,多层连连看游戏玩法均相似,不构成抄袭。3tiles羊了个羊

炒作?不至于,否则不会服务器崩溃:爆火后服务器连续崩溃,恰恰说明游戏厂商准备不足。毕竟作为小游戏,其火爆就是个偶然事件,大多数同类小游戏往往从生到死都少人知晓。当然,突然爆火后服务器崩溃是游戏厂商常见问题。甚至于知名大作如魔兽、王者,也会因为特定时间的玩家涌入而宕机或出现超长时间排队问题。公司回应和相关行动

知识产权信息显示,“羊了个羊”小游戏已经在2022年7月份申请了软件著作权登记。针对“羊了个羊”涉及抄袭“3tiles”一事,北京简游科技有限公司相关负责人否认“羊了个羊”抄袭“3tiles”。该负责人表示,“羊了个羊”游戏使用的是最基础的游戏玩法,如果“连成三个”的玩法就算抄袭,那这样的游戏也太多了。并表示公司不会对此理会,用户自然有自己的判断。什么是软件著作权?

软件著作权的全称是“计算机软件著作权”,是指软件的开发者或者其他权利人依据有关著作权法律的规定,对于软件作品所享有的各项专有权利。软件开发完成后,软件著作权人享有发表权、开发者身份权、使用权、使用许可权和获得报酬权。

为什么要登记软著呢?1.权利证明在发生软件侵权时,权利人向人民法院提出诉讼的时候,软件著作权证书是一个很有力的证明文件。如果没有登记过软件著作权,权利人很难去证明其完成的时间和这个软件的归属权。2.市场需要现在很多的软件应用市场,都开始要求上线的时候提供软件著作权登记证书。如果不提早办理,可能对耽误软件的上线,及时去版权局登记软件著作权将减少很多的麻烦。3.软实力软件著作权属于知识产权里的一项,可以作为企业对外宣传,证明企业实力的一项有力材料,提升企业美誉度。

4.无形资产软件著作权和商标、专利一样,是企业的无形资产,可作为增资、融资抵押、技术入股等。5.高企申报在高新技术企业申报的过程中,软件著作权和专利一样,是可以用于高企申报的,而且软件著作权办理的时间周期短,更快拿证,不耽误企业申报项目。企业研发了新产品,相应的知产保护也应跟上。对于像“羊了个羊”这类游戏开发软件来说,申请软件著作权就必不可少,不仅可以保护核心技术不被侵犯、提升美誉度,还可以作为无形资产质押、增资、技术入股等等。提高版权保护意识

版权的定义:版权也称著作权,是知识产权的一种。版权是对计算机程序、文学著作、音乐作品、照片、游戏,电影等的复制权利的合法所有权。除非转让给另一方,版权通常被认为是属于作者的。大多数计算机程序不仅受到版权的保护,还受软件许可证的保护。版权只保护思想的表达形式,而不保护思想本身。算法、数学方法、技术或机器的设计均不在版权的保护之列。

申请版权的程序:一、准备作品登记应提交的材料,包括作品登记申请表、作者或者其他著作权的人身份证明文件以及作品著作权归属证明文件、作品说明书、代理人委托书以及身份证明文件等等二、在线填写作品登记表,上传作品样本、身份证明文件及权利保证书三、作品登记机关在接到作品申请材料后,按规定进行核查,核查期限一个月。如果作品符合登记条件,则由作品登记机关发放证书并予以公告。引用驾校考题做题页面01ranspageT浙江工商大学6.1.1驾校考题各类练习页面参考驾校考题小程序中专项练习、章节练习和顺序练习的功能,真正实现doudouyuan项目中的对应的练习功能。浙江工商大学6.1.1驾校考题各类练习页面在驾校考题项目中找到专项练习、章节练习和顺序练习所对应的answer_classify、answer_chapter和answer_info页面,其中answer_info.wxml文件中使用import引入了answer_common中movie-list.wxml的template模板。浙江工商大学6.1.1驾校考题各类练习页面classify.js、chapter.js和info.js文件中均引用public文件夹中的douban.js和object-assign.js文件,引用所用的代码:consthttps=require('../../public/js/douban.js');if(!Object.assign){

Object.assign=require('../../public/core/object-assign.js')}浙江工商大学6.1.2各类练习页面逻辑修改◆页面引用①单击编辑器中项目目录结构区右上角的“…”按钮,打开驾校考题的项目目录。②打开pages文件夹,复制pages文件夹中的answer_classify、answer_chapter、answer_info和answer_common文件夹。③打开doudouyun项目目录,在pages文件夹中新建answer文件夹,将复制的文件黏贴至answer文件中。④将驾校考题中的public文件夹拷贝至doudouyun项目目录下,其中public与pages在同一级目录下。浙江工商大学6.1.2各类练习页面逻辑修改完成上述操作操作后的doudouyun项目的项目目录结构浙江工商大学6.1.2各类练习页面逻辑修改在app.json文件的pages属性中加上对应的所有页面路径。若直接去驾校考题代码中app.json文件复制,复制过来后需要在每个页面路径加上一个answer/。浙江工商大学6.1.2各类练习页面逻辑修改◆文件修改★文件修改主要包括新增的三个页面对应的js文件、以及douban.js文件的修改。★每个页面的js文件需要修改两处,一个是引入douban.js文件对应的相对路径的修改,另一个则是做题功能实现所需的url的修改。浙江工商大学6.1.2各类练习页面逻辑修改(1)修改.js文件的相对路径在chapter.js、classify.js和info.js文件引用douban.js和object-assign.js时,对应的相对路径需要多一个“../”。chapter.js、classify.js和info.js文件都要修改。浙江工商大学6.1.2各类练习页面逻辑修改(2)修改url在doudouyun项目中需要修改各类练习页面js文件中与题库相关的url。其中需要修改的url分别是:章节URL:Gateway/route?method=pingshifen.question.chapter&course_id=10014专项URL:Gateway/route?method=pingshifen.question.special&course_id=10014收藏URL:Gateway/route?method=pingshifen.question.collect&course_id=10014提交答案URL:Gateway/route?method=pingshifen.question.submit&course_id=10014题号URL:Gateway/route?method=pingshifen.question.get_id_items&course_id=10014题目详情URL:Gateway/route?method=pingshifen.question.get_info&course_id=10014course_id对应的值✔直接赋值开发者所申请的课程号✔使用wx.getStorageSync(´jiaoxue_addedCourse´)从本地Storage获取存在本地的课程号✔使用config.js中宏定义courseId需要在对应的js文件使用

const引入config.js文件中的courseId!url中不能有空格,不然访问会报错。浙江工商大学6.1.2各类练习页面逻辑修改chapter.js中URL的修改classify.js中URL的修改info.js中URL的修改浙江工商大学6.1.2各类练习页面逻辑修改(3)修改douban.js中的请求参数✔将douban.js文件的AJAX主体函数中请求参数openid改为course_id和openid,对应的值分别CONF.courseIdwx.getStorageSync(‘jiaoxue_OPENID’)。✔对const中的内容进行简单修改完成练习功能模块02ranspageT浙江工商大学6.2.1实现页面跳转单击“顺序练习”按钮,发现页面没有任何变化,也没有报错,单击“章节练习”和“专项练习”按钮,发现调试器的Console中报错。将章节练习navigator组件中的url改为../answer/answer_classify/classify?subject={{item.subject}}&type=zxlx将专项练习navigator组件中的url改为../answer/answer_chapter/chapter?subject={{item.subject}}&type=zjlx即可实现正常跳转。浙江工商大学6.2.1实现页面跳转单击“顺序练习”按钮没有反应,这是由于在index.js文件中没有添加顺序练习的view组件中对应的bindtap函数。使用一个bindtap事件触发函数同时实现顺序练习、章节练习和专项练习的页面跳转。浙江工商大学6.2.1实现页面跳转index.wxml具体代码<view

class="index-exam-h1">

课程练习</view><view

class="index-exam-inletsrow">

<view

bindtap="exercise"

data-type='sxlx'

class="index-exam-inlets-mkcol-hg-6">

<view>顺序练习</view>

<view

class="small">做题数:题</view></view>

<view

bindtap="tapInletsSC"

class="index-exam-inlets-sccol-hg-6"

data-urlParem="{{item.subject}}"

data-collection="{{item.collection}}">

<view>收藏</view>

<view>()</view>

</view>

<view

bindtap="tapInletsCT"

class="index-exam-inlets-ctcol-hg-6"

data-urlParem="{{item.subject}}"

data-answerError="{{item.answerError}}">

<view>答错</view>

<view>()</view>

</view>

<view

class="row"

style="clear:both;">

<view

bindtap="exercise"

data-type='zxlx'

class="index-exam-inlets-listcol-hg-6">

<view

class="icon-index-zx"></view>

<view

class="text">专项练习</view>

</view>

<view

bindtap="exercise"

data-type='zjlx'

class="index-exam-inlets-listcol-hg-6">

<view

class="icon-index-zj"></view>

<view

class="text">章节练习</view>

</view>

</view></view>顺序练习、章节练习和专项练习对应的bindtap函均为exercise。顺序练习的data-type值为sxlx。章节练习的data-type值为zjlx。专项练习的data-type值为zxlx。浙江工商大学6.2.1实现页面跳转exercise(e){console.log(e)

lettype=e.currentTarget.dataset.type

var_url

if(type=='sxlx'){_url="/pages/answer/answer_info/info?subject=&type=sxlx"}else

if(type=='zjlx'){_url="/pages/answer/answer_chapter/chapter?subject=&type=zjlx"}else

if(type=='zxlx'){_url="/pages/answer/answer_classify/classify?subject=&type=zxlx"}wx.navigateTo({url:_url,})},在index.js文件中的exercise函数使用console.log(e),打印当触发exercise函数时参数e的值例:单击“顺序练习”按钮,调试器中打印出的内容可以通过e.currentTarget.dataset.type的值来判断单击的是哪个练习的按钮index.js文件中的具体代码浙江工商大学6.2.2添加页面样式完成练习页面跳转之后,单击“章节练习”和“专项练习”按钮后,跳转至章节练习和专项练习页面。浙江工商大学6.2.2添加页面样式将驾校考题的app.wxss中的样式对应得拷贝至doudouyun项目的app.wxss中。主要复制/*CSSDocument*/以下所有的样式代码。浙江工商大学6.2.2添加页面样式添加页面样式后,章节练习和专项练习页面浙江工商大学6.2.2添加页面样式进入章节练习页面后,单击章节练习中任意一个章节对应的按钮,例如单击“算法”按钮,发现调试器报错单击专项练习中任意按钮也会报错。浙江工商大学6.2.2添加页面样式修改chapter.wxml和classify.wxml中navigator组件的url,给url对应的路径都加上一个answer/。修改url后即可跳转至满足章节或者专项练习要求的练习页面。浙江工商大学6.2.2添加页面样式为了使练习页面中选项的布局美观✔可修改container样式,将display属性值改为block,并删除padding属性。✔可选择直接注释container样式。.container{

height:

100%;

display:

block;

flex-direction:

column;

align-items:

center;

justify-content:

space-between;

box-sizing:

border-box;}修改样式后的练习页面浙江工商大学6.2.3显示做题数目实现做题数量的显示(1)在index.js文件的data{}中添加一个变量ques_count,初始值为0。(2)在index.wxml文件中,“做题数:题”改为“做题数:{{ques_count}}题”。做题数是通过getDoneQuesCount接口向后台发送请求,获取做题数量。

该接口请求需要在onShow函数中。index.js文件中onShow函数中具体代码:onShow:function(){

varthat=thiswx.request({url:userUrl+'getDoneQuesCount',data:{openid:wx.getStorageSync('ji

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论