新增首页面

在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件

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

自动生成

index.js:用于编写js 代码
index.json:用于编写微信配置
index.wxml:相当天html
index.wxss:相当于css

image.png

轮播图

index.js

数据初始化定义

 data: {
   lunbo: ['zhezhe01.jpg', 'zhezhe02.jpg', 'zhezhe03.jpg', 'zhezhe04.jpg', 'zhezhe05.jpg', 'zhezhe06.jpg'],
    lunbo_pic:[],
}

进入页面即加载

 onLoad: function () {
    var arr=[]
    for (var i = 0; i < this.data.lunbo.length; i++) {
     // 增加图片路径 app.globalData.baseUrl  全局变量定义
      arr.push(app.globalData.baseUrl + "static/"+this.data.lunbo[i])
    }
    this.setData({
      lunbo_pic: arr
    })
}

index.wxml

<view class="slider">
 <swiper indicator-dots="true" autoplay="{{ true }}" interval="2000" duration="500" circular>
        <swiper-item  wx:for="{{lunbo_pic}}" wx:key="{{item}}">
            <image src="{{item}}" width="375" height="150"  mode="aspectFill" />
        </swiper-item>
  </swiper>
</view>

参考开发者文档
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

九宫格

image.png

引入WEB字体

[https://www.cnblogs.com/hongll/articles/10513700.html]

index.wxss

//引入web 字体
@import "../../utils/fontAwesome.wxss";
.content{
  background-color: #ffff;
}
.footer{
  width: 100%;
  height: 100rpx;
  background-color: #ffff;
}

.slider image{
  width: 100%;
  height: 390rpx;
}
.slider{
box-sizing: border-box;
/* margin-top: 10rpx; */
width: 100%;
margin-bottom: 30rpx;
}
//九宫格样式
.index-nav{
  border-top: 1rpx solid rgba(0,0,0,.1);
  border-left: 1rpx solid rgba(0,0,0,.1);
  overflow: hidden;
}
.index-nav .nav-item{
position: relative;
float: left;
width: 33.33333333%;
box-sizing: border-box;
border-right: 1rpx solid rgba(0,0,0,.1);
border-bottom: 1rpx solid rgba(0,0,0,.1);
height: 200rpx;
}

.index_image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60rpx;
  margin-left: -50rpx;
}
.index_image image{
  position: absolute;
  width: 60rpx;
  height: 60rpx;
}
.title{
  position: absolute;
  bottom: 10rpx;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.iconfont{
 position: absolute;
 color:#ffff;
 font-size: 60rpx;
  top: 50%;
  left: 50%;
  margin-top: -30rpx;
  margin-left: -30rpx;
  /* box-shadow: 5px 5px rgba(0, 0, 0, .1); */
  box-shadow: 0px 5px 2px 2px rgba(16, 2, 80, 0.219);
}
.icon-yule{
  color: rgb(166, 137, 203)
}
.icon-tixing{
  color:rgb(34, 198, 127);
}
.icon-jiatingchengyuan{
  color: rgb(140, 163, 243)
}
.icon-xiangce{
 color: rgb(255, 123, 4);
}
.icon-zhishi{
  color: rgb(0, 144, 255)
}
.icon-riji1{
  color: rgb(58, 170, 114)
}
.icon-ziyuan{
color:rgb(37, 136, 196)
}
.icon-zichanguanli{
  color: rgb(58, 170, 114);
}
.icon-gongju{
  color:rgb(26, 179, 148)
}
.icon-zhishi2{
  color: rgb(54, 171, 96)
}

index.wxml

<view class="divider"></view>
<view class="index-nav">
<block wx:for="{{nav}}" wx:key="{{item.url}}">
<navigator class="nav-item" url='{{item.url}}'>
<view class="index_image">
<view class="iconfont {{item.font_css}}"><image src="{{item.image}}"></image></view>
</view>
<text class="title">{{item.name}}</text>
</navigator>
</block>
</view>
</view>
<view class="divider"></view>
<view class="footer">
</view>

index.js

Page({
data: {
nav:[
{
name: "家庭成员",
// image:"/assets/icons/family.png",
font_css:"icon-jiatingchengyuan",
url:"/pages/person/person"
},
{
name: "家庭理财",
// image: "/assets/icons/caiwutongji.png",
font_css: "icon-zichanguanli",
url: ""
}
,
{
name: "资产管理",
// image: "/assets/icons/ziyuan.png",
font_css:"icon-ziyuan",
url: ""
},
{
name: "家庭日记",
// image: "/assets/icons/huabanfuben.png",
font_css:"icon-riji1",
url: "/pages/diary/editor"
},
{
name: "家庭相册",
// image: "/assets/icons/xaingce.png",
font_css:"icon-xiangce",
url: ""
},
{
name: "生活知识",
// image: "/assets/icons/zhishi.png",
font_css:"icon-zhishi2",
url: ""
},
{
name: "休闲娱乐",
// image: "/assets/icons/lvyouyulequ.png",
font_css:"icon-yule",
url: "/pages/canvas/canvas"
},
{
name: "提醒",
font_css: "icon-tixing",
url: ""
},
{
name: "工具",
// image: "/assets/icons/gongju_1.png",
font_css:"icon-gongju",
url: "/pages/tools/index"
}
]
},

底部导航tabBar

app.json

"pages": [
    "pages/index/index",
    "pages/message/message",
    "pages/profile/profile",
    "pages/contact/contact",   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f60",
    "navigationBarTitleText": "小喆管家",
    "navigationBarTextStyle": "white"
  },
"tabBar": {
    "position":"bottom",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/assets/tabs/home.png",
      "selectedIconPath": "/assets/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/assets/tabs/message.png",
      "selectedIconPath": "/assets/tabs/message-active.png"
    },
    {
      "pagePath": "pages/profile/profile",  
      "text": "个人资料",
      "iconPath": "/assets/tabs/profile.png",
      "selectedIconPath": "/assets/tabs/profile-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/assets/tabs/contact.png",
      "selectedIconPath": "/assets/tabs/contact-active.png"
    }]
  },