首页 > 程序开发 > web前端 > HTML/CSS >

【微信小程序开发?系列文章五】主界面

2016-11-10

我们之前的demo中,页面都是很简单的一个主页面的结构。没有底部菜单,没在意页面的结构。而我们平时接触的app都有各种各样的页面交织组合在一起,所以这一篇文章中,我们开始来关注我们的页面结构。

我们之前的demo中,页面都是很简单的一个主页面的结构。没有底部菜单,没在意页面的结构。而我们平时接触的app都有各种各样的页面交织组合在一起,所以这一篇文章中,我们开始来关注我们的页面结构。

先来看看我们本文相关的demo,地址:https://github.com/jsongo/weApp-frame,三个页面:

为了展示页面的主框架,这里做了三种风格的页面。第一个是个图片列表,从花瓣上抓的。第二个是个外卖的页面。第三个是个人中心页面。

一、页面功能简述

1、花瓣图片列表
用两列的瀑布流来展示,在顶部向下拉可以加载更多,滑动到底部可以加载更多图片。在网络请求数据的时候,会出现一个浮层,展示加载中的loading图标,顶部的title旁边也会出来加载中图标,等数据加载完,这两个图标都会消失。
这个页面还有个子页面,图片查看页,往后可以滑动到下一张,往前可以滑动到前一张。

列表数据来源:分析了下花瓣的网站,随便拿了个数据列表接口,通过传入不同参数来取得分页数据。
本页主要介绍:列表的排布、加载中图标的实现方式、下拉刷新的实现方式、滑动到底部加载更多的实现、navigator及参数传递的实现、引用传递的实现。

2、外卖订餐页面
页面顶部是个轮播图,几个图片轮流播放。下半部分是两个滑动的列表,菜品分类列表,和菜品详细列表,它们可以分开滑动。
本页主要介绍:轮播图组件、页面分区及各自列表滑动。

3、个人中心页面
上半部分是个人信息,下方是菜单列表。退出按钮点击后,可以从下方弹出菜单。
本页主要介绍:模态窗口、下文弹出菜单列表、toast

另外,还有下方tab菜单的实现方式。

二、图片列表的实现

1、底部加载更多

用户滑动到底部的时候,列表会自动加载下一页。
实现也比较简单,在scroll-view标签中的bindscrolltolower绑定个事件响应函数,当滑动到底部时,这个事件就会被触发。
不过这里有个问题要注意下,scroll-view要设置一个高度才行,要不然经常会滑到底部没反应,没触发。获取窗口的高度,把它设置给scroll-view就可以了:

wx.getSystemInfo({
    success: ( res ) => { // 用这种方法调用,this指向Page
        this.setData({
            winH: res.windowHeight
        });
    }
});

在界面中,把winH设置给scroll-view的height

这样scroll-view才能正常在滑动到底部的时候触发bindscrolltolower事件。加载完数据后,可以用之前我们在《【微信小程序开发?系列文章三】数据层》里讲过方法来追加数据。下面我们再介绍一种方法来追加数据。
追加的时候,我们的主要目的是保证data里的items数组的地址不变。所以其实可以直接拿到这个items数组的引用,然后给它push数据,方法如下:

var arr = this.data.items;
arr.push(…newList); // ...三个点是用了es6的解包的语法
this.setData({items: arr}); // 一定要记得setData

这个方法比较hack,先用arr变量来保存this.data.items的引用,push操作不会改变原数组的地址,push完之后,还没更新界面,这时一定要记得再调用一下setData方法,用它来触发界面更新。所以这里,我们其实是把setData当然是UI update的方法来用。亲测了一下,整个列表没看到有全局刷新的问题。

2、下拉刷新

微信小程序提供了下拉刷新的样式。这个我们能修改的不多,只能配置内容和简单的修改几个地方的显示。
(1)配置
我们的程序中有一个app.json,在“window” 这一项里添加 enablePullDownRefresh: true ,小程序的页面在顶部下拉的时候,就会出现下拉刷新的样式。

(2)事件
当下拉被触发的时候,MINA框架会去找当前页面的page里是否有onPullDownRefresh这个事件响应函数,如果有就会调用。
所以这里在实现下拉刷新的时候,就要定义这个函数,然后在里面去做刷新。

(3)刷新的思路
当前列表数据可能不是最新的,如果这时重新去拉一次第一页的数据,可能会出现前面几项不在当前列表里,这些就是要刷新进来的数据。思路就是去比对id,先取原列表中第一个id,如果在列表里找到这个id的项,则停止,把这个项之前的数据都追回到列表里。但是如果在新加载的第一页中没找到这个id,说明这次加载的数量还不够,还要再加载一次。为了避免出bug时,或数据出问题的时候,无限加载的问题,我们设置一个MAX_PREPEND来限制最多加载的页数。

我们用数字来代表列表里的一项,简化下模型,让读者更容易理解。
比如我们第一次加载的列表是[0,1,2,3,4,5,6,7,8,9] 这10项(一次加载10项),第一个id是0。过了5个小时,列表数据有更新了,这时用户下拉刷新,我们拉到了[-28,-27,-26,-25,-24,-23,-22,-21,-20,-19] 这10项,这时我们发现,我们这次加载的新数据没有第一个id,即0,所以中间肯定还有一些项我们要再加载的。所以我们发了第二个请求,这次拉到了[-18,-17,-16,-15,-14,-13,-12,-11,-10,-9],这里又没有出现0,所以发起第三个请求去拉数据,这时我们拿到了[-8,-7,-6,-5,-4,-3,-2,-1,0,1],这次0这个id出现了。所以我们把0前面的8项也全都加入到新列表中。为了安全,我们设置了MAX_PREPEND,比如为3,表示最多发三个请求,如果这中个请求还没有拉到0这个id,那我们也不再发请求了。怕出现无限循环加载的情况,出现bug的时候可能会出现,或者后台把0这条数据删除了,后面这几次请求返回的列表里都不可能出现0,这时也会出现无限加载的情况。

当然上面这个逻辑还是有bug,假如真出现了后台把0这个项删除掉的时候,那我们加载的数据就可能会出现数据重复的现象。所以真正产品化的时候,如果有可能删除数据的情况,最好还是不要用拿第一个id的去对比的方法,因为可能会出现重复。这时要使用另一种算法,即,可以把所有的id都存到一个数组里,新数据拉回来的时候,一个个拿去数组里对比,没在数组中的就加载到界面中,有的话就忽略。然后出现全部项都在这个数组中的时候,就停止加载。有点复杂。

其实如果把这个逻辑放到后台去做,会简单很多,我们让id有序,有大小可以比较,或者用时间戳的方式来判断,前端做有点复杂。我们这个demo中能拿到的数据id也无序,时间也无序,情况远比上面的数字复杂很多,所以没办法只能暂时这么做。读者如果是自己的团队做后台的话,一定要把返回的数据按一定的规则有序化。

现在很多产品化的普遍做法是另一种思路,就是在刷新的时候,都只拉一页,如果还没全部拉取完,则在新页跟原列表数据中间,显示一个类似“查看更多”等的提示,点击的时候,再去拉取第二页、第三页等等。它的实现相对上面的思路会简单一些。

接下去讨论数据如果插入到界面中列表的前端去。
前面讨论追加列表数据的时候,说到了一种方法,取数组的引用,在保证数组地址不变的情况下,去往里面添加数据。push是一个不会改变地址的操作,不过是往数组后面添加的,那么要往前端插入,就要用unshift,它也会在保证数组地址不变的情况下,在前面添加新数据。

(4)停止刷新的样式
当我们加载完数据,刷新完的时候,要把微信帮我们做的加载图标隐藏掉,它自己不会正好在我们加载完数据的时候隐藏,虽然它有一个默认的隐藏时间。
框架给我们提供了一个wx.stopPullDownRefresh方法,我们在加载完数据,render完时,调用一下它就可以了。

(5)数据请求
关于数据请求,这里补充一点。
花瓣对请求做了点限制,直接请求地址会返回一个页面,需要加两个头部才行:

X-Request: JSON
X-Requested-With: XMLHttpRequest

而第二个头部,X-Requested-With,框架默认已经帮我们加了。我们只要在请求的时候,加上一个第一个header就行了。
另外,小程序开发工具一开始的时候,有一个头部重复的问题,不过从v0.10.101000开始,就修复了。

3、图片列表
图片列表其实就是传统网页的布局,没有用到flex,只是让元素浮动float,然后限制一下宽度和高度,它自然就排成两行了。有兴趣的读者可以尝试用flex或table去实现一下。

4、图片播放的实现

官方其实提供了一个图片预览的api,可以用来实现图片的播放,实现也很简单:

wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [ ] // 需要预览的图片http链接列表
});

在urls里传入图片列表就可以了,不过这个功能比较简单,没法定制,比如想在图片播放的时候,能显示些图片说明文字,这个功能就没法做到了。所以下面我们来讨论下如何实现自己定义图片播放的功能。

(1)点击跳转
列表里的每一项都加了navigator组件包裹着,它就相当于标签,用来做跳转。
不过要注意的一点是,navigator的宽高都被框架设置成auto,所以在wxss里设置宽高没有用,但在元素里内嵌样式是可以的,这里我们换种做法。在navigator里放个view把它撑开,给它固定个宽高就可以了,这时对navigator里面元素的点击,事件都会冒泡到navigator元素上,就会触发它的页面跳转。

(2)播放哪张图?
很简单,在跳转的时候,给跳转的地址加个参数就可以了,参数带上点击的这张图在数组中的index。那么问题来了,在跳过去的页面怎么取得这个参数?
微信小程序官方文档里没有特别提到onLoad里,其实还可以传入一个参数options,它用来接收跳转时地址后面带的参数。这个就非常方便我们使用了。比如地址是 ../pic/pic?index=1,那么这里,我们用options.index就可以拿到1这个数据了。
onLoad拿到index数据后,setData来修改并指定当前图片列表播放这个index的图片就行了。

(3)播放的图片数据来源
播放图片,我们不是一张一张来显示的,因为如果只播放一张的话,用户在向左或向右滑动的时候,我们得去找这张图片的上一张图或下一张图来显示,这样做就比较复杂了。
所以我们在界面上放一个swiper组件,把当前列表里的所有图片全部设置到里面去。上面我们拿到的index,在这里就可以使用,swiper组件有个current属性用来指定当前显示哪一张图。
这个列表数据,我们不需要从index页面重新拷贝一份过来。数组,其实存一个引用就行了,这样的两个好处是:1节约内存,2更新的时候更新一个地方的数据就行。实现方式是,在index的onLoad方法里,把this.data.items的引用存到app的globalData里,再在图片播放页的onLoad方法里从app取出这个引用,把它设置给这个页面的data里就行。当前为了界面及时更新,我们把这个操作放到播放页面的onShow里好些,这样,每天切换到播放页来查看图片的时候,都会去更新图片列表,保证数据是最新的。

(4)播放页界面的实现
先加一个view组件,设置成整个页面大小,背景设置成顶部bar的颜色,这样看起来比较像一个整体。
上面提到,我们的图片是显示在swiper组件里的,因为这是一个可左右滑动的组件,不用我们自己去做滑动的事件处理。不过这个组件有个问题,它的高度也是在框架中固定死的,固定成150px,我们在wxss里改变它的值也没有作用。还好,在标签里内嵌样式可以把框架中定义的样式给覆盖掉。那么为了让图片垂直居中,我们第一想到的可能是,取到图片高度,把它设置给swiper的内嵌样式的height里,再用margin-top等方式让它居中。这里介绍另一种方式让图片居中。

当父元素被设置成 display:flex 时,加上几个center就可以让其内部元素自然水平和垂直居中:

display:flex;
justify-content:center;
align-items: center;
text-align: center;

所以我们也把swiper组件的高度设置成整个窗口的高度,再用上面的方法把里的image元素自然居中就可以了。image元素的mode设置成aspectFit,它会保持原有的宽高比例,image只有这个mode值是保持图片完整的。更多mode属性可以看官方文档。
另外,图片播放页面是第二层弹出页面,没有底部菜单,这样就可以全屏。

5、loading样式的实现
微信小程序提供了两种loading的样式,一种是在顶部bar的标题旁边显示转动的图标,另一种是用浮层的形式在页面中间显示一个加载图标。
第一种的实现也比较简单
显示:

wx.showNavigationBarLoading

隐藏:

wx.hideNavigationBarLoading

第二种也只需要调用一个函数就可以了
代码:

wx.showToast({
    title: '加载中...',
    icon: 'loading',
    duration: 10000
});

三、外卖页面的实现

1、页面布局
外卖页面基本可以分为三部分,顶部轮播图组件、下半部分是两个横排的滑动列表,他们可以各自滑动。
轮播组件可查看官方文档介绍。几个关键的参数,autoplay设置是否自动播放,current设置当前播放第几张,indicator-dots设置是否显示面板上的指示点。在上面的图片播放页中,我们把autoplay和indicator-dots都设置成false。注意这些true/false都要写成 false 的形式。
在这个页面中,我们模仿美团外卖中的首页,自动轮播顶部的广告图片。除了autoplay和indicator-dots设置成true外,还可以修改interval参数来设置等多久再播放下一个,修改duration来设置滑动的时长。

2、页面分区
主要是用wxss来控制,这里依然用flex简单的布局方式,按1:5的比例来放置两边的滚动区域。
左边的列表,给每个项都添加一个事件,每次点击某个项的时候,它的底色要变。这里我们通过控制class来改变样式,在class里添加:

{{item.id==chosenType?'selected':''}}

当选中的项的id为choseType时,class就添加selected,这样,我们就可以通过choseType这个变量来改变列表选中的项的样式。
那怎么实现两个列表数据的联动呢?
我们在每个项中也埋下了data-id,点击的时候就知道当前项的id,再拿它去请求相关的列表数据,从而可以拿到右侧的餐品列表数据,再更新到右侧列表上去就可以了。
每个列表都是独立的,可以各自设置scroll-y让他们各自滚动,互不影响。


四、个人中心页面的实现

整体布局其实就是wxss完成的,也没什么可讲。这一部分主要讨论:模态窗口、下文弹出菜单列表、toast的实现。

1、模态窗口
其实也就是我们网页中的alert、confirm这些弹出框。当他们弹出来的时候,后面的窗口是不可以操作的,这类窗口称为模态窗口。
小程序框架提供了一个wx.showModal,我们可以用它来实现alert / confirm / prompt。

wx.showModal({
    title: '关于',
    content: '这是一个演示程序,不要在意这些细节'
});

先看几个参数:
title设置上面的标题
content就是对话框中部灰色的内容

(1)alert框
添加一个字段:showCancel,设置成false就可以了

(2)confirm框
默认的就是confirm的样式,可以用cancelText字段设置取消文本,cancelColor设置它的字体颜色,confirmText设置确认文本,confirmColor设置它的字体颜色。

(3)prompt弹出输入框
modal框中间的内容是允许插入wxml标签的,所以我们如果插入一个input组件,它自然就成了prompt弹出框,如果需要用户输入的时候,可以用这个办法弹出。
用success得到用户点击了哪个按钮,如果是确认按钮的时候,success回调里通过参数拿到:

success: function(res) {
    if (res.confirm === 1) {
        console.log('用户点击了确认按钮');
    }
    else {
        console.log('用户点击了取消按钮');
    }
}

(4)modal的显示与隐藏
modal弹出框默认的就可以通过“取消”按钮来隐藏,暂还没有提供其它方式。

2、toast

默认样式,上面有个打钩图标,目前微信没有提供定制的属性。如果要显示打叉x的图标,恐怕还没法用。期待后面会更新。

wx.showToast({
    title: '注销成功!',
    icon: 'success',
    duration: 3000
});

我们demo中用toast来提示注销成功。

3、action-sheet
action-sheet就是下文往上弹出来的小菜单,实现方式也比较简单:

wx.showActionSheet({
    itemList: ['确定注销'],
    success: (res)=> {
        if (!res.cancel) {
            if (res.tapIndex == 0) { // 确定注销
                this.doLogout();
            }
        }
    }
});

itemList用来设置上面的菜单列表,从左往右,从0开始编号,从上往下显示,最下页的是取消按钮,它不用在itemList里面写,默认会有。也可以通过cancel这个字段来去掉空上取消按钮。
取消按钮默认会有点击事件,点击会把整个actionSheet隐藏,点击半透明灰黑的地方也可以把它隐藏,这些都是这个组件默认帮我们做好的。
组件里success用来做点击的事件响应。如果用户点击取消按钮的话,res.cancel就为true,点击其它按钮则会通过res.tapIndex通知我们 用户点击的是哪个编号的按钮,从而我们可以根据它来做出相应的响应。

五、其它

1、各页面标题
每个页面有不同的标题。在用v0.10.101400版本开发的时候,测试wx.setNavigationBarTitle方法设置的标题没有作用,会被改回去。不过v0.10.102800版本修复了这个问题。
如果wx.setNavigationBarTitle方法失效的话,还有一个办法可以改标题,在xxx.json里设置新的title就可以把原来的覆盖。
demo代码中,除index页面外,其它页面都有一个xxx.json文件,内容大致如下:

{
    "navigationBarTitleText": "图片详情",
    "enablePullDownRefresh": false
}

第一个设置标题,第二个enablePullDownRefresh的作用是,在不需要下拉刷新的页面中,覆盖window中的这个参数,让它下拉不了。
这个方法还可以用来覆盖其它参数,如页面背景,字体颜色等等。

2、demo中的下文菜单
这个是在app.json里设置的,跟window并列,添加一个tabBar:

  "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "res/img/tab/home-off.png",
        "text": "首页",
        "selectedIconPath": "res/img/tab/home-on.png"
      }, {
        "pagePath": "pages/waimai/waimai",
        "iconPath": "res/img/tab/wm-off.png",
        "text": "外卖",
        "selectedIconPath": "res/img/tab/wm-on.png"
      }, {
        "pagePath": "pages/my/my",
        "iconPath": "res/img/tab/my-off.png",
        "text": "我的",
        "selectedIconPath": "res/img/tab/my-on.png"
      }],
      "color":"#174578",
      "selectdColor":"#3cc51f",
      "borderStyle":"white",
      "backgroundColor":"#116fb6"
  },

list定义tab信息,只能配置最少2个、最多5个。每个tab可以用pagePath指定页面,用iconPath指定选中前的图标,selectedIconPath指定选中后的图标,text指定tab名称。
样式的设置,跟list并列,用color设置文字颜色,用selectdColor设置选中时的文字颜色,borderStyle设置顶部边框颜色,而且只支持black/white,backgroundColor设置tab背景色。
子菜单还不支持。

新开了个小程序技术交流群,有什么疑问可以加到群里提问:

相关文章
最新文章
热点推荐