今初步修有些程序,按自己写APP的逐条开始,就未随微信官文档来了。
小控件是做官方与网上其他同学分享的代码。

基本功概述

这同样片看官方网站,了解一下有点程序的架构页面组成啥的,没什么难度,打开微信开发者工具,创建一个QuickStart
项目即使盼了。

生一样步看一下合法的小程序demo,看看都来什么职能样式,这个与开发文档是应和的。demo以这里:

下一场就是得起开发了!下面就照效益开始上学了~

tabBar

  1. 先行创造几单页面,要专注文件夹和页面名称,以及app.json里面的配备。官方文档描述的坏详细。

注意:为了方便开发者减少配置起,描述页面的季个公文要具备同等之路和公事称。

  1. 缔造一个扩图片的文本夹,放上几张tabBar小图标。

  2. 在app.json中写tanBar的配置,tabBar与pages、window同级。

  "tabBar":{
    "color": "#ddd",
    "selectedColor": "#1AAD00",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list":[
      {
        "pagePath": "pages/index/index",
       "iconPath": "images/footer-icon-01.png",
      "selectedIconPath": "images/footer-icon-01-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/find/find",
        "iconPath": "images/footer-icon-03.png",
        "selectedIconPath": "images/footer-icon-03-active.png",
        "text": "发现"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/footer-icon-04.png",
        "selectedIconPath": "images/footer-icon-04-active.png",
        "text": "我的"
      }
    ]
  }

编译一下,tabBar就出现了~

轮播图

  1. 应用微信提供的swiper控件,在页面wxml中补充加控件

  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  1. 于wxss中安样式

swiper {
 height: 400rpx;
 width: 100%;
}
swiper image {
 height: 100%;
 width: 100%;
}
  1. 当js 中安装数据

  data: {
    background:[
      {url:'../..nner/banner1.jpeg'},
      { url: '../..nner/banner2.png' },
      { url: '../..nner/banner3.png' },

    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
  },

哪怕这样简单,轮播图就起了,真的比iOS开发简单多矣-_-!

今日的范(直接由旁人的种抠来的图标,配色巨丑请忽略~):

九宫格

九宫格功能上网查看了几乎种实现方式,发现尚是直用weui比较有利
下面json是落实步骤:

  1. .js中补充加多少

Page({
  /**
   * 页面的初始数据
   */
  data: {
    routers :[
      {
        text: '我的账户',
        icon: '../..mine/mine_account.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '我的合同',
        icon: '../..mine/mine_contract.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '浏览记录',
        icon: '../..mine/mine_browing.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '我要出租',
        icon: '../..mine/mine_lease.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '客服',
        icon: '../..mine/mine_customService.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '我的收藏',
        icon: '../..mine/mine_collect.png',
        url: '../myAccount/myAccount',
      }
    ] 
  },
})
  1. .wxml中,添加weui-grids

<view class="weui-grids">  
    <view class="weui-grid" wx:for="{{routers}}" wx:key="name">  
      <navigator url="{{item.url}}">  
        <view class="weui-grid__icon">  
          <image src=" {{item.icon}}" mode="scaleToFill" />  
        </view>  
        <text class="weui-grid__label">{{item.text}}</text>  
      </navigator>  
    </view>  
  </view>  
  1. wxss中装置样式

.weui-grids {  
  position: relative;  
  overflow: hidden;  
   margin-top: 10rpx; 
}  
.weui-grids:before {  
  content: " ";  
  position: absolute;  
  left: 0;  
  top: 0;  
  right: 0;  
  height: 1px;  
  border-top: 1px solid #D9D9D9;  
  color: #D9D9D9;  
  -webkit-transform-origin: 0 0;  
          transform-origin: 0 0;  
  -webkit-transform: scaleY(0.5);  
          transform: scaleY(0.5);  
}  
.weui-grids:after {  
  content: " ";  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 1px;  
  bottom: 0;  
  border-left: 1px solid #D9D9D9;  
  color: #D9D9D9;  
  -webkit-transform-origin: 0 0;  
          transform-origin: 0 0;  
  -webkit-transform: scaleX(0.5);  
          transform: scaleX(0.5);  
}  
.weui-grid {  
  position: relative;  
  float: left;  
  padding: 20px 10px;  
  width: 33.33333333%;  
  box-sizing: border-box;  
  background-color: white;
}  
.weui-grid:before {  
  content: " ";  
  position: absolute;  
  right: 0;  
  top: 0;  
  width: 1px;  
  bottom: 0;  
  /* border-right: 1px solid #D9D9D9;   */
  color: #D9D9D9;  
  -webkit-transform-origin: 100% 0;  
          transform-origin: 100% 0;  
  -webkit-transform: scaleX(0.5);  
          transform: scaleX(0.5);  
}  
.weui-grid:after {  
  content: " ";  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  height: 1px;  
   /* border-bottom: 1px solid #D9D9D9;    */
  color: #D9D9D9;  
  -webkit-transform-origin: 0 100%;  
          transform-origin: 0 100%;  
  -webkit-transform: scaleY(0.5);  
          transform: scaleY(0.5);  
}  
.weui-grid:active {  
  background-color: #ECECEC;  
}  
.weui-grid__icon {  
  width: 36px;  
  height: 36px;  
  margin: 0 auto;  
}  
.weui-grid__icon image {  
  display: block;  
  width: 100%;  
  height: 100%;  
}  
.weui-grid__icon + .weui-grid__label {  
  margin-top: 10px;  
}  
.weui-grid__label {  
  display: block;  
  text-align: center;  
  color: gray;  
  font-size: 14px;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
  overflow: hidden;  
}  

4.功力亮

九宫格效果

相关文章

网站地图xml地图