微信小程序尝试--写一个简单的tabbar和首页

这是尝试写一个微信小程序

推荐多看官方文档

微信小程序不支持大图，这里上传图片来使用

先放上简单的首页效果

推荐使用iPhone6调试，然后单位使用rpx, 1px=2rpx，这是微信小程序的单位会自适应不同的屏幕：

app.json文件内容

{
   
  "pages": [
    "pages/index/index",
    "pages/publish/publish",
    "pages/detail/detail",
    "pages/share/share",
    "pages/login/login",
    "pages/info/info",
    "pages/select_city/select_city",
    "pages/mypage/mypage",
    "pages/info_collect/info_collect",
    "pages/new_built/new_built"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3a4861",
    "navigationBarTitleText": "Hermt",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": false,
    "onReachBottomDistance": 50
  },
  "tabBar": {
   
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "/icons/home.png",
        "selectedIconPath": "/icons/home-active.png"
      },
      {
   
        "pagePath": "pages/publish/publish",
        "text": "新建",
        "iconPath": "/icons/add.png",
        "selectedIconPath": "/icons/add_active.png"
      },
      {
   
        "pagePath": "pages/mypage/mypage",
        "text": "我的",
        "iconPath": "/icons/profile.png",
        "selectedIconPath": "/icons/profile-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

index.wxml

<!--index.wxml-->
<!-- 头部视图，地址选择和搜索框 -->
<view class='head_view'>
  <navigator url='/pages/select_city/select_city' id='select_addr'>杭州
  <image src="/icons/down.png" class='down_png'></image></navigator>
  <input type='text' class='search_bar'></input> 
  <image src='/icons/search.png' class='search_icon'></image>
</view>
<!-- 头部图片区 -->
<view class='head_image_area'></view>
 <!-- 筛选功能区 -->
<view class='page_sort_area'>
  <view class='sorted_item'>类型
    <image src='/icons/down_sorted.png