微信开发者工具---仿支付宝首页

一、微信开发者工具

微信开发者工具是一款专业高效的小程序开发工具，用户通过软件可以制作微信小程序和给公众号添加新的功能使用，非常地方便。

下载地址：

 稳定版 Stable Build | 微信开放文档 (qq.com)

二、微信小程序开发wxml、json、js、wxss四类核心文件

1.wxml文件

wxml文件的意义类似与hmtl,写法也是采取的标签式写法。主要负责本页面的界面展示，以及事件的绑定等等。

zfb.wxml

<view class="container">
<view class="blue">
<view class="top">
<view class="search">
<input placeholder="支付宝小程序"></input>
</view>
<view class="more">
<image src="/images/01.png"></image>
<image src="/images/02.png"></image>
</view></view>
<view class="main-menu-g">
<view class="main-menu">
<image src="/images/1.png"></image>
<text>扫一扫</text>
</view>
<view class="main-menu">
<image src="/images/2.png"></image>
<text>付钱</text>
</view>
<view class="main-menu">
<image src="/images/3.png"></image>
<text>收钱</text>
</view>
<view class="main-menu">
<image src="/images/4.png"></image>
<text>卡包</text>
</view>
</view>
</view>
<view class="white">
<view class="white-menu">
<image src="/images/5.png"></image>
<text>余额</text>
</view>
<view class="white-menu">
<image src="/images/6.png"></image>
<text>信用卡还款</text>
</view><view class="white-menu">
<image src="/images/7.png"></image>
<text>充值中心</text>
</view><view class="white-menu">
<image src="/images/8.png"></image>
<text>红包</text>
</view><view class="white-menu">
<image src="/images/9.png"></image>
<text>电影</text>
</view><view class="white-menu">
<image src="/images/10.png"></image>
<text>大众点评</text>
</view><view class="white-menu">
<image src="/images/11.png"></image>
<text>收付码</text>
</view><view class="white-menu">
<image src="/images/12.png"></image>
<text>蚂蚁森林</text>
</view><view class="white-menu">
<image src="/images/13.png"></image>
<text>火车票</text>
</view><view class="white-menu">
<image src="/images/14.png"></image>
<text>贷款</text>
</view><view class="white-menu">
<image src="/images/15.png"></image>
<text>出行</text>
</view><view class="white-menu">
<image src="/images/16.png"></image>
<text>全部</text>
</view>
</view><swiper class="u-warp" indicator-dots="true" indicator-color="rgba (225,225,225,.3)"
autoplay="true" interval="2000" duration="300" circular="ture">
<block wx:for="{{burl}}">
<swiper-item>
<image src="{{item.url}}" class="u-img"></image>
</swiper-item>
</block>
</swiper>

</view>

 可以看出WXML文件的格式主要是标签格式，如下所示:

<标签名 属性名1="属性值1" 属性名2="属性值2"> ... </标签名>

其中：

• 所有的元素都需要闭合标签
• 所有的元素都必须正确嵌套，符合层级关系
• 属性值必须使用引号包围
• 标签必须使用小写
• wxml中连续多个空格会被合并为1个空格.

 2.wxss文件

1.作用

wxss文件是样式控制文件，类似与css文件，主要用于与wxml文件一起使用，优化wxml页面。

zfb.wxss

 

.blue{
  background: #3974f6;
  padding:20rpx;
}
.blue .top{
  height:58rpx;
  width:100%;
  display :flex;
 
}
.blue .top .search{
  display :flex;
  flex:auto;
}
.blue .top .search input{
  flex: auto;
  background:white;
  border-radius:2px;
  font-size: 24rpx;
padding:0 10rpx;
}

.white{
  display: flex;
  flex-wrap: wrap;
  padding-top: 20rpx;
  justify-content: space-around;
}
.white .white-menu{
  width: 180rpx;
  height: 100rpx;
display: flex;
flex-direction: column;
margin-bottom: 30rpx;
align-items: center;
} 
.white .white-menu image{
width: 50rpx;
height: 55rpx;
}
.white .white-menu text{
  font-size: 32rpx;
}

.more {
  display:flex;
  flex-basis:180rpx;
  justify-content:space-evenly;
}

.more image{
  width :50rpx;
  height:50rpx;
}

.main-menu-g{
margin-top: 30rpx;
display: flex;
margin-bottom: 20rpx;
justify-content: space-around;
}
.main-menu-g .main-menu{
  width: 100rpx;
height: 120rpx;
text-align: center;
}
.main-menu-g .main-menu image{
  width: 75rpx;
height: 75rpx;
}
.main-menu-g .main-menu text{
  color:white;
  font-size: 32rpx;
}
.main-menu-g .main-menu{
  width: 100rpx;
height: 120rpx;
text-align: center;}
.u-warp{
  width: flex;
  height: 400rpx;
  align-items: flex-end;
}
.u-img{
  width: 100%;
}

 可以看出格式是多个样式类，每个类里都是样式键值对，不能嵌套，格式如下：

.样式类名{ key:value }

3. json文件

1.作用

JSON文件主要用于描述页面属性。

zfb.json

{
  "usingComponents": {}
}

根据不同标签，宏观描述和控制整个项目的属性,其他文件夹中的json用来描述当前文件夹中的页面属性，例如：执行index.wxml时，优先按index.json中描述的来的来，再按app.json中描述的来。 

4.js文件

1.作用

主要负责页面的业务逻辑：包括生命周期，事件的绑定处理，数据的初始化等等。算是让小程序能动起来，而不只是静态的展示页面。

 zfb.js

// pages/zfb/zfb.js
Page({


  data:{"burl":[
    {
      "url":"http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20160603/2ab98cd3f9ef4664a177b1f69b7d9dc3_th.jpg"
    },
    {
      "url":"http://p3.img.360kuai.com/t01081814237192b6ec.jpg?size=500x260"
    },
    {
      "url":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1124187468,2482026534&fm=173&app=25&f=JPEG?w=640&h=349&s=770609E6535715D6966D9DA903002011"
    },
  ]},
  
})



//js

• wxml、wxss、 json主要是程序的前台文件，控制前台样式。
• js主要是程序的后台文件，控制后台数据和事件。

 

 三、运行调试