这篇文章主要就是把我写的优购商城进行简单的说明,希望可以对大家有所帮助
1.先配置页面
在app.json中设置所需要的页面路径
2.然后再封装我们需要的组件和wx.request
wx.request可以不封装,但是封装可以减少重复代码,写起来也比较方便
axios就是我封装的http文件,名字叫什么都可以
2-1 api.js代码
代码是导出需要的接口路径,
module.exports={
"swiber":"/home/swiperdata",
}
2-2 request.js代码
封装wx.reuqest方法并导出
//url>>>路径 data>>>接口需要的参数 method>>>接口使用的方法 get 或者 post
module.exports = (url, data, method) => {
return new Promise((resolve,reject) => {
wx.request({
url: url,
data: data,
method: method,
success(res) {
//成功回调 返回参数
resolve(res)
},
fail(err){
//失败回调
reject(err)
}
})
})
}
2-3axios.js文件
封装好之后下使用需要在全局注册,
//将封装好的api和request导入使用
var api = require('../http/api')
var req = require('../http/request')
//接口路径前缀
let baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"
//请求轮播图数据
function swiper() {
return req(baseUrl + api.swiber, {
}, "get")
}
//将方法导出
module.exports = {
swiper,
}
2-4全局注册并在组件使用
在根目录下app.js引入axios
// app.js
//引入axios
let axios = require('./http/axios')
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
globalData: {
userInfo: null
},
//注册成全局的方法
axios,
}
)
2-5最后在页面使用
// pages/index/index.js
//保存app实例
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
banner: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//使用封装的axios接口进行请求数据
app.axios.swiper().then(res => {
let banner = res.data.message,
//请求成功将数据保存给data以便在页面使用
this.setData({
banner })
})
})
},
})
到这里我们的axios就介绍完了,没什么难处,可能头几次有点不知道过程,多谢几次级OK了!
接下来说一下我们项目开发的过程,一些相对容易写的我就说的简单一点,重点说清楚!
2首页的数据
首页功能感觉是最简单的,请求数据然后渲染出来就ok了,接口都不需要传参数, 还有上边的搜索,忘记标出来了,他就是个按钮,点击后跳转到另一个搜索页面进行搜索,根据input输入框里边输入的关键字进行搜索,将关键字传入到接口就会返回相关的数据,最下边有搜索的代码*
// pages/search/search.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
//input输入框的值
uu: ""
},
//手写的双向数据绑定
sss(e) {
this.setData({
uu: e.detail.value
})
//e.detail.value是input的关键字,将数据传到接口中返回的就是根据关键字所返回的数据,然后渲染到页面就ok
app.axios.search(e.detail.value).then(res => {
this.setData({
list:res.data.message
})
})
},
deta(e){
wx.navigateTo({
url: '/pages/goods_detail/goods_detail?goods_id='+e.currentTarget.dataset.id,
})
},
})
3.分类页面的实现
写完首页来实现我们的分类页面
分别是左右两个组件
使用的是小程序自带的标签加上scroll-y="true"属性就可以实现上下滚动,下边上代码
// pages/category/category.js
//使用app实例
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
scrol_list: [],
scol_right: [],
erjilist: [],
index: 0,
id: -1,
shoplist: [],
},
//保存左侧竖向导航的下标等下用来写tab切换的样式
emic(e) {
this.setData({
index: e.currentTarget.dataset.index,
})
//右侧分类渲染的首层数据
this.setData({
scol_right: this.data.scrol_list[this.data.index].children
})
},
//跳转到商品列表然后将id传到商品列表页面
gotoid(e) {
wx.navigateTo({
url: `/pages/goods_list/goods_list?cid= ${
e.currentTarget.dataset.id}}`
})
// })
}
,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面首次加载获取到数据保存
app.axios.scrol_list().then(res => {
this.setData({
scrol_list: res.data.message
})
// console.log(this.data.scrol_list);
this.setData({
scol_right: res.data.message[this.data.index].children,
})
})
},
})
这里数据获取没什么难的,我写的时候遇到的问题在wxml!!
他的右侧数据渲染有点绕,渲染的时候有点让我挠头
看代码
<sear></sear>
<view class="boxss">
<scroll-view style="width:20%;height:100%" scroll-y="true">
<!--components/scrol_list/scrol_list.wxml-->
<view style="display:flex">
<view style="width:220rpx">
<block wx:for="{
{scrol_list}}" wx:key="index" wx:for-index="ins">
<view class="{
{index==ins ? 'bgs' : ''}}" style="width:100%;height:82rpx;text-align:center;line-height:82rpx"
data-index="{
{ins}}" bindtap="emic">
{
{item.cat_name}}
</view>
</block>
</view>
</view>
</scroll-view>
//这里是右侧数据
<scroll-view style="width:80%" scroll-y="true">
<!--components/scrol_view/scrol_view.wxml-->