017-微信小程序-阿姨帮.zip

# WeChat_ayibang 微信小程序仿阿姨帮 _______ 微信小程序是什么？<br> 官方解释，微信小程序，简称小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。简而言之，就是用户需要的时候打开，用完即走的一种应用。如果小程序能够兴起，我想到时候我们的手机将会变得很简单干净，因为你无需下载安装各种App！<br> 开发微信小程序你需要准备好这些工具：<br> 下载微信开发者工具，附上地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下载好后就可以进行开发了，不过呢，如果要发布你的小程序呢，你要去申请AppId走各种流程，不过平时练练手可以选择无Appid进行开发，不过会有一些局限。具体开发详情你可以去https://mp.weixin.qq.com 这里了解。<br> 在创建了一个微信小程序后，会自动生成一些基本文件：<br> * page文件夹 页面文件夹 包含你所有的页面文件,至少包含.js .wxml .wxs后缀文件，.json可选 * utlis文件夹 * app.js 控制全局的逻辑结构 * app.json 配置一些全局数据，所有页面都要在此处注册 * app.wxml 内容显示 * app.wxss 全局样式 好了，接下来进入主题，我做的小程序是模仿手机app版的阿姨帮软件，主要实现的功能有：<br> * `地理定位` * `地图选址` * `预约服务` * `下单` * `查看订单` * `页面跳转` * `底栏切换良好交互` * `图片轮播` * `...` 首先先要解释我的数据来源，我使用的是用mock来模拟数据，详情看http://www.easy-mock.com Easy Mock是一个可视化工具，能快速生成模拟数据的服务，它能为我们提供一个数据接口url，这要我们就能够使用request发送数据请求了。其次要解释的是用户登录问题，我选择的使用微信账号登录，使用小程序自带的wx.getUseInfo()应用接口来获取用户的信息，当然它首先会调用wx.login接口，询问用户是否给予权限。先就交代这两点，让我们正式进入主题：<br> 功能实现 ____ * 轮播图 & 底栏交互 & 页面跳转 先来看看主界面：<br>  <br> 这个界面用到了微信小程序自带的轮播图(swiper)组件以及底栏(tabbar)组件，能够快速的实现我们想要的图片轮播和底栏切换的效果，而这些用原生js或者jquery来coding都是很麻烦的. 让我们来看看微信小程序是如何实现的吧：<br> HTML结构<br> ```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配置<br> ```javascript Page({ data: { indicatorDots:true, vertical:false, autoplay:true, interval:3000, duration:1200, ...... } }) ``` 以上就是实现图片轮播效果的代码，使用滑块视图容器swiper组件,它拥有vertical(是否垂直放置图片）、autoplay(是否自动切换）、interval(自动切换时间间隔)、duration(滑动动画时长)、durationindicator-dot(是否显示面板指示点)等属性，再在js里对这些属性做相关的设置。此外，在组件上还用到了列表渲染wx:for，将图片的src属性绑定在一个数组上，使用数组中各项的数据重复渲染swiper组件<br> 看看底栏切换交互的效果吧！<br>  <br> 先暂且不管我制作的gif图有多渣，主要想体现的就是个各底部栏之间能进行切换，这个功能实现较简单，主要在tabBar里设置样式、页面路径、图片路径，用列表list来渲染,详细请参考以下代码<br> ```javascript "tabBar":{ "color":"#888", "selectedColor":"#00beaf", "borderStyle":"white", "backgroundColor":"#fff", "list":[{ "pagePath":"pages/home/index", "iconPath":"images/icon5.png", "selectedIconPath":"images/icon1.png", "text":"阿姨帮" }, { "pagePath":"pages/order/index", "iconPath":"images/icon2.png", "selectedIconPath":"images/icon6.png", "text":"订单" }, { "pagePath":"pages/vip/index", "iconPath":"images/icon3.png", "selectedIconPath":"images/icon7.png", "text":"会员" }, { "pagePath":"pages/my/index", "iconPath":"images/icon4.png", "selectedIconPath":"images/icon8.png", "text":"我的" } ] } ``` 接下来是非底栏的页面之间的交互，它的实现主要依赖wx.navigateTo导航接口<br>  <br> 微信小程序是没有a标签的，但是有wx.navigateTo API实现页面的跳转，有关页面的跳转的三种方式可以详看文档，后面还会用到wx.switchTab进行非底栏页面与底栏页面的切换。这个功能实现的重点在于我们要在某个组件上绑定事件，写法为 bindtap="bindViewTap"，然后在js里添上逻辑控制，代码参考：<br> ```javascript bindViewTap:function(e){ wx.navigateTo({ //跳转到城市列表的页面        url: '../city/index'    }) ``` <br> * 地理定位 来看看效果图吧 <br>  <br> 当我们一开始进入应用时，页面会显示我们此时此刻所在的城市，然而在微信提供的wx.getLocation API中，它只会返回经纬度，不会将具体的国家呀城市呀街道等信息反馈给你，所以我们需要借用百度地图、腾讯地图的API来逆地址解析出这些信息。我用的是百度地图的API,这里会有遇到一些坑，在后面会有介绍，具体代码如下：<br> ```javascript loadCity:function(longitude,latitude){ var page =this; wx.request({     //baidu地图逆地址解析API      url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location='+latitude+','+longitude+'&output=json&pois=1',      data: {}, header:{ 'Content-Type':'application/json' }, success: function(res){ // success console.log(res);        var str1=res.data; //坑 此时返回的并不是JSON对象，要进行相关转换！        var str2=str1.replace("renderReverse&&renderReverse(",""); var str3=str2.substring(0,str2.length-1); var cityresult=JSON.parse(str3); console.log(typeof(cityresult)); var city1=cityresult.result.addressComponent.city; var city=city1.replace("市",""); page.setData({ city:city }); }, fail: function() { // fail }, complete: function() { // complete } }) } ``` 你在gif图中也能看到，你跳转到另一个页面后，当你选中某一个城市时，主页的地址也要发生改变，这又是怎么做到的呢？<br> 这就跟本地存储有关了，我们学JS时知道localStorage能够长期的保持数据，我们不妨使用它来实现这种数据之间的传输。微信小程序与之等效的是Storage本地存储,我在这调用了wx.setStorage和wx.getStorage两个API，当我选中某个城市时，就把这个数据保存（setstorage）到数据库中,然后主页使用提取（getstorage）出数�