微信小程序项目之一点点首页_微信小程序一点点仿

首页

目录

app.json

{
  "pages": [
    "pages/shouye/index",
    "pages/diandan/index",
    "pages/wode/index",
    "pages/shouye/page/map_choose/map_choose"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "点餐小程序",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/shouye/index",
        "iconPath": "pages/image/icon-shouye.png",
        "selectedIconPath": "pages/image/icon-shouye-hl.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/diandan/index",
        "iconPath": "pages/image/icon-diandan.png",
        "selectedIconPath": "pages/image/icon-diandan-hl.png",
        "text": "点单"
      },
      {
        "pagePath": "pages/wode/index",
        "iconPath": "pages/image/icon-wode.png",
        "selectedIconPath": "pages/image/icon-wode-hl.png",
        "text": "我的"
      }
    ]
  }
}
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

pages/shouye/index

<!--index.wxml-->
<image class="image" mode="widthFix" src="../shouye/resources/pic/shouye_head.jpg" />
<view class="v-btn">
  <navigator url="/pages/shouye/page/map_choose/map_choose" hover-class="navigator-hover">
    <button class="btn btn-s">点餐</button>
  </navigator>
  <navigator url="../wode/index" hover-class="navigator-hover">
    <button class="btn btn-w">外卖</button>
  </navigator>

</view>
1
2
3
4
5
6
7
8
9
10
11

总结

1、在app.json的path下保存路径会自动生成四个文件
2、navigator的跳转要注意路径的编写
3、navigator做不到跳出本文件夹并访问另外一个文件夹下的文件
4、

• ./ ：代表文件所在的目录（可以省略不写）
• …/ ：代表文件所在的父级目录
• …/…/ ：代表文件所在的父级目录的父级目录
• / ：代表文件所在的根目录

项目地址：微信小程序——仿一点点