微信小程序开发边做边学 课件 操作篇-微信小程序第1章 微信小程序开发流程

微信小程序开发入门第一章：微信小程序开发流程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添加一个tab