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

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

本地生活项目



项目效果图


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

66ba272a0bfc97be54a5fa679e3d5482.png

88b9988b40447cb37c7e3c492d49867f.png

80308c27701d3aead18db6c7b167f308.png


外观和标签栏的配置



window


用于设置小程序的状态栏、导航条、标题、窗口背景色。

image.png


tabBar


如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

image.png

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

image.png


目标


建3个tab的tabBar


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png46a9d80a6e05e4e3b19d57a0ee70bcdf.png


具体代码:


核心代码:


app.json

{
  "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>


公共样式


设置tabBar的样式:


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png

app.json全部代码


{
  "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"
}


首页布局


知识点


image


基础库 1.0.0 开始支持,低版本需做兼容处理。

image.png

mode 的合法值

image.png


目标


1dc618a0ed9580ce8bfa6facb208c08f.png

代码

<!--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;
}


效果:

1dc618a0ed9580ce8bfa6facb208c08f.png



小程序中发送HTTP请求


如果是测试环境:


在详情中设置

1dc618a0ed9580ce8bfa6facb208c08f.png

如果是正式环境


1.请求的地址必须在管理后台添加白名单


2.域名必须备案,服务端必须采用HTTPS

//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 () {
  }
})


首页数据加载及数据绑定


封装http请求:


在utils的文件夹下:新建fetch.js


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


index.js导入fetch,并使用


//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 () {
  }
})



页面间跳转


注意点:


tab页跳转到另一个tab页,需要使用navigator的open-type=“switchTab”


例如:


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


普通跳转 ,注意修改navigator的高宽百分比,不然会空白



添加了navigator


列表页分类信息加载


注意点, 设置分类导航栏的名字的顺序,一定在onReady函数执行完之后。


list.js


/**
   * 生命周期函数--监听页面加载
   */
  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
        })
      }     
  },


第一页的商铺信息的加载


关键代码:


优化封装的fetch.js,让其可以携带参数


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


正确使用promise.2个请求,有前后顺序的正确写法:


/**
   * 生命周期函数--监听页面加载
   */
  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 })
    })
  },


上拉加载更多onReachBottom


https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html


list.json


值越小,越迟钝,看具体需求


{
  "onReachBottomDistance": 20
}


list.js


// 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 () {
  }
})


下拉刷新


启动下拉刷新


list.json
{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 20
}


停止下拉刷新


https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html

wx.stopPullDownRefresh(Object object)
// 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 () {
  }
})


详细页


注意点:

1dc618a0ed9580ce8bfa6facb208c08f.png

使用wxs行内脚本设置过滤器。但是不支持es6


预览图片

5d4c6812c8535adbb050f4ddf2e1bce8.png

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


效果:

66ba272a0bfc97be54a5fa679e3d5482.png

相关文章
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
216 3
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
40 1
|
1月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
1月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
34 0
|
3月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
79 1
|
3月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
3月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
3月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
3月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试