微信小程序开发边做边学 课件汇 吴晓春 知识点篇-微信小程序 第1-10章 搭建开发环境、心理测试小程序-附录 豆豆云案例

小程序开发从入门到实践01搭建开发环境02开发工具介绍03小程序目录结构04小程序开发入门CONTENTS目录搭建开发环境知识点小程序开发准备工作1.账号信息在填写账号信息是需要填写邮箱、密码、确认密码、验证码，填写完毕后，勾选“你已阅读并同意《微信公众平台服务协议》及《微信小程序平台服务条款》”，勾选后单击“注册”按钮提交填写好的账号信息。注意所填邮箱必须满足以下条件：（1）未注册过微信公众平台；（2）未注册过微信开发平台；（3）未用于绑定过个人微信号。其中每个邮箱只能申请一个小程序，如果开发者没有满足条件的邮箱，可以先去申请一个新的邮箱，再进行小程序账号的注册。小程序开发准备工作2.邮箱激活在账号信息提交后，进入邮箱激活页面，单击“登录邮箱”按钮，登录到注册小程序的邮箱查看激活文件小程序开发准备工作3.信息登记完成邮箱激活后，进入信息登记页面，其中注册国家/地区选择默认选项“中国大陆”，主体类型根据开发者实际情况进行选择，主要有个人、企业、政府、媒体以及其他组织5种主体类型小程序开发AppID：小程序管理员可在微信公众平台查看自己的AppID。AppID必须填实际的小程序AppID，否则部分功能将无法使用。2.项目目录：为项目代码包存放的路径地址，可选择默认的目录，也可以选择自己新建的空文件夹所在的目录。3.开发模式：开发模式有两个选项，分别是小程序和插件，插件是可被添加到小程序内直接使用的功能组件。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。4.后端服务：后端服务有“不使用云服务”与“小程序·云开发”，本节案例选择不使用云服务。5.开发语言：开发语言可选择“JavaScript”与“TypeScript”Helloword小程序知识点小程序开发开发工具介绍开发者工具界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器五大部分小程序开发主体文件菜单栏菜单栏中主要包括了项目、文件、编辑、工具、界面、设置和微信开发者工具，它们的下拉菜单如图所示。“项目”下拉菜单“文件”下拉菜单“界面”下拉菜单（g）“微信开发工具”下拉菜单小程序开发主体文件菜单栏菜单栏中主要包括了项目、文件、编辑、工具、界面、设置和微信开发者工具，它们的下拉菜单如图所示。

“编辑”下拉菜单

“设置”下拉菜单

“工具”下拉菜单小程序开发工具栏1.左侧区域工具栏的左侧区域主要包括个人中心、模拟器、编辑器、调试器和云开发个人中心：账号切换和消息提醒；模拟器：单击切换显示/隐藏模拟器面板；编辑器：单击切换显示/隐藏编辑器面板；调试器：单击切换显示/隐藏调试器面板；云开发：单击创建云开发。2.中间区域工具栏的中间区域主要包括小程序模式、编译模式、编译、预览、远程调试、切后台和清缓存小程序模式：选择小程序模式与插件模式；编译模式：普通编译、自定义编译和通过二维码编译；编译：单击编译小程序项目；预览：单击生成二维码进行真机预览；真机调试：单击生成二维码进行真机调试；切后台：点击切换前台/后台；清缓存：可清除数据缓存、文件缓存、授权数据、网络缓存、登录状态与全部缓存。小程序开发3.右侧区域工具栏的右侧区域主要包括上传、版本管理、社区和详情上传：将代码上传为开发版本；版本管理：单击开启代码版本管理（使用git进行版本管理）；社区：单击进入开放社区；详情：显示项目详情、项目设置和域名信息；云开发：单击创建云开发。小程序开发模拟器模拟在器面板顶部可以切换手机型号、显示比例和模拟网络连接状态，并进行模拟操作，模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数。如图所示。小程序开发编辑器编辑器主要包含项目目录结构区与代码编辑区，如图所示。小程序开发调试器调试器分为10大功能模块：Console、Source、Network、Security、AppData、Audits、Sensor、Storage、Trace以及Wxml。小程序开发调试器1.ConsoleConsole是后台控制器，开发者可以在此输出和调试代码，代码报错和警告会在此处显示。开发者可以在JS文件中使用console.log（）语句查看代码的执行情况以及数据内容输出调试小程序开发2.SourceSources的功能：用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在Sourcespanel中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用。如图所示。小程序开发

3.NetworkNetwork面板主要用于观察和显示request和socket的请求情况（请求接口，请求参数，返回值），如图所示。小程序开发4.SecuritySecurity面板是小程序的安全面板，开发者可以通过该面板去调试当前网页的安全和认证等问题并确保是否已经在网站上正确地实现HTTPS，如图所示。小程序开发5.AppDataAppData面板主要用于显示当前项目当前时刻AppData具体数据，实时地反馈项目数据情况，开发者也可以在此处编辑数据，并及时地反馈到界面上，如图所示。小程序开发6.AuditsAudits面板主要具有体验评分功能，开发者单击“开始检查”按钮，并操作小程序项目，系统会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并定位出哪里有问题，以及给出一些优化意见，如图所示。小程序开发7.SensorSensor面板用于模拟手机传感器，在PC端测试时，开发者可以手动录入传感器数据，例如地理位置经纬度、加速度计坐标等，如图所示。小程序开发8.StorageStorage面板用于显示当前项目中使用wx.setStorage或者wx.setStorageSync后的本地数据存储情况，如图所示。小程序开发9.TraceTrace面板是小程序的调试追踪面板，目前只支持Android手机，如图所示。小程序开发10.WxmlWxml的使用：帮助开发者开发Wxml转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性，同时可以通过修改对应wxss属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的wxml代码，如图所示。小程序目录结构知识点小程序开发项目配置文件01020304主体文件页面文件其他文件小程序开发项目配置文件新建小程序时，都会自动生成一个项目配置文件，即项目根目录下的project.config.json文件，如图所示。项目配置文件中主要通过定义项目名称、AppID等内容来对项目进行配置。小程序开发主体文件必须放在项目的根目录下app.jsapp.jsonapp.wxss文件作用小程序开发app.jsapp.js为系统的方法处理全局文件，也就是说文件中规定的函数和数据，在整个小程序中，每一个框架页面和文件都可以使用this获取。每个小程序都会有一个app.js文件，有且只有一个，位于项目的根目录。该文件App()函数用来注册一个小程序，如图所示。接受一个object参数，其指定小程序的生命周期函数等。详见：/miniprogram/dev/framework/app-service/app.html。小程序开发app.jsonapp.json:该文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。详见图。注：在上述app.json配置列表中，常用该文件内不可包含注释，否则不可运行。其中，app.json的属性相对较多，本小节简单介绍相对常用的几个属性。属性类型必填描述最低版本pagesstring[]是页面路径列表

windowObject否全局的默认窗口表现

tabBarObject否底部tab栏的表现

networkTimeoutObject否网络超时时间

debugboolean否是否开启debug模式，默认关闭

functionalPagesboolean否是否启用插件功能页，默认关闭2.1.0subpackagesObject[]否分包结构配置1.7.3workersstring否Worker代码放置目录1.9.90requireBackgroundModesstring[]否需要在后台使用能力，如[音乐播放]

小程序开发app.jsonapp.json:该文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。详见图。注：在上述app.json配置列表中，常用该文件内不可包含注释，否则不可运行。其中，app.json的属性相对较多，本小节简单介绍相对常用的几个属性。pluginsObject否使用到的插件1.9.6preloadRuleObject否分包预下载规则2.3.0resizableboolean否iPad小程序是否支持屏幕旋转，默认关闭2.4.0navigateToMiniProgramAppIdListstring[]否需要跳转的小程序列表2.4.0usingComponentsObject否全局自定义配置开发者工具1.02.1810190permissionObject否小程序接口权限相关设置微信客户端7.0.0小程序开发pages属性pages属性主要用于指定小程序由哪些页面组成，每一项都对应一个页面的路径+文件名信息。通俗来讲，就是你的小程序需要显示一个页面，就需要在该文件中注册。此外需要注意一点，pages配置项中第一条记录为最先呈献给用户的界面。除此之外的数组顺序尽量按照呈现给用户界面的顺序进行排序。以helloworld小程序为例，如所示，小程序中共有index页面和logs页面，其中index页面为该项目的初始页面。开发者如果想将logs页面变为初始页面，只需将logs页面路径放置于pages配置项的第一行即可。小程序开发windows属性window属性主要用于设置小程序的状态栏、导航栏、标题与窗口背景颜色，具体所包含的属性如表所示。属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色

navigationBarTextStylestringwhite导航栏标题颜色，仅支持black/white

navigationBarTitleTextstring

导航栏标题文字内容

navigationStylestringdefault导航栏样式，仅支持以下值:default/custom微信客户端6.6.0backgroundColorHexcolor#ffffff窗口的背景色

backgroundTextStylestringdark下拉loading的样式，仅支持dark/light

backgroundColorTopstring#ffffff顶部窗口的背景色，仅iOS支持微信客户端6.5.16backgroundColorBottomstring#ffffff底部窗口的背景色，仅iOS支持微信客户端6.5.16enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新

onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为px

pageOrientationstringportrait屏幕旋转设置，支持auto/portrait/landscape2.4.0(auto)/2.5.0(landscape)注1：HexColor的属性值只支持十六进制颜色值，如"#ff00ff"，大小写不限。小程序开发windows属性window属性中各属性值的作用区域，如图微信接口功能图所示。小程序开发tabar属性

如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。tabBar的属性值如表1-3所示。属性类型必填默认值描述colorHexColor是

tab上的文字默认颜色，仅支持十六进制颜色selectedColorHexColor是

tab上的文字选中时的颜色，仅支持十六进制颜色backgroundColorHexColor是

Tab的背景色，仅支持十六进制颜色borderStylestring否blacktabBar上边框的颜色，仅支持black/whitelistArray是

tab的列表，详见list属性表positionstring否bottomtabBar的位置，仅支持bottom/topcustomboolean否false自定义tabBar其中list接受一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，其属性值如表所示。属性类型必填说明pagePathstring是页面路径，必须在pages中先定义textstring是Tab上按钮文字iconPathstring否图片路径，icon大小限制为40kb，建议尺寸81px*81px，不支持网络图片。当position为top时，不显示iconselectedIconPathstring否选中时的图片路径，icon大小限制为40kb，建议尺寸81px*81px，不支持网络图片。当position为top时，不显示icon小程序开发tabBar个属性值的作用区域，如图所示。app.json文件中的其他属性在后续案例中使用到时再仔细讲解，本节就不再赘述了。小程序开发app.wxssapp.wxss文件是小程序的全局样式文件，作用于每一个页面，其中，WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。该文件是可选文件，如果没有全局样式规定，可以省略不写，app.wxss文件中的代码如所示。小程序开发wxss文件js文件json文件wxml文件对于小程序中的每个页面，都需要在页面对应的js文件中调用page方法注册页面示例，指定页面初始数据、生命周期回调、事件处理函数等。每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。新设置的选项只会显示在当前页面上，不会影响其他页面。WXML（WeiXinMarkupLanguage）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。Wxml文件主要具有数据绑定、列表渲染、条件渲染、模板和引用的能力。具体的能力如何使用会在后面章节中涉及时做介绍。文件类型必需作用js是页面逻辑wxml是页面结构json否页面配置wxss否页面样式表页面文件WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。在页面文件中只要用于设置当前的样式效果，该文件中规定的样式会覆盖app.wxss全局样式中产生冲突的规定，但不会影响其他页面。小程序开发如本章新建的HelloWorld小程序中utils文件夹就是用来存放公共JS文件在调用时只需在文件中加入consthttps=require('文件目录');即可调用，如图所示。全局调用自定义的JS文件前需要在被调用JS文件中使用module.exports={可被调用的函数}进行声明其他文件小程序开发入门知识点小程序开发小程序基本开发是基于MVC，即模型、视图和控制器。模型层在这里体现的不是很明显，大部分时候都以全局变量或页面局部变量的形式存在，一般存在于控制器中。视图由.wxml文件所表示，它将控制器得到的数据和wxml文件进行组合和渲染。而视图与控制器的交互通过绑定事件的形式触发控制器各个函数的执行，大部分事件会传递目标节点对象作为其参数。当新建项目时，会建立小程序主控制逻辑与配置文件，其中包括app.js(控制小程序逻辑，响应生命周期回掉函数操作，全局变量的定义等)，此文件用于注册小程序；app.json(小程序窗口，特性配置等，像下拉刷新，导航栏配置，tabBar等)；app.wxss(样式配置)。接下来具体的页面操作才是和用户交互的真正载体，每个页面都单独存放一个文件夹，方便管理，同时WAService会将此文件夹中的页面样式文件进行渲染。每个页面都由js文件进行控制，wxml进行布局，wxss进行样式设置。用于响应生命周期方法有onLoad(监听页面加载)，onReady(监听页面初次渲染完成)，onShow(监听页面显示)，onHide(监听页面隐藏)，onUnload(监听页面卸载)。小程序框架打开新建好的helloworld小程序，通过app.json的pages字段可以知道当前小程序的所有页面路径:修改windows属性1

这个配置说明在HelloWorld小程序项目定义了两个页面，分别位于pages/index/index和pages/logs/logs。而写在pages字段的第一个页面"pages/index/index"就是我们进入到这个小程序之后的首页（打开小程序看到的第一个页面）。于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。小程序开发

小程序启动之后，在app.js定义的App实例的onLaunch回调会被执行:1.1小程序开发1.2整个小程序只有一个App实例，是全部页面共享的，接下来简单看看小程序的一个页面是怎么写的。对于window字段，可以理解为页面外观的一些显示：修改一下window属性的值，逐一将navigationBarBackgroundColor的值改为”0ca”，navigationBarTitleText的值改为”微信”,navigationBarTextStyle的值改为”white”,每修改一个值编译一次代码，观察模拟器中页面的变化，更好地体会每个值对应的作用区域在哪里，修改值如图所示。1.31.4

修改完上述值，会发现界面发生改变，如图所示。小程序开发Helloworld小程序中涉及到的是简单的数据绑定，数据绑定使用Mustache语法（双大括号）将变量包起来，该项目中主要作用于内容，作用于内容的代码如下：数据绑定2小程序开发注：js文件中，在page方法的data数组中定义了message变量，并给message附上初始值’HelloMINA!’，然后在wxml文件中使用{{message}}，将message的值显示在界面上。以上为数据绑定的例子。回到helloworld小程序项目中，其中{{motto}}的值为HelloWorld，userInfo为数组，主要存储了用户的信息，{{userInfo.avatarUrl}}和{{userInfo.nickName}}分别为微信用户的头像和昵称，如左图所示2.1小程序开发接下来可以修改一下js文件中motto的值，如图1所示，修改后效果图如图2所示。2.2小程序开发再修改一下动态获取的昵称，如图所示，在/pages/index目录下，修改index.wxml文件。2.3小程序开发小程序开发将{{userInfo.nickName}}改为你想要的任何名字，如图所示，然后编译。2.4示例结果给helloworld小程序添加一个tabBar，代码图添加tabBar3小程序开发小程序开发1.新建images文件夹，用于存放icon的图片，images的添加方法有两种：1）单击目录结构区左上方的“+”按钮，选择新建目录，并命名为images；2）打开项目存放目录，在项目文件夹下新建images文件夹。小程序开发2.将icon的图片黏贴到images文件夹下，即可将图片放置于images目录下小程序开发这边给大家推荐一个icon的下载网站，网址为，开发者可以在该网址下载自己需要的icon作业思考已知wxml页面上有：<view>{{msg}}<view>在js页面上有Page（｛data:{msg:‘hello’｝｝），那么页面最终显示的文字效果是（）。A:{{msg}}B:msgC:{{hello}}D:hello2.正确下载微信开发者工具无法显示二维码的原因可能是（）。A:小程序软件有问题B:打开方式不对C:没有关闭防火墙D:网络故障3.微信小程序新建项目提示Error:{"ret":80203,"errmsg":""}的原因可能是（）。A:选择了小程序云开发B:不使用云开发或者建立普通快速启动模板C:中文命名项目D:目录没有选在D盘4.创建tabBar，读取图片失败不可能的原因是（）。A:tabBar的pagepath不正确B:tabBar的iconPath不正确C:tabBar的selectedPath不正确D:tabBar的text使用中文谢谢观看小程序开发从入门到实践

知识点心理测试小程序小程序开发事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。1.Bindtap事件绑定小程序开发心理测试小程序中总共有4个事件，其事件处理函数对应的事件触发结果如表所示。事件处理函数所处页面事件触发结果beginAnswerindex跳转至test页面answerClickAtest显示下一题，并判断A对应的是题库中哪个选择，给对应选项的值+1，满足index=20时，跳至result页面answerClickBtest显示下一题，并判断B对应的是题库中哪个选择，给对应选项的值+1，满足index=20时，跳至result页面answerClickCtest显示下一题，并判断B对应的是题库中哪个选择，给对应选项的值+1，满足index=20时，跳至result页面小程序开发2.路由小程序API中的路由共有5种路由路由规则wx.switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面wx.reLaunch关闭所有页面，打开到应用内的某个页面wx.redirectTo关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面wx.navigateTo保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层wx.navigateBack关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈，决定需要返回几层。小程序开发其中心理测试小程序中用到了wx.navigateTo和wx.redirectTo，这边通过修改index.js中的路由来看一下两个路由之间的区别，一开始index.js文件的事件处理函数beginAnswer中使用的是wx.navigateTo，此时test与result页面如图所示，进入test和result页面均可单击“<”按钮回到index页面。test初始页面小程序开发其中心理测试小程序中用到了wx.navigateTo和wx.redirectTo，这边通过修改index.js中的路由来看一下两个路由之间的区别，一开始index.js文件的事件处理函数beginAnswer中使用的是wx.navigateTo，此时test与result页面如图所示，进入test和result页面均可单击“<”按钮回到index页面。result初始页面小程序开发如果将wx.navigateTo改为wx.redirectTo，会发现页面左上角的“<”不见了，无法回到index页面test修改后页面小程序开发如果将wx.navigateTo改为wx.redirectTo，会发现页面左上角的“<”不见了，无法回到index页面result修改后页面小程序开发声明变量在js中，未在data数组中定义的变量，可以通过var语句来进行变量声明，在声明变量的同时也可以向变量赋值，如test.js文件中的一段代码：3.声明变量与变量赋值小程序开发2.变量赋值在js文件的函数中给变量赋值的方法有两种，这里举一个简单的例子，首先将index.wxml文件中button的“开始测试”改为“{{msg}}”，使button中的文字变成一个变量，然后在index.js文件的data数组中添加变量msg，并赋予初值“开始测试”，最后将事件处理函数beginAnswer进行修改，代码如左图所示。小程序开发如果将this.setData({})改为使用this.data.msg=‘测试结束’来改变msg变量的值，会发现虽然可以改变msg的值，但是页面不会更新小程序开发this.setData是用来更新界面的，this.data是用来获取页面data对象的，它们都可以用于给变量赋值，如果需要查看赋值后变量的值，需要在this.setData({})语句外使用console.log()打印查看变量的值。小程序开发2.相对路径在index.js文件中，事件处理函数beginAnswer的wx.navigateTo路由的url使用的就是相对路径，其中“../”指的是当前文件所在的上一级目录，即index文件夹所在的目录，“../test/test”指的就是index所在目录中test文件夹中的test文件。另外“./”指的是当前目录，“../../”指的是当前文件所在的上上级目录，以此类推。绝对路径“/pages/test/test”即为test文件所在的绝对路径，若将url改为绝对路径“/pages/test/test”也能实现页面的跳转。4.绝对路径与相对路径小程序开发带参跳转在test.js文件中，answerClickA的一段代码实现了当index=20时，从test页面跳转至result页面，跳转时携带参数A、B和C的值，代码如下：小程序开发在result页面的页面参数中可以看到带参跳转时的参数，如图所示。小程序开发如果想用使用页面参数，可以在result页面的js文件中使用生命周期函数来获取页面参数，给生命周期函数function（）中定义一个值，这边定义为options，即可使用option.A获取A的值，并赋值给result页面的变量A，B、C也一样。开发者可以尝试用console.log（options）打印看一下options中的值小程序开发变量赋值在js文件的函数中给变量赋值的方法有两种，这里举一个简单的例子，首先将index.wxml文件中button的“开始测试”改为“{{msg}}”，使button中的文字变成一个变量，然后在index.js文件的data数组中添加变量msg，并赋予初值“开始测试”，最后将事件处理函数beginAnswer进行修改，代码如下。谢谢观看小程序开发从入门到实践知识点我的页面模块开发授权页面知识点讲解小程序开发小程序登录1(1)小程序通过wx.login()获取code，然后通过wx.request()发送code至开发者服务器(2)开发者服务器将登录凭证appid、appsecret与code用于校验微信接口，(3)微信接口服务向开发者服务器返回用户唯一标识OpenID和会话密钥session_key。(4)开发者服务器实现自定义登录状态与openid与session_key关联，并向小程序返回自定义状态。(5)小程序将自定义登录状态存入storage，并用于后续wx.request发起业务请求。每个用户访问该小程序都有产生一个唯一的openid，这个openid为用户访问该小程序的标识符。因此，可以把openid作为用户唯一标识符并存于数据库中用以后续操作。注意点：小程序开发开发者服务器与微信接口服务之间的交互是由后台实现的，本节主要以小程序前端与开发者服务器之间的交互为主小程序登录流程时序小程序开发2.wx.login()调用wx.login()接口获取登录凭证（code），通过凭证进而换取用户登录态信息，其中wx.login()接口的属性如表所示。属性类型必填说明timeoutnumber否超时时间，单位mssuccessfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功失败都会执行）由于app.js会先于其他页面执行，所以比较适合处理一些注册函数，因此将wx.login()方法写在app.js文件中。小程序开发wx.request()主要用于发送https网络请求，其属性详见表格属性类型默认值必填说明urlstring

是开发者服务器接口地址datastring/object/ArrayBuffer

否请求参数headerobject

否设置请求的header，header中不能设置Referer。content-type默认为application/jsonmethodstringGET否HTTP请求方法dataTypestringjson否返回的数据格式responseTypestringtext否响应的数据类型successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数（调用成功失败都会执行）3.wx.login()小程序开发每个微信小程序都可以有自己的本地缓存，可以通过数据缓存API可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序storage上限为10MB。localStorage以用户维度隔离，同一台设备上，A用户无法读取到B用户的数据。注意：如果用户储存空间不足，微信会清空最近最久未使用的小程序的本地缓存。因此不建议将关键信息全部存在localStorage，以防储存空间不足或用户换设备的情况。函数名说明wx.setStorage(Objectobject)数据的存储（异步）wx.setStorageSync(stringkey,anydata)数据的存储（同步）wx.getStorage(Objectobject)数据的获取（异步）wx.getStorageSync(stringkey)数据的获取（同步）wx.getStorageInfo(Objectobject)存储信息的获取（异步）wx.getStorageInfoSync()存储信息的获取（同步）wx.removeStorage(Objectobject)数据的移除（异步）wx.removeStorageSync(stringkey)数据的移除（同步）wx.clearStorage(Objectobject)数据的清空（异步）wx.clearStorageSync()数据的清空（同步）4.数据缓存数据缓存API函数类型小程序开发属性类型默认值必填说明titlestring

是提示的标题contentstring

是提示的内容showCancelbooleantrue否是否显示取消按钮cancelTextstring‘取消’否取消按钮的文字，最多4个字符cancelColorstring#000000否取消按钮的文字颜色，必须是16进制格式的颜色字符串confirmTextstring‘确定’否确认按钮的文字，最多4个字符confirmColorstring#576B95否确认按钮的文字颜色，必须是16进制格式的颜色字符串successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数（调用成功、失败都会执行）其中success回调函数的返回参数属性类型说明最低版本confirmboolean为true时，表示用户点击了确定按钮

cancelboolean为true时，表示用户点击了取消（用于Android系统区分点击蒙层关闭还是点击取消按钮关闭）1.0.05.wx.showModal()小程序使用wx.showModel(Objectobject)显示模态对话框，其中object参数说明如表所示。注册页面知识点讲解小程序开发注册页面知识点讲解1.微信官方UI库WeUIWeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、article、actionsheet、icon等各式元素。WeUI基础样式库下载地址：/Tencent/weui-wxss。开发者可以将样式库下载并使用微信web开发者工具打开dist目录，导入dist目录后，可以预览样式库小程序开发微信官方UI库WeUI开发者可以在样式库里选择自己所需要的样式，然后直接将需要的样式的wxml复制黏贴至自己的项目中，然后将WeUI中style文件拷贝至自己的项目目录中，如将图目录下style文件夹拷贝至图3–19目录下。小程序开发将style文件夹拷贝至自己开发的项目后，还需要在app.wxss文件中使用@import导入weui的样式，如图3–20所示。到这里，就可以正常使用WeUI库中微信的官方样式了。微信官方UI库WeUI小程序开发2.bindchange事件bindchange事件与bindtap事件不同，它主要是当输入框中的内容发生改变时，触发对应的事件处理函数，并且输入框中的值可以通过event.detail.value来获取,例如如下事例：wxml文件代码：小程序开发2.bindchange事件bindchange事件与bindtap事件不同，它主要是当输入框中的内容发生改变时，触发对应的事件处理函数，并且输入框中的值可以通过event.detail.value来获取,例如如下事例：js文件代码：小程序开发页面效果如所示当在输入框输入内容后，将鼠标点击其他空白处，可以打印出changevalue函数的返回值，会发现输入的内容被存放在detail的value中，如图所示。小程序开发3.openAlert函数openAlert函数是在js文件中自定义的一个函数，在定义函数后，可以在其他函数中使用this.openAlert()调用openAlert函数。我的页面知识点讲解小程序开发我的页面知识点讲解image属性wxss属性介绍rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。属性名类型说明srcString图片资源地址modeString图片裁剪、缩放的模式binderrorHandleEvent当错误发生时，发布到AppService的事件名，事件对象event.detail={errMsg:'somethingwrong'}bindloadHandleEvent当图片载入完毕时，发布到AppService的事件名，事件对象event.detail={height:'图片高度px',width:'图片宽度px'}设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus 1rpx=0.552px1px=1.81rpx注：image组件默认宽度300px、高度225px感谢观看小程序开发从入门到实践知识点修改我的信息模块开发MyInfo页面调整知识点小程序开发1.性别信息显示调整仔细看我的页面，发现“性别”这一栏显示的是2，而不是男或女由于性别是微信从用户所注册的微信中获取的，并且以数字方式保存在数据库中，所以需要在myinfo.js的data{}中设一个数组来显示用户的性别信息，其中0对应“保密”、1对

应“男”、2对应“女”小程序开发修改：myinfo,wxml中“性别”一栏对应的变量从{{userinfo.sex}}变为{{sex_array[userinfo.sex]}}，这样我的页面就可以正常显示性别了

如左图所示小程序开发2.增加页面跳转

在点击需要修改的信息时，进入修改我的信息页面。其中我的页面的样式选择的是带说明、跳转的列项表

因此用到了navigator组件。navigator跳转分为两个状态，一种是关闭当前页面，一种是不关闭当前页面。属性类型默认值说明urlstring

应用内的跳转链接；open-typestringnavigator跳转方式；hover-classstringnavigator-hover指定点击时的样式类，当hover-class=”none”时，点击效果；值说明navigate对应wx.navigateTo或wx.navigateToMiniProgram的功能redirect对应wx.redirectTo的功能switchTab对应wx.switchTab的功能reLaunch对应wx.reLaunch的功能navigateBack对应wx.navigateBack的功能exit退出小程序，target="miniProgram"时生效

open-type的合法值navigator组件属性小程序开发2.增加页面跳转因此要完成页面跳转，只需要给navigator组件的url属性添加跳转链接，使得点击需要修改的信息时，跳转至change页面，以“姓名”为例。其中跳转路径中带了changWhat参数，且changWhat=name，实现带参跳转，以便后续识别修改的是什么信息。另外手机号、性别、学校、学号和入学年份的跳转路径中的changeWhat参数的值分别为tel、sex、school、num和enter_year。小程序开发2.增加页面跳转关于头像信息的修改，豆豆云助教中暂不支持修改头像的功能，因此“头像”的navigator组件中的url属性就不需要了，另外给它添加一个bindtap的事件处理函数，使得点击头像时，提示“头像暂不支持修改”，但是删了url属性之后，单击“头像”按钮时，会报错，如图所示。这是由于navigator组件中open-type属性默认值为“navigate”，对应的是wx.navigateTo的功能，使用navigateTo是需要有“url”属性。navigator组件报错小程序开发2.增加页面跳转因此将navigator组件改为view组件，具体代码如下。myinfo.wxml文件：小程序开发2.增加页面跳转因此将navigator组件改为view组件，具体代码如下。小程序开发其中myinfo.js文件中涉及到了两个知识点，分别是wx.showToast()和方法调用。wx.showToast()wx.showMaodel()一样是界面交互中的一种消息提示框，其属性详见左边所示表格。属性类型默认值必填说明titlestring

是提示内容iconstring‘success’否图标imagestring

否自定义图标的本地路径，image的优先级高于icondurationnumber1500否提示的延迟时间maskbooleanfalse否是否显示透明蒙层，防止触摸穿透successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数（调用成功、失败都会执行）wx.showToast()属性小程序开发其中icon的合法值详见左边表格值说明success显示成功图标，此时title文本最多显示7个汉字长度loading显示加载图标，此时title文本最多显示7个汉字长度none不显示图标，此时title文本最多可显示两行，1.9.0及以上版本支持小程序开发当icon取值不同时，消息提示框提示显示图标不同，开发者可以根据自己的需求选择不同的icon值，如图所示。图icon值为none图icon值为success图icon值为loading小程序开发2.方法调用在myinfo.js文件中openAlert为自定义的一个方法，该方法中含有一个参数e，用于显示消息提示框的标题即title，且该方法实现的是显示消息提示框的功能。方法定义后，调用该方法时，需要使用“this.方法名”即this.openAlert调用方法，myinfo.js中的事件处理函数choseImage中，调用openAlert方法，实现点击头像时，触发choseImage函数，弹出消息提示框。其中“头像暂不支持修改”为openAlert方法中参数e的值。change页面实现知识点小程序开发Change页面布局change页面的也相对简单，只要一个简单的文本框即可，页面最终效果，如图所示。change页面最终效果图

WeUI样式库中相似样式小程序开发Change页面布局将这两个表单输入的样式对应的wxml文件代码，拷贝至doudouyun项目中，具体代码如下。小程序开发Change页面逻辑为了用户的使用友好性，需要对change页面的输入框的placeholder与导航栏标题文字进行处理，使得用户进入修改页面时，可以从placeholder与导航标题中了解自己需要修改的是什么信息。另外在输入框中显示用户原本的信息，以便用户在修改信息时可以看到原本的信息，在原有信息基础上进行修改，具体效果如图所示。小程序开发Change页面逻辑对change页面的页面参数进行处理，实现placeholder与title值的显示。另外由于页面参数中changeWhat的值均为英文，因此需要在data数组中增加一个infoArray数组，实现中英转换。由于性别信息的特殊性，需要增加一个sex_array数组，部分代码如左图所示。小程序开发添加事件处理函数change页面中需要添加两个事件处理函数，分别添加在input组件和“保存”所在的view组件中，如图4–8所示。小程序开发添加事件处理函数valuechange函数valuechange函数的主要作用是保存用户修改信息时修改后的信息，因此需要在data数组中添加一个临时变量tmp，初始值为空，用于存储修改后的信息，具体代码如下小程序开发2.submit函数submit函数的主要作用是向后台提交修改后的信息，并更新数据库，因此这里需要使用wx.request()向后台发起请求，需要向后台发送的数据有openid、change和value。添加事件处理函数配置文件的使用知识点小程序开发所有的wx.request()请求，url的网址都有很多共同之处，所以把共同之处作为一个宏进行定义，后面维护起来方便修改与迁移。具体做法：新建config.js用作配置文件小程序开发在需要调用时引入，这里只举1例配置文件中相应数据的调用谢谢观看小程序开发从入门到实践知识点课程页面模块开发申请课程号知识点小程序开发申请课程号由于照搬了豆豆云的后台，因此涉及到“加入课程”的概念，开发者需要向后台申请一个课程，得到课程号，申请链接如下：/index.php/Api/User/createCourse?appid=123&courseName=1028教学&questionSet=1012&creater=大佬appid代表开发者小程序的appid，courseName代表要创建的课程的名字，开发者可自定义，questionSet代表实现预设的题目集（后续无法更改），creater代表创建者。小程序开发申请课程号其中对questionSet的题目集，后台提供了8个题目集供开发者选择，具体详见表

题目集id题目集名称题目数量1001近代史题库12871002浙江工商大学新生入学考试题库12761003计算机网络题库2191008C语言二级模拟考试题库1201009毛概题库17661010C语言训练题13951011马克思主义基本原理概论20591012思修道德修养与法律基础1561课程模块页面布局知识点小程序开发课程信息模块页面布局1.课程信息模块主要包括课程名称、课程创建者、加入课程的人数以及课程号2.对于课程信息模块的页面布局，同样可以参考WeUI样式中表单-List-带图标、说明的列表项，如图所示。带图标、说明的列表项小程序开发找到对应的WeUI样式后，将该样式的对应代码复制黏贴到自己的项目代码中。带图标、说明的列表项具体代码如下：课程信息模块页面布局小程序开发其中课程信息模块wxml代码如下：小程序开发class和style的区别在上图中的wxml代码中我们经常会发现一个view属性中既有class="weui-cell__hd"，又有style="position:relative;margin-right:10px;"虽然这他们都可以实现页面的修改，但是两者之间还是有区别的。比如在myinfo页面添加一个button做测试，该button的wxml代码如下：另外在myinfo.wxss中添加test样式，test样式中主要是跟style中一样定义了字体颜色，该样式代码如下：小程序开发该button在style中color属性值为蓝色，class调用test样式中color属性值为红色，无论如何修改test样式中color属性的值，按钮字体颜色都是蓝色，如图所示。在wxml当中前端读取数据都是通过就近原则，所以style是直接在页面语句中进行编写，在程序执行的时候，style>class。测试button的字体颜色小程序开发2.position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。值描述absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的LEFT位置添加20像素。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。inherit规定应该从父元素继承position属性的值。position属性的值小程序开发3.margin-right属性margin-right属性设置元素的右外边距，允许使用负值。margin-right属性的值详见表。值描述auto浏览器设置的右外边距。length定义固定的右外边距。默认值是0。%定义基于父对象总高度的百分比右外边距。inherit规定应该从父元素继承右外边距。小程序开发修改课程练习模块image属性中margin-right的值为10px和100px，页面效果如图所示。margin-right值：10pxmargin-right值：100px小程序开发4.

display属性display属性规定元素应该生成的框的类型。用于定义建立布局时元素生成的显示框类型。对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。对于XML，由于XML没有内置的这种层次结构，所有display是绝对必要的。display属性的值详见表。值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。table此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。inline-table此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示（类似<tbody>）。table-header-group此元素会作为一个或多个行的分组来显示（类似<thead>）。table-footer-group此元素会作为一个或多个行的分组来显示（类似<tfoot>）。table-row此元素会作为一个表格行显示（类似<tr>）。table-column-group此元素会作为一个或多个列的分组来显示（类似<colgroup>）。table-column此元素会作为一个单元格列显示（类似<col>）。table-cell此元素会作为一个表格单元格显示（类似<td>和<th>）table-caption此元素会作为一个表格标题显示（类似<caption>）inherit规定应该从父元素继承display属性的值。小程序开发课程练习模块页面布局其中涉及到了float、box-sizing和width三种属性。float属性float属性定义元素在哪个方向浮动。任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。其中float可能的值详见表。值描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承float属性的值。小程序开发2.box-sizing属性box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。例如，假如需要并排放置两个带边框的框，可通过将box-sizing设置为"border-box"。这可令页面呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。其中box-sizing属性的值详见表。值描述content-box宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定