微信小程序课程-第六章 微信小程序作业

第六章文章首页填空题1.小程序中实现选项卡功能通过在_______文件中，配置_______选项实现的。答案：app.json、tabBar2.在Tab选项卡使用_______方法实现不同页面进行切换。答案：wx.switchTab3.小程序中自定义组件包含________文件。答案：.js逻辑控制文件、.json配置文件、.wxml组件页面文件、wxss组件页面样式文件微信小程序中使用______方法，实现实现发送http或者https请求，并获得服务器的数据答案：wx.request(Object)方法5.微信小程序wx.request(Object)方法，Object参数常用的属性包含有哪些？答案：url、data、headr、method、success。判断题小程序tabBar配置有一个list属性，表示配置Tab切换数目，但这个数组属性只能接收最少2个选项，最多5个选项。(√)wx.switchTab可以跳转到应用中某一页面。(√)在小程序中模板仅仅实现了元素与样式的模块化，但小程序的组件除了能够实现元素和样式的模块化，同时也可以实现逻辑的模块化，但遗憾的是组件不能嵌套使用(×)。在小程序使用组件可以内容重复使用，同时组件可以作为第三方组件的方式在其他的小程序中使用(√)在小程序中wx.request(Object)方法中Object的参数中url属性和method属性都为必填属性(×)选择题微信小程序tabBar的配置中，常用的属性属性包含(ABCD)。A.

colorB.

selectedColorC.

listD.

position2.下列选项中关于微信小程序自定义组件说法不正确的是(D)A.小程序中的组件在老的版本(1.63版本之前)中不支持，只能使用模板方式实现内容模块化B.在小程序中可以自定义组件，同时也可以使用第三方的组件，并且它们可以进行嵌套使用。C.在小程序中自定义的使用与内置使用基本一样，仅仅只需要做自定义组件的注册配置就可以使用。D.在小程序的自定义组件中不能嵌套使用第三方组件。3.关于wx.request(Object)属性描述正确的是(A)。A.可以发起HTTPS请求B.URL可以带端口号C.返回的complete方法，只有在调用成功之后才会执行D.header中可以设置Referer4.关于wx.request(Object)使用方法描述不正确是(D)。A.可以发送http请求也可以发送https的请求。B.可以通过success回调方法中参数中data属性获得开发者服务器的数据C.方法发送的请求默认的超时时间为60000毫秒。D.改方法获得的数据必须通过设置headr中content-type为”application/json”来获得json格式的数据。简答题请描述在微信小程序中模板与自定义组件的使用区别？简述WX.navigateTo、wx.redirectTo和wx.switchTab跳转方式的区别？编程题使用自定义组件的方式把文章列表页面的模板进行替换。完成文章显示自定义组件，并在文章列表页面中使用，其实现参考步骤如下：步骤一：在“components”目录中创建post-item组件，并为组件设置post属性，示例代码如下：//

Post自定义组件Component({

/**

*

组件的属性列表

*/

properties:

{

//

定义文章属性

post:Object

},

/**

*

组件的初始数据

*/

data:

{

},

/**

*

组件的方法列表

*/

methods:

{

}})步骤二：为post-item组件设置显示内容和样式。首先为post-item组件中index.wxml文件中添加元素显示的内容，示例代码如下：<!--

文章自定义组件

--><view

class="post-container">

<!--文章作者的图像与日期-->

<view

class="post-author-date">

<image

src="{{post.avatar}}"

/>

<text>{{post.date}}</text>

</view>

<!--

标题

-->

<text

class="post-title">{{post.title}}</text>

<!--

文章图片

-->

<image

class="post-image"

src="{{post.postImg}}"

mode="aspectFill"

/>

<!--

文章内容

-->

<text

class="post-content">{{post.content}}</text>

<!--

文章评论、搜索、点餐

-->

<view

class="post-like">

<image

src="/images/icon/wx_app_collect.png"

/>

<text>{{post.collectionNum}}</text>

<image

src="/images/icon/wx_app_view.png"></image>

<text>{{post.readingNum}}</text>

<image

src="/images/icon/wx_app_message.png"></image>

<text>{{mentNum}}</text>

</view></view>接着为post-item组件中index.wxss文件中添加样式代码，示例代码如下：/*

设置文章列表样式

*/.post-container

{

flex-direction:

column;

display:

flex;

margin:

20rpx

0

40rpx;

background-color:

#fff;

border-bottom:

1px

solid

#ededed;

border-top:

1px

solid

#ededed;

padding-bottom:

5px;}/*

文章作者图片与日期样式

*/.post-author-date

{

margin:

10rpx

0

20rpx

10px;

display:

flex;

flex-direction:

row;

align-items:

center;}/*

文章作者图片样式

*/.post-author-date

image

{

width:

60rpx;

height:

60rpx;}/*

文章作者文本样式

*/.post-author-date

text

{

margin-left:

20px;}/*

文章图片样式

*/.post-image

{

width:

100%;

height:

340rpx;

margin-bottom:

15px;}/*

文章日期样式

*/.post-date

{

font-size:

26rpx;

margin-bottom:

10px;}/*

文章标题样式

*/.post-title

{

font-size:

16px;

font-weight:

600;

color:

#333;

margin-bottom:

10px;

margin-left:

10px;}/*

文章内容样式

*/.post-content

{

color:

#666;

font-size:

26rpx;

margin-bottom:

20rpx;

margin-left:

20rpx;

letter-spacing:

2rpx;

line-height:

40rpx;}.post-like

{

display:

flex;

flex-direction:

row;

font-size:

13px;

line-height:

16px;

margin-left:

10px;

align-items:

center;}.post-like

image

{

height:

16px;

width:

16px;

margin-right:

8px;}.post-like

text

{

margin-right:

20px;}text

{

font-size:

24rpx;

font-family:

Microsoft

YaHei;

color:

#666;}步骤3：在文章列表页面引用自定义组件。首先在文章列表posts.json中添加配置引用自定义组件，示例代码如下：{

"usingComponents":

{

"hp-post-item":"../../components/post-item/index"

},

"navigationBarTitleText":

"文字"}修改posts.wxml中代码，把原模板相关代码替换了组件引用的代码，具体实例如下：

<!--

文章列表

-->

<block

wx:for="{{postList}}"

wx:for-item="post"

wx:for-index="idx"

wx:key="postId">

<view

catchtap="goToDetail"

id="{{post.postId}}"

data-post-id="{{post.postId}}">

<hp-post-item

post="{{post}}"></hp-post-item>

</view>

</block>使用第三方组件Lin-UI实现在欢迎页面实现获取当前用户图像和昵称信息。实现参考步骤：步骤1：在welcome.json中引入关于Lin-UI中活动用户图像组件，示例代码如下：

"usingComponents":

{

"l-avatar":"/miniprogram_npm/lin-ui/avatar/index"

}步骤2：在welcome.wxml中修改使用Li