小程序首页实现代码功能

刚刚研究小程序没有几天，下面来从小白层面说说小程序

首先要去微信公众号平台注册一个小程序

一定要记录下的信息是小程序密钥这个千万不能弄丢 在微信开发者工具中需要使用这个密钥

下面是微信开发者工具中我选择的普通开发不是云开发

下面就说说页面

首先我们将页面划分为独立板块和公共部分：

公共部分就想底部的导航栏， 关于公共使用的部分可以放在app.josn这个文件夹中，底部导航栏使用的是tabBar直接是小程序提供的接口。

文档可参考：

https://developers.weixin.qq.com/miniprogram/dev/api/wx.showTabBar.html

后面就是自己首页自己独立页面啦我放在了index中

具体代码如下：

index.js

//index.js

//获取应用实例

const app = getApp()



Page({

data: {

userInfo: {},

hasUserInfo: false,

swiperCurrent:0,

indicatorDots:true,

autoplay:true,

interval:3000,

duration:800,

circular:true,

indicatorCo:'#fff',

indicatoraAC: "#4F3022",

imgUrls: [

'../images/banner/banner1.png',

'../images/banner/banner5.png',

'../images/banner/banner2.png',

],

links:[

'../classify/classify',

'../classify/classify',

'../classify/classify',

]



},

//轮播图的切换事件

swiperChange: function (e) {

this.setData({

swiperCurrent: e.detail.current

})

},

//点击指示点切换

chuangEvent: function (e) {

this.setData({

swiperCurrent: e.currentTarget.id

})

},

//点击图片触发事件

swipclick: function (e) {

console.log(this.data.swiperCurrent);

wx.switchTab({

url: this.data.links[this.data.swiperCurrent]

})

},

//事件处理函数

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse){

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

// 在没有 open-type=getUserInfo 版本的兼容处理

wx.getUserInfo({

success: res => {

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

})

}

},



})

index.wxml

<!--index.wxml-->
<view class='container'>
  <view class='searchWrap'>
    <image class='search-icon' src='../images/tabbar/search.png'></image>
    <input placeholder-class='phcolor' class="searchContent" type='text' placeholder='请输入关键字'></input>
  </view>
  <!--导航栏-->
  <view class='navWrap'>
    <view class='btn-area'>
      <navigator class='navbarSelected' url='../classify/classify'>首页</navigator>
      <navigator url='../classify/classify'>上装</navigator>
      <navigator url='../classify/classify'>下装</navigator>
      <navigator url='../classify/classify'>配件</navigator>
  </view>
  </view>
   <!--轮播图-->
  <view class="swiper-container">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-color="{{indicatorCo}}" indicator-active-color="{{indicatoraAC}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
      <block wx:for="{{imgUrls}}" wx:key="unique">
        <swiper-item>
          <image src="{{item}}" class="img" bindtap="swipclick" mode="aspectFill"/>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class='navWrap'>
    <view class='tipWrap'>
      <view class='tipItem'>
        <image src='../images/tabbar/arrow.png'/>
        <text>满￥149包邮</text>
      </view>
      <view class='tipItem'>
        <image src='../images/tabbar/arrow.png'/>
        <text>退货声明</text>
      </view>
      <view class='tipItem'>
        <image src='../images/tabbar/arrow.png'/>
        <text>官方直营</text>
      </view>
      <view class='tipItem'>
        <image src='../images/tabbar/arrow.png'/>
        <text>累计评价</text>
      </view>
    </view>
    <view class='picdetail'>
      <view class='picItem'>
         <image src='../images/indexclothes/i1.png'></image>
      </view>
      <view class='picItem'>
         <image src='../images/indexclothes/i2.png'></image>
      </view>
      <view class='picItem'>
        <view class='classifyGuide'>
          <view class='gitem bcTitle'>
            <text>春节送礼指南</text>
          </view>
          <view class='gitem bcYear'>
              <image src='../images/indexclothes/year.jpg'></image>
              <text>新春红色系</text>
          </view>
          <view class='gitem bcWj'>
              <image src='../images/indexclothes/wj.jpg'></image>
              <text>暖心围巾</text>
          </view>
           <view class='gitem bcCx'>
              <image src='../images/indexclothes/cx.jpg'></image>
              <text>春夏新系列</text>
          </view>
        </view>
      </view>
      <view class='picItem'>
          <image src='../images/indexclothes/i4.png'></image>
      </view>
    </view>
  </view>
</view>

 

index.wxss

/**index.wxss**/
.searchWrap{
  width: 95%;
  background-color: #F2F2F2;
  display: inline-block;
  border-radius: 5px;
  height: 65rpx;
  padding-top: 10rpx;
}
.search-icon{
  width: 20px;
  height: 20px;
  margin-left: -50rpx;
  margin-top: 10rpx;
  padding-right: 10rpx;
}
.searchContent{
  display: inline-block;
  width: 80%;
  font-size: 0.8em;
  text-align: left;
  padding-left:0rpx 10rpx;
}
.phcolor{
  color: #888888;
}
/*有关navbar导航栏*/
.navWrap{
  width: 95%;
  display: inline-block;
  margin-top: 5px;
}
.btn-area{
  width: 100%;
  display: flex;
  height: 50rpx;
  align-items: center;
  margin-top: 10rpx;
}

.btn-area navigator{
  display: flex;
  font-size: 0.8em;
  width: 100rpx;
  height: 50rpx;
  align-items: center;
  justify-content: center;
  color: #767676;
  border-bottom: 5px solid #fff;
} 
.navbarSelected{
  color:#4C3A35!important;
  border-bottom: 5px solid #4C3A35!important;
}
/*有关swiper轮播图*/
swiper {
height: 400rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}
.swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 400rpx;
}
 
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
/*tips部分*/
.tipWrap{
display: flex;
flex-direction:row;
align-items: center;
}
.tipItem{
display: flex;
align-items: center;
padding-left: 10rpx;
}
.tipItem image{
  width: 45rpx;
  height: 50rpx;
}
.tipItem text{
  font-size: 0.7em;
  color: #585858;
}
.picdetail{
  display: inline-block;
}
.picdetail{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 15rpx;
  flex-wrap: wrap;
}
.picItem{
  width: 48%;
  padding-bottom: 15rpx;
}
.picItem:nth-child(2n){
    padding-left: 4%
}
.picItem image{
  width: 100%;
  border-radius: 5rpx;
}
.classifyGuide{
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  color: #525251
}
.classifyGuide image{
  width: 105rpx;
  height:105rpx;
}
.gitem{
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  margin-bottom:25rpx;
  border-radius: 5rpx;
}
.gitem:last-child{
   margin-bottom:0;
}
.bcYear{
  background-color: #F3F3F3;
}
.bcWj{
  background-color: #F4F3F9
}
.bcCx{
  background-color: #F1F3F6;
}

.bcTitle{
   background-color: #D3C9BF;
   height: 100rpx;
   color: white;
}
.bcTitle text{
  width: 100%;
  text-align: center
}

小程序的语言其实和VUE还是非常相似的两者也有共通性在仔细看看小程序的开发文档就可以啦