微信小程序------美甲商城(1)

今天带大家看一个小程序。从最基础开始，到小项目的完成。这里涉及到的我都会从官方文档摘抄下来一步一步讲解。

我们先看看效果。第一个首页，第二个详情，第三个预约

这里还是用一段视频来带大家看看。（手机上地图由于手机网速卡，所以不现实。得等一会才显示）

视频地址：http://v.youku.com/v_show/id_XMzk3OTQ2MDI2NA==.html?x&sharefrom=android&sharekey=0260e060a5cefa8dd67e556ed539a86c4

 项目结构：

首页的制作：这两部分的制作。

 

 上面的美甲商城那块和下面的导航：window这个属性建项目会自动生成。

 这里提到tabBar我们看看文档，可以看文档，也可以看我下面写的https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

下面这个图的设置记得写在list前面，看图

其中 list 接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

 

 

 

---

 首页轮播图的制作：

 进入index页面：

 轮播中用的图都在工具文件下的data.js  这个里面的方法都要暴露出来，这样别人才能拿到你。

下面是暴露接口。以后不再提这个。 

工具好了。可是如何调用呢，下来我们来看看如何在js页面调用这个。

banner_url:fileData.getBannerData(),获取工具里图片的地址。 

wx:if="{{item}}"用来遍历。

关于css的样式，我们会在最后的文件里给到。

总结知识点：

轮播：swiper 滑块视图容器。官网文档地址：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

下面我给的文档常用的和注意点。

可滚动视图区域：scroll-view

官网文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

 

---

导航的内容：今晚再写，平安夜，出去浪会。

回来了。继续写！！！

上面的效果看看代码：

 

每点击一个图标就会出发一个事件，让下面的文字变色。

先看事件：

 

这里再次讲一下。当鼠标点击事件时候

---

看列表怎么写的。

介绍：

wxml页面 

data.js页面 

遍历出来列表： 

 

拉到最底下加载时候出现的东西： 

页面跳转：