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星,可以有半颗星。

  1. 先列个数组,值为12345,
  2. 首先依次判断当前 item 是否小于等于得分,然后渲染全颗黄星
  3. 然后依次判断当前 item 大于得分和 item-1 小于得分,然后渲染半颗黄星
  4. 最后依次判断当前 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——面包旅行的代码的更多相关文章

  1. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  2. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  3. 微信小程序demo-环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  4. 微信小程序(有始有终,全部代码)开发--- 新增【录音】以及UI改进

    开篇语 寒假发了一篇练手文章,不出意外地火了: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本,出乎意料的火了: 简年18: ...

  5. 微信小程序(有始有终,全部代码)开发--- 新增模块: 图片选取以及拍照功能

    开篇语 前几天发了一篇: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本: 简年18: 微信小程序(有始有终,全部代码)开发 ...

  6. 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

    开篇语 昨晚发了一篇: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 然后上午起来吃完午饭之后,我就准备继续开工的,但是突然的,想要看B站.然后在一股 ...

  7. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  8. 微信小程序——demo合集及简单的文档解读【五】

    官方Demo https://github.com/wechat-miniprogram/miniprogram-demo 其他Demo https://www.cnblogs.com/ytkah/p ...

  9. 微信小程序demo理解

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana } p.p2 { margin: 0.0px 0.0px 0.0px 0.0p ...

随机推荐

  1. 关于PHP中token的生成的解析

    背景 很多时候我们需要用 token 来作为一些标识, 比如: 一个用户登录后的认证标识. 实现方式 md5 的方式: $v = 1; // 自己定义的 需要hash 的value 值 $key = ...

  2. 【java/Json】用Java对象构建Json语法树

    本文后续:https://www.cnblogs.com/xiandedanteng/p/11973129.html 编译第一步:将文本解析成Java对象构成的语法树 第二步:将语法树输出整形好的Js ...

  3. Javascript事件派发-dispatchEvent

    事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...

  4. Android页面切换

    参考地址: http://www.crifan.com/android_how_to_create_new_ui_and_switch_to_another_new_ui/ 想要实现,在Android ...

  5. libfacedetection环境配置

    E:\Opencv\libfacedetection_install1\include E:\Opencv\libfacedetection_install1\lib libfacedetect-x6 ...

  6. Spring cloud微服务安全实战-6-2JWT认证之认证服务改造

    首先来解决认证的问题. 1.效率低,每次认证都要去认证服务器调一次服务. 2.传递用户身份,在请求头里面, 3.服务之间传递请求头比较麻烦. jwt令牌. spring提供了工具,帮你在微服务之间传递 ...

  7. apt-get和yum

    1.apt-get是dpkg系的,或者说debian系的,如ubuntu 2.yum是红帽系的,如中标麒麟

  8. 在tomcat下context.xml中配置各种数据库连接池

    作者:郑文亮 Tomcat6的服务器配置文件放在 ${tomcat6}/conf 目录底下.我们可以在这里找到 server.xml 和 context.xml.当然,还有其他一些资源文件.但是在在本 ...

  9. APT攻击与银行

    APT与传统攻击 APT:团队作战,拥有自研工具集,意图明确,技术高超,拥有政府或商业背景,潜伏期多达数年. 传统攻击:脚本小子,水平参差不齐,短期攻击,直接获取利益为目标. 攻击目标 APT攻击链 ...

  10. 【GStreamer开发】GStreamer基础教程14——常用的element

    目标 本教程给出了一系列开发中常用的element.它们包括大杂烩般的eleemnt(比如playbin2)以及一些调试时很有用的element. 简单来说,下面用gst-launch这个工具给出一个 ...