微信小程序项目快速搭建模板_微信小程序项目模板

1.页面浏览

2.目录结构

3.底部导航栏app.json

{
  "pages": [
    "pages/index/index",
    "pages/me/me",
    "pages/logs/logs",
    "pages/details/text"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "绿色小程序",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "selectedIconPath": "pages/static/1.png",
        "iconPath": "pages/static/1.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "selectedIconPath": "pages/static/2.png",
        "iconPath": "pages/static/2.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的下载",
        "selectedIconPath": "pages/static/3.png",
        "iconPath": "pages/static/3.png"
      }
    ],
    "color": "#000",
    "selectedColor": "#8B4513"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

4.首页页面代码

<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}"
class='swiper'
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
           <navigator url="{{item.link}}" hover-class="navigator-hover">
            <image src="{{item.url}}" class="slide-image"/>
           </navigator> 
        </swiper-item>
      </block>
</swiper>
<view class='tip'>
【最新公告】某某某xxxxxxxxxxxxxx！
</view>



<view wx:for="{{dataList}}" class='p' bindtap='go'>
  <view class='c'>
    <view>标题：{{item.title}} </view>
    <view>内容：{{item.text}}</view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5.首页样式

/**index.wxss**/
.tip{
  width: 95%;
  height: 1rem;
  background-color: gold;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  color: white;
  font-size: 12px;
  margin-top: 10px;
}


.slide-image{
  width: 100%;
  /* border-radius: 20px; */
}

.p{
  margin: 12px;
  border: 1px dotted green;
  box-shadow: 2px 2px 2px 2px greenyellow;
  opacity: 0.9;
}

.c{
  padding: 12px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

6.首页js

//test.js
//获取应用实例
var app = getApp()
Page({
  data: {
    imgUrls: [
      {
        link: '/pages/index/index',
        url: 'http://img3.imgtn.bdimg.com/it/u=1055727654,337004439&fm=26&gp=0.jpg'
      }, {
        link: '/pages/logs/logs',
        url: 'http://img0.imgtn.bdimg.com/it/u=2491628779,833858759&fm=11&gp=0.jpg'
      }, {
        link: '/pages/logs/logs',
        url: 'http://img0.imgtn.bdimg.com/it/u=745010934,1678154736&fm=11&gp=0.jpg'
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    userInfo: {},

    dataList:[
      {
        id:0,
        title:"绿色环保，冲我做起1",
        text:"喵喵喵喵"
      },
       {
        id: 1,
        title:"绿色环保，冲我做起2",
        text:"喵喵喵喵"
      },
       {
        id: 2,
        title: "绿色环保，冲我做起3",
        text: "喵喵喵喵"
      },
      {
        id: 3,
        title: "绿色环保，冲我做起3",
        text: "喵喵喵喵"
      },
      {
        id: 4,
        title: "绿色环保，冲我做起3",
        text: "喵喵喵喵"
      }
    ]

  },
  onLoad: function () {
    console.log('onLoad test');
  },
  go:function(){
    wx.navigateTo({
      url: '../details/text',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

其他页面均为空，本教程只为了快速的搭建个微信小程序项目

更多干货，关注微信公众号