上一篇我們了解了微信開發者工具的各個區域以及創建一個基礎的小程序模板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.datasetconsole.log(value)var phone = value.phonewx.makePhoneCall({phoneNumber: phone, //這里是電話號碼[假的]可以調用自己的數據this.data.xxxsuccess: 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; }

功能圖

?

文中所用圖片只為學習使用，如有侵權，請通知我，立即刪除

總結

以上是生活随笔為你收集整理的第4节：开发微信小程序之0的突破——名片小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。