微信小程序是什么?<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>
![Image text](https://github.com/Sukura7/wechat-ayibang/blob/master/images/ayibang.JPG) <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>
![Image text](https://github.com/Sukura7/wechat-ayibang/blob/master/images/tabbar.gif) <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>
![Image text](https://github.com/Sukura7/wechat-ayibang/blob/master/images/pagechange.gif) <br>
微信小程序是没有a标签的,但是有wx.navigateTo API实现页面的跳转,有关页面的跳转的三种方式可以详看文档,后面还会用到wx.switchTab进行非底栏页面与底栏页面的切换。这个功能实现的重点在于我们要在某个组件上绑定事件,写法为 bindtap="bindViewTap",然后在js里添上逻辑控制,代码参考:<br>
```javascript
bindViewTap:function(e){
wx.navigateTo({
//跳转到城市列表的页面
url: '../city/index'
})
```
<br>
* 地理定位
来看看效果图吧 <br>
![Image text](https://github.com/Sukura7/wechat-ayibang/blob/master/images/citychange.gif) <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 (170个子文件)
._city 212B
._cleanwindow 212B
._home 212B
._images 212B
._index 212B
._login 212B
._logs 212B
._my 212B
._order 212B
._pages 212B
._pay 212B
._server 212B
._setting 212B
._utils 212B
._vip 212B
._阿姨帮 212B
yuyue.gif 939KB
xiadan.gif 514KB
change.gif 487KB
citychange.gif 293KB
tabbar.gif 158KB
pagechange.gif 131KB
._citychange.gif 212B
._change.gif 212B
._xiadan.gif 212B
._pagechange.gif 212B
._tabbar.gif 212B
._yuyue.gif 212B
ayibang.JPG 58KB
server.JPG 54KB
chooseaddr.JPG 49KB
show2.jpg 32KB
login.JPG 30KB
successJPG.JPG 29KB
checkorder.JPG 29KB
show4.jpg 27KB
adress.JPG 27KB
order.JPG 25KB
show3.JPG 22KB
noorder.JPG 19KB
._adress.JPG 212B
._show2.jpg 212B
._server.JPG 212B
._chooseaddr.JPG 212B
._checkorder.JPG 212B
._order.JPG 212B
._ayibang.JPG 212B
._successJPG.JPG 212B
._noorder.JPG 212B
._show4.jpg 212B
._show3.JPG 212B
._login.JPG 212B
index.js 3KB
index.js 2KB
index.js 2KB
index.js 1KB
index.js 1KB
index.js 1KB
app.js 720B
util.js 711B
index.js 646B
index.js 639B
index.js 493B
index.js 478B
logs.js 266B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._logs.js 212B
._index.js 212B
._index.js 212B
._app.js 212B
._util.js 212B
index.js 110B
app.json 1KB
._index.json 212B
._index.json 212B
._index.json 212B
._index.json 212B
._logs.json 212B
._app.json 212B
logs.json 54B
index.json 2B
index.json 2B
index.json 2B
index.json 2B
README.md 16KB
._README.md 212B
message.png 8KB
人民币.png 8KB
地址.png 8KB
select.png 1KB
icon5.png 686B
icon8.png 587B
共 170 条
- 1
- 2
资源评论
入伍击寇
- 粉丝: 129
- 资源: 4706
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功