微信小程序——简单的界面设置（1）

微信小程序开发准备

第一步：申请小程序账号（微信公众平台）
第二步：下载微信开发者工具（微信公众平台点击文档、小程序开发、下载） 

开发语言

javascript、html等

基本语法： 

1.view标签相当于div：多个view标签自动换行显示
2.text标签：多个text标签一行显示
3.button标签:按钮
4.swiper标签：轮播图可以实现图片的轮播 

小程序制作：

 1.index.js: 

Page({
  data: {
    imgUrls: [
      '/图片/0c46df96a46b1efadd31cfc2f397638e.jpg',//图片的相对位置
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'//图片的地址
    ],//可在微信小程序开发平台中获取相关代码，辅助index.wxml使用（实现轮播图的功能）
    indicatorDots: true,
    autoplay: true,//自动播放
    interval: 2000,//图片播放间隔（2s）
    duration: 1000,//每张图片播放的时间（1s）
    circular: true,//循环播放图片
    prolist:[{//创立一个列表，用来实现多张图片的插入，用循环来辅助实现（在index.wxml中）
      proname:"name1",
      proprice:10,
    }, {
        proname: "name2",
        proprice: 20,
      }, {
        proname: "name3",
        proprice: 30,
      }, {
        proname: "name4",
        proprice: 40,
      }, {
        proname: "name5",
        proprice: 50,
      }, {
        proname: "name6",
        proprice: 60,
      },
    ]
  }
})

2.index.wxml 

<wxs module = "filters" src="index.wxs"></wxs>//链接index.wxs
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='{{circular}}'>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>//在微信小程序中复制代码，辅助index.wxml使用,实现轮播图的功能实现
<view class = "content">
  <view class = 'pro' wx:for="{{prolist}}">//循环列表prolist
    <image src='/图片/0c46df96a46b1efadd31cfc2f397638e.jpg'></image>
    <view class='proname'>{{item.proname}}</view>//内容为列表中proname的内容
    <view class='proprice'>$ {{filters.toFix(item.proprice,2)}}</view>//调用模块实现保留几位小数的功能，内容为列表中prorice的内容，其中$原样输出
  </view>
</view>

3.index.wxs 

var filters = {
  toFix : function(val,count){
    return val.toFixed(count)
  }
}
module.exports = {
  toFix : filters.toFix
} 
//实现保留几位小数的功能实现，辅助index.wxml使用

4.index.wxss

swiper,swiper image{//整个轮播图和轮播图片实现宽度和高度的定义
  width: 100%;
  height: 500rpx;
}
.content{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;//用来实现其中的内容不紧邻，周围有空白
  margin-top: 20rpx;//实现整个框架的顶外边距顶端与上一个的距离
}
.pro{
  width:30%;
  margin-bottom: 10rpx;//实现外边距底部与下一个的距离
}
.pro image{
  width:100%;
  height: 200rpx;
}
.proprice{
  color: yellow;
}

5.app.json 

//该代码用来实现底部菜单功能
{
  "pages":[
    "pages/index/index",
    "pages/cart/cart",//第二个按钮（名字随意取）
    "pages/user/user"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "00B26A",//窗口栏顶部的颜色（可用颜色提取器来提取）
    "navigationBarTitleText": "商城",//窗口栏顶部的名字
    "navigationBarTextStyle":"white"//窗口栏文字的颜色
  },
  //以下为按钮的操作
  "tabBar":{
    "list":[{
      "pagePath":"pages/index/index",//按钮连接的位置
      "text":"text1",//按纽显示的名字
      "iconPath":"/图片/1.png",//按钮未点击显示的图片
      "selectedIconPath":"/图片//3.png"//按钮点击后显示的图片
    },{//按钮图片必须为.png的形式，且大小有要求
    "pagePath": "pages/cart/cart",
    "text": "text2",
    "iconPath": "/图片/3.png",
    "selectedIconPath": "/图片/1.png"
  },{
  "pagePath": "pages/user/user",
  "text": "text3",
  "iconPath": "/图片/3.png",
  "selectedIconPath": "/图片/1.png"
  }]
  }
}

6.app.json

/**app.wxss**/
//用来设置微信小程序的一些基本操作
page{
  color: blue;
  font-size: 28rpx;
  font-family: microsoft yahei;//字体的选择
}

效果展示