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

微信小程序开发入门第一章：微信小程序开发流程ontents目录C课程的简介认识小程序01搭建开发环境小程序开发的准备工作02课程的简介互联网时代小程序究竟改变了什么？课程实施平台介绍与成绩评定01ranspageT课前讨论在互联网的时代，互联网消除了距离。小程序希望用“即用即走”的方式激活线下，连接场景。商业模式的颠覆生产模式的重构消费模式的变革企业平台化用户个性化员工创客化探索路径连接场景微信小程序诞生2007年1月9日，苹果iPhone正式发布，这是一个时代开始的象征。十年后的同一天，2017年1月9日，微信小程序正式上线。张小龙向乔布斯致敬，小程序无疑被寄予厚望，希望开启一个全新的时代。小程序的登场，意味着移动互联网真正进入下半场的较量。上半场争抢的是线上流量，随着线上用户增长红利趋于饱和，战争基本结束。而下半场则是线下用户之争，想象空间巨大。当时，微信的月活跃量已经超过8亿人次【而今（2022年）已达13亿】，用户范围广、黏性高。在这种情形下，微信于2016年9月21日公开了“微信小程序”计划。微信小程序是一种新的应用形态，无须下载安装即可使用的应用，用户只需要“扫一扫”或者“搜一下”即可打开应用，这体现了“用完即走”的理念。小程序的几十次迭代包含了几十项功能的增添/改进,其主要可以归类为以下四个方面:1、开放线上入口能方便地进入是一件事,留住用户是另一件事。这便需要更多优质的开发者带来更多优质的小能方便地进入是一件事,留住用户是另一件事。这便需要更多优质的开发者带来更多优质的小程序。2、对开发者友好为了让更多缺乏技术基础的开发者们创建优质的小程序,微信及时推出了小程序可授权第三方平台托管的功能。官方对第三方开发的支持使小程序如雨后春笋般大量诞生。3、关联微信生态群相关能力的开放也为小程序的流量增长做出了贡献。从微信群的小程序分享页进入的用户将带有一张SharedTicket作为其群身份标识,使得小程序可以获得户与用户间基于微信群的关系。在小程序这款产品上,微信希望打通其生态内产品间的壁垒,实现生态融合,让小程序、公众号、群聊之间变得互不可缺、互相依赖。4、拓展基本功能为了满足开发者们想实现的更丰富的场景,小程序也在不断拓展着其功能接口。比如与手机通讯录打通、接入微信运动数据、可调节手机屏幕亮度、监测手机截屏事件等等。微信小程序迭代史微信小程序大战略1、助力线下行业微信意识到，阻碍线下商家大量入驻小程序平台的不止是技术壁垒，很多线下行业的从业者们的困局在于：不知道如何让小程序为其发挥价值。认识到这方面的需求后，微信团队利用微信公开课平台，在全国各地开展了多次公开课。2、挑战搜索引擎微信小程序开发的大部分功能迭代都会由公众号“微信公众平台”发文通告，然而，唯独小程序的搜索功能，一直处在“悄悄升级”的状态，仅在2017年6月3日宣布新增了关键词搜索功能。这条窄窄的搜索框已经开始在小程序生态中扮演越来越重要的角色。3、挑战电商平台和支付宝京东的电商小程序是最早一批入驻的小程序。现在，微信开始了小程序电商的模式探索：2017年8月1日，微信已向部分流量主发出内测邀请：将广告直接植入文章之中，目前可选的广告以电商单品为主。而用户通过点击外层图片或按钮将跳转至指定小程序落地页，完成购买流程。如果这个模式获得成功，微信和京东将能垄断巨量电商交易，且这些交易的支付手段也将被微信支付所垄断。

小程序引流拉新手段？没有小程序时代APP该怎么做？小程序催生的“共享”时代小程序引领的饮食变革小程序填补空白领域防疫政策调整期间，腾讯上线了"新冠防护药物公益互助平台"，为用药备药的用户提供服务小程序的引流手段流量+玩法+产品=“超级转化”“病毒式”传播路径：线上：朋友收到礼品卡—-发朋友圈表达谢意—-再送回给朋友（或送给其它朋友）—其它朋友收到卡线下：朋友收到礼品卡—-到店消费—拍照片发群（朋友圈）展示—-引导其他朋友也去购买礼品卡—转发给朋友的朋友留住客户：用大数据挖掘本质需求十三五新形态教材_微信小程序开发边做边学PPT资源：操作篇：抽象提炼课程内容的重点、难点、关键操作知识点篇：扩展引申课程内容的背景知识点后台环境搭建小程序前端开发豆豆云助教课程资源涵盖的内容“C语言习题测试”案例开发微信小程序入门01“我的页面”模块开发02课程模块开发03

签到测距模块开发04接口开发与云平台05“信息修改”模块开发课程练习模块开发初识后台与数据库初识云开发及实战豆豆云案例模块开发知识体系的建立课程开设的实施方法通识课的开设通识课授课提纲专业选修课的开设专业选修课授课提纲课程成绩评价提交小程序作品论坛讨论

测试情况

完成作业成绩出炉作业批改标准：每次作业5分1，上传2个截图（PC端和手机端）2分，每个1分；2，对功能进行个性化修改1分；3，有心得1分，心得质量好1分。作业成绩占20%;测验成绩占20%;每次10道客观题，10分。课程讨论成绩占10%;提交小程序项目占50%;专业选修课组队情况专业选修课程作品26通识课组队情况通识课程作品参赛作品资料百度云链接ontents目录C课程的简介认识小程序01搭建开发环境小程序开发的准备工作02搭建微信小程序开发环境

申请账号下载开发工具开发第一个HELLOWORLD小程序02ranspageT进行微信小程序开发，第一步就是要在微信公众平台：

注册一个开发者账号。

申请微信小程序账号登陆微信官方提供的简易教程链接https://developers.weixin.qq.com/miniprogram/dev/）进入教程后，选择“申请账号”。点击“小程序注册页”按钮进入小程序注册页面。

准备工作

注册账号信息填写填写邮箱、密码、确认密码以及认证码勾选“你已阅读并同意《微信公众平台服务协议》及《微信小程序平台服务条款》”，单击“注册”按钮提交填写好的账号信息。

注册邮箱激活在账号信息提交后，进入邮箱激活页面，单击“登录邮箱”按钮，

登录到注册小程序的邮箱查看激活文件。单击邮箱中的链接，即跳转回微信平台页面并完成邮箱激活。

注册信息登记完成邮箱激活后，进入信息登记页面。注册国家/地区选择默认选项“中国大陆”。主体类型（个人、企业、政府、媒体以及其他）根据开发者实际情况进行选择，本书主要以个人类型为例进行讲解

注册选择个人类型后，页面下方会出现主体信息登记填写主体信息时，用户需要如实填写身份证姓名、身份证号码和管理员手机号。

一个身份证号码或一个手机号只能注册5个小程序。单击“获取验证码”按钮，等待手机接收验证码，填入接收到的6位验证码信息登记

注册填写完管理员身份信息后，管理员身份验证一栏会自动生成一个二维码。开发者使用本人微信扫描页面提供的二维码。扫码后，手机微信会自动跳转到微信验证页面。开发者核对微信验证页面上所显示的姓名与身份证号码无误后，单击“确认”按钮，系统会提示“你的身份已验证”。信息登记

注册手机微信上确认后，信息登记页面也会提示“身份验证成功”。单击“继续”按钮进入下一步，系统弹出提示框，让开发者最后确认提交的主体信息，单击“确定”按钮，弹出“信息提交成功”提示框。信息登记

注册单击“前往小程序”按钮直接进入小程序后台管理页面。管理员之后可以通过访问微信公众平台（）手动输入账号密码登录小程序管理页面，进行小程序的管理。安装微信开发工具在简易教程中的左侧导航栏选择“安装开发者工具”，进入安装开发工具教程，单击“开发者工具下载页面”按钮即可进入工具下载页面。安装微信开发工具进入工具下载页面后，可以发现开发工具分为开发版、测试版、稳定版和内核升级版。为保证开发工具的稳定性，建议开发者选择稳定版的开发工具，开发者可根据计算机操作系统选择对应的软件进行下载。安装微信开发工具下载完成后，用户会获得一个exe应用程序文件，双击该文件进行开发工具的安装。安装微信开发工具安装过程如图：点击下一步

点击我接受

选择安装位置，点击安装

正在安装

安装微信开发工具安装完成后，提示“安装完成”，单击“完成”按钮即可。安装微信开发工具双击桌面“微信web开发者工具”图标，运行微信开发者工具。用微信进行扫描登录，扫描成功后，在手机端单击“确认登录”按钮即可登录并使用微信开发者工具。

创建HELLOWORLD小程序双击微信web开发者工具图标，打开开发者工具。

左侧导航栏选择“小程序”，单击菜单栏中“+”按钮，进入新建项目页面

创建HELLOWORLD小程序进入新建项目页面，依次填写项目名称和AppID，并选择项目目录、开发模式、后端服务和开发语言。

创建HELLOWORLD小程序小程序的AppID可以登录微信公众平台查看。登录小程序账号后，进入小程序后台管理页面，左侧导航栏选择“开发”，然后顶部tab栏选择“开发设置”可查看AppID。该AppID需要单独记录和保存，后面用于开发工具的登录。

创建HELLOWORLD小程序项目名称：可根据项目自定义一个项目名称。AppID：每个小程序账号都有一个AppID，小程序管理员可在微信公众平台查看自己的AppID。AppID必须填实际的小程序AppID，否则部分功能将无法使用。如果开发者条件暂时受限，无法注册申请小程序ID，可以选择AppID下方的测试号新建小程序，但是无法实现真机调试功能。项目目录：项目目录为项目代码包存放的路径地址，可选择默认的目录，也可以选择自己新建的空文件夹所在的目录。

创建HELLOWORLD小程序开发模式：开发模式有两个选项，分别是小程序和插件，插件是可被添加到小程序内直接使用的功能组件。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，为用户提供更丰富的服务。

后端服务：后端服务可选择“不使用云服务”与“小程序·云开发”，本次案例选择不使用云服务。开发语言：开发语言可选择“JavaScript”与“TypeScript”。

创建HELLOWORLD小程序填写完新建项目中的各个信息后，单击“新建”按钮完成HelloWorld小程序的新建。

HELLOWORLD小程序简单修改打开新建好的helloworld小程序，点击app.json，找到window字段。

★修改window属性

HELLOWORLD小程序简单修改将navigationBarBackgroundColor的值改为”0ca”，将navigationBarTitleText的值改为”微信”,将navigationBarTextStyle的值改为”white”,每修改一个值编译一次代码，观察模拟器中页面的变化。

HELLOWORLD小程序简单修改

★修改motto值点击index.js,找到page字段，（开发者可自行修改其中的motto值），此处将motto值修改为helloZhuge。

HELLOWORLD小程序简单修改

★修改动态获取的昵称在/pages/index目录下，修改index.js文件，将canIUseOpenData的值改为false。修改index.wxml文件。将{{userInfo.nickName}}改为你想要的任何名字。

HELLOWORLD小程序简单修改

★修改动态获取的昵称在/pages/index目录下，修改index.wxml文件。将{{userInfo.nickName}}改为

“大佬”。如果看不到头像，将调试基础库调低到2.17.0版本，在手机上预览要推送

HELLOWORLD小程序简单修改

★头像问题微信小程序最新用户头像昵称获取规则调整应对措施（2022）：/ZHANGYANG_1109/article/details/127947267

HELLOWORLD小程序简单修改

★添加tabBar

给helloworld添加一个tabBar,代码如下：

HELLOWORLD小程序简单修改新建images文件夹，用于存放icon的图片，images的添加方法有两种。1）单击目录结构区左上方的“+”按钮，选择新建目录，命名为images；2）打开项目存放目录，在项目文件夹下新建images文件夹，将icon的图片黏贴到images文件夹下，即可将图片放置于images目录下。

HELLOWORLD小程序简单修改

给大家推荐一个icon的下载网站，网址为，开发者可以在该网址下载自己需要的icon。

HELLOWORLD小程序简单修改

★最终效果示例：感谢聆听！第二章：简单案例开发实战简单案例开发实战心理测试小程序安装与理解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中