微信小程序开发边做边学 课件 操作篇-微信小程序第2章 简单案例开发实战

第二章：简单案例开发实战简单案例开发实战心理测试小程序安装与理解C语言测试小程序开发C语言测试逻辑修改添加做题结果小程序发布02ranspageT

简单案例开发实战心理测试小程序安装与理解开源代码的借鉴C语言测试小程序开发页面功能的添加C语言测试逻辑修改实现逻辑的差异发布的流程发布上线课前讨论2022微信生态发展：小程序、视频号、私域流量与微信支付

微信生态内容组成：微信公众号、微信商户平台、微信开放平台、微信广告

微信生态层面划分：面向用户，面向企业。我们以树状图简单呈现，可以看到如下所述的生态构建。

在腾讯发布的2021年及2022年Q1财报中，在谈及重点业务及未来战略时，多次提到“小程序”“视频号”等关键字。视频号方面，用户数据同比增速迅猛，并预期未来商业化前景广阔；小程序方面，活跃账户数已突破5亿，结合相关微信生态，帮助B端客户更好拓展和运营私域流量，做好服务、个体的连接，依然是今年微信的重要战略之一。何为「小程序经济圈」？

它其实便是一个虚拟生态，是根据“微信”新基建，构成的经济生态圈。它是以微信小程序为中心枢纽，链接微信付出、企业微信、微信AI、微信搜一搜等微信生态才能，构成一套共同的全景生态矩阵，深度助力各职业与工业，从而产生巨大社会经济价值的经济形态。基于微信形成的新型生态圈——微信小程序经济圈小程序行业现状和前景小程序现状：

据对公开资料进行统计，截止2022年末全网小程序数量已超780万，DAU突破8亿，人均使用次数超过12次，小程序已经融入网民生活的方方面面。小程序发展前景：1、小程序将引领下一轮移动互联网创新（万物互联、多端框架、元宇宙）2、XR技术为小程序营销带来创造性突破，虚拟场景、虚拟人或将重构用户体验3、在小程序链接全网能力的基础上，成熟玩家将深入探索全域营销4、大健康、旅游、教育行业是值得期待的邻域5、第三方服务与时俱进迭代升级，向全域、全端、全链路服务延展6、小游戏市场再次活跃，创新、精品战略与营销策略相辅相成，共创佳绩小程序——社会经济价值+商业价值

小程序经济圈到底有哪些社会经济价值和商业价值？在内循环年代，中国经济需要建设两个圈，一个是线下经济圈，一个是线上经济圈，并完成“双圈联动”，在这过程中，微信小程序是助力线上经济一体化的重要推手。一方面，小程序是一种轻应用，极低开发门槛招引了大量的B端商家，“无需下载，用完即走”大大缩短了C端用户到APP的距离，且“再教育成本极低”。另一方面，「小程序经济圈」依托于微信绝无仅有的“全景生态矩阵”，在巨量用户、付出系统和流量的加持下，构成了绝无仅有的“才能渠道”。不同的是，在传统区域经济圈里，中心城市是中心，在「小程序经济圈」里，品牌是辐射中心。2022年各领域最佳小程序39个小程序新晋“阿拉丁”指数排行TOP1000简单案例开发实战心理测试小程序安装与理解C语言测试小程序开发C语言测试逻辑修改添加做题结果小程序发布02ranspageT心理测试源代码下载址:/Silverados/We-AnswerPage如果没有GitHub的账号可以先自行申请一个账号后，再进行代码的下载。

心理测试小程序安装点击“Cloneanddownload”按钮，选择DownloadZIP将源代码下载下来，源代码是一个压缩包。将源代码解压后，双击微信web开发者工具并选择新建小程序，选择导入项目。注意：在选择项目目录是需要选择包含app.json和project.config.json的目录。

心理测试小程序安装选好目录后，开发者可以自定义项目名称，并填入AppID，然后单击“导入”按钮，即可成功导入心理测试小程序。“心理测试”代码目录测试页面首页

心理测试小程序安装点击“开始测试”按钮，体验小程序的功能并查看各个目录的简单配置。

心理测试小程序安装完成心理测试后，最后显示测试结果页面，测试结果页面可看到测试者在测试过程中选择A、B、C选项的次数，并告诉测试者属于什么类型。

心理测试小程序安装简单案例开发实战心理测试小程序安装与理解C语言测试小程序开发C语言测试逻辑修改添加做题结果小程序发布02ranspageT★增加D选项由于C语言习题共有4个选项，所以要先给test页面添加一个D选项，test页面中ABC有的内容都相应的加上一个D。在text.wxml中添加D选项的页面结构。

C语言测试小程序开发在test.js中的data数组中与D选项有关的变量。

C语言测试小程序开发给事件处理函数answerClickA的逻辑代码代码中添加D选项的逻辑。

C语言测试小程序开发添加完后按钮A的代码（从左往右）如下，按钮B，按钮C同理。})

this.setData({questionDetail:app.globalData.question[this.data.realIndex].question,

answerA:app.globalData.question[this.data.realIndex].option[this.data.listABC[0]],answerB:app.globalData.question[this.data.realIndex].option[this.data.listABC[1]],answerC:app.globalData.question[this.data.realIndex].option[this.data.listABC[2]],answerD:app.globalData.question[this.data.realIndex].option[this.data.listABC[3]],})

if(this.data.index==20){wx.redirectTo({url:'/pages/result/result?A='+this.data.A+'&B='+this.data.B+'&C='+this.data.C+'&D='+this.data.D,})}},

C语言测试小程序开发除了test页面，result页面也需要添加一个D选项被选择的次数，所以需要对result.wxml与result.js文件进行简单修改，具体代码如下（这里只给出需要修改部分的代码）：

C语言测试小程序开发★修改题库

由于现在运行小程序后出来的还是心理测试的题目，因此需要将其改成C语言的题目。C语言题库可以在提供的代码包“C语言测试最终代码”中寻找，首先开发者可以导入C语言小程序代码包，找到app.js文件，将该项目中的question数组直接复制到自己的项目中。

C语言测试小程序开发

这里题库的question数组看着有点乱，不符合代码规范。✔开发者使用格式化代码的默认快捷键Shift+Alt+F将代码格式化。✔开发者也可以打开设置中快捷键设置的编辑自定义格式化代码的快捷键。

格式化后的代码

C语言测试小程序开发题库修改后，单击“开始测试”按钮，进入test页面后看到的就是C

语言测试题了。

C语言测试小程序开发

C语言测试小程序中，题目不再随机出现，题目按question数组中的顺序一道一道显示给测试者。

注释test页面中的randSort函数、setList函数和setABC函数，另外onLoad中的两句也要注释掉，注释的快捷键为“Ctrl+/”。

C语言测试小程序开发简单案例开发实战心理测试小程序安装与理解C语言测试小程序开发C语言测试逻辑修改添加做题结果小程序发布02ranspageT单击“开始测试”按钮进行C语言习题测试，会发现第一题与第二题相同。

第一题题目信息

第二题题目信息

C语言测试逻辑修改

修改方法：（1）在test.js中，将index的初始值改为1。

（2）选择test.wxml文件，将第3行代码里的index+1改为index即把+1去掉。

C语言测试逻辑修改

测试过程中，会发现当显示第19题时，完成第19题后，第20题一闪而过，就直接跳转至result页面。最后测试结果页面累计至选择了19次。

C语言测试逻辑修改

修改方法：将整个if语句块移至this.setData使得index+1之前。

C语言测试逻辑修改

修改完后点击编译运行，发现在20题做完后产生报错。修改方法：即添加一个if判断语句，判断只有当index<20是才更新test中题目信息的视图，当index=20时，不满足条件，则不更新题目信息，执行跳转result页面。

C语言测试逻辑修改

需要注意的是，对于以上两个逻辑问题均只修改了answerClickA部分的代码，需要对answerClickB、answerClickC、answerClickD部分相应的代码进行同样的修改。

C语言测试逻辑修改简单案例开发实战心理测试小程序安装与理解C语言测试小程序开发C语言测试逻辑修改添加做题结果小程序发布02ranspageT★test页面修改

test.js文件中部分代码过于复杂

对它进行简单修改，只需要一个简单的赋值就行，当点击A选项时，给A的值+1即可。

添加做题结果

对于本节要增加的做题结果，在data数组中增加两个变量correct和error，分别用于记录正确题数与错误题数，初始值均为0。另外将增加一个answer数组，数组中为20道题的正确答案。

添加做题结果

anwer[0]为一个空字符串，这是根据后面answerClickA中新增的代码决定的，代码如下，正确答案从answer[1]开始存储于answer数组中即可。

添加做题结果

另外带参跳转至result页面时也加上correct与error的值，用于在result页面显示正确率。

添加做题结果

以上修改只针对answerClickA，因此需要对answerClickB、answerClickC、answerClickD部分相应的代码进行同样的修改。

添加做题结果★result页面修改在result.wxml下添加正确与错误显示结果，另外显示测试者属于什么类型不需要了，把这段代码删了即可。

添加做题结果

（1）注释result.js中whichKind函数。

（2）在data数组中增加correct和error变量，初始值为0。（3）在生命周期函数onLoad中给correct和error赋值，具体代码（在右边）。

添加做题结果

添加做题结果后的result界面：

添加做题结果简单案例开发实战心理测试小程序安装与理解C语言测试小程序开发C语言测试逻辑修改添加做题结果小程序发布02ranspageT★发布前准备

1.预览

✔点击开发者工具顶部操作栏的预览按钮，开发者工具会自动打包当前项目。

✔并上传小程序代码至微信的服务器，成功之后会在界面上显示一个二维码。

✔使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。小程序发布

2.上传代码（1）点击开发者工具顶部操作栏的上传按钮，开发者可以根据自己的实际要求来填写版本号以及项目备注。（2）上传成功之后，登录小程序管理后台

-开发管理-开发版本就可以找到刚提交上传的版本了。

3.将这个版本设置“体验版”或者“提交审核”。小程序发布

小程序版本

版本说明开发版本使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本