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

课前小知识

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

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

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

基础组件

view

功能描述

视图容器（类似于div）

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

属性说明

属性类型默认值必填说明

hover-class

string

none

否

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

hover-stop-propagation

boolean

false

否

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

number

否

按住后多久出现点击态，单位毫秒

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的突破——名片小程序相关推荐

php开发微信公众号，接收粉丝过来的小视频
微信有一个小视频功能, 可以用来拍摄一段10秒的视频. 小视频的特点是实时性强, 可以做到即拍即发. 根据这一特性, 可以应用的场景包括:打卡,实时交通反馈等等- php开发微信公众号,接收粉丝过来的 ...
android 新闻小程序,微信安卓版7.0.12内测曝光小程序被加强优化
中关村在线消息:最近,微信发布了最新的Android beta 7.0.12更新,修复了一些已知的问题.这次的Android测试版有32位和64位版本,但仍然没有暗黑模式.腾讯微信团队还向开发者发布了 ...
最新全开源AI人工智能名片小程序PHP源码电子名片小程序制作源码
分享一款最新全开源AI人工智能名片小程序PHP源码,电子名片小程序制作源码,含完整前后端.代码包和详细的安装部署搭建教程. 程序基于微信,一张名片打通六套系统:小程序应用+人工智能精准获客+名片裂变系 ...
微信小程序学习笔记(三)——两名片小程序实例
文章目录项目一项目结构 title index.wxml index.wxss 最终效果项目二项目结构 title index.wxml index.wxss 最终效果项目地址最后项目一 ...
【小程序从0到1】小程序常用组件一览
欢迎来到我的博客
【小程序从0到1】小程序项目的创建（项目目录结构）
欢迎来到我的博客
答题活动小程序v3.0
答题活动小程序v3.0 简介答题活动小程序v3.0,基于云开发的微信答题小程序,软件架构是微信原生小程序+云开发. 主要包含六大功能模块页面,首页.答题页.结果页.活动规则页.答题记录页.排行榜页. ...
小水滴2.0网站导航网模板
简介: 小水滴2.0导航模板,小水滴2.0采用Thinkphp+Easy Admin+Mysql 开发是一套完整的具有商业化的系统前端简洁,清新,高颜值! 后端便捷,简约,多功能! 配套有会员系统 ...
小水滴v2.0网站导航模板源码去授权和谐版
小水滴2.0导航模板,小水滴2.0采用thinkphp+Easy Admin+Mysql 开发是一套完整的具有商业化的系统前端简洁,清新,高颜值! 后端便捷,简约,多功能! 配套有会员系统,支付系 ...

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

课前小知识

基础组件

view

功能描述

属性说明

image

功能描述

属性说明

名片小程序

实现结果

代码实现

代码结构

wxml

js

wcss

功能图

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

最新文章

热门文章