《微信小程序开发零基础入门-第2版》教案(含习题) 第02章教案_第一个微信小程序.doc

《微信小程序开发零基础入门》教案 第2章 第一个微信小程序 一、教学目标： 熟悉小程序快速启动模板的创建方法； 理解小程序的目录结构和文件类型； 掌握小程序主体和页面JSON文件的属性配置； 掌握开发者工具的模拟器、编辑器和调试器的使用。 二、教学重点和难点： 重点：掌握小程序主体和页面JSON文件的属性配置； 难点：掌握开发者工具的模拟器、编辑器和调试器的使用。 三、教学方法与手段： 采取互动式教学方法，理论教学使用多媒体投影教室。 四、课程简介： 本章首先讲解如何创建第一个小程序，包括新建项目、真机预览/调试、代码提交等内容；然后分析完整小程序的目录结构；最后介绍微信开发者工具的布局和基本功能。 五、教学基本内容： 第一个小程序 现在使用微信web开发者工具正式创建第一个微信小程序。 新建项目 双击微信web开发者工具图标，管理员或开发者使用微信扫码二维码后进入菜单画面。单击菜单中的“小程序项目”选项进入小程序项目管理页面。 此时开发者依次填写项目目录、AppID和项目名称就可以新建一个小程序项目了。填写的注意事项如下： 项目目录：项目文件存放的路径地址，可以单击输入框右侧的箭头按钮在计算机盘符中选择指定的目录地址。 AppID：管理员在微信公众平台上注册的小程序ID。 项目名称：由开发者自定义一个项目名称，该名称不会影响小程序被用户看到的名字。 小程序的AppID可以登录微信公众平台（）查看。具体查看步骤是：左侧菜单“开发”下的“开发管理”选项—“开发设置”面板—“开发者ID”标题下方的AppID（小程序ID），将查到的小程序ID复制粘贴到AppID输入框即可。 AppID 必须填已申请注册的小程序 ID，否则部分功能将无法使用。如果开发者暂时条件受限无法注册申请小程序 ID，可以在 AppID 输入框右侧单击“测试号”，这样也可以临时在开发者工具中进行开发学习，但无法正式发布上线。 初学者建议在“模板选择”选项选择“全部来源”→“基础”类别里面的“JavaScript基础模板”，如果项目目录是一个空白文件夹，则该选项会自动生成代码形成一个简单的小程序项目结构供初学者入门学习。 填写完毕后单击“确定”按钮完成操作，此时会跳转到开发页面。 图中左边就是手机预览效果图，由图可见目前可以显示出来一个“获取头像昵称”按钮和一个“Hello World”文本，这与手机运行的效果完全相同。 我们可以直接在PC端用鼠标单击来模拟手指在手机屏幕上的触摸效果。 真机预览和调试 真机预览 除了直接在PC端使用鼠标模拟手机触屏的点击效果外，还可以直接在真机上进行程序预览。单击“预览”按钮，即可自动生成一个预览专用二维码。 此时用手机微信扫描上图中的二维码即可进行真机测试。 画面效果基本和PC端的预览图一致。需要注意预览所用的二维码不是永久有效，要注意它的过期时间。一旦过期需要重新单击“预览”按钮生成新的预览二维码。 真机调试 真机预览只能看到小程序页面效果，如果在测试过程中需要像PC端一样获得小程序的状态数据（例如console语句输出、本地缓存数据变化、网络抓包等）需要进行真机调试。 单击“远程调试”按钮，即可自动生成一个调试专用二维码。 此时同样用手机微信扫描上图中的二维码即可进行真机远程调试。 手机调试画面会比真机预览多出来一个浮窗，该浮窗会显示与PC端的通讯状态。在调试过程中手机端的任何操作都可以在PC端调试器中同步进行实时查看。 代码提交 代码上传 预览只能由开发者测试小程序的性能和表现，如果希望更多人使用小程序，需要进行代码上传。只有上传后的代码才可以由管理员进一步选择发布为体验版或正式版。 首先需要将代码传到小程序后台管理端。单击开发者工具顶端的“上传”按钮准备上传代码。 单击“确定”按钮之后会出现新的表单要求开发者填写自定义的版本号和项目备注。这两个字段是为了方便管理员检查版本使用的。 上传成功后，就可以登陆小程序管理后台—“开发管理”菜单选项，在开发管理面板中看到刚才提交的版本。 同一个小程序允许同时有多名开发者提交自己的最新开发版本，管理员最终只能选择其中一份进一步提交为体验版或线上版。 提交体验 管理员可以将开发版本提交成为体验版，体验版目前最多可以供15名体验者使用。单击“提交审核”按钮右边的向下箭头按钮，选择“选为体验版本”选项。 体验版无需经过审核，选中选项即可完成。 体验版版本号下方的按钮单击会出现一个二维码，具有体验者权限的用户通过手机微信扫一扫就可以使用体验版了。体验版也可以继续单击“提交审核”按钮提交为正式的线上版本，但是需要经过审核。 提交审核 管理员可以将开发版或体验版进一步提交审核，通过审核后的版本将成为正式的线上版。该版本没有权限限制，所有微信用户都可以使用。 小程序版本 小程序根据项目