小程序项目实战@[TOC]

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

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

托管地址[https://gitee.com/mycodegitxuewh/miniProgram_life]

先上图

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

1. index页面
   首页主要是轮播图，九宫格，tabbar页面组成，每个宫格，和tabbar都可以链接到对应的页面
   
   
2. list页面
   list页面是由九格宫点击链接进来到对应的页面，主要由搜索框，图文结合和加载条数据组成
   
   
3. 接下来就是detail页面
   detail主要是由list页面的每个item链接进来，由轮播图和评论组成
   

项目前需要的工具准备

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

总体项目的配置

• 接口

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

• https://locally.uieee.com
• 首页(index)轮播图的接口：https://locally.uieee.com/slides
• 首页(index)九宫格: https://locally.uieee.com/categories
• 次页(list)导航栏标题(NavigationBarTitle)接口：https://locally.uieee.com/categories/:id
  例子：https://locally.uieee.com/categories/1
• 次页容器内容接口：/categories/:id/shops?_page=&_limit=
  例子：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=0&_limit=20&q=‘新’
• 详情页(detail)接口
  例子：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({})
      我们需要在图片设置data-src来绑定它的图片地址

image src="{{item}}" class="slide-image" bindtap='wholeImageHandle' data-src='{{item}}'/

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. 暂时未想到