小程序开发教程《二》

解析一下页面中所包含的常见模块

（1）头部标题设置
（2）轮播图
（3）tab列表切换显示对应内容
（4）底部tab菜单
（5）请求后台数据
（6）跳转页面

=================现在按步骤举例解析==============

第一：《头部标题设置》在对应页面的js里面设置

wx.setNavigationBarTitle({
title: '首页'
})

第二：《轮播图》

结构swiper.wxml:
<swiper
class='swiper'
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}" >
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="750" height="150" />
</swiper-item>
</block>
</swiper>
数据：swiper.js
Page({
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=750',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=750',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=750'
],
indicatorDots: true,//是否显示小圆点
autoplay: true,//是否自动轮播
interval: 5000,//间隔时间
duration: 1000
}
})

第三：tab列表切换显示对应内容

结构：
<view class="tabNav">
<view wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab" class="{{currentTab==index ? 'cur' : ''}}"><text id="{{item.id}}">{{item}}</text></view>
</view>
<view class="orderInfo">
<view class="flex-wrp orderInfo-item" wx:for="{{sendList}}" wx:key="index" style="flex-direction:row;" >
<view class='leftImg flex-item'>
<image src="{{item.url}}" class="slide-image" mode='widthFix'/>
</view>
<view class='rightContent flex-item navigation' id="{{item.id}}">
<text class='title'>{{ item.title }}</text>
<text class='describe'>{{ item.productIntroduction }}</text>
<text class='priceRange'>{{ item.author_name }}</text>
</view>
</view>
</view>
数据定义：
Page({
data: {
navTab: ['全部', '佩饰', '生活', '传家', '贺岁'],
currentTab: 0
}，
currentTab: function (e) {
if (this.data.currentTab == e.currentTarget.dataset.idx) {
return;
}
this.setData({
currentTab: e.currentTarget.dataset.idx
})
this.getData()
},
getData： function(){//请求后台数据 见 %%%第五：《请求后台数据》%%%
}
}）

第四：底部tab菜单

app.json中
"tabBar": {
"backgroundColor": "#fff",
"color": "#A1A1A1",
"selectedColor":"#215094",//选中项的字体颜色
"list": [
{
"pagePath": "pages/shouye/shouye",//对应跳转页面地址
"text": "首页",
"iconPath":"pages/image/home.png",,//对应图标地址
"selectedIconPath":"pages/image/home@2x.png",//对应选中图标地址
},
{
"pagePath": "pages/goodsdetail/goodsdetail",
"text": "商品详情",
"iconPath": "pages/image/user.png",
"selectedIconPath": "pages/image/user@2x.png"
}
]
},

第五：《请求后台数据》

app.js中设置公共域名doubanBase：
App({
globalData: {
userInfo: null,
doubanBase: "http://api.avatardata.cn/"
}
})
在其他页面调用方式：
const app = getApp()；
var _url = app.globalData.doubanBase+ '/getList'；//请求接口
wx.request({
url: _url,
method: 'post',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
_this.setData({
sendList: res.data.result.data
})
}
})

第六：跳转页面

结构中：
<view class='navigation'>
<navigator
url="/pages/logs/logs"
hover-class="navigator-hover" >
跳转到新页面
</navigator>
</view>
js中：
wx.navigateTo({
url: '/pages/goodsdetail/goodsdetail'
})