《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社
目录
一、单选题
二、多选题
三、判断题
四、填空题
五、简答题
1.请简单描述页面样式的单位rpx与px的关系。
2.简单地介绍开发常用页面组件。
六、编程题
1.请编写一个商品列表页面，展示商品名称和价格。
2.请编写一个用户登录页面，提示输入用户名和密码进行登录。
一、单选题
1.在微信小程序的页面组件中，视图容器组件用(C)表示。
A.<block>
B.<text>
C.<view>
D.<icon>
2.在微信小程序的页面组件中，图片组件用(C)表示
A.<block>
B.<img>
C.<image>
D.<canvas>
3.在小程序的页面组件中，(A)是定义进度条的。
A. < progress>
B. < program>
C.<slider>
D.<swiper>
4.在小程序的页面组件中，(D)是定义单选框的。
A.<checkbox>
B.<input>
C.<button>
D.<radio>
二、多选题
1.下面选项中，关于选择器的说法正确的是(ABCD)。
A.element 选择器，可以通过组件名获取元素
B.class 选择器，可以通过类名获取元素
C.id选择器可以通过id属性获取元素
D.vie:after 表示在元素view组件内的后面插入元素
2.下面选项中，属于微信小程序页面组件的有(BCD)。
A.<div>
B.<form>
C.<input>
D.<view>
3.下面关于微信小程序创建项目的说法，正确的是(ABD)。
A.通过微信开发者工具进行微信小程序的创建
B.微信小程序项目的创建通过AppID 和测试进行创建
C.创建微信小程序空白项目会自动创建app.json文件
D. 创建微信小程序空白项目会自动创建project. config. json文件
三、判断题
1.wxss具有CSS大部分特性，并在此基础上做了一些扩充和修改。（√）
2.WXs支持使用选择器来为某个元素设置样式，其使用方法和CSS选择器基本相同。（√）
3.微信小程序页面组件开发中的<view>组件，类似于HTML5中的<div>标签。（√）
4.<view>和<text>标签属于双标签，由开始标签和结束标签两部分组成。（√）
四、填空题
1. input标签的（type）属性表示输入的类型，如文本、数字、身份证等。
2. input标签的type值是（number）表示数字输入键盘。
3. input标签的type值是（text）表示文本输入键盘。
4.input标签的type值是（idcard）表示身份证输入键盘。
5. input标签的type值是（digit）表示带小数点的数字键盘。
6.在微信小程序开发过程中，（page）标签是页面结构中的根标签。
五、简答题
1.请简单描述页面样式的单位rpx与px的关系。
rpx单位规定了任何手机屏幕宽度都为750rpx；不同的设备关系不同，iPhone6中 1rpx=0.5px；iPhone5中 1rpx=0.42px；iPhone6 Plus中 1rpx=0.552px。
2.简单地介绍开发常用页面组件。
view表示视图容器、文本域、图标文件、表单、图片组件。
六、编程题
1.请编写一个商品列表页面，展示商品名称和价格。
文件目录：
（1）在app.js文件中定义全局数据
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
goodsdata: [
{
id:0,
title:"(HUAWEI)P30",
titleTwo:"超感光莱卡三摄",
price:"4288",
image:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522069432.jpg"
},
{
id:1,
title:"V20",
titleTwo:"深感相机",
price:"3699",
image:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522069454.jpg"
},
{
id:2,
title:"IE80S",
titleTwo:"音乐耳机",
price:"2399",
image:"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2522778567.jpg"
},
{
id:3,
title:"IE60",
titleTwo:"入耳",
price:"799",
image:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2523516430.jpg"
}
],
globalData: {
userInfo: null
}
})（2）pages/index/index.js文件代码
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
data: null
},
onLoad:function(option) {
var id=option.listid
this.setData({
data:app.goodsdata[id]
})
}
})（3）pages/index/index.wxml文件代码
<!--index.wxml-->
<view class="goods">
<view class="title"><image src="{{data.image}}"></image></view>
<view class="title">{{data.title}}</view>
<view class="title">{{data.titleTwo}}</view>
<view class="price">¥{{data.price}}
</view>
</view>（4）pages/index/index.wxss文件代码
/**index.wxss**/
.goods {
text-align: center;
}
.title {
font-size: 34rpx;
}
.price {
color: #f00;
font-size: 32rpx;
padding-top: 20rpx;
padding-left: 15rpx;
}
.box-demo {
display: flex;
flex-direction:column;
width:100%;
height:100rpx;
}（5）pages/logs/logs.js文件代码
// logs.js
// 获取应用实例
var app = getApp()
Page({
data: {
goodsdata:null
},
onLoad() {
this.setData({
goodsdata:app.goodsdata
})
},
todetail:function(e) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
var list = e.currentTarget.dataset.id
console.log("你点击了第" + (listid + 1) + "个商品")
wx.navigateTo({
url: '../index/index?listid='+listid,
})
}
})（6）pages/logs/logs.wxml文件代码
<!--logs.wxml-->
<view class="demo-box">
<block wx:for= "{{goodsdata}}" wx:for-item="item">
<view class="goods-box" bindtap="todetail" data-id="{{item.id}}">
<image class="goods-pic" src="{{item.image}}"></image>
<view class="goods-title">{{item.title}}</view>
<view class="goods-titleTwo">{{item.titleTwo}}</view>
<view class="row">
<view class="goods-price">¥{{item.price}}</view>
<text class="goods-btn">看相似</text>
</view>
</view>
</block>
</view>（7）pages/logs/logs.wxss文件代码
/**logs.wxss**/
.demo-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 30rpx;
}
.goods-box {
width: 49%;
margin-bottom: 20rpx;
}
.goods-pic {
width: 220rpx;
height: 250;
margin: 0 auto;
display:block;
}
.row {
display: flex;
flex-direction: row;
justify-content:space-around;
}
.goods-btn {
border:1px solid #e3e3e3;
border-radius:20px;
margin-top:20rpx;
width:100rpx;
height:40rpx;
line-height:40rpx;
font-size:24rpx;
color:#aaa;
letter-spacing:2rpx;
text-align:center;
}
.goods-title {
font-size:30rpx;
font-weight:600;
text-align:center;
}
.goods-titleTwo {
font-size:24rpx;
margin-top:10rpx;
text-align:center;
}
.goods-price {
font-size:30rpx;
margin-top:20rpx;
color:#ee3b3b;
}（8）页面效果
2.请编写一个用户登录页面，提示输入用户名和密码进行登录。
创建好项目后，在pages下新建一个login目录，右键login文件夹，选择新建page，创建login的page。
文件目录：
（1） pages/login/login.wxml文件代码
<!--pages/login/login.wxml-->
<view class="login-container">
<view class="title">微信小程序App</view>
<view class="login-box">
<label>用户名</label>
<input placeholder="请输入用户名"/>
<label>密码</label>
<input placeholder="请输入密码"/>
<button class="login-btn">立即登录</button>
<view class="three-line">一一一一一第三方登录一一一一一</view>
<button class="login-btn" style="background-color:green;">微信登录</button>
</view>
</view>（1） pages/login/login.wxml文件代码
/* pages/login/login.wxss */
page{
height: 100%; /* 使用page的height可以使页面占全屏 */
background-color: #fafafa;
}
.login-container{
padding: 0 10%;
height: 100%;
}
.title{
font-size: large;
text-align: center;
padding-top: 10%;
font-weight: bold;
}
.login-box{
margin-top: 10%;
padding: 10% 5%;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px #888888;
}
.login-box>input{
margin: 5% 0 8% 0;
border-bottom: 1rpx solid lightgray;
}
.login-btn{
width: 100%!important;
background-color: #2f6afd;
color: white;
font-weight: normal;
}
.three-line{
margin: 8% 0;
text-align: center;
font-size: 12px;
color: gray;
}页面效果：
文章来源：https://www.toymoban.com/news/detail-489782.html
文章来源地址https://www.toymoban.com/news/detail-489782.html
到了这里，关于微信小程序开发教程：项目二微信小程序开发基础 课后习题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
