微信小程序开发-教案（完整版）.docx

第一章微信小程序入门任务1.1微信小程序概述课时内容做值小程杼机送课时教学目标小界中於介：小程序的M生S小区字的但技，小农序的发展陋景.教学重廷点小程宇的诞生，小也序的优且，小冏片的发展碗Bb教学设计I.教学.电路，介绍小程仔豺介、小程杼的诞生.小程杼的优收.小理林的发展力景.2 .校学于段，乡煤体计算机3 .敕学资切：ftlt名媒体织件教学内容一、小程序简介小,小完全不需要下战安装,也不道Mt更不会占用手机内力.微曲小程序也被扁林为小程序.扎英N%精:是MmiRmm.它是K存在F微伯内耗的经SIHifiimw-.触信国及制队在Jtfr方网站上fr段X于徵信小松停的介绢：“小门毕氏耳i的开放四、小程序的发展前景在未来的发展中.小区杼相会更加力位.快戈.注掰中讲的娱心也更加快史.方便.，此Ha九坯欠过步加和第三方平台的合作,如果的杯开放第三方开发平台,那么它将为小他尹的开发提供史人的用力支援.井乂刖舒小月坪的完善，小程序的计发A制能梦蜃得更大的权限支标,由此可见小程序在未来的发底空剑中Ai和刍巨人由井IlMF企业遗行小理并初作的优势也将会选一步凸8出来.小程序传统产业的代我.如图所示.*IN9*:z二二BQ公代R一小Iremt一小程序可以使企业用用户更H地交流,也能弱实现用户更好的转化,所以对企业来艮小程序可以带来可观的利洞和由htSe希做信开放的功能的小新用*那么£小制即也会不斯地完告EI己Jffit吃功能H不然和的法间,延科也就提供了史乡的接”能力从而能挣方便开发ItiJH，源皮地段必.相切未来小ft?呼也将JH备史多俄功能.那么全业所能突现的功除也会陡在熠加.这对J火未来发展仃希至关于.要的作用网时也修绯MG信的发展小程序互联网公司的代表如图所示.教学内容一、登录微信公众平台官网坛对口信公众平fjYM3天hltp:*7mp.wcixinx|q.cofn>.如四所求.如梁斯诙使用ItS小双睁,WJK更注IH小冏/账弓,单击“立即注出"优按削七现如图所示MWn.在出现的窗门中单出小程存”破授.然G城席注期向导就可以完横小卷停恋号的注耨,在注册小程序东号之前应先准冬好个个人他箱.二、填写账号信息小程序的正式注册我而自含3个内要填号的体.愎何箝联电、密科和偏认密码、5i三W.tt-iWWi£石与也议条次K项,如图所示.<P在R交注册后会看到”箱激活般雨.页面效果如四所示.owi三三'邮箱激活曾决处板的注制即SiR衣激活If件,如图所示.域习第一章微值小程序入门任务1.3小程序信息的完善课时内容小刚*性总的完“课时1教学目标完詈小程序信总：管理或男教学重难点完善小掰序值必：普现成员.教学设计1 .软学电路，介貂先哲小理朴口忌、管理或员,2 .找学于段，乡现体计口机3 .软学资HS敦、名规体织件教学内容一'完善小程序信息优账1注M光戊后东花光中小程序的加本fflR.如RI所示，,J8序发布流程1 ,，«M.r<4M84WK.：Ml>4t*nsww*：，1*ajv*rs:JWnnamFnX。MHB*najinraawsarmat*EaHlKRSVtBMAqi>CNOM*11v<kS«»MK*»RMBWVVMflHMB««z«azm<32*外arm，.NMNra，*trmn«*vBflJtBSUW*CeHlMIIn*B*.所J，.I*2 ，MivrtAMMVBVMira4tt74!.i分：*不出丈Wa/K处“上tma.包曷上文中井也*4厅徐泉.工1»文只说也用11<hk<x叩仙”处为G先机段CMm%fnn外Itd并京四为He文件拗供“外接口.6WV粮M线以M8”匕文国打伤改Mes74j:己/exports.sayGoo>y-sayGoodby<>三'实现效果在“Fd尸文件中定义的变V利雨总是至局变及和南致.可以在任何旅文件中通行引用.也史案网描述启行结宋如下图2：JZ所示的效35.MMM»WV«41*e堂.KMWS泗硼OHISMtMla>JUMvnMAMtMMBotJimmMI<JtwsaR*a*to>4Mamm*MaQa««w>JtfifliMa一或AMk过句/04小巴修改SEPHEn的一STk9Jaf11“小文件？一mawR*hrIIMXJ2交录他南欧的作町和怆跳化成M!留四、任务实现ftindnx.vnl中设置了六个调阳变"分别足m峪吆.卯吩、*|0、fwg6和小螭这六个女京裔要通过index.Js把«1漪集到崔图层中.M过IIlM1.Je文M中调阳w.Jd文件.*用index.Je%件本身以及W/UutiI.js文件.2”本如却1.33限、Emkx.rnli，da.HPPjqK：utils.jS之内的调用关系.件、事件杀统可以内It出页面的结构.< 1）。对效象地贝川第次沆续时使用的制的数M，WXM1.中的动态数据均来11HPgccfiU.真而Ul仪时.M”以JSON字符小的物式由泛辑乂传至法染信.d中的教出包括：字符那、数字.布尔Ib对象、代川.< 2）敬树济定，«1败!可以通过WXM1.对以IB进行睇注.数</定便MMti心ChCia法双大抵号）IHHI包起来可以”阳T：内办.纲件GK性懵要在双引号之内,控制黑性（«要在女引号之内入关区字（需要在北Sl号之内八B,m<,故胡、对象等场景.< 3）刈DaMl的数.此的切U丁格皎据从皮，心发域H视图属舁步）,同时戌殳“魔的IhiMhUl的（ft<I11J>.4）事件坏定W件是在图层利迈耻星的通伴方式，它町民将用户的行为反馈到运愣房进行处瞰.中件可以纲定在m件匕当触发事件.就欠执行企轿层中财应的事件处理由敛.耶件财象DJ以携吊颔外信£Ii1.diUxctKiuche%.三、实现效果HUH任务报逑可以儆出如图3.1所示的效果.初修界面如用（八）所乐在视图片文件KXievwifnI中加定了柠动我拗除b、C再定”；象攻想SIUdE和IWl数盘n达NeI拗的幻忆叫以遗过茯班以文件耽ZJs来传过当点由”修改决定数据“按忸时，法来的软也会发生相标的变化.如四<b>所示.<）朝匕群*（b）UlAauittIK*im小牌小收把第尼四、任务实现Snm*dN舛代码MlIM）：i%>ahK.，*小g：x出件BttK5RMh<uc¼>lf1B三K7RJ*l!<*4cM>i1lftIttlMIOttI：八EAE力a*2KVh<SWl11ftttIMhi3的UU匕处足2HK.M件BS(W)：AZHM人此批发Vj【祝k'vc>机件4竹中俯样式伟GkMMW%一个概幺”？j*足个蟹2为内根为，YgA如Ib如娱小是个WiC.*包"足明瓜的区物Mkl%k/七除咙火比旅足、f样式ii<*w>«1件小程序界由主要由文本加总和I个技尚四成文本S总可以4过、XW恭Hl来2改，按假利用KrthMimn来实现.(I)iMkxMxml文件中的我描垠由H符号与imfc博文件中的8WMi*定.该逐定型单向的.SJK只能由加，宾品文得桁给gjuwxinl文件不雒反曲传地.<2)普通救网博定门技怏用变诙B来实现知本案例中的受IRa.bWc:对欧兹描懦定通过“对致幺对象KtT来京现加本案(W中的SuKknt3ulDSik.三cKlSludailbirthday;加上下标殳Si来宴现,加本窠制巾的IlrTMO|amyl和s1111y2.<3)界酊曲浴图了今buo<川曲并利用该姐件进行事件稀定.小科蟀定划1在MyS文件中定义事件埔定的数来实现.(明界谕使1派VkWA姐"调整字体人小卬间用.kUAHlI<<l-lf*5ex.wxwl-><vlcw<lass"t>0M>i一八八”-Hn1.午口找n.*n½<viFM><vle->7*:<<Student.stu!D<:ew><v-1.CtUdnt.rwm<vS<vicM>HkJhStvlent.t>rtNlay<>«“8入学MX1.(arrayin)</vUM>«vi»»学校.(5tudant.Mheel</,*><vlc>><ks<3211)<7.1c><vw>W*½M.(n)HbH(<)<<<vw><butontype-*,lMrytlrdtp-<-5ify">11ft1X<rttc<><viM>2母巧IMX.权文件代码XR中定4cViCWAjH1株设47，”、小和边距.谡样式对WEl女川中的所f*Vkrw)如胃热Mfl用.index.w;文件4K加：|3.07in*js丈件代吗在&U<Mtt*.包任普通敛树,对象国故典.在编定第，件通假中划过,用改未修改婶定的数累.gde.1.j5工件：/inde三.j$PW(U出而的切的收"data:b:2%C：».Studvnt:JtuID：,201956270191.2d'；l我小、birthday248312t<hooll'<：Ml/葭知今久，),3:(-2913-/2819,/2026'),rrx.ttW.rW<a11M,MWltz*1.odify:functlcn()ths.5etu(a：iee.b：2B«,C3,Stu"nt"5tuio:ou.Hni),将妈，bir<bdy2HH44iKU,.school:ittWiR>)arry:2816，2919,»20,“：林切，,，UflWffJ*Il*44.w:U»*lw*-HM<tKU*t<Wll9<.(aal)>*tM><A，全Q<»”、4>.e<tt4KWMr：311卅QttiBu,n(F1.dIk»ffl2,Wtdcx,加、即从J，Wtd5.141川调在£&用<'<11*'t7)-一,IflHMidHf)卜八，e<MnKk1.fKrke色,“XiMtl?*SWR9IUkvuxtti'.M>1!1.1.S，SlHM<ti*MMKUv<(1)除。)11dc.ml文件代网本文fl邠定了<1秒1、磔照这B个变Hb通过在index.”文件中给送6个交似小幻,来演示在IMg,加文曲中引用全瑞变Ia刊西口网解受JaW曲皎以及JQ他校块的安7和前数的方法.文件中使用了ViB样大来设匿文本的大小和打W距.index."H文件：<I-111i3X.hXV1->><vicwcla55"t>t>ClCV10”1乂1。)空景悔哄化示例”330<v>->Vi¾t<(E匕】"，：”><vic>"V-Uditt:(rg2!)<>lc*>-g本Mfl交h<(«g3)</.：a><v->4t11ttt(1154)<.:?S我尬模块亿交京；(MgS)<vlh><vw>a?nj6)<vr*><v1<m>6indcxn。/件代用.该文件更义了,X、title和田”的样式，用来级HM跑大小、文字大小刊行问距md""3文件，/,”介8.3t"/.box“Rg2r;6）在Aeg文件今下IntollHIg文件夹，并在其中NUntlH1.Jg文件.然扁耳vtll.R文件代科.该文咨定义了1个殳Rfal个曲数如果要在大他文H中引用这个变录和函效就0!通过11x>jlc.exportsr£cprts来出i安单和福敏.Uti1.j，文件：/utlB.jsV"Mtliz>，-TiBJ?V.;GnctlCflutilFunc<>（return'次染火"utAh.八i*IV;）5<*JJtf.IfKTt*<UtllME】UlilIiHC.UtlUurc»MI$石JSXfi'M行格仆冲KmasCmM文件由段为抬父什YiV6KM<1ISM.己纺含“卜UIhm=：.个Y，.【，1七；，川足«.不会互和影M加1全局曲故geiApo。可以佚取金扁的理用实例,如果将暮全局的故苑,可以在APPo中&可以将一些公共的代以抽褥成为一个小独的”文件作为一个帙境.tft¾ilnodule.exports或在GXPory对外修矫接1.l在篙发这些校块的文件中.使MrN5a(a11h>将公共代码引入.主吸注杀的鼬MIh为树”路径日时不支特绝对路役.练习第3章小程序视图层任务3.2成绩等级计算器课时内容成箝等皴计口裾课时4©学目标掌提inputfflftI掌W利解语句wx:if.教学要诲点单Winput小件和wif兴断际句.教学设计1.ttKluminputUfMtiMdfMMfiHgr耳4MMHF累的小盘)：通过小程室发故砒处林砒如识.2.教学于校，多/体A计算机3,敕学依科.H.多媒体以仆教学内容一、任务描述殖二一个成维>级H炼制的小也件.融入成绩后显不成绚第坊.如果输入或绚大于10(戌力小T0.则现示成绩偏久有误的提东.二、导入新知本任务故户运用jinputIH件和w"f实现或优等役的利断.罚断送句WMM。卡展中,一HJWXgZignI，惭足3K%i保论代码如VVicWwxzif=a(IC(Midition)*>True<vicw>质JMHI*veM1海g-CkC块.1VVieWwxJF(knj(h>5>l<.'vicw>VWiCWwxclif11knjth>211>2<,vicw>VViCWwx:d«>3</vicw>三、实现效果做小任务描述可以做出如图3.2所示的戒紧.如C)所示.制的界面M示“饰输入你的考试成绵7知RHb)所示.融入腮的分收.显示成»等级为“口蜉二知国(c)所示入3的制kM示勉Hk：如Ifl<d)所示轴入99的分数,显示成城等级为“优舟”,成饶等线站因为Wi入的4OK值通过WXlr判断而行出的玷紧,正确校入个成城并点击代处位置后，招限示该成城的等投,如果融入成绩火Tl1»成小JD.示”成绩W入*i»!*的松乐.(c)皮曲汲及格界IM<d>tt-WiflIW3.2或S*nttW*Mi效果四、任务实现I4'iIndtKfml文竹代码代心中上工利用inp<H姐tl来输入成编,该成绩在打文竹中处取井帙说她到WXM1.视图房.花视图层利用*if来兴所成微等级并显示.input用件的上、卜扑功距.以及宽收.扁收国14枢Y株式通过gpm博式来世贸.de.wml文件.<l-indx.n×v)>"><view<1355*t>n><vi«wcu-*tItUl>>*<1%即?物，/1<m>viewclo3"tNk2a>t姐等及计或2kvie>«v*i猊*入体的考试UUfl"Sw>(icRtbindb)urv-(corr：<utM)M¢bolkr*rJtiAt<tft><l11ut><vic'>wxzl<(5corc>iee5Core<e>>">tM*¾iS:认帖入近喻的RHk:CQI(VW:lif*a>core>«M>>Mtftt<v.>(vie>cell(5Core>-S9F>UtWa:ftW<v)>1M«，、wxselifa(scow7e*>lttfi9ft;W<vl4>viewwx:elif»e5Core>.6e>>t<ffi9£S?Zt格八】w4<v16mwx:d£。而XtI1.不la<"G>4v>m>2坂、iiiuk文件代码文件定义iinput加件的样大,index.WXK文件见附件：3_»*index.与文件中的代科MHMkRTw0川代；时面”，匕小rsH.IttfcUI仙即叫：iFEg时.分<为小Q林ItttUIQIRMl:'2d】”'wH白面I2中制归化gre的依为。,当XixzMl时，分数为不八格H站小程序运行E切的WMM*“不值格”的很同以yEiru"tHHIlIhi“YD"WM二弟nIH为Fmmmq-'1(ft.井把该值浦染K视图展.Sde1.js文件：/1介8«.”U山圉的初龄皎以data：sco*:-1Moretnputsuxtion(e)(thlS.5CtDM0(Kore:e.detail.value)»域习第3章小程序视图层任务3.3列表渲染课时内容外表1免课时4©学目标常找WXRr时数用.对致刊字符小城行列&演桀的方法.窣Wwx:fw-tnck.iftwxz(brilcm佬也箴敏默认卜."index和欢认敏绘I元素kcm的方法：掌握。N.k板茶中快用UVtbf对多力点结构块迸行列Kift染的方法.教学复不点掌报wx:3对数姐.时致和字符小城行列表演微的方法.技学设计1 .nz三讲解利用对IW1、对象和字符甲遂行外案的办法.瑞解利阳u¾:tbM11Jet和“Xfocicn"k¾Sii11M认卜Mindex和M认数汨元求em的力法,请3在MZk标答中使用WEB对多节点结构块迸行列衣折妫的方法,第与一个“衣笊染的小程序：通过小巴井文成巩W柒砒知板.2 .敕学手段：身修体计算机：«.教学依H.多议体双什教学内容一、任务描述一一个小把弹,利用皿匕实现附姆定载由、Itttftit1.对做以及字符小的蚓表旅绝.利用Wxzfcrindcx和w%:fcr>itetn实现时index和item的重命名,在block样签中使用wk：<or实现对多节点玷构块的泡染。二,导入新知作案例主要涉及加识受1.(1)利月J*"b对数汛、对殴和字符W出行列之流处的方法.<2)料用VtRirimkx柏wx：fo<-ilnii修出数抓戏伙F"；ink"啾伏双地元素ilem的方法.Mk11>2:r<<>awbr<w-.*wu>灰"中？M>IO3RlO2k(,.<3)在Nock杯:多中住Mwx:for“名誉点结内块避行列&尔安的方法.-产11。川；氏G卜#可以“？ttliO5Ki(M:A：Vum:："“hkd修¾UBttIO7RIO!<N.1.>戏11-1使用HEB找忤第定个数如印Oj使用教卅中着项的盘小比泡案该扭件.教制当前项的下标变及名默认为ImkX、数蛆力说项的空域名队认为hcmtt/IJW0向m可以指定数姐当他元豪的变成名.怏月JwfcimJc可以指定数如分他F标的交似幺,奥蚁bk<kR".也可以.wv(<>rHl(妙反3>标钳I以演奏外/以多济店的结构跳.-MI。用：也T僧品？4指优小1'儿代伤联，岭1MEl9Rs!Ma11M:"W足相超略而Jl报/go，”“K*ttlRii):A：如果外&P点的位咒公动态双交及，“新的九6曲加气刎表中井H6空划表中的元俱将自己的特M利状态(如m°w中的偏入内容e*h的纸中状态)靠货使用w*kcy东指定列中元素的瞰的标M机如不播供WRg.会极个WHEi叩如果明*知道该列&是静态,假行不必对IK元蒙顺用E以这杼忽略kWU哒.,?，x:foc的值为卡泞那时公梅？彷中外析底？符MUEiy.比珈:Gieu*i(br-af*j">(item11<vivw>“同于<veuuxrfar=(11,Y.Y,Xyn>UiICmIl<,vicw>U)花M号率川号之阿如果“空格.0m件解析成为敖加.比如：VVieW、：for=>(UI.23|n>>(iwm<vicu>等问千<teuufor=(IJ3*>(呢时)<,view>三、实现效果根据住苏物述可以儆出嫩图3.3所示的效鬟.界内中出现了对我我1、对象.字符小川&泪染以及科用block泣续系节点站构块的结果,l*b!KWXiunMnAiffKnft>11C0c4rtrJ.nc、？ro“HInC2m的以介质'；方式无3it-论及H1；在泞中2文整方月I.例射A*rt>三、任务实现忸如.无法确定也心的塞收利M吱.怛实现的坤而效果内要耍“垂打四中.WXSS代码如下I.CtBttMB(：.Jl八工*蹲e<eww>>.to4r<MoAMaHWR1/mgR0.整，中/练习第4章flex布局任务4.2容器属性课时内容容制Mtl课时4©学目标掌握HetMrea懦性的阳法,掌捏11ezw11<M性的用法I掌WjmifyCWEK性的用法：单Wdi即is性用用法：常摄dig113nem属性的用米;依阳容器战性Q置小田序中客备的也盟、财齐方式等.教学重布点代娓ZPmxi混性的用法,掌堞negMH性的阳法I阜IMjmifycuE(W性的用法：单WMi即itcmM性的用法：卡出山叫81«”|3件的用法：教学设计1 .载学W环：介?瑞的6个日性：flcdGxt加fk*11,Ccxn<>wjusgmntcn1.nncMUmudign-beim.通过多郦体演小和实机就作访耳微伤小程序揖发中IIC-direaion.e-wr<>>11c-w.Jusiify<ncm.MttCyme.Ni*4c11邙懦住的使用I4过小程存实核巩固瓶枇1出“2 .教学手段：修螺体/H算机3 .w三ntt多修体霆件3 .HftwvccSavedFiklnfb(Objectobject)用于我取本地文忤的文件伍2.此接1.B!H1于我取己保：咒东拽的久件若禽叟孩女tnHZff<i.Vl.可怏用,XEFikhifoOje依收与&object的AM性包括：fifePuh.mjcccw.(jl1和coJcce.11lcPjh是件路货，*ucccmHiR幅软的您ttObject0的W件说明Wd所示“4 .函数B1.rcmoveSiivedHXObjectobjectI用FIH除本地端存文件,K於数以gj泊M件包括，IiIcPiuhwort。.川I和Ce<v<Udc,ImPinh是贬副除的Ul路径三、实现效果根拗任务描述.HHlg图所东运行代乘的小科件.四、任务实现<1)BiimkxwunlftftW(2)冷写indcx,3文件代孙<3)SlHindex.f文件代码.1122M0一3©基本给图*MBWx移动回联网阳&W培列攵本陶用<h>iti83姆2辩S)四、任务实现<1）用勾IfXkXMMnl文件代码2）总岂indcMwh”文件代码诺文件定义了2个伴K：map和.bmEi,ixx.index.H3代科兄W件，3）如"加#可,文件代玛.嫉习第一章微信小程序入门任务7.0中国国旅小程序课时内容中IMnl猫小&HtI课时18教学目标ttHmbH"象归置底依标茶导班I能使用fiprr*lCI实现景点纶指效紧，旗使用wx4or时衣笊兜的方式实现密恪导依闻惊：能定义齐格？机HNRm4件以*比中枇陵接林均：悔使用&、5W进行篇选JHHMIl能定义菜小切发小布修网IMdiwMmR地使用我小绢件切作&®页面.教学重it点住使用IilbBin"象也以怅露尿花泳就I而使用5wir俎件大规景点轮播入艰：便使用wx:fOr列&泡案的力K女现官恪导航图仄：能定又宫格？OinaHmW忤以实现号妣能按跣，力健使用dl、d.M迸行循名现外布U.能定义菜小切按单击串件!叩MjnMee：晚使用也用出件切作表取贝面.教学设计1 .载学思络：设H一个小也挣中国国旅,金加文博会Ie婴怏用中Bl国Ift3讦机聚、领玲刘礼、兑物礼等,初作完或财底的劝能.2 .效学于衣.多勰体，计算机3 .敕学依闪IHH.多媒体小仆救学内容一、项目需求分析1.日卷/多In文博会需要怯用中IInMfeAPP订机累兑M也等，由中国MCfcApp代件佗H%卓不JEeUIB此我们可以帔个口才中国国放ApP功能的色C小巴饕的时做技,索出东把阳主要界R）M图所示.2.蝎目分析中国国旅徽信小丹挣尚超完或以卜”.噂功能：（I）定或底部板笠林依劝饪,首贝景电佗指功能和容梆牛般劝1之（2）在荷贝里,单击“史IT分类3航,遗人到全俄分类片优界面,Hlm素相关内容的疗航集或利个界IH里：（3）在我方界副里.将芬个俄式以列表的形式极现出来，提供全部.取以下拉索中收来隈示：（4）在中国国旅信普小片牛界而里,提供4票的界面.填力个人相关信总.可吸送忏购恭：（5）在填、农生在挣我城时,以舛出的形火槌供生近列表,供怦户选推获如国旅票通的情况.二、项目准备.ttiten设计跟园标签呼仪时,Sft痣好底部品筌&觥的图标.并建立§个楣应的页面:（2）设计中IH阿微营仪舱就效果时掂笛好甘贞中需要於报的图H.功惠“坏霖现出白格号啦:（4）统计全部分类*版3块区域内部：柞色粉爪、戏的检游：现金分界三I设计戏台在于下拉菜单临城条件设诗梅犬宣刊il三J三（6）杷在通心板般之份片分.保存到本W!卑.2.相KEl火点（I）在界价布川的肘帔,柒齿小网字的配件的优阳，（2）界面杆大世计.毒”e杯Jt进行界Iii的美化Min染：（3）将数知覆*旬本地济要调用H1.ySeor芈Gync这个APl按U遗行依“教#：4）界面断“南要怏用WKRngeIV，这个ApInU1,进行界面绢小.三、项目准备工作（1）行先裔要在番AppIDt（2>/的用片JftJWEiagW对应的文件夹下四、项目实施1 .底肱"多9航段计：2 .景点轮播效果谈计；3 .当格S航设计!4 .里多分类导&计:5 .5点下拉菜结IMt条件设计，6 .景名列九页KHk7 .中国闰微购掣界而设计;8 .8知梁的弹出层设计.t习