微信小程序学习笔记(三)——两名片小程序实例

文章目录

项目一
- 项目结构
- title
- index.wxml
- index.wxss
- 最终效果
项目二
- 项目结构
- title
- index.wxml
- index.wxss
- 最终效果
项目地址
- 最后

项目一

项目结构

新建img文件夹，放入一张图片(练手的话随便即可)

title

修改app.json中 navigationBarTitleText值即可

index.wxml

首先将我们整体界面的结构构造出来。

代码如下：

<image src="../img/pic.jpg"></image>
<view class="comment">
仰望星空亦要脚踏实地
</view>
<view class="body"><view class="title">星空是什么?</view><view>星空是由肉眼可见的宇宙中的天体形成的。</view><view></view><view class="title">天体是什么?</view><view>所谓的天体指的就是人们平日所说的星星，指的是肉眼可见的宇宙中的天体。星星内部的能量的活动使星星变的形状不规则。</view></view>

index.wxss

现在就是调整样式，规划布局。

代码如下：

.comment{text-align: center;font-size: 14px;color:#999;
}
.body{/* 左右间距 */padding: 30px;/* 行高 */line-height: 2;
}
.title{font-size: 18px;/* 加粗 */font-weight: bold;/* 上间距 */padding-top: 10px;/* 下间距 */padding-bottom: 10px;
}

最终效果

项目二

项目结构

title

修改app.json中 navigationBarTitleText值即可

index.wxml

首先将我们整体界面的结构构造出来。

代码如下：

<view class="title"><image class="bg" src="../img/bg.jpg" mode="widthFix"><image class="avatar" src="../img/avatar.png"></image></image><view class="info"><view class="name">文师傅</view><view class="detail"><view>著名作者</view><view>著作:《胃不好的人如何吃饭》</view><!-- 空格让两个书名对齐 --><!-- &nbsp;适应字体大小的空格 --><!-- &ensp;半个汉字的空格--><!-- &emsp;一个汉字的空格 --><view><text decode="{{true}}">&nbsp;&ensp;&ensp;&ensp;&ensp;《如何少奋斗十年》</text></view></view></view></view>

index.wxss

调整样式，规划布局。

代码如下：

.title{/* 四边距 */margin: 10px;position: relative;/*相对定位*/
}
.bg{width: 100%;/* 圆角 */border-radius: 5px;/*  阴影参数分别为x偏移量，y偏移量，模糊半径，阴影颜色*/box-shadow: 0 0 5px black;
}
.avatar{width: 60px;height: 60px;position: absolute;/*绝对定位*/top: 10px;right: 20px;
}
.info{position: absolute;left: 20px;bottom: 20px;font-size: 16px;color: #5F687E;
}
.name{/* 加粗 */font-weight: bold;
}
.detail{margin-top: 10px;margin-bottom: 10px;
}

最终效果

内容纯属搞笑，如有雷同，纯属撞鬼。

项目地址

CSDN下载

最后

可以关注一下我的公众号，最近开始写公众号，我会在上面分享一些资源和发布一些csdn上发布不了的干货

点个关注是对博主最大的支持

微信小程序学习笔记(三)——两名片小程序实例相关推荐

java小项目租车系统_Java学习笔记三十:Java小项目之租车系统
Java小项目之租车系统一:项目背景介绍: 根据所学知识,编写一个控制台版的"呱呱租车系统" 功能: 1.展示所有可租车辆: 2.选择车型.租车量: 3.展示租车清单,包含:总金 ...
微信小程序学习笔记(三)视图与逻辑
文章目录 1. 页面导航 1.1 什么是页面导航 1.2 声明式导航 1.2.1 导航到 tabBar 页面 1.2.2 导航到非 tabBar 页面 1.2.3 后退导航 1.3 编程式导航 1.3 ...
学习笔记三（STM32串口程序下载新建工程模板）
STM32串口程序下载 STM32F4 的程序下载有多种方法:USB.串口.JTAG.SWD 等,这几种方式,都可以用来给STM32F4下载代码. 利用串口给STM32下载程序 STM32 的串口下载 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...

微信小程序学习笔记(三)——两名片小程序实例

文章目录

项目一

项目结构

title

index.wxml

index.wxss

最终效果

项目二

项目结构

title

index.wxml

index.wxss

最终效果

项目地址

最后

微信小程序学习笔记(三)——两名片小程序实例相关推荐

最新文章

热门文章