上一篇我們了解了微信開發(fā)者工具的各個(gè)區(qū)域以及創(chuàng)建一個(gè)基礎(chǔ)的小程序模板Hello World，接下來(lái)，帶大家了解一下微信小程序的基本組件

課前小知識(shí)

先了解一下程序中目錄的一些知識(shí)

小程序中? ./? 代表尋找同級(jí)目錄下的文件。../ 代表尋找上級(jí)目錄下的文件

很多同學(xué)可能會(huì)疑問，為什么會(huì)提到這個(gè)關(guān)于目錄的課前小知識(shí)呢？這里留個(gè)小疑問，后面大家會(huì)了解這個(gè)目錄小知識(shí)的目的。

基礎(chǔ)組件

view

功能描述

視圖容器（類似于div）

?如果需要使用滾動(dòng)視圖，請(qǐng)使用?scroll-view

屬性說(shuō)明

屬性類型默認(rèn)值必填說(shuō)明

hover-class	string	none	否	指定按下去的樣式類。當(dāng)?hover-class="none"?時(shí)，沒有點(diǎn)擊態(tài)效果
hover-stop-propagation	boolean	false	否	指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)
hover-start-time	number	50	否	按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒
hover-stay-time	number	400	否	手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒

image

功能描述

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

屬性說(shuō)明

屬性類型默認(rèn)值必填說(shuō)明

src	string		否	圖片資源地址
mode	string	scaleToFill	否	圖片裁剪、縮放的模式
說(shuō)明 scaleToFill 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 aspectFit 縮放模式，保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)。也就是說(shuō)，可以完整地將圖片顯示出來(lái)。 aspectFill 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。 widthFix 縮放模式，寬度不變，高度自動(dòng)變化，保持原圖寬高比不變 heightFix 縮放模式，高度不變，寬度自動(dòng)變化，保持原圖寬高比不變 top 裁剪模式，不縮放圖片，只顯示圖片的頂部區(qū)域 bottom 裁剪模式，不縮放圖片，只顯示圖片的底部區(qū)域 center 裁剪模式，不縮放圖片，只顯示圖片的中間區(qū)域 left 裁剪模式，不縮放圖片，只顯示圖片的左邊區(qū)域 right 裁剪模式，不縮放圖片，只顯示圖片的右邊區(qū)域 top left 裁剪模式，不縮放圖片，只顯示圖片的左上邊區(qū)域 top right 裁剪模式，不縮放圖片，只顯示圖片的右上邊區(qū)域 bottom left 裁剪模式，不縮放圖片，只顯示圖片的左下邊區(qū)域 bottom right 裁剪模式，不縮放圖片，只顯示圖片的右下邊區(qū)域
webp	boolean	false	否	默認(rèn)不解析 webP 格式，只支持網(wǎng)絡(luò)資源
lazy-load	boolean	false	否	圖片懶加載，在即將進(jìn)入一定范圍（上下三屏）時(shí)才開始加載
show-menu-by-longpress	boolean	false	否	長(zhǎng)按圖片顯示發(fā)送給朋友、收藏、保存圖片、搜一搜、打開名片/前往群聊/打開小程序（若圖片中包含對(duì)應(yīng)二維碼或小程序碼）的菜單。
binderror	eventhandle		否	當(dāng)錯(cuò)誤發(fā)生時(shí)觸發(fā)，event.detail = {errMsg}
bindload	eventhandle		否	當(dāng)圖片載入完畢時(shí)觸發(fā)，event.detail = {height, width}

名片小程序

實(shí)現(xiàn)結(jié)果

代碼實(shí)現(xiàn)

首先是wxml、css和js的使用基本和我們web中使用的方法一致，也會(huì)有增加的特殊語(yǔ)法。可以通過(guò)搜集材料來(lái)獲得知識(shí)點(diǎn)的！

當(dāng)我們拿到了一張名片的設(shè)計(jì)圖，我們先分析一下頁(yè)面的布局，我們可以整體將這個(gè)名片分為三個(gè)大的布局。如下圖：三個(gè)紅框分別代表著這張名片的主要結(jié)構(gòu)。

接下來(lái)，我們分別看一下wxml如何畫出它的三個(gè)布局，然后wcss如何區(qū)根據(jù)設(shè)計(jì)來(lái)實(shí)現(xiàn)他的具體樣式。

?

代碼結(jié)構(gòu)

wxml

這里開始解答疑問，上面的目錄小知識(shí)，就是這里為image中src處理路徑時(shí)使用的

從代碼框段中，我們可以看到主要的三個(gè)view布局，分別是第一行是最外面的布局，第三行是右上角的布局，第四行為左下角的布局。

整體布局畫出來(lái)之后，如果沒有wcss去渲染，他也是無(wú)法達(dá)到我們想要。下面我們會(huì)詳細(xì)講解具體的wcss內(nèi)容的含義

<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:北京市海淀區(qū)上地三節(jié)1101號(hào)</view></view> </view>

js

這里面主要的函數(shù)就是callphone，使我們點(diǎn)擊手機(jī)號(hào)view的時(shí)候，調(diào)用微信的撥打電話功能，實(shí)現(xiàn)撥打電話功能

// pages/businessCard/businessCard.js Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*/onLoad(options) {},callphone:function(e){var value = e.currentTarget.datasetconsole.log(value)var phone = value.phonewx.makePhoneCall({phoneNumber: phone, //這里是電話號(hào)碼[假的]可以調(diào)用自己的數(shù)據(jù)this.data.xxxsuccess: function () {console.log("撥打電話成功！")},fail: function () {console.log("撥打電話失敗！")}})},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成*/onReady() {},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示*/onShow() {},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏*/onHide() {},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載*/onUnload() {},/*** 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作*/onPullDownRefresh() {},/*** 頁(yè)面上拉觸底事件的處理函數(shù)*/onReachBottom() {},/*** 用戶點(diǎn)擊右上角分享*/onShareAppMessage() {} })

wcss

具體的樣式代碼后面都有說(shuō)明，如有任何疑問可隨時(shí)留言交流

/* pages/businessCard/businessCard.wxss */ .card{margin: 10px; /**外邊距**//** background-color: red;**/position: relative; /**父級(jí)盒子用相對(duì)定位,為了讓這個(gè)子集相對(duì)他來(lái)定位**/ } .card image{width: 100%; /**填充寬度為100%**/border-radius: 10px; /**圓角**/box-shadow: 0 0 5px yellow; /** 設(shè)置立體陰影**/ }.logo{position: absolute; /**為了讓這個(gè)logo顯示在右上角，則需要絕對(duì)定位，此時(shí)他的父級(jí)盒子要是用相對(duì)定位**/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; }

功能圖

?

文中所用圖片只為學(xué)習(xí)使用，如有侵權(quán)，請(qǐng)通知我，立即刪除

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。