微信小程序尝试--写一个简单的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' class="down_arrow" ></image>
  </view>
  <view class='sorted_item' bindtap='click_show_mark'>评分
    <image class='down_arrow' src='/icons/down_sorted.png'></image>
  </view>
  <view class='sorted_item' bindtap='click_show_distance'>距离
    <image class='down_arrow' src='/icons/down_sorted.png'></image>
  </view>
  <view class='sorted_item' bindtap='click_show_cost'>消费
    <image class='down_arrow' src='/icons/down_sorted.png'></image>
  </view>
</view>
<!-- 下面的滚动视图列表 -->
<scroll-view scroll-y="true" class='banner_view'>
    <view class='banner_item' >
      <navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img1}}'></image>
      <view class='text_view'>
      <text class='title_item'>{{item1_title}}</text>
      <text class='detail_item location_area'>{{item1_text1}}</text>
      <text class='detail_item'>{{item1_text2}}</text>
      <text class='detail_item'>{{item1_text3}}</text>
      <text class='detail_item detail_item_last'>{{item1_text4}}</text>
      <text class='distance_text'>{{item1_distance}}</text>
      </view>
      </navigator>

    </view>
    <view class='banner_item' >
      <navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img2}}'></image>
      <view class='text_view'>
      <text class='title_item'>{{item2_title}}</text>
      <text class='detail_item location_area'>{{item2_text1}}</text>
      <text class='detail_item'>{{item2_text2}}</text>
      <text class='detail_item'>{{item2_text3}}</text>
      <text class='detail_item detail_item_last'>{{item2_text4}}</text>
      <text class='distance_text'>{{item2_distance}}</text>
      </view>
      </navigator>
    </view>
    <view class='banner_item' >
      <navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img3}}'></image>
      <view class='text_view'>
      <text class='title_item'>{{item3_title}}</text>
      <text class='detail_item location_area'>{{item3_text1}}</text>
      <text class='detail_item'>{{item3_text2}}</text>
      <text class='detail_item'>{{item3_text3}}</text>
      <text class='detail_item detail_item_last'>{{item3_text4}}</text>
      <text class='distance_text'>{{item3_distance}}</text>
      </view>
      </navigator>
    </view>
    <view class='banner_item' >
      <navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img4}}'></image>
      <view class='text_view'>
      <text class='title_item'>{{item4_title}}</text>
      <text class='detail_item location_area'>{{item4_text1}}</text>
      <text class='detail_item'>{{item4_text2}}</text>
      <text class='detail_item'>{{item4_text3}}</text>
      <text class='detail_item detail_item_last'>{{item4_text4}}</text>
      <text class='distance_text'>{{item4_distance}}</text>
      </view>
      </navigator>
    </view>

</scroll-view>

index.wxss

/**index.wxss**/
/* 头部选择地区和搜索框 */
.head_view{
  height: 90rpx;
  width: 750rpx;
  background-color: rgba(153, 153, 153, 0.356);
  box-sizing: border-box;
}
#select_addr{
  width: 150rpx;
  height: 70rpx;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 70rpx;
}
.down_png{
  width: 45rpx;
  height: 45rpx;
  position: absolute;
  left: 105rpx;
  top: 5.5rpx;
  padding: 18rpx 18rpx 0 0;
  color: #999;
  cursor: pointer;
}
.search_bar{
  position: relative;
  width: 560rpx;
  background-color: white;
  display: inline-flex;
  margin-top: 20rpx;
  border-radius: 28rpx;
  line-height: 80rpx;
}
.search_icon{
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  left: 162rpx;
  top: 11rpx;
  padding: 18rpx 18rpx 0 0;
  color: #999;
  cursor: pointer;
}
/* 头部图片 */
.head_image_area{
  width: 100%;
  height: 289.8rpx;
  background-image: url('https://i-blog.csdnimg.cn/blog_migrate/ba4eb4fb6c3e5d5bc07bca7c2f8d2e5e.jpeg');
  background-size: 100% 100%;
}

/* 下拉框 */
.dropDownArea{
  width: 750rpx;
  height: 80rpx;
  display: flex;
}
.dropDownArea view{
  width: 187rpx;
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(102,102,102,1);
  line-height: 80rpx;
  text-align: center;
}
.dropDownArea view image{
  width: 18rpx;
  height: 15rpx;
  margin-left: 10rpx;
  margin-top: 30rpx;
}
/* 下拉框一 */
.sort
/* 筛选区域 */
.page_sort_area{
  width: 90%;
  height: 90.6rpx;
  margin: 0 auto;
  background:white;
}
.sorted_item{
  display: inline-block;
  width: 25%;
  font-size: 27.17rpx;
  line-height: 81.5rpx;
  text-align: center;
}
.down_arrow{
  position: relative;
  left:0;
  top: 9.06rpx;
  width: 36.23rpx;
  height: 36.23rpx;
}

/* 最下面滚动视图 */
.banner_view{
  width: 750rpx;
  height: 900rpx;
}
.banner_item{
  width: 100%;
  height: 225rpx;
  border: 0.18rpx #999 solid;
  overflow: hidden;
}
.banner_item_img{
  line-height: 199.3rpx;
  margin-top: 9.06rpx;
  width: 30%;
  height: 200rpx;
}
.text_view{
  line-height: 200rpx;
  margin-top: 9.05rpx;
  margin-right: 9.05rpx;
  width: 68%;
  height: 199.3rpx;
  float: right
}
.title_item{
  font-weight: bold; 
  font-size: 23rpx;
  margin-top: 0;
  margin-left: 9.05rpx;
  line-height: 19.9rpx;
  display: block
}
.detail_item{ 
  font-size: 23rpx;
  margin-top: 14.5rpx;
  margin-left: 9.06rpx;
  line-height: 22rpx;
  display: block
}
.detail_item_last{
  line-height: 30rpx;
}
.location_area{
  width: 50%;
}
.distance_text{
  font-size: 20rpx;
  width: 20%;
  line-height: 21.74rpx;
  float: right;
  margin-top: -159.42rpx;
}

index.js

//index.js
//获取应用实例
const app = getApp()


Page({
  data: {

    //第一个滚动视图元素
    item_img1:"https://i-blog.csdnimg.cn/blog_migrate/1a6baa48160d7faf2fc1c435ffbb2c21.jpeg",
    item1_title:'网易蜗牛图书馆',
    item1_text1:'杭州高新区',
    item1_text2:'整体评分：10分',
    item1_text3:'￥ 0/人',
    item1_text4:'简介：读书馆附近的公园、社区、学校和企业将实现网易蜗牛读书APP不限时免费畅读...',
    item1_distance:'9.8km',
    //第二个滚动视图元素
    item_img2: "https://i-blog.csdnimg.cn/blog_migrate/f309a25f0a3d0130da9e6e74bde67702.png",
    item2_title: '王小波书店',
    item2_text1: '滨江区钱塘江畔',
    item2_text2: '整体评分：9.0分',
    item2_text3: '￥ 0/人',
    item2_text4: '简介：书店面积并不大，大概100平方米左右，老板专门在左侧书架设立了一栏...',
    item2_distance: '9.5km',
    //第3个滚动视图元素
    item_img3: "https://i-blog.csdnimg.cn/blog_migrate/9e911f23ff2ad87d7d1c5443e7a3bcbe.png",
    item3_title: '悦览树',
    item3_text1: '青年路31号',
    item3_text2: '整体评分：8.0分',
    item3_text3: '￥ 30/人',
    item3_text4: '简介：悦览树提供更加优质的服务和24小时营业的特点，开放式的消费和更加人性...',
    item3_distance: '23.4km',
    //第4个滚动视图元素
    item_img4: "https://i-blog.csdnimg.cn/blog_migrate/62cc9a9ea336e992c30e4879b33033d0.png",
    item4_title: '钟书阁',
    item4_text1: '滨江区江南大道228号',
    item4_text2: '整体评分：9.0分',
    item4_text3: '￥ 0/人',
    item4_text4: '简介：透明的建筑风格，令人眼花缭乱的书，还有各种有特色的你想象不到的设计...',
    item4_distance: '9.8km',

  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})