微信小程序开发边做边学 课件 操作篇-微信小程序第6章 课程练习模块开发

第六章：课程练习模块开发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('jiaoxue_OPENID'),courseId:courseId},success:function(res){

console.log(res)that.setData({ques_count:res.data.msg})}})},实现错题与收藏功能03ranspageT浙江工商大学6.3.1显示错题数与收藏数current接口向后台发送请求时，请求成功的返回值中除了课程信息外，其实还包括了错题数与收藏数，在index.js文件的onLoad函数中添加一句console.log(‘current’,this.data)，用于打印data数组的值。answerError与collection的值即为错题数与收藏数浙江工商大学6.3.1显示错题数与收藏数要将错题数与收藏题数显示在页面中，就需要在index.wxml中错题后面的view组件中加入错题数对应的变量{{current_course.question[0].answerError}}，收藏数也一样。浙江工商大学6.3.1显示错题数与收藏数单击微信开发者工具“编译”按钮，模拟器中首页能够看到错题与收藏。浙江工商大学6.3.2错题与收藏页面跳转单击“错题”或“收藏”按钮，发现没有反应（1）将index.wxml中错题与收藏对应的bindtap改为“bindUrlToWrong”和“bindUrlToStore”（2）index.js文件中对应的函数代码具体如下（从左到右）：bindUrlToStore:function(f){

varcoll