微信小程序DEMO——面包旅行的代码

API

　　集合在一起写了一个页面，并导出，

const apiURL = 'http://xxx.xxxx.com';

const trip = {

    hot(data,callback){

        wx.request({

            url: `${apiURL}/v2/index/`,

            method: 'GET',

            data,

            header:{

                Accept: 'application/json',

                'Content-Type': 'application/json'

            },

            success(res) {

                callback('success', res);

            },

            fail(res) {

                callback('fail', res);

            },

            complete(res) {

                callback('complete', res);

            }

        })

    }

}

module.exports = {

    trip

}

　　请求的时候，采用 obj.xxx(data,(state,res)=>{}) 返回函数的形式挂载数据请求；

const api = require('../../utils/api.js');

Page({

    data: {

    },

    onLoad: function(options) {

        let self = this;

        let data = {

            next_start: self.data.start

        }

        api.trip.hot(data,(state,res)=>{

            if (state === 'success'){

                // console.log(res.data);

                let newList = res.data.data.elements;

                newList.map((trip) => {

                    let item = trip;

                    item.data[0].date_added = formatTime(new Date(item.data[0].date_added * 1000),1)

                    return item;

                });

                if (needrefresh){

                    newList = self.data.trips.concat(newList);

                };

                self.setData({

                    trips: newList,

                    start: res.data.data.next_start,

                    loading: 'none'

                });

                // console.log(newList)

            }

        })

    }

})

主页

　　主要写了上拉加载，下拉刷新数据，页面的跳转，多行文字的省略号。

　　下拉刷新，首页请求的数据中有一个 next_start 的字段。首次进入页面时，传入0，服务器返回数据和这个字段，记录这个字段，然后上拉刷新的时候，再把这个字段传给服务器，服务器会返回新的数据和新的字段。

　　上拉加载，还是这个 next_start 字段。首次获得数据之后，记录此字段，上拉加载时，传入此字段，返回新的数据和新的字段，新的数据需要和之前的数据合并，然后渲染。

　　页面的跳转，前往游记页面需要当前点击对象的 id 和 name 值，这个使用事件对象的 e.currentTarget.dataset 来获得，dataset 是由组件上以 data- 开头的属性集合。然后通过 wx.navigateTo() 跳转，路径中可以带参数（传值）。

　　多行文字的省略号，有些文字是需要省略写法的，单行又和多行不同。

<view data-id="{{item.data[0].id}}" data-name="{{item.data[0].name}}" bindtap='viewTrip'></view>

viewTrip:function(e){

    let dataTrip = e.currentTarget.dataset;

    wx.navigateTo({

        url: `../trip/trip?id=${dataTrip.id}&name=${dataTrip.name}`,

    })

}  

.title{

    font-size: 36rpx;

    font-weight: bold;

    line-height: 1.5;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    display: -webkit-box;

    -webkit-box-orient: vertical;

}

游记页面

　　主要根据跳转过来的 id 和 name 来请求服务器数据，加载中画面，页面跳转。

　　请求数据，可以在生命周期 onload(options) 参数中获取打开当前页面路径中的参数，然后根据它请求服务器数据。

　　加载中画面，使用 wx.showToast() 和 wx.hideToast() 。

　　在加载数据的时候，页面可能会显示没有数据的代码，需要做判断处理，<view class='wrap' wx:if="{{ trip != null }}">，在数据没到之前，页面不渲染。

　　页面跳转和主页一样，使用 e.currentTarget.dataset ，wx.navigateTo() 和 onload(options) 。

    onLoad: function(options) {

        let self = this;

        let id = options.id;

        self.setData({

            options

        });

        wx.showToast({

            title: '正在加载',

            icon: 'loading',

            duration: 10000,

            mask: true

        });

        api.trip.waypoint(id,(state,res) => {

            if(state === 'success'){

                let trip = res.data;

                // console.log(trip);

                self.setData({

                    trip

                });

                wx.hideToast();

            }

        })

    },

路径页面

用户页面

发现页面

　　使用 swiper 组件，flex 布局

　　flex 布局，每行显示两个 item ，多的换行，这需要给 item 定宽。

.area{

    display: flex;

    justify-content:space-between;

    align-items: center;

    flex-direction: row;

    flex-wrap:wrap;

    padding: 0 20rpx;

}

.item{

    width: 345rpx;

    height: 345rpx;

    margin-bottom: 20rpx;

}

目的地页面

　　各景区的得分(星星数量)，这是一种很多地方都用的方法，最高5星，可以有半颗星。

先列个数组，值为12345，
首先依次判断当前 item 是否小于等于得分，然后渲染全颗黄星
然后依次判断当前 item 大于得分和 item-1 小于得分，然后渲染半颗黄星
最后依次判断当前 item 大于得分和 item-1 不小于得分，然后渲染灰色星。

　　这里还使用了模板的方式。需要引入和并且填写 name 值，传入数据需要用到 data 属性。

<template name='m-stars'>

    <view class='m-stars'>

        <block wx:for='{{[1,2,3,4,5]}}'  wx:key='*this'>

            <image class='stars' wx:if='{{item <= count}}' src='../../image/destination/star_s.png'></image>

            <image class='stars' wx:if='{{item > count && item-1 < count}}' src='../../image/destination/semistar_s.png'></image>

            <image class='stars' wx:if='{{item > count && !(item-1 < count)}}' src='../../image/destination/unstar_s.png'></image>

        </block>

    </view>

</template>

<import src='../../component/stars/stars.wxml'/>

<template is='m-stars' data='{{count:attract.rating}}'></template>

巴特西

微信小程序DEMO——面包旅行的代码

API

主页

游记页面

发现页面

目的地页面

最新文章

热门文章