微信小程序学习笔记(6) -- 本地生活项目

{
  "pages":[
    "pages/index/index",
    "pages/message/message",
    "pages/profile/profile"
  ],
  "window":{
    "navigationBarBackgroundColor": "#3a4891",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "本地生活",
    "backgroundColor": "#bcc0c9",
    "backgroundTextStyle":"light",
    "enablePullDownRefresh": false
  },
  "tabBar":{
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/home.png",
        "selectedIconPath":"assets/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "assets/message.png",
        "selectedIconPath":"assets/message-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "assets/profile.png",
        "selectedIconPath":"assets/profile-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

<!--index.wxml-->
<view class="container">
  首页
</view>

<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text>

<!--pages/profile/profile.wxml-->
<text>pages/profile/profile.wxml</text>

{
  "pages":[
    "pages/index/index",
    "pages/message/message",
    "pages/profile/profile"
  ],
  "window":{
    "navigationBarBackgroundColor": "#3a4891",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "本地生活",
    "backgroundColor": "#bcc0c9",
    "backgroundTextStyle":"light",
    "enablePullDownRefresh": false
  },
  "tabBar":{
     "color": "#999",
     "selectedColor": "#444",
     "backgroundColor": "#fff",
     "borderStyle": "black",
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/home.png",
        "selectedIconPath":"assets/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "assets/message.png",
        "selectedIconPath":"assets/message-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "assets/profile.png",
        "selectedIconPath":"assets/profile-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

<!--index.wxml-->
<swiper class="slides">
  <swiper-item>
      <image src="/assets/banner/banner-01.png" mode="aspectFill"></image>
  </swiper-item>
    <swiper-item>
      <image src="/assets/banner/banner-02.png" mode="aspectFill"></image>
  </swiper-item>
</swiper>
<view class="grids">
   <view class="item">
      <image src="/assets/grid/grid-01.png" />
      <text>美食</text>
   </view>
   <view class="item">
      <image src="/assets/grid/grid-02.png" />
      <text>美食</text>
   </view>
   <view class="item">
      <image src="/assets/grid/grid-03.png" />
      <text>美食</text>
   </view>
   <view class="item">
       <image src="/assets/grid/grid-04.png" />
      <text>美食</text>
   </view>
   <view class="item">
       <image src="/assets/grid/grid-05.png" />
      <text>美食</text>
   </view>
   <view class="item">
       <image src="/assets/grid/grid-06.png" />
      <text>美食</text>
   </view>
   <view class="item">
      <image src="/assets/grid/grid-07.png" />
      <text>美食</text>
   </view>
   <view class="item">
       <image src="/assets/grid/grid-08.png" />
      <text>美食</text>
   </view>
   <view class="item">
       <image src="/assets/grid/grid-09.png" />
      <text>美食</text>
   </view>
</view>
<view class="links">
   <image src="/assets/link-01.png"></image>
   <image src="/assets/link-02.png"></image>
</view>

/**index.wxss**/
.slides {
  height: 380rpx;
}
.slides image{
  width: 100%;
  height: 100%;
}
.grids{
   display: flex;
   flex-wrap: wrap;   
   background-color: #fff;
   border-left: 1rpx solid #eee;
   border-bottom: 1rpx solid #eee;
   color: #888;
}
.grids .item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.333333%;
  height: 250rpx;
  border-right: 1rpx solid #eee;
  border-top: 1rpx solid #eee;
  box-sizing: border-box;
}
.grids .item image{
  width: 70rpx;
  height: 70rpx;
}
.grids .item text{
  margin-top: 20rpx;
  color: #888;
  font-size: 28rpx;
}
.links{
  display: flex;
}
.links image{
    height: 200rpx;
}

//index.js
//获取应用实例
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      wx.request({
        //这里的地址没有跨域的概念
        url: 'https://api.douban.com/v2/movie/coming_soon',
        header: {
          'Content-Type': 'json'
        },
        success: function(res){
            console.log(res)
        }
        //发送异步请求 不再是 WEB 那套 ajax
        //2.没有跨域
        //3.请求的地址必须在管理后台添加白名单
        //4.域名必须备案，服务端必须采用HTTPS
      })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

module.exports = (url, data) => {
   return new Promise((resolve, reject) => {
    wx.request({
      url: `https://locally.uieee.com/${url}`,
      success: resolve,
      fail: reject
    })
   })
}

//index.js
//获取应用实例
const app = getApp()
const fetch = require('../../utils/fetch')
Page({
  /**
   * 页面的初始数据
   */
  data: {
     slides: [],
     categories: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      wx.request({
        //这里的地址没有跨域的概念
        url: 'https://api.douban.com/v2/movie/coming_soon',
        header: {
          'Content-Type': 'json'
        },
        success: function(res){
            console.log(res)
        }
        //发送异步请求 不再是 WEB 那套 ajax
        //2.没有跨域
        //3.请求的地址必须在管理后台添加白名单
        //4.域名必须备案，服务端必须采用HTTPS
      })
      // wx.request({
      //   url: 'https://locally.uieee.com/slides',
      //   success: res => {
      //     this.setData({slides: res.data});
      //   }
      // })
      fetch('slides').then(res => {
        this.setData({ slides: res.data})
      })
      // wx.request({
      //   url: 'https://locally.uieee.com/categories',
      //   success: res => {
      //      this.setData({ categories : res.data })
      //   }
      // })
      fetch('slides').then(res => {
        this.setData({ categories: res.data})
      })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

<view class="grids">  
   <navigator class="item" url="/pages/message/message" open-type="switchTab">
      <image src="/assets/grid/grid-02.png" />
      <text>美食</text>
   </navigator>
</view>

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(2)
    console.log(options)
    //这里不能确定一定是在 onReady过后执行
    fetch(`categories/${options.cat}`).then(res => {
       console.log(res.data)
       //设置导航条
      //  wx.setNavigationBarTitle({
      //    title: res.data.name
      //  })
       this.setData({ category: res.data})
    })
  },
onReady: function () {
      console.log(1)
      if(this.data.category.name）{
        wx.setNavigationBarTitle({
          title: res.data.name
        })
      }     
  },

module.exports = (url, data) => {
   return new Promise((resolve, reject) => {
    wx.request({
      url: `https://locally.uieee.com/${url}`,
      data: data,
      success: resolve,
      fail: reject
    })
   })
}

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(2)
    console.log(options)
    //这里不能确定一定是在 onReady过后执行
    fetch(`categories/${options.cat}`).then(res => {
       console.log(res.data)
       //设置导航条
      //  wx.setNavigationBarTitle({
      //    title: res.data.name
      //  })
       this.setData({ category: res.data})
         //加载完分类信息过后再去加载商铺信息
        return  fetch(`categories/${this.data.category.id}shops`,{_page；1，_limit: 10}) 
    })
    .then(res => {
       this.setData({ shops: res.data })
    })
  },

{
  "onReachBottomDistance": 20
}

// pages/list/list.js
const fetch = require('../../utils/fetch')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //当前加载的分类
    category:{},
    //子分类下的全部店铺
    shops: [],
    pageIndex:0,
    pageSize:20,
    hasMore: true
  },
  loadMore(){
    if(!this.data.hasMore) return;
    //从data中取出 pageIndex 和 pageSize
    let { pageIndex, pageSize } = this.data
    const params = {_page: ++pageIndex, _limit: pageSize}
    fetch(`categories/${this.data.category.id}/shops`, params) 
    .then(res => {
      const totalCount = parseInt(res.header['X-Total-Count'])
      const hasMore = pageIndex * pageSize < totalCount
        const shops = this.data.shops.concat(res.data)
        this.setData({ shops, pageIndex, hasMore})
     })
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(2)
    console.log(options)
    //这里不能确定一定是在 onReady过后执行
    fetch(`categories/${options.cat}`).then(res => {
       console.log(res.data)
       //设置导航条
      //  wx.setNavigationBarTitle({
      //    title: res.data.name
      //  })
       this.setData({ category: res.data})
         //加载完分类信息过后再去加载商铺信息
        this.loadMore();
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
      console.log(1)
      if(this.data.category.name）{
        wx.setNavigationBarTitle({
          title: res.data.name
        })
      }     
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
       //需要判断是否正在加载，否则会有多次触发问题
      console.log('到底了，别啦了');
      this.loadMore();
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 20
}

// pages/list/list.js
const fetch = require('../../utils/fetch')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //当前加载的分类
    category:{},
    //子分类下的全部店铺
    shops: [],
    pageIndex:0,
    pageSize:20,
    hasMore: true
  },
  loadMore(){
    if(!this.data.hasMore) return;
    //从data中取出 pageIndex 和 pageSize
    let { pageIndex, pageSize } = this.data
    const params = {_page: ++pageIndex, _limit: pageSize}
    return fetch(`categories/${this.data.category.id}/shops`, params) 
    .then(res => {
      const totalCount = parseInt(res.header['X-Total-Count'])
      const hasMore = pageIndex * pageSize < totalCount
        const shops = this.data.shops.concat(res.data)
        this.setData({ shops, pageIndex, hasMore})
     })
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(2)
    console.log(options)
    //这里不能确定一定是在 onReady过后执行
    fetch(`categories/${options.cat}`).then(res => {
       console.log(res.data)
       //设置导航条
      //  wx.setNavigationBarTitle({
      //    title: res.data.name
      //  })
       this.setData({ category: res.data})
         //加载完分类信息过后再去加载商铺信息
        this.loadMore();
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
      console.log(1)
      if(this.data.category.name）{
        wx.setNavigationBarTitle({
          title: res.data.name
        })
      }     
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
      //重新加载
      this.setData({shops:[],pageIndex:0, hasMore:false});
      this.loadMore()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
       //需要判断是否正在加载，否则会有多次触发问题
      console.log('到底了，别啦了');
      this.loadMore().then(() => wx.stopPullDownRefresh());
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})