首页 > 微信学院 > 微信小程序 >

微信小程序仿阿姨帮实战教程

2018-06-20

微信小程序仿阿姨帮实战教程。

我做的小程序是模仿手机app版的阿姨帮软件,主要实现的功能有:

地理定位

地图选址

预约服务

下单

查看订单

页面跳转

底栏切换良好交互

图片轮播

首先先要解释我的数据来源,我使用的是用mock来模拟数据,详情看http://www.easy-mock.comEasy Mock是一个可视化工具,能快速生成模拟数据的服务,它能为我们提供一个数据接口url,这要我们就能够使用request发送数据请求了。其次要解释的是用户登录问题,我选择的使用微信账号登录,使用小程序自带的wx.getUseInfo()应用接口来获取用户的信息,当然它首先会调用wx.login接口,询问用户是否给予权限。先就交代这两点,让我们正式进入主题:

功能实现

轮播图 & 底栏交互 & 页面跳转

先来看看主界面:

\

Image text

这个界面用到了微信小程序自带的轮播图(swiper)组件以及底栏(tabbar)组件,能够快速的实现我们想要的图片轮播和底栏切换的效果,而这些用原生js或者jquery来coding都是很麻烦的. 让我们来看看微信小程序是如何实现的吧:

HTML结构

<swiper
  class="binner"
   vertical="{{vertical}}"
   autoplay="{{autoplay}}"
   interval="{{interval}}"
   duration="{{duration}}"
   indicator-dots="{{indicatorDots}}">
    <block wx:for="{{topimg}}" wx:key="item">
      <swiper-item>
        <image src="{{item.image}}" class="slide-image"></image>
      </swiper-item>
    </block>
    <view class="city" bindtap="bindViewTap" >
         <text class="current">{{city}}</text>
    </view>
  </swiper>
JS配置
Page({
  data: {
    indicatorDots:true,
    vertical:false,
    autoplay:true,
    interval:3000,
    duration:1200,
    ......
    }
  })

以上就是实现图片轮播效果的代码,使用滑块视图容器swiper组件,它拥有vertical(是否垂直放置图片)、autoplay(是否自动切换)、interval(自动切换时间间隔)、duration(滑动动画时长)、durationindicator-dot(是否显示面板指示点)等属性,再在js里对这些属性做相关的设置。此外,在组件上还用到了列表渲染wx:for,将图片的src属性绑定在一个数组上,使用数组中各项的数据重复渲染swiper组件

看看底栏切换交互的效果吧!

\

Image text

先暂且不管我制作的gif图有多渣,主要想体现的就是个各底部栏之间能进行切换,这个功能实现较简单,主要在tabBar里设置样式、页面路径、图片路径,用列表list来渲染,详细请参考以下代码

"tabBar":{
    "color":"#888",
    "selectedColor":"#00beaf",
    "borderStyle":"white",
    "backgroundColor":"#fff",
    "list":[{
相关文章
最新文章
热点推荐