微信小程序开发-教案-1.7-教案-第一个微信小程序.docxVIP

第一章微信小程序入门

任务1.7第一个微信小程序

课时内容

第一个微信小程序：

课时

1

教学目标

设计一个小程序，小程序运行后在界面上显示一句话：”HelloWorld!”

教学重难点

设计一个小程序，小程序运行后在界面上显示一句话：HelloWorld!”

教学设计

.教学思路：设计一个小程序，小程序运行后在界面上显示一句话：〃Hell。World!〃

.教学手段：多媒体+计算机

.教学资料：教材、多媒体课件

教学内容

一、任务描述

设计一个小程序，小程序运行后在界面上显示一句话：HelloWechat!”。

二、导入知识点

本任务涉及了view组件。该组件是微信小程序的基本组件，也是一个容器组件，用于布局或显示相关信息。

三、实现效果根据任务描述制作调试运行后可以做出如上图所示。

■10*02Weixin22仅We工尸

■10*02

Weixin

HelloWorld!HelloWorld!

HelloWorld!

HelloWorld!

四、任务实现(1)新建项目HelloWorld；

(2)编写index.wxml文件代码;

(3)编写app.wxss文件代码。

使用了样式.container,使字体红色、字体大小42px、居中。

小程序项目创建小程序

小游戏代码片段公众号网玄项目

注销取消在代码区中，只需耍输入前面几个字母，就可以出现相关组件的代码提示，此时用键盘方向键选择正确的内容，然后按回车键即可全部生成。五、案例运行(1)代码编写完成后，点击“编译”按钮或按下【Ctrl+S】组合键，即可看到如图所示的模拟器中的运行结果。项目文件编娼工具转到选择视图界面设置帮助砧信开发者工具miniprogfam-1itttR开发右1具Sable10S2106J00lg

注销

取消

在代码区中，只需耍输入前面几个字母，就可以出现相关组件的代码提示，此时用键

盘方向键选择正确的内容，然后按回车键即可全部生成。

五、案例运行

(1)代码编写完成后，点击“编译”按钮或按下【Ctrl+S】组合键，即可看到如图所示的

模拟器中的运行结果。

项目文件编娼工具转到选择视图界面设置帮助砧信开发者工具

miniprogfam-1itttR开发右1具Sable10S2106J00

lgKimEi

噢顺器sates鞫试器可视化

编译预览真机网试泊缓存

fcindexwxmlX3appwxss

□X

e三IS本管理制试弓评睛

□—

16:33

Weixin

迅源卬W

口-

index.wx?l

index.wxml

■MINIPROGRAM1

■Mpages

-2findex

index”

index.json

巴index.wxml

3index.wxss

?t7logs

,utils

2vi^wclass?*container*

Helloworld!

HelloWorld!n邛即app.json3appwxssprqjectconfig.jsonsitemap.json

HelloWorld!

蜷疏

人X

QWxmlConsole

SourcesNetwork

Memory

AppOaUStorage

Q：iP

E0?pp$?rvice

▼€Filter

DofaultlEk，

Q

,如

行5?列1空格:2UTF-8LFWXML03IS6

行5?列1空格:2UTF-8LFWXML0

营3溢译，。①。室，代g

代g包4KB

代g包4KB时失力W：Y:谭，.引?3三洎京存HelloWorld

代g包4KB

时失力

练习