《微信小程序开发》-四川现代职业学院教案

班机肥必学比

《微信小程序应用与开发》

教案

2018—2019学年第二学期

课程性质：必修课__________________________

课程类型：（理论+实践）课

授课班级：2017级电子商务技术

授课教师：谭超颖___________________________

2019年2月11日

授课

开发环境搭建学时8

题目

(1)了解微信小程序的特征，使用场景

(2)理解小程序的几种操作流程

教学目

(3)了解小程序特性

的与要

求(4)熟悉小程序开发过程

(5)注册小程序开发账号

(6)实现开发环境搭建

重点：认识小程序，了解使用操作与开发流程；创建新项目与导入旧项目操

教学难

作

点与重

点难点：小程序特性，与APP、HTML5的对比；对应的电脑操作系统版本的

开发工具版本安装；创建项目时需使用空白文件夹

(1)多媒体讲解

教学方

法与手(2)向学生提问，引导学生思考

段(3)课堂小作业

(4)互动教学

1.概述

1.1小程序是什么

1.2小程序的使命

1.3打开小程序

1.4小程序特性

2.注册

3.完善信息

4开发

自Qhttps：//mp.wei»n,qqxom/☆☆正

微信公众平台丛立即注邮筒体中文，

2）完成注册后，完善注册信息，上传小程序头像、小程序介绍。

教学基

本内容

3）准备开发环境：下载小程序开发工具：

下载地址：

https://developers,weixin.qq.com/miniprogram/dev/devtools/downloa

d.html

作业和思考题：

1、小程序有“小程序商店”吗？

2、小程序可以分享吗？

3、小程序可以订阅吗？

作业、4、小程序可以推送消息吗？

讨论、5、小程序是要取代APP吗？

辅导答

疑

实践题：

1、注册小程序开发账号；

2、完善个人信息；

3、下载运行小程序开发工具

课后(1)根据学生在课堂的表现、课后作业的完成情况总结本节课学生的完成

小结情况，对教学重点卜程序的特性予以强调，说明小程序对应的主要工作

岗位，激发学生的学习兴趣。

(2)学生注册小程序开发账号，完善个人信息，搭建开发环境

厉业武，微信小程序入门，清华大学出版社，2017.1

参考

苑曾举，微信公众平台与小程序开发，山东文艺出版社，

资料2017.4

王甲临，微信公众平台开发标准教程，人民邮电出版社，2018.3

授课

helloworld小程序入门实战学时10

题目

(1)了解页面组件的构成

教学目

(2)理解wxml的页面逻辑结构

的。要

求(3)掌握app.json的基本配置

(4)掌握wxml与js数据绑定方法

教学难

喳^占小程序开发过程

占石审

点难点理解小程序web开发工具各个板块的功能

(1)多媒体讲解

教学方

引导学生思考

法与手(2)

段(3)互动教学

(4)演示实训

(1)新建一个helloworld小程序:

(2)通过默认小程序分析小程序web开发工具开发框架:

(3)根据helloworld的文件，梳理小程序的文件组成

▼l&pages

▼回index

JSindex.js

{}index.json

<>index.wxml

index.wxss

►口style

►口untils

Dgitattribates

教学基

JSapp.js

本内容{}app.json

wxssapp.WXSS

(6project,configjson

(4)修改默认小程序的语句，达到以下效果

中国移动下午Z20

WeChat•••。

这是我第一个小程序

<300

(5)开始建立属于自己的第一个helloworld小程序

(6)搭建文件结构框架(新建首页：js、json>wxml>wxss)

(7)页面wxml代码骨架内容基本填充：view、image、text标签

(8)wxss样式修改：align-item；width；height等方法的使用

(9)讲解像素rpx知识

iPhone6PlusiPhone6iPhone5®

像素分辨家1242x2208px750x1334px640x1136px

倍率@3x©2x

逻辑分擀率414x736pt375x667pt320x568pt

物理尺寸6.22x3.06英寸5.44x2.64英寸487x2.31英寸

屏尊密度401ppi326ppi326ppi

DPI154163

(10)wxss样式中flex弹性盒子的使用方法

(11)小程序app.json的基础配置方法

作业和思考题：

(1)利用微信小程序web开发工具，新建一•个helloworld的小程序,作业请

参考截图：

中国移动”185%画下午219

WeChat©

•

HelloWorld

<lo□

(2)在(1)的基础上，充分理解各个工程文件的含义，尝试修改(1)的

小程序，作业请参考截图：

作业、中国移动・□・£9…下午Z20

WeChat•••◎

讨论、

辅导答

疑•

这是我第一个小程序

<1O□

(3)新建一个helloworld小程序，独立编写代码，实现以下效果

9

Hello.七月

课后

小结本周课程内容对后几周课程内容起到统领作用，对课程的项目打下了良好的

基础。

厉业斑，微信小程序入门，清华大学出版社，2017.1

参考

资料苑曾举，微信公众平台与小程序开发，山东文艺出版社，2017.4

王甲临，微信公众平台开发标准教程，人民邮电出版社，2018.3

授课

第3章阅读器小程序实战——新闻列表页学时24

题目

(1)掌握真机运行程序的方法

(2)学会使用小程序开发者后台

教学目

(3)掌握组件中视图容器swiper组件使用方法

的与要

(4)掌握wxml数据绑定mustache{{}}语法使用方法

求

(5)掌握wxml列表渲染wx:for使用方法

掌握wxml事件bindtap的使用方法

教学难重点：视图层wxml中数据绑定、列表渲染、事件的使用方法

点与重难点：视图层wxml中列表渲染使用方法、js文件结构与Page页面的生命周

点期

(1)多媒体讲解

(2)向学生提问

(3)引导学生思考

教学方

法与手(4)互动教学

段(5)课堂小作业

(6)启发式教学

(7)演示法

(8)实训

1实操概述及真机运行小程序及小程序开发者后台简介

2使用使用Swiper组件构建轮播图

3构建新闻列表

4js文件结构与Page页面的生命周期

5数据绑定

6使用列表渲染wx:for改写新闻列表

*7小程序的事件机制(冒泡与非冒泡)

(1)在reader项目pages目录下新建posts目录，新建post.wxml;post.js脚

本;post.wxss样式文件

(2)app.json文件中配置"pages":["pages/posts/post”],进行注册；

1{

2"pages"：(

3_*'pages/posts/post",

4s/-elcome/welcom:—

5】，

6"window""

7wnavigationBarBackgroundColorM:H#b3d4dbM

8}

9}

(3)在post.wxml文件中添加swiper组件，实现图片轮播效果。语句参考:

1<view>

2<swiperstyle*Mwidth:100%;height:500rpx">

3<swiper-ite«>

4<imagesrc-^/images/wx.png"style"Mwidth:100%;height:SOOrpx^x/image>

5</swiper-item>

6<swiper-itemxicontype«Msuccess"/></swiper-item>

7<swiper-item>Content2</swiper-item>

8</swiper>

9</view>

(1)完善post.wxss代码，调整图片轮播样式:

1swiperf

2width:109%;

教学基3height:500rpx

本内容4)

5"lesssass*/I

6swiperimage{

7width：ieex；

8height:500rpx

9}

(2)构建新闻列表完成post.json基本配置:

ReaderMoviewelcome.wxmlxwelcome.js*welcome.wxssxpost.

•■images'naviaationBarBacKaroundColor":"・叩5千8。~.

Bavatar.png'gvigationBarTitleText：**:'*工'j字"|

Hiqiyi.png

Hvr.png

(3wx.png

•Qipages

,toposts

回postjs

I回加峥n|

(1)完成wxml骨架的基本搭建:

welcome.w...xwelcome.jsxwelcome.w...xpost.jsxpost.wxml

12</swiper>

13<view>

14<view>

15<imagesrc«,'/images/avatar/l.png,,x/image>

16<text>Nov252016</text>

17</view>

18(text)正是虾AMI壮时“text》

19<imagesrc="/images/post/crab.png',x/image>

20(text送黄黑正肥，品崇秋之味。徐忐孽把“仆初花的狭芦”和“到楼外楼吃戕”并

21<view>

22<imagesrc="../../images/icon/chat.png'*></iinage>

23<textx/text>

24<imagesrc«MsrcM></image>

25<textx/text>

26</view>

27</view>

28</view>

实现结构如图所示:

教学章

节基本

内容

♦9・・正••・春收N・・花IC

VI临务幅8f拜利方枚夫・■州不■■曰19号・NI

■口If的0中，■一■五双我・・\

(2)优化列表详页post.wxss样式

.post-content{

color:IT666;

font-size:28rpx;

margin-bottom:20rpx;

margin-left:20rpx;

letter*spacing:2rpx;

line-height:48rpx;

)

(3)完成post.wxml与post.js脚本文件之间的数据绑定，优化wxml文件的

内容，如图所示:

<!—post.wxml—>

(viewclass«"post-container">

(viewclass»'*post-author-date",>

<imageclass«"post-author"src""{{img.author_img}}"></im

<textc】ass-"post-date">{{date}}〃text)

</view>

<textclass・"post・title”>{{tif1寸}(八ext)

《imageclass**'post-image-src«M{{img.post_img}}"></image>

<textclass-"post-content">{{content}}

</text>

〈viewclass«"po5t-like',>

<imageclass»Mpost-like-image"

src«"../../images/icon/chat.png"x/image>

<textclass・"postTike-font”>{{collect_num}}(八ext)

<imageclass«Npost-like-image''

$rc»"../../images/icon/view.png"x/image>

<textclass«Mpost-like-font">{{view_nuni}}</text>

</view>

</view>

//post,js

6imgPath:"/images/...”,

■images7process:function(){

0pages8vardate-"Nov182016";

vardate_ele-document.getElementById('id');

♦.postsieh

教学章回postjs匕11onLoad:function(options){

12//奴面初始化options为页面跳转所带来的参数

回postjson

节基本13varpost_contentl»(

<>post.wxml14date:"Sep182016”,

,15title:"正足虾肥敏壮时”，

内容()post.wxssK：116

i«g：{

・0welcome17post_img:"/images/post/crab.pngM,

@welcome.js18author_iffig:"/images/avatar/l.pngM

19}，

<>welcome.wxml20img_condition:true,

()welcome.wxss21content:

22view_num:"112M,

3appjs

23collect_num:"96，

■Sappjson24

:)app.wxss25)

26this.setData(post_contentl);

27),~

28onReady:function(){

29//贞"—.成

(4)完成编程文字的复用，利用wx:for改写新闻列表

x/

<blockLx:for--{{postskey}}"wx:for-index-MidxM|

(viewclas$""post-container">

(viewclass»',post-author-date">

<imageclass»"post-author1*src«"{{item.author_img}},*></im«

<textclass»"post-date">{{item.date}}</text>

</view>

<textclass»"post-titleM>{{item.title}}</text>

<imageclass«Mpost-image**src»M{{ltem.post_img}}"x/image>

<textclass*'*post-content">{{item.content)}

<viewclass>"post-like">

<imageclass"Mpost-like-image"

src""../../images/icon/chat.pngMx/image>

<textclass»"post-like-font,'>{{iteffl.collect_num}}</te)

<imageclass"Mpost-like-image"

src»M../../images/icon/view.pngM></image>

<textclass«"po$t-like-font">{{item.view_num}}</text>

作业和思考题：

Reader项目分支作业构建新闻列表页。

要求:

(1)通过初始页可跳转到新闻列表页;

(2)新闻列表页在顶部有滚动新闻效果;

(3)导航栏的文章显示六条。

效果参考(样式色彩、图片可根据个人喜好设计)：

作业、

讨论、

辅导答

疑

一“李安是一位绝不会重复自己的导演，本片将极富原

创性李安仆所瞩目的新片《比利林恩漫长的中场休

息》,正式更名《半场无战事》。

9262

Sep202016

又是蟹肥虾壮时Nov202016

微信•小程序开发工具安装指南

课后

小结理论+实践的融合。本章以系统的项目式方法让学生进行实践操作，加深对

理论的内化吸收。

参考厉业患，微信小程序入门，清华大学出版社，2017.1

资料苑曾举，微信公众平台与小程序开发，山东文艺出版社，2017.4

授课

第4章阅读器小程序实战进阶——新闻详情页学时20

题目

(1)熟练掌握wxml、wxss、js的配合基本配置方法

(2)掌握动态数据绑定使用方法

(3)掌握缓存storage的基本用法

(4)了解小程序API接口的属性与方法，掌握其中wx.Showtoast的用法

(5)了解同步与异步的方法，并可以加以区别使用

教学目

(6)了解音乐播放组件、API方法，掌握pIaybackgroundaudio()和

的与要

pausebackgroundaudio()的使用方法

求

(7)掌握监听音乐播放、监听音乐停止的方法，调节音乐流媒体与界面保持

一致

(8)了解清理缓存与tempIate内路问题

(9)掌握小程序开发的基本技能

具备小程序开发程序员的基本素质

重点：

1、动态数据绑定：Appdata使用方法

2、分享、收藏功能实现：Storage缓存的基本用法

3、API接口属性、方法

4、音乐播放组件、方法的使用

5、监听音乐的同步

教学难6、清理缓存与template内路问题

点与重

点难点：

1、storage缓存的是与非的语句表达

2、监听音乐的同步全局变重globalData的使用方法

3、清理缓存与template内路问题

(1)多媒体讲解

(2)向学生提问

(3)引导学生思考

教学方

法与手(4)互动教学

段(5)课堂小作业

(6)启发式教学

(7)演示法

(8)实训

1从文章列表跳转到新闻详情页面

2先静后动，构建新闻详情页面样式

3配置全局导航栏颜色

4使用数据填充新闻详情页面

5缓存Storage的基本用法

6使用缓存实现文章收藏功能

7交互反馈

7.1交互反馈

7.2操作反馈

*8同步异步方法对比

9PlayBackgroundAudio音乐播放实现

9.1基本配置

9.2完善与优化

10清理缓存与tempIate内路问题

详细内容：

(1)在posts目录下新建一个post-detail目录，在此目录下新建json、js、

wxmRwxss四个文件

(2)根据参考页面内容，进行4个文件的程序编写

修知乎发表于三天前

当我们在谈论经济学时，我们在谈论什

么？

1引言

在我跟学生课后交流时,以及我在知乎上阅读有关“经

济”问题的论题时，经常会遇到这样的情况：有些人套

用“经济理论”的知识去解释现实中发生的经济事件，结

果发现很多事情讲不通，或者发现“理论告诉我们的“与

现实发生的是相反的.也有学生经常跟我说：经济学有

什么用？为了说明这个，我妊常从两个方面来进行解

释，金试用我个人所擅长的解决问题的视角和他们烧够

教学基(1)在app.json全局配置中配置注册pages/posts/post-detail/post-detail,

本内容

文件

(2)在post-detail.js文件中使用wx.setStorageSyn方法同步缓存，模拟服务

器

15//wx.setStorageSync('key',"双妹英雄

16wx.setStorageSync(*key*,{

17gam❷4英堆二

18developer:**V।"I

W})

20)

(3)Post-detail.js文件中收藏与未收藏的功能实现

46onColletionTap:function(ev«nt){

41v«rpostsColl«ct«d■wx.g«tStorag«$ync("posts^colltcted");

42varpostColl«ct«d«po$tsColl«ct«d[thi$.data.currentPottld];

43〃枚金攵或未枚藏・未收1变成收殖

44postCollected■IpostCollected;

45postsColl«ct«<![this.data.curr«ntPost!d]■postCollected;

46/，更新之d兄百晌B〃tf!

47wx.s«tStorag«Sync('post»_coll«ct«d*,posttColl«ct«d);

48//鬣海归堂9L从匍玄理切畏图片

49thi».s«tO«ta({I

50collected：postColl«ct«d

51))

52}

53|

54))

(4)交互反馈功能实现：在post-detail.js文件中使用wx.showToast实现收

藏功能

参考语句：

52

53-wx.showToast({

54title:postCollected?"收，成功"：”取J代J，

55duration:1000,

56icon:"success']

5(»

教学基

本内容效果请参考：

返回阅读

(5)操作反馈功能实现：在