《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社
目录
一、单选题
二、多选题
三、判断题
四、填空题
五、简答题
1.请简单描述搭建node后台服务器的过程。
2.在调查问卷案例中，微信小程序发起接口请求成功后，后台返回的数据信息主要内容是什么？
六、编程题
1.设计一款有下列组件的表单问卷：(1)有开关选择器、滑动选择器、单项选择器、多项选择器、单行输入框等组件。(2)有“提交”“重置”按钮。
2.制作猫眼电影底部标签导航。
一、单选题
1.在微信小程序页面组件中，(B)表示将其包裹的所有<radio>标签当作一个单选框组。
A.<selected-group> B.<radio-group> C.<checkbox-group> D.<option-group>
2.在微信小程序页面组件中，(B)表示将其包裹的所有<checkbox >标签当作是一个复选框组。
A.<radio-group>
B.<checkbox-group>
C.<select-group>
D. < option-group>
3.在<radio >和<checkbox >标签中，(B)表示该选项中对应的值。
A.checked 属性
B.value 属性
C. name
D.type属性
4.node.js搭建后台服务，(B)命令可以实时监听文件的修改且进行实时更新。
A.node
B.nodemon
C.watch
D.hot
5.在使用wx: for实现页面列表渲染时，(A)表示每一项的唯一标识。
A.wx:key
B.key
C.$this
D.this
6.在使用wx:for实现页面列表渲染时，wx:key的值为(A)时表示将每一项本身为唯一标识。
A.*this
B.value
C.key
D.this
二、多选题
1.下面关于表单组件的描述中，说法正确的是(ABCD)
A. < label>标签可以通过display:block将其变为块元素
B. bindsubmit绑定表单提交事件
C.<button>中form-type值为submit表示按钮是提交按钮
D.checkbox表示单选框
2.下面对于小程序项目前后台代码，说法正确的是(ABC)
A.wx.request()网络请求端口中的this不是window对象
B.node.js服务器监听端口是用app.listen()实现的
C.wx.request()请求默认的是GET请求，可以通过method 自定义请求方式
D.wx.request()发起HTTP网络请求
三、判断题
1.在小程序正式上线后，需要在小程序管理后台配置合法的域名信息才可以进行访问。（√）
2.通过表单提交事件，可以将页面中的表单数据提交到后台。（√）
四、填空题
1.程序正式上线后，小程序要求服务器域名必须经过（备案），且只支持HTTPS和WSS协议。
2.搭建node服务器，初始化命令是（npm init -y）。
3.node.js搭建微信小程序后台中，常用的框架是架是（express）框架。
4.微信小程序中，实现网络请求的接口是（wx.request()）。
5.微信小程序中，wx.request()接口配置对象中method表示（请求方式）。
6.在微信小程序中，wx.request()接口配置对象中（url）表示服务器接口地址。
五、简答题
1.请简单描述搭建node后台服务器的过程。
（1）初始化项目，自动创建package.json文件
（2）全局安装开发环境express开发环境
（3）安装监控软件修改工具
2.在调查问卷案例中，微信小程序发起接口请求成功后，后台返回的数据信息主要内容是什么？
data: {
name: '张三',
gender: [
{ name: '男', value: '0', checked: true },
{ name: '女', value: '1', checked: false }
],
skills: [
{ name: 'HTML', value: 'html', checked: true },
{ name: 'CSS', value: 'css', checked: true },
{ name: 'JavaScript', value: 'js', checked: false },
{ name: 'Photoshop', value: 'ps', checked: false }
,
],
opinion: '测试'
},六、编程题
1.设计一款有下列组件的表单问卷： (1)有开关选择器、滑动选择器、单项选择器、多项选择器、单行输入框等组件。 (2)有“提交”“重置”按钮。
pages/index/index.wxml文件代码
<!--index.wxml-->
<view class="container">
<view class="kg">
<switch checked="true"></switch>
</view>
<view class="sl">
<slider min="10" max="100" show-value="true" step="10"></slider>
</view>
<form bindsubmit="submit">
<view class="nn">
<text>姓名:</text>
<input type="text" name="name" value="张三" />
</view>
<view class="ss">
<text>性别:</text>
<radio-group name="gender">
<label><radio value="0" checked />男</label>
<label><radio value="1"/>女</label>
</radio-group>
</view>
<view class="zz">
<text>专业技能:</text>
<checkbox-group name="skills">
<label><checkbox value="html" checked />HTML</label>
<label><checkbox value="css" checked />CSS</label>
<label><checkbox value="js" />JavaScript</label>
<label><checkbox value="ps" />Photoshop</label>
</checkbox-group>
</view>
<view>
<text>您的意见：</text>
<textarea name="opinion" value="测试"></textarea>
</view>
<button form-type="submit" type="primary">提交</button>
<view class="gg"></view>
<button form-type="reset" type="primary">重置</button>
</form>
</view>pages/index/index.wxss文件代码
/**index.wxss**/
.container{
margin:50rpx;
}
view{
margin-bottom: 30rpx;
}
view.kg{
display: flex;
}
view.sl{
width: 93%;
margin: 20rpx;
background-color: #ccc;
padding: 10rpx;
font-size: 30rpx;
border-radius: 5px;
}
view.nn,view.ss{
display: flex;
}
input{
border: 2rpx solid #ccc;
height:60rpx;
width: 540rpx;
margin-left: 20rpx;
margin-top: -5rpx;
}
view.ss label{
margin-left: 20rpx;
}
view.zz label{
display: block;
margin-top: 15rpx;
}
view.gg{
margin-top: 15rpx;
}
textarea{
border: 2rpx solid #ccc;
width: 640rpx;
height:200rpx;
margin-top: 10rpx;
}pages/index/index.js文件代码
// index.js
// 获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
switchChangeFn(options){
console.log(options)
},
sliderchange: function (options) {
wx.showToast({
title: "拖动后触发" + options.detail.value,
duration: 1000
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.request({
url: 'http://127.0.0.1:3000/',
success: res => {
console.log(res.data)
this.setData(res.data)
}
})
},
submit: function(e) {
wx.request({
method: 'post',
url: 'http://127.0.0.1:3000/',
data: e.detail.value,
success: function(res) {
console.log(res)
}
})
}
})页面效果
2.制作猫眼电影底部标签导航。
app.json文件代码
{
"pages": [
"pages/movie/movie",
"pages/cinema/cinema",
"pages/find/find",
"pages/me/me"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#D53E37",
"navigationBarTitleText": "电影",
"navigationBarTextStyle": "white"
},
"tabBar":{
"selectedColor":"#d53e37",
"backgroundColor":"#f5f5f5",
"borderStyle":"black",
"list":[{
"pagePath":"pages/movie/movie",
"text":"电影",
"iconPath":"images/bar/电影.png",
"selectedIconPath":"images/bar/电影.png"
},
{
"pagePath": "pages/cinema/cinema",
"text": "影院",
"iconPath": "images/bar/影院.png",
"selectedIconPath": "images/bar/影院.png"
},
{
"pagePath": "pages/find/find",
"text": "发现",
"iconPath": "images/bar/发现.png",
"selectedIconPath": "images/bar/发现.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/bar/个人.png",
"selectedIconPath": "images/bar/个人.png"
}
]
},
" ": "sitemap.json"
}
页面效果
文章来源：https://www.toymoban.com/news/detail-484485.html
iconfont-阿里巴巴矢量图标库
图片可以在阿里巴巴矢量图标库里找文章来源地址https://www.toymoban.com/news/detail-484485.html
到了这里，关于微信小程序开发教程：项目三表单组件 课后习题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
