简单到令人发指的小程序5分钟入门

打开编辑器，双击打开index.wxml(这里你把wxml直接理解成html就好)，先撸一发，把里面代码统统的删除直接扔一个轮播图进去，

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">{{userInfo.name}}</view>
    <view class="flex-item bc_red">{{userInfo.leo}}</view>
    <view class="flex-item bc_blue">{{userInfo.lau}}</view>
    <view class="flex-item bc_orange">{{userInfo.last}}</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>  
  </view>
</view>

看不懂？不墨迹，直接上源码地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=201715

别被它那些自定义的标签忽悠了，你把view当成div用就完事儿。

大家看到了三件事：

1.{{userInfo.leo}} 这破玩意是啥？

​ 简单数据绑定，用过angular就知道{{里面放的是要展示的数据}}，数据从哪里来？直接打开index.js

上代码，清空加上我写的代码就ok,一件事是展示leo，第二件事是配置轮播图

var app = getApp()
Page({
data: {
  userInfo:{
    name:"leo",
    leo:'屌',
    lau:'爆',
    last:'了'

  },
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    circular:true,
    interval: 2000,
    duration: 1000,
    
  }
})

2.样式写哪？打开index.wxss,一句话以前你怎么写index.css这个里面照旧。

.slide-image{width:100%;}
.flex-wrp{
  height: 100px;
  display:flex;
  background-color: #FFFFFF;
}

最后一件事，不墨迹上图：

首页.png

头部的字儿怎么改，我说过了结构，直接看文档，https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=201715

上代码：在全局配置里面改的。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eee",
    "navigationBarTitleText": "京东购物-奶茶版",
    "navigationBarTextStyle":"black"
  }
}

老规矩，上个图收尾：

过程.png

明天把这个小程序搞成商城细化下，就一切鸟了。