微信小程序开发边做边学 课件 知识点篇-微信小程序 第4、5章 MyInfo 页面调整、申请课程号

小程序开发从入门到实践知识点修改我的信息模块开发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为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承box-sizing属性的值。小程序开发3.width属性width属性设置元素的宽度。这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。其中width属性可能的值详见表。值描述auto默认值。浏览器可计算出实际的宽度。length使用px、cm等单位定义宽度。%定义基于包含块（父元素）宽度的百分比宽度。inherit规定应该从父元素继承width属性的值。小程序开发作业思考讨论题如何在代码中宏定义课程号？课程信息模块中image组件的style样式，如果使用wxss文件要怎么实现？如何灵活地使用与border相关的属性？获取当前课程逻辑中不使用getCurrentCourse方法，如何实现获取当前课程信息。小程序开发二.单选题微信小程序向后台请求数据时关于method:'POST'和method:'GET'以下说法错误的是？Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据Get是不安全的，因为在传输过程，数据被放在请求的URL中Get传输的数据量大，这主要是因为受URL长度限制；而Post可以传输少量的数据，所以在上传文件只能使用Get使用Post传输的数据，可以通过设置编码的方式正确转化中文；而Get传输的数据却没有变化小程序开发二.单选题2.以下关于CSSposition的属性值，说法错误的是？absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定relative生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20"会向元素的LEFT位置添加20像素。static规定应该从父元素继承position属性的值小程序开发

3.以下关于CSSmargin-right属性说法错误的是？inherit规定应该从父元素继承左外边距。auto 浏览器设置的右外边距length定义固定的右外边距，默认值是0D。%定义基于父对象总高度的百分比右外边距4.以下关于display属性说法错误的是？display:inline内联元素只需要必要的宽度，不强制换行display:block块元素是一个元素，占用了全部宽度，在前后都是换行符。display:none可以隐藏某个元素display:hidden可以隐藏某个元素二.单选题小程序开发5.以下关于display:none和visibility:hidden哪个说法是正确的？visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间display:none可以隐藏某个元素，且隐藏的元素会占用空间。也就是说，该元素不