小程序项目实战一_indexnav 小程序-CSDN博客

本文链接：https://blog.csdn.net/dirksmaller/article/details/100087429

Web三大标准

结构 （HTML）
样式 (CSS)
行为 (JS) 
    ECMAScirpt
    BOM
    DOM

小程序（微信应用）

结构（WXML）

a.没有div和span，遵循XML语法
b.常用的标签有：
1）view ==> div
2）text ==> span font
3）image ==> img
image组件需要设置大小和缩放模式属性 mode=“aspectFill”
4）navigator ==> a
样式（WXSS）

a.rpx单位
b.样式导入（@import “header.css”）
行为（js）

a.ECMAScirpt，没有Bom和Dom和window，但是有Wx对象
配置（app.json）

a.非常严格的json格式，不能再json中添加注释

Image标签的注意事项

<view class='slider'>
  <image  src='../assets/images/banner-01.png'></image>
</view>

.slider image{
  width: 100%;
  height: auto; //在web中auto 可以按比例缩放图片，但是在小程序中，auto会是的高度变为0.
}

注意: 当使用image显示图片时，如果没有显示设置image标签的大小时，则依然会有默认大小。

.slider image{
  width: 100%;
  height: 390rpx;
}

在小程序中，要是有rpx作为单位，它同android中的dp

项目目录描述

在根目录下有如下三个文件：

app.js
app.json
app.wxss
其作用分别为 全局逻辑，全局配置，全局样式。

首页轮播图

.index-nav {
  display: flex;
  flex-wrap: wrap;
}

.index-nav .nav-item{
  display: flex;
  flex-direction: column;
  width: 33.3333%;
  height: 200rpx;
  border: 1px solid #ccc;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.nav-item image{
  width: 80rpx;
  height: 80rpx;
}

.nav-item text{
  font-size: 12px; #注意:字体用px作为单位
  color: #666666;
}

实现导航的细线边框一

通过右边和下边框实现，并且将最后侧一列的元素的右边框隐藏掉。

.index-nav .nav-item{
  display: flex;
  flex-direction: column;
  width: 33.3333%;
  height: 200rpx;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}

.index-nav .nav-item:nth-child(3n){
  border-right: 0rpx none;
}

实现导航的细线边框二

通过伪元素实现

.index-nav .nav-item{
  display: flex;
  flex-direction: column;
  width: 33.3333%;
  height: 200rpx;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ccc;
  position: relative; //设置相对定位
}

.index-nav .nav-item::after{ //伪元素
  content: '';
  width: 1rpx;
  height: 100px;
  position: absolute; //设置绝对定位
  top: 0rpx;
  right: 0rpx;
  background-color: #ccc;
}

.index-nav .nav-item:nth-child(3n)::after{
  width: 0rpx; //最右侧的伪元素
}

图片等比缩放

<image  src='https://image1.suning.cn/uimg/cms/img/156655260936496969.jpg?format=_is_1242w_610h'mode='asepctFill'></image>

实现首页入口

/* 首页入口 */

.index-enter {
  display: flex;
  padding: 20px 20px;
}

.index-enter .enter-item{
  width:50%;
  display: flex;
  justify-content: center;
}

.index-enter image{
  width: 320rpx;
  height:178rpx;
}




<view class='index-enter'>
  <navigator class='enter-item'>
    <image src='/pages/assets/images/link-01.png'></image>
  </navigator>
   <navigator class='enter-item'>
    <image src='/pages/assets/images/link-02.png'></image>
  </navigator>
</view>

分区间隔的写法

方法一

page{
  background-color: #ccc; //整体背景设置为灰色
}

.index-enter {
  display: flex;
  padding: 20prx 20rpx;
  margin-top: 20rpx; //通过margin-top将间隔展示出来
}

...
...

.index-enter , .index-nav{
  background-color:#ffffff; //将其他布局的背景设置为白色
}  //并集选择器

方法二：封装间隔类

.divider{
    height:20rpx;
    background-color:#ccc;
}

细边框的封装

注意封装的样式在根目录下的app.wxss文件中

.bdr{
  position: relative;
  color: #fff;
}

.bdr::after{  //封装了通用的元素，注意伪元素也是元素，需要宽高
  content: '';
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  width:1rpx;
  height: 100%;
  background-color: #ccc;
}

轮播图组件swiper

使用轮播图组件的注意事项

swiper默认有高度150px
swiper需要的传入的boolean值，如果被误传为字符串，则会自动转换为true
<\image src='https://image1.suning.cn/uimg/cms/img/156655260936496969.jpg?format=_is_1242w_610h' mode='aspectFill'> <\image src='https://image.suning.cn/uimg/aps/material/156653039054957982.jpg?format=_is_1242w_610h' mode='aspectFill'>

使用轮播图的常见错误

swiper-item和image组件一对一

 <swiper-item>
  <image src='https://image.suning.cn/uimg/aps/material/156653039054957982.jpg?format=_is_1242w_610h'
  mode='aspectFill'></image>
</swiper-item>

app.json 窗口配置和页面配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

底部选项卡TabBar

"tabBar": {
"borderStyle": "white",  //黑线还是白线
"selectedColor": "#f60",
"color": "#ccc",
"position":"bottom", //tabBar是在底部还是头部
"list": [{
  "pagePath": "pages/index/index",
  "text": "首页",
  "iconPath": "/pages/assets/tabs/home.png",
  "selectedIconPath": "/pages/assets/tabs/home-active.png"
},{
  "pagePath": "pages/messages/messages",
  "text": "消息",
  "iconPath": "/pages/assets/tabs/message.png",
  "selectedIconPath": "/pages/assets/tabs/message-active.png"
}, {
  "pagePath": "pages/profile/profile",
  "text": "个人中心",
  "iconPath": "/pages/assets/tabs/profile.png",
  "selectedIconPath": "/pages/assets/tabs/profile-active.png"
},{
  "pagePath": "pages/others/others",
  "text": "其他",
  "iconPath": "/pages/assets/tabs/contact.png",
  "selectedIconPath": "/pages/assets/tabs/contact-active.png"
}]

}

消息卡片布局

<view class='card'>
  <text class='card-title'>标题111</text>
  <text class='card-date'>2019-08-26</text>
  <image src='https://image.suning.cn/uimg/aps/material/156653039054957982.jpg?format=_is_1242w_610h' mode='aspectFill' class='card-image'></image>
  <text class='card-desc'>描述信息</text>
  <text class='card-read'>详细信息</text>
</view>

page{
  background-color: #ccc;
}
.card {
  margin:50rpx 20rpx;
  padding: 30rpx 20rpx;
  background-color: white;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;

  display: flex;
  flex-direction: column;
}
.card-title{
  font-size: 22px;
  color: #000;
  margin-bottom: 20rpx;
}

.card-date{
  font-size: 14px;
  color: #999;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #ddd;
  margin-bottom: 20rpx;
}
.card-image{
  width: 100%;
  height: 330rpx;
}

.card-desc{
  font-size: 18px;
  color: #666;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #ddd;
  margin: 20rpx 0;
}

.card-read{
  font-size: 14px;
  color: #666;
}

箭头样式的封装

通过border实现箭头效果，并且左右对齐

.arrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow::after{
  content: '';
  width: 15rpx;
  height:15rpx;
  border-top: 3rpx solid #ccc;
  border-right: 3rpx solid  #ccc;
  transform: rotate(45deg);
}

修改单页的配置

单个页面的配置信息在页面对应的.json文件中设置。该页面的json是window对象对应的属性 。

index.json 文件下：
{
  "navigationBarTitleText": "消息"
}

app.json 全局文件下：

{
    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#f60",
    "navigationBarTitleText": "本地宝",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#000000"
  }
}