小程序项目实战@[TOC]
小程序项目实战（使用美团数据）
这是生活小程序项目的实战，只供学习和参考，不做任何商业用途
先上图
不做交互逻辑也可以锻炼自己界面的美化，布局，提高自己的flex布局
- index页面
首页主要是轮播图，九宫格，tabbar页面组成，每个宫格，和tabbar都可以链接到对应的页面
- list页面
list页面是由九格宫点击链接进来到对应的页面，主要由搜索框，图文结合和加载条数据组成
- 接下来就是detail页面
detail主要是由list页面的每个item链接进来，由轮播图和评论组成
项目前需要的工具准备
总体项目的配置
- 接口
当然，我们要使用接口需要在微信开发者工具先设置：详情–不校验合法域名、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设置进去的第一个页面，但是不建议，没多大用处
各个界面的实现
- tabbar
在app.json全局配置tabbar即可 - index.js
- 轮播图使用swiper即可，注意点：image身上有个mode属性，易错点:图片的裁剪缩放是基于自己的宽高，不是基于父元素
- 九宫格链接：使用navigator，注意点：在url链接需要使用?id={{item.id}}将id传过去
- list.js
- 注意点：input输入框中间的icon和搜索字样需要做定位处理,导航栏标题需要根据接口来获取标题的内容
- 页面内容：获取数据，采用flex布局，渲染页面，注意点：但是页面的文本会出现向右对齐，此时只需要给text设置给宽度即可
- 页面底部加载：只需要控制向下拉时：当数据未加载展示loading内容，加载后隐藏，使用wx:if即可注意点：当数据已经全部加载到页面了，应该下拉时要隐藏loading内容，页面加载的总条数为res.header[‘X-Total-Count’]
- detail.js
- 轮播图：面板指示点设置indicator-dots为true
- 预览图片（即点击图片放大），使用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/小程序界面去完成即可
需要改进的地方
- 页面加载时，下拉刷新时，应该需要使用加载的界面，加载完数据后隐藏渲染界面
- 加载的时候应该使用icon配合文本动画一起使用
- 暂时未想到