小程序项目实战@[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配合文本动画一起使用
- 暂时未想到