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

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

  
    
      
    
  


  flex-direction: row
  
    {{userInfo.name}}
    {{userInfo.leo}}
    {{userInfo.lau}}
    {{userInfo.last}}
  


  flex-direction: column
  
    1
    2
    3  
  

看不懂？不墨迹，直接上源码地址：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

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