小程序生活类休闲类项目实战（使用美团数据）

Bertha 。 2022-04-12 09:27 206阅读 0赞

小程序项目实战@\[TOC\]

# 小程序项目实战（使用美团数据） #

这是生活小程序项目的实战，只供学习和参考，不做任何商业用途

> 托管地址\[[https://gitee.com/mycodegitxuewh/miniProgram\_life][https_gitee.com_mycodegitxuewh_miniProgram_life]\]

## 先上图 ##

不做交互逻辑也可以锻炼自己界面的美化，布局，提高自己的flex布局

1.  index页面  
    首页主要是轮播图，九宫格，tabbar页面组成，每个宫格，和tabbar都可以链接到对应的页面  
    ![这是首页的下部分截图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
    ![这是图片的上半部分][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]
2.  list页面  
    list页面是由九格宫点击链接进来到对应的页面，主要由搜索框，图文结合和加载条数据组成  
    ![这是list页面的上半部分][list]  
    ![这是list页面的下半部分][list 1]
3.  接下来就是detail页面  
    detail主要是由list页面的每个item链接进来，由轮播图和评论组成  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]

## 项目前需要的工具准备 ##

*  Postman：主要用来测试和更直观浏览接口数据（各个接口下面会提供）
 *  [微信开发者工具][Link 1]
 *  [小程序开发文档][Link 2]

## 总体项目的配置 ##

*  接口

> 当然，我们要使用接口需要在微信开发者工具先设置：详情–不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

*  [https://locally.uieee.com][https_locally.uieee.com]
 *  首页(index)轮播图的接口：[https://locally.uieee.com/slides][https_locally.uieee.com_slides]
 *  首页(index)九宫格: [https://locally.uieee.com/categories][https_locally.uieee.com_categories]
 *  次页(list)导航栏标题(NavigationBarTitle)接口：[https://locally.uieee.com/categories/:id][https_locally.uieee.com_categories_id]  
    例子：[https://locally.uieee.com/categories/1][https_locally.uieee.com_categories_1]
 *  次页容器内容接口：/categories/:id/shops?\_page=&\_limit=  
    例子：[https://locally.uieee.com/categories/1/shops?\_page=1&\_limit=20][https_locally.uieee.com_categories_1_shops_page_1_limit_20]
 *  次页input搜索框接口：[https://locally.uieee.com/categories/1/shops?\_page&\_limit&q=][https_locally.uieee.com_categories_1_shops_page_limit_q]  
    例子：[https://locally.uieee.com/categories/1/shops?\_page=0&\_limit=20&q=‘新’][https_locally.uieee.com_categories_1_shops_page_0_limit_20_q]
 *  详情页(detail)接口  
    例子：[https://locally.uieee.com/shops/:id][https_locally.uieee.com_shops_id]

*  全局的配置
    
     *  app.js配置接口（便于代码的维护）

App({ 
    config:{ 
     apiBase: 'https://locally.uieee.com'
    }
    })

*  发送请求的封装(fetch.js),使用时导入即可

> 小程序是没有跨域的概念，也没有ajax异步请求

const app = getApp()
    module.exports = (url,data,method = 'GET',header={ })=>{ 
    return new Promise((resolve,reject)=>{ 
     wx.request({ 
       url: app.config.apiBase + url,
       data,
       method,
       header,
       dataType:'json',
       success: resolve,
       fail: reject
     })
    })
    }

*  微信开发者工具的编译模式可以设置普通编译（进入页面时是我们app.json里面pages的第一个路径），也可以设置我们直接想要进去的页面的编译方式，这样使得我们在做界面的时候提高我们的效率，有些需要传参数设置参数即可，当然也可以在pages设置进去的第一个页面，但是不建议，没多大用处

## 各个界面的实现 ##

1.  tabbar  
    在app.json全局配置tabbar即可
2.  index.js
    
    1.  轮播图使用swiper即可，注意点：image身上有个mode属性，易错点:图片的裁剪缩放是基于自己的宽高，不是基于父元素
    2.  九宫格链接：使用navigator，注意点：在url链接需要使用?id=\{ \{ [item.id][]\}\}将id传过去
3.  list.js
    
    1.  注意点：input输入框中间的icon和搜索字样需要做定位处理,导航栏标题需要根据接口来获取标题的内容
    2.  页面内容：获取数据，采用flex布局，渲染页面，注意点：但是页面的文本会出现向右对齐，此时只需要给text设置给宽度即可
    3.  页面底部加载：只需要控制向下拉时：当数据未加载展示loading内容，加载后隐藏，使用wx:if即可注意点：当数据已经全部加载到页面了，应该下拉时要隐藏loading内容，页面加载的总条数为res.header\[‘X-Total-Count’\]
4.  detail.js
    
    1.  轮播图：面板指示点设置indicator-dots为true
    2.  预览图片（即点击图片放大），使用API：wx.previewImage(\{\})![预览图片效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 3]  
        我们需要在图片设置data-src来绑定它的图片地址

js代码的实现

wholeImageHandle(e){ 
        console.log(e.target)
        wx.previewImage({ 
          current: e.target.dataset.src, // 当前显示图片的http链接
          urls:  this.data.shops.images// 需要预览的图片http链接列表
        })
        }

3.  最后评论信息需要注意如果文本没有对齐，设置对齐即可

## 完善其它tabbar的链接界面 ##

其它tab界面可根据自己的想法或则参考其它app/小程序界面去完成即可

## 需要改进的地方 ##

1.  页面加载时，下拉刷新时，应该需要使用加载的界面，加载完数据后隐藏渲染界面
2.  加载的时候应该使用icon配合文本动画一起使用
3.  暂时未想到

[https_gitee.com_mycodegitxuewh_miniProgram_life]: https://gitee.com/mycodegitxuewh/miniProgram_life
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220412/776069512f7c4d2bbd6cd2d78d054309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220412/8684191f168f43188cb0fcebaaf3ffa1.png
[list]: /images/20220412/51512b660cdc4e098bb0676e74c8496b.png
[list 1]: /images/20220412/21d213259f5c4ef997c6eb5bb5d54de6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220412/35d5270fef204282aa8a4b0f066b4c7d.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/
[https_locally.uieee.com]: https://locally.uieee.com
[https_locally.uieee.com_slides]: https://locally.uieee.com/slides
[https_locally.uieee.com_categories]: https://locally.uieee.com/categories
[https_locally.uieee.com_categories_id]: https://locally.uieee.com/categories/:id
[https_locally.uieee.com_categories_1]: https://locally.uieee.com/categories/1
[https_locally.uieee.com_categories_1_shops_page_1_limit_20]: https://locally.uieee.com/categories/1/shops?_page=1&_limit=20
[https_locally.uieee.com_categories_1_shops_page_limit_q]: https://locally.uieee.com/categories/1/shops?_page&_limit&q=
[https_locally.uieee.com_categories_1_shops_page_0_limit_20_q]: https://locally.uieee.com/categories/1/shops?_page=0&_limit=20&q=%E2%80%98%E6%96%B0%E2%80%99
[https_locally.uieee.com_shops_id]: https://locally.uieee.com/shops/:id
[item.id]: http://item.id
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 3]: /images/20220412/0005329021a74812a0f21da63be84e95.png