微信小程序项目,实现图书列表渲染,以及图书详情跳转

摘要:
今天,我实现了业务中最常见的详细列表功能,并做了一个总结,以方便自己将来查看这两页。在开始之前,我首先回顾了es6promise的用法。我以前听说过promise的用法,但我从来没有写过一个小DEMO。我用promise打印了微信小程序的当前系统信息,然后开始了我自己的项目,复制一个HTTP。js调用了HTTP。保留原始文件以防止出现问题_ HTTP。js模块创建一个新函数

今天实现了业务中最常见的列表到详情的功能,做一个总结归纳,方便自己以后温习

两个页面分别要实现如下设计稿的视图

微信小程序项目,实现图书列表渲染,以及图书详情跳转第1张

微信小程序项目,实现图书列表渲染,以及图书详情跳转第2张

在开始之前首先复习一下es6 promise的用法,之前一直听说过promise的用法,但一直没有实战过

首先写一个小DEMO,使用promise打印出微信小程序的当前系统信息

微信小程序项目,实现图书列表渲染,以及图书详情跳转第3张

接着开始自己的项目,复制一个HTTP.js叫_HTTP,把原先的先保留着预防出问题,_HTTP.js模块新建一个函数,把封装好的老的方法进行完善再套用进去

微信小程序项目,实现图书列表渲染,以及图书详情跳转第4张

和之前一样,在book页面获取页面数据的方法模块中扩展这个HTTP对象,并添加两个方法用于从服务器获取图书列表,和我喜欢的图书数量

微信小程序项目,实现图书列表渲染,以及图书详情跳转第5张

这样就可以在Book列表页中引入这个模块

微信小程序项目,实现图书列表渲染,以及图书详情跳转第6张

 在onload函数中通过这个对象的方法,把 从服务器获取到的图书列表,图书数量存储到页面data中

微信小程序项目,实现图书列表渲染,以及图书详情跳转第7张

 新建一个BOOK组件,储存单条BOOK数据

微信小程序项目,实现图书列表渲染,以及图书详情跳转第8张

在books页面中写wxml,把数据使用wx:for进行循环,把遍历出来的每一项item赋值给book这个组件暴露给父组件接受数据的变量,再到子组件通过book.properties进行渲染

微信小程序项目,实现图书列表渲染,以及图书详情跳转第9张

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第10张

到此再加上样式列表页的渲染就做完啦,搜索页面之后再做

微信小程序项目,实现图书列表渲染,以及图书详情跳转第11张

 接着需要通过点击每个图书跳转到相应的图书详情页面里去:

首先在单个book组件js新增一个点击方法,获取到保存在每个组件上ID号作为参数

微信小程序项目,实现图书列表渲染,以及图书详情跳转第12张

接着分析图书详情页所需要的数据,把获取数据的方法封装到自己的模块中

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第13张

在book-detail的js文件中,初始化页面数据

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第14张

在给图书详情页绑定数据的时候发现图书短评同样也需要做成一个组件复用

微信小程序项目,实现图书列表渲染,以及图书详情跳转第15张

新建tag组件,这个组件比较重要的一个思想是使用了插槽,插槽非常的灵活。使用插槽可以让组件内部的某一块元素让组件的调用方来决定(数据和样式)

微信小程序项目,实现图书列表渲染,以及图书详情跳转第16张

使用插槽的同时需要在组件js中不光定义组件属性为一个字符串,还需要开启插槽

微信小程序项目,实现图书列表渲染,以及图书详情跳转第17张

给第一第二条短评添加css hack:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第18张

 接下来实现内容简介,实现的方法比较简单,普通的数据绑定即可,但是渲染出来的数据会出现换行符,并且每一段开头都有空格

微信小程序项目,实现图书列表渲染,以及图书详情跳转第19张

首先分析一下 产生的原因:因为服务器返回的数据通过编码变成了\n,所以 会失效

微信小程序项目,实现图书列表渲染,以及图书详情跳转第20张

使用wxs来解决这个问题,wxs是小程序定义的一套一套脚本语言,类似php,可以wxml中插入函数,WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

新建一个过滤方法

微信小程序项目,实现图书列表渲染,以及图书详情跳转第21张

 在页面上引用这个模块:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第22张

添加样式,完成简介

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第23张

接下来再写一个wxs方法,来过滤短评的数量

微信小程序项目,实现图书列表渲染,以及图书详情跳转第24张

util.limit接受两个参数,第一个数组,第二过滤到第几条

微信小程序项目,实现图书列表渲染,以及图书详情跳转第25张

接下来绑定图书信息,比较简单:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第26张

接下来实现图书的短评功能:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第27张

短评模块的布局,like功能使用之前的流行页面的like组件即可

微信小程序项目,实现图书列表渲染,以及图书详情跳转第28张

引入like模块

微信小程序项目,实现图书列表渲染,以及图书详情跳转第29张

绑定事件

微信小程序项目,实现图书列表渲染,以及图书详情跳转第30张

点击短评后会有一个弹出,可以输入短评

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第31张

 给外面假的输入框绑定一个点击事件

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第32张

通过点击切换posting变量来显示弹出框的显示与否

微信小程序项目,实现图书列表渲染,以及图书详情跳转第33张

点击事件:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第34张

在页面里添加一个真正的评论输入框,通过posting切换是否显示

微信小程序项目,实现图书列表渲染,以及图书详情跳转第35张

在取消按钮上绑定onCancel用于隐藏弹框

微信小程序项目,实现图书列表渲染,以及图书详情跳转第36张

微信小程序项目,实现图书列表渲染,以及图书详情跳转第37张

接下来再弹框的评论列表里显示前三条评论,由于前面封装了组件所以这里实现起来很容易:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第38张

 给弹框添加一个黑色遮罩组件:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第39张

微信小程序项目,实现图书列表渲染,以及图书详情跳转第40张

接下来需要实现点击上面的三个标签,或者输入短评,可以发送短评

首先给tag组件添加一个ontap 事件

微信小程序项目,实现图书列表渲染,以及图书详情跳转第41张

在ontap事件内部用triggerEvent的方法把评论数据传递出去

微信小程序项目,实现图书列表渲染,以及图书详情跳转第42张

在父组件监听V-tag的自定义事件,点击的时候执行onpost方法,向服务器发送数据

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第43张

在book的model中添加一个方法,通过传递两个参数book_id和评论内容向服务器提交请求

微信小程序项目,实现图书列表渲染,以及图书详情跳转第44张

给input添加方法

微信小程序项目,实现图书列表渲染,以及图书详情跳转第45张

这时候还需要判断用户是否点击弹框中的标签来添加短评,还是输入了短评,这两个用了同一个方法

获取点击tag传递的文字(组件内部点击事件传递出去的text值):
const comment=event.detail.text;
获取input里的值
const commentInput=event.detail.value;
合并以上:
const comment = event.detail.text || event.detail.value

两个验证:
微信小程序项目,实现图书列表渲染,以及图书详情跳转第46张

发送请求

微信小程序项目,实现图书列表渲染,以及图书详情跳转第47张

完整代码

微信小程序项目,实现图书列表渲染,以及图书详情跳转第48张

优化一下细节,当没有短评的时候给予提示:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第49张

微信小程序项目,实现图书列表渲染,以及图书详情跳转第50张

 到此文章详情页基本就完成了

微信小程序项目,实现图书列表渲染,以及图书详情跳转第51张

 微信小程序项目,实现图书列表渲染,以及图书详情跳转第52张

 最后给图书详情一个loading效果:

在页面onload函数起始位置使用显示一个加载图标

微信小程序项目,实现图书列表渲染,以及图书详情跳转第53张

接下来只需要在页面数据加载完成后使用wx.hideLoading()方法即可关闭加载图标

由于之前页面发送了三个并行请求从服务器获取数据,如果需要实现这样的效果,则需要在第一个请求的回调里发送第二个请求,第二个请求的回调里发送第三个,在第三个请求的回调函数里关闭loading

微信小程序项目,实现图书列表渲染,以及图书详情跳转第54张

但是使用了promise就可以简化这种 操作,直接合并三个请求:

微信小程序项目,实现图书列表渲染,以及图书详情跳转第55张

免责声明:文章转载自《微信小程序项目,实现图书列表渲染,以及图书详情跳转》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇十六、oracle 索引UNIX环境高级编程——system V消息队列下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

小程序项目开发(一)

小程序项目开发 在时隔半年以后,又开始了小程序之旅。 在它刚开始出现的时候,只是简单的做了 技术预研的工作。 现在 又回到 原点,发现变化已经很大了 之前的开发过程的体验不是很友好,在写完 代码之后依然需要手动刷新, 文件夹中 存放的文件 繁杂、容易让新手混乱。 现在,为了满足开发环境的需要 wepy 这个框架就出现了。 现在,我们对于 wepy 这个...

taro教程

taro适配多端 介绍Taro是一套遵循 React 语法规范的多端统一开发框架 多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用。 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种...

微信小程序 —搜索框

wxSearch优雅的微信小程序搜索框一、功能支持自定义热门key支持搜索历史支持搜索建议支持搜索历史(记录)缓存二、使用1、将wxSearch文件夹整个拷贝到根目录下 2、引入 //wxml中引入模板 <import src="http://t.zoukankan.com/wxSearch/wxSearch.wxml"/> <te...

[小程序]小程序框架的简单页面布局

1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐 简单的测试界面如图 index.wxml代码 <!--...

微信小程序 —— 微信小程序解析html富文本插件wxParse

下载并把wxParse放到小程序的目录中 github下载地址:https://github.com/icindy/wxParse 一、基本使用方法 1. Copy文件夹wxParse,把wxParse放在与page同一级目录 - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlp...

wx.miniProgram.navigateTo跳转页面不响应,及参数传递(实用)

html方法要回到小程序原生页面的时候采用: wx.miniProgram.navigateTo({ url: '/pages/scenic/scenic_detail/scenic_detail' })   url:  / + app.json 里面要跳转的小程序页面的路径。 如果要传递参数到跳转到页面,则可以在url后面拼接,如要传递...