小程序首页实现代码功能
刚刚研究小程序没有几天，下面来从小白层面说说小程序
首先要去微信公众号平台注册一个小程序
一定要记录下的信息是小程序密钥这个千万不能弄丢 在微信开发者工具中需要使用这个密钥
下面是微信开发者工具中我选择的普通开发不是云开发
下面就说说页面
首先我们将页面划分为独立板块和公共部分：
公共部分就想底部的导航栏， 关于公共使用的部分可以放在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
首页
上装
下装
配件
满￥149包邮
退货声明
官方直营
累计评价
春节送礼指南
新春红色系
暖心围巾
春夏新系列
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还是非常相似的两者也有共通性在仔细看看小程序的开发文档就可以啦