《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社

目录

一、单选题

二、多选题

三、判断题

四、填空题

五、简答题

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;
  }

页面效果：