# 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）出数�
基于微信小程序的微信小程序阿姨帮（毕业设计，包括数据库，源码，教程）.zip （78个子文件） 
pages city 
index.wxml 966B index.js 2KB index.wxss 742B index index.wxml 1B index.js 478B index.wxss 268B order index.wxml 777B index.js 2KB index.json 2B index.wxss 651B vip index.wxml 532B index.js 493B index.json 2B index.wxss 859B home index.wxml 2KB index.js 3KB index.json 2B index.wxss 4KB pay index.wxml 755B index.js 1KB index.wxss 1KB my index.wxml 461B index.js 639B index.json 2B index.wxss 984B cleanwindow index.wxml 2KB index.js 110B index.wxss 2KB setting index.wxml 1KB index.js 1KB index.wxss 930B logs logs.json 54B logs.js 266B logs.wxml 188B logs.wxss 106B server index.wxml 762B index.js 1KB index.wxss 797B login index.wxml 635B index.js 646B index.wxss 868B app.json 1KB app.js 720B
说明.txt 126B utils util.js 711B app.wxss 165B 使用说明.txt 956B images 
message.png 8KB icon8.png 587B
ayibang.JPG 58KB 人民币.png 8KB server.JPG 54KB icon6.png 312B noorder.JPG 19KB
xiadan.gif 514KB icon1.png 579B icon4.png 579B adress.JPG 27KB tabbar.gif 158KB pagechange.gif 131KB checkorder.JPG 29KB order.JPG 25KB chooseaddr.JPG 49KB select.png 1KB icon5.png 686B citychange.gif 293KB login.JPG 30KB successJPG.JPG 29KB show2.jpg 32KB change.gif 487KB icon7.png 480B show3.JPG 22KB show4.jpg 27KB icon3.png 525B 地址.png 8KB yuyue.gif 939KB icon2.png 318B README.md 16KB资源评论
