微信小程序开发项目实战（微课版）教案 项目1 初识微信小程序

《微信小程序开发》

教学设计

课程名称：微信小程序开发

授课年级：________________________

授课学期：________________________

教师妞名：________________________

20年月日

课题计划

初识微信小程序4学时

名称学时

微信小程序简称小程序。张小龙于2017年1月9日在微信公开课上宣

布其正式上线。小程序英文名是MiniProgram,是一种不需要下载安装即

可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即

内容可打开应用。微信小程序诞生初期，备受各界人士关注和期待，但是短期

分析之内并没有对行业造成绝对式的改变，因此曾一度被一些人认为小程序只

是昙花一现。然而事实证明，小程序并没有就此消沉，而是在扎扎实实、

脚踏实地的改变着整个互联网。“跳一跳''小游戏的出现，让更多的人认识

到了微信小程序。

1.了解微信小程序的概念及其发展前景；

教学目2.掌握微信小程序开发工具的使用：

标及基

本要求3.掌握微信小程序的功能：

4.掌握微信小程序的目结构。

1.认识微信小程序；

教学

2.微信开发帐号准备工作；

重占

3.小程序的注意问题。

教学1.小程序的帐号申请；

难点2.小程序项目创建。

以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识

新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流

行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开

教学

发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依

方式

据专'IK教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学・

督学.自学.辅学.互学”五环节的教学活动，充分体现“学生主体，教师主

导”的教学理念。

任务驱动

教学法

项目小组协作

教学注综合性方法教学法

'/

、、一案例式

教学法

图教学方法

(1)任务驱动教学法

任务袈动教学法重点培养学生获取知识和自主学习的能力，是完

成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、

网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环

节，完成学生职业素质、职业技能、职业道德培养。

⑵项目教学法

在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为

驱动.项目实施与校企合作企业数据库系统开发过程一致，使学生的学习

更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主

学习，从而有效的促进学生创新能力的发展。

(3)小组协作教学法

教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，

在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用

自查、互查、教师检查、产品推广应用等方式检测工作成果，并针时检查

结果进行修正，最后总结和评价。

(4)案例式教学法

案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运

用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到

现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。

一、认识微信小程序：

微信小程序简称小程序。张小龙于2017年1月9日在微信公开课上宣布

其正式上线。小程序英文名是MiniProgram,是一种不需要下载安装即可

使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可

打开应用。微信小程序诞生初期，备受各界人士关注和期待，但是短期之

内并没有对行业造成绝对式的改变，因此曾一度被一些人认为小程序只是

昙花一现。然而事实证明，小程序并没有就此消沉，而是在扎扎实实、脚

踏实地的改变着整个互联网。“跳一跳”小游戏的出现，让更多的人认识到

了小程序。

官方网址ht2s〃mD./

教微信小程序入口：

学1、扫描微信二维码。比如扫描微信官方小程序码：

过

程

2、进入：微信，发现，小程序，有附近的小程序、搜索小程序。比如可

以搜索京东的小程序。

3、在微信聊天界面，下拉也可以看到最近使用的微信小程序。

二、准备工作

1、硬件准备

装有微信的手机一台。

2、账号注册

进入

/cgi-bin/registermidpage?action=index&lang=z

h_CN&token=注册一个微信小程序账号。然后输入邮箱注册账号。

•一个邮箱只能注册一个微信公众平台账号(比如小程序、公众号等)注

册的时候，先选择个人用户即可。

•如果你有工商营业执照，也可以创建企业账号。

•企业账号能拥有的功能会更多，比如支付等。

・注册完后，后面会出现一个二维码，让你扫描这个二维码来绑定你的微

信账号。

•一个微信账号只能绑定5个微信公众平台账号。

3、注册小程序账号

(1)访问微信公众平台官方首页(https:〃/),在首

页下方选择“小程序”进入小程序页面，如图所示。

图微信公众平台官网首页

(2)在接入流程的页面，可以看到小程序的开发过程。依次是注册小程

序账号、小程序信息完善、开发小程序及提交审核和发布。这也是即将学

习小程序的操作过程。选择“前往注册”链接进入到申请账号页面。

接入流程

[

一）在公众搴完成：面6司以H力■行他立完■«!开夜.

2，J的序修显完善

一，gd阴感基本优■.1*.介IW%%的.

3开发，N?序

4提交审核和发布

一）完由hWMT发后.WU配加即可加布（公JWWHM

图微信小程序接入流程

（3）进入到小程序注册填写信息页面，填写的这个邮箱必须没有绑定过

个人微信，也没有注册过微信公众平台卜的订阅号或者服务号。在账号信

息页面中填写邮箱、密码、确认密码、验证码并勾选同意协议条款，如图

所示。

，r，,

“・V・■・・，••♦■■・■

■QB

图填写注册信息

（4）小程序系统会发送一份确认邮件到注册时填写的邮箱中，如图所示。

单击“登录邮箱”，去到邮箱确认激活信息。

区

M3”

图邮箱激活提醒

（5）登录对应的注册邮箱查看激活邮件。查图所示。

AfiBBSB殳.-・・[•・j夕|W■「[j

-iM慌例例0H1*-Q3©e

方4人*X16U*mO8Com»♦尚com<5

."Apro9rsm41M248m、,

|w■:202i4<Mni>Hotst（mz）

■fitMMeniteann.

公众平台

丽

—仔？第EWhW序.

分的.承9.力ERgy21268m.■力击。下.展■活每号.

httMeqwe<・，cpgconvw・cx^，*»i>cV,a^w*^a，iy^，・•••••।a*.|»—■■"30Abc«M・E»rYe，》fYCO«X>>o*e<enM»，17c7628igda6^aO4O39:

JO累以上IM无法点击.■棒上阶J博址■♦刿份的再纪劣皿仁龙入口情公众平台.

图小程序激活邮件

（6）信息登记是比较关键的一步，需要填写开发者的真实姓名、身份证

号码和手机号码，并且需要用个人微信号扫描图中的二维码来绑定小程序

管理账户。

（7）单击下方的“继续”按钮进入下一步，系统会弹出一个提示框让开

发者做最后的确认，如图所示。单击“确定”按钮完成小程序管理账号的

注册过程。

2.查看小程序的AppID

成功注册好小程序开发者账号之后，直拉进行小程序后台管理页面或者登

录到微信公众平台（/）查看个人的AppID。在

左侧导航栏里选择“开发”，“开发管理”界面，在“开发设置”选项卡

里杳看到个人的AppID,如图所示。该AppID需要保存好，在后续的开

发中需要读取到个人的AppID信息。

(P小・弟BUI-•・・I

•„开》«____

。・・i1r,二l一

**vw

.cut

-BMRBIV

sg

―■

M***<««*f*B«MM

i«o«e・O

Mmw>

OIXJB

Q>WV

|||MMMMMMMBMMMBUflaBMUMBbflM

图查看小程序AppID

课堂练习1

按照以上注册小程序帐号的步骤，尝试使用未注册的邮箱申请小程序

开发帐号。

5、开发工具

微信官方开发工具。下载链接：

https://developers.w/miniprogram/dev/devtools/dow

nload.html

三、开发工具的使用

安装好微信小程序开发工具之后，双击桌面“微信开发者工具”图标,

运行微信开发者工具，该工具需要使用手机微信账号扫描登录，如图所示。

成功登录之后，双击微信开发者工具，在左侧导航栏选择“小程序”

选项，单击右侧的“+”按钮，进入创建小程序界面。

1、JS0N的基本语法

教程：hups:〃/wiki.himl

http:〃www.w3schooL/json/index.asp

JSON对象

JSON对象在花括号中书写：

对象可以包含多秘称/值对：

{-firstName^z-John","lastName":HDoeM)

这一点也容易理解，与这条JavaScript语句等价：

rir^INdme=M3uhiiM

lastName="Doe"

JSON数组

JSON数组在方括号皤写：

数组可包含多个对象：

(

"employees"s[

{"firstName"："3ohn","lastHame":"Doe"},

{"firstName":MAnna","lastName":"Smith-》,

{"firstName":"Peter","lastName":"Dones")

)

}

在上面的例子中，对象"employees”是包含三个对象的数组.每个对象代表一条关于某人(有姓和名)的记号

JSON使用JavaScript语法

因为JSON便^JavaScript语法，所以无需额?卜的软件就能处理JavaScript中的JSON.

通过JavaScript,终可以创建一个对象数组，并像这样迸行属值：

例子

vanemployees=[

{"firstName-^Bill","lastName":"Gates-},

{"firstName":"George","lastName":"Bush"),

{MfirstName":"Tho«asH,"lastNane":"Carter-)

]；

可以像这样访问JavaScript对象故组中的第一项：

employees[0].lastName;

返回的内容是：

Gates

可以像这择修改数据

employees[0].lastName=**Jobs";

课堂练习2

步骤1：新建一个项目（以后每节课都是这个项目，请保存）

步骤2：在index.wxml页面输入以下代吗。

9.EX

1«1*»*•**!*«>*«*>

步骤3：设置样式

四、小程序布局

1、主体文件

在小程序项目下，有三个主体文件，分别是定义全局数据和函数文件

app.js、全局配置文件app.json、全局样式文件app.wxss。

文件必加作用

app.js是/J短序遭柏

appjson是

app.wxss否

五、综合实训题

•xta*anx

(viewclass«"sliderM>

“Wsrc*a'/«$sets/i»«ges/b«nner-01.p\c*></i»4ge>

</vitw>

5

6<vleM>({p«rson.usernMe))</vitw>

7<vieM><{books(e]}}</vlew>

9<1--别斯-->

10<vie«wx:!*■•((person.>IS}>>/vlew>

M<vlew

13<!-四则运B••>

14<view>({p«rson.3ge»10}}*ie</view>

indexJsxindexwxml

1Page((

•页面的初始数据

data:{

7username:^helloword',,

8person:{

9"username":"zhi",

10-age":18

11},

12books:[“春"，-秋”]

13),

14

课堂练习

思考题：在data卜定义以卜数据，如何读取gender里的数据，如何

将性别值渲染到页面？

&RI

H+◎。三口<-paI?index">

iyP”.(

data:

・ind