第4节：开发微信小程序之0的突破——名片小程序

上一篇我们了解了微信开发者工具的各个区域以及创建一个基础的小程序模板Hello World，接下来，带大家了解一下微信小程序的基本组件

课前小知识

先了解一下程序中目录的一些知识

小程序中  ./  代表寻找同级目录下的文件。../ 代表寻找上级目录下的文件

很多同学可能会疑问，为什么会提到这个关于目录的课前小知识呢？这里留个小疑问，后面大家会了解这个目录小知识的目的。

基础组件

view

功能描述

视图容器（类似于div）

 如果需要使用滚动视图，请使用 scroll-view

属性说明

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

image

功能描述

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性说明

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
说明 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 top 裁剪模式，不缩放图片，只显示图片的顶部区域 bottom 裁剪模式，不缩放图片，只显示图片的底部区域 center 裁剪模式，不缩放图片，只显示图片的中间区域 left 裁剪模式，不缩放图片，只显示图片的左边区域 right 裁剪模式，不缩放图片，只显示图片的右边区域 top left 裁剪模式，不缩放图片，只显示图片的左上边区域 top right 裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

名片小程序

实现结果

代码实现

首先是wxml、css和js的使用基本和我们web中使用的方法一致，也会有增加的特殊语法。可以通过搜集材料来获得知识点的！

当我们拿到了一张名片的设计图，我们先分析一下页面的布局，我们可以整体将这个名片分为三个大的布局。如下图：三个红框分别代表着这张名片的主要结构。

接下来，我们分别看一下wxml如何画出它的三个布局，然后wcss如何区根据设计来实现他的具体样式。

 

代码结构

wxml

这里开始解答疑问，上面的目录小知识，就是这里为image中src处理路径时使用的

从代码框段中，我们可以看到主要的三个view布局，分别是第一行是最外面的布局，第三行是右上角的布局，第四行为左下角的布局。

整体布局画出来之后，如果没有wcss去渲染，他也是无法达到我们想要。下面我们会详细讲解具体的wcss内容的含义

<view class="card">
  <image  mode="widthFix" src="../../images/businessCard/background.jpg"></image>
  <view class="logo">公司名称</view>
  <view class="info">
    <view class="name">姓名 职位</view>
    <view class="tel" data-phone="182xxxxxxxx" bindtap="callphone">182xxxxxxxx</view>
    <view class="address">ADD:北京市海淀区上地三节1101号</view>
  </view>
</view>

js

这里面主要的函数就是callphone，使我们点击手机号view的时候，调用微信的拨打电话功能，实现拨打电话功能

// pages/businessCard/businessCard.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  callphone:function(e){
    var value = e.currentTarget.dataset
    console.log(value)
    var phone = value.phone
    wx.makePhoneCall({
      phoneNumber: phone, //这里是电话号码[假的]可以调用自己的数据this.data.xxx
      success: function () {
        console.log("拨打电话成功！")
      },
      fail: function () {
        console.log("拨打电话失败！")
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

wcss

具体的样式代码后面都有说明，如有任何疑问可随时留言交流

/* pages/businessCard/businessCard.wxss */
.card{
  margin: 10px; /**外边距**/
  /** background-color: red;**/
  position: relative; /**父级盒子用相对定位,为了让这个子集相对他来定位**/
}
.card image{
  width: 100%;  /**填充宽度为100%**/
  border-radius: 10px; /**圆角**/
  box-shadow: 0 0 5px yellow; /** 设置立体阴影**/
}

.logo{
  position: absolute; /**为了让这个logo显示在右上角，则需要绝对定位，此时他的父级盒子要是用相对定位**/
  top: 10px;
  right: 10px;
  font-size: 20px;
  font-weight:bold;
}
.info{
  position:absolute;
  left: 10px;
  bottom: 10px;
}
.name{
  font-size:14px;
}
.tel{
  font-size: 14px;
}
.address{
  font-size: 14px;
}

功能图

 

文中所用图片只为学习使用，如有侵权，请通知我，立即删除