学习目录

一、项目的基本组成结构
二、小程序页面的组成部分
三、创建小程序页面
四、小程序的一些组件
- 1.常用视图容器类组件
- 2.常用基础内容组件
- 3.button 按钮的基本使用
- 4.image 组件的基本使用
总结

一、项目的基本组成结构

1.pages 用来存放所有小程序的页面
2.utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
3.app.js 小程序项目的入口文件
4.app.json 小程序项目的全局配置文件
5.app.wxss 小程序项目的全局样式文件
6.project.config.json 项目的配置文件
7.sitemap.json 用来配置小程序及其页面是否允许被微信索引

二、小程序页面的组成部分

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：

.js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
.json 文件（当前页面的配置文件，配置窗口的外观、表现等）
.wxml 文件（页面的模板结构文件）
.wxss 文件（当前页面的样式表文件）

三、创建小程序页面

在app.json/pages中新增页面存放路径，开发者工具会自动创建。
将新添加的页面调整为首页：调整代码顺序，使新添加的位于第一位
代码如下（我创建的是list）：

"pages":["pages/list/list","pages/index/index","pages/logs/logs"],

四、小程序的一些组件

1.常用视图容器类组件

① view(普通视图区域）
代码示例：

<view>A</view>
<view>B</view>
<view>C</view>

wxss效果：
代码示例：

/*视图大小*/
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*设置区域颜色*/
.container1 view:nth-child(1){background-color: aqua;
}
.container1 view:nth-child(2){background-color: blue;
}
.container1 view:nth-child(3){background-color: crimson;
}
/*横向分散布局*/
.container1{display: flex;justify-content: space-around;
}

② scroll-view(可滚动视图区域）
代码示例：

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

wxss效果：
代码示例：

/*设置滚动区域的边框，区域大小*/
.container1{border: 1px solid red;width: 100px;height: 120px;
}

③ swiper 和 swiper-item(轮播图容器组件和轮播图 item 组件）
代码示例：

<!-- 轮番图结构--><!-- **常用属性：
indicator-dots 是否显示指示点 -color 指示点颜色
-active-color 被激活的指示点颜色 autoplay 自动切换
interval 自动切换的时间间隔（毫秒单位） circular 衔接滑动**
-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
<!--第一个轮番图--><swiper-item><view class="item">A</view></swiper-item>
<!--第2个轮番图--><swiper-item><view class="item">B</view></swiper-item>
<!--第3个轮番图--><swiper-item><view class="item">C</view></swiper-item>
</swiper>

wxss效果：
代码示例：

/*轮番图样式*/
.swiper-container {height: 150px;
}
/*文本样式*/
.item{height: 100%;line-height: 150px;text-align: center;
}
/*设置背景颜色*/
swiper-item:nth-child(1){background-color: salmon;
}
swiper-item:nth-child(2){background-color: seagreen;
}
swiper-item:nth-child(3){background-color: slateblue;
}

2.常用基础内容组件

①text（文本组件）.
通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：
代码示例：

<view>
手机号支持长按选中效果
<text selectable>2873390654</text>
</view>

②rich-text（富文本组件）
通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：
代码示例：

<rich-text nodes="<h1 style='color: red;'>这是一个标题</h1>"></rich-text>

3.button 按钮的基本使用

①通过type属性指定按钮类型

代码示例：

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

②size=“mini” 小尺寸按钮

代码示例：

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

③plain 镂空按钮

代码示例：

<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

4.image 组件的基本使用

代码示例：

  <!--空图片--><image></image><!--使用src指向图片路径--><image src="/images/1.jpg" mode="widthFix"></image>

wxss设置边框：

 /*图片边框*/
image{border: 1px solid red;
}

总结

学习成果视频：

自学微信小程序前端开发day01

0基础跟着黑马程序员学微信小程序前端开发Day01相关推荐

一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
非典型程序员的微信小程序开发纪实
作为一个非典型程序员,祁劲松主导开发了一系列微信小程序(如IP查询.邮编库.查号吧+.手机归属.一把刀新华字典等).在开发过程中,他遇到了很多难题,并进行了多方位的思考,在他看来: 微信小程序的开发并 ...
一个程序员对微信小程序的看法
我们公司用两周的时间开发了一款微信小程序,叫<如e支付>,大家可以去体验一下.由于接口都是写好的,所以开发起来很快.我将从4个不同的角度来介绍我对微信小程序的理解. 1.技术的角度 ...
「黑马程序员」微信小程序最新接口
1. 轮播图 // GET https://api-ugo-web.itheima.net/api/public/v1/home/swiperdata 参数名类型说明 image_src stri ...
黑马程序员之微信小程序
黑马优购_微信小程序
黑马优购_微信小程序项目介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...
《从零开始学微信小程序开发》.pdf
关注"Java后端技术全栈" 回复"000"获取大量电子书 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关 ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
微信小程序-计算器小程序《从零开始学微信小程序》
主界面的代码块  <view class="container" ...

0基础跟着黑马程序员学微信小程序前端开发Day01

学习目录

一、项目的基本组成结构

二、小程序页面的组成部分

三、创建小程序页面

四、小程序的一些组件

1.常用视图容器类组件

2.常用基础内容组件

3.button 按钮的基本使用

4.image 组件的基本使用

总结

0基础跟着黑马程序员学微信小程序前端开发Day01相关推荐

最新文章

热门文章