美文网首页
简单到令人发指的小程序5分钟入门

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

作者: 彬哥头发多 | 来源:发表于2017-01-11 22:57 被阅读273次

    打开编辑器,双击打开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

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

    相关文章

      网友评论

          本文标题:简单到令人发指的小程序5分钟入门

          本文链接:https://www.haomeiwen.com/subject/satdbttx.html