黑马程序员微信小程序 案例3

微信小程序里的商品也能通过微信支付购买 #生活知识# #生活小知识# #电子支付#

项目中会有略微改动，可以自己改回来嗷项目展示
项目文件结构
项目代码

Page({

data: {

shopList: [],

},

listData: {

page: 1,

pageSize: 10,

total: 0

},

isLoading: false,

getShopList: function (callback) {

this.isLoading = true

wx.showLoading({

title: '数据加载中...',

})

wx.request({

url: 'http://127.0.0.1:3000/data',

method: 'GET',

data: {

page: this.listData.page,

pageSize: this.listData.pageSize

},

success: res => {

console.log(res);

if (res.statusCode === 200) {

this.setData({

shopList: [...this.data.shopList, ...res.data],

});

this.listData.total = res.header['X-Total-Count'] - 0;

} else {

wx.showToast({

title: '加载失败',

icon: 'none'

});

}

},

complete: () => {

wx.hideLoading()

this.isLoading = false

callback && callback()

}

})

},

onLoad: function () {

this.getShopList()

},

onReady() {

},

onShow() {

},

onHide() {

},

onUnload() {

},

onPullDownRefresh() {

this.setData({

shopList: []

})

this.listData.page = 1

this.listData.total = 0

this.getShopList(() => {

wx.stopPullDownRefresh()

})

},

onReachBottom: function () {

if (this.listData.page * this.listData.pageSize >= this.listData.total) {

return wx.showToast({

title: '数据加载完毕',

icon: 'none',

})

}

if (this.isLoading) {

return

}

++this.listData.page

this.getShopList()

},

onShareAppMessage() {

}

});

shoplist.json

{

"usingComponents": {

},

"navigationBarTitleText": "美食",

"onReachBottomDistance": 200,

"enablePullDownRefresh":true,

"backgroundColor": "#d8b5b5",

"backgroundTextStyle":"dark"

}

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

<view class="shop-item" wx:for="{{ shopList }}" wx:key="id">

<view class="thumb">

<image src="{{ item.image }}"></image>

</view>

<view class="info">

<text class="shop-title">{{ item.name }}</text>

<text>电话：{{tools.splitPhone(item.phone)}}</text>

<text>营业时间：{{ item.businessHours }}</text>

<text>地址：{{ item.address }}</text>

</view>

</view>

.shop-item {

display: flex;

padding: 15rpx;

border: 1rpx solid #c4b1b1;

border-radius: 8rpx;

margin: 15rpx;

box-shadow: 1rpx 1rpx 15rpx rgb(202, 150, 150);

}

.thumb image {

width: 250rpx;

height: 250rpx;

display: block;

margin-right: 15rpx;

}

.info {

display: flex;

flex-direction: column;

justify-content: space-around;

font-size: 24rpx;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

.shop-title {

font-weight: bold;

font-size: 32rpx;

}

function splitPhone(str) {

if (str.length !== 11) {

return str

}

var arr = str.split('')

arr.splice(3, 0, '-')

arr.splice(8, 0, '-')

return arr.join('')

}

module.exports = {

splitPhone: splitPhone

}

const formatTime = date => {

const year = date.getFullYear()

const month = date.getMonth() + 1

const day = date.getDate()

const hour = date.getHours()

const minute = date.getMinutes()

const second = date.getSeconds()

return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`

}

const formatNumber = n => {

n = n.toString()

return n[1] ? n : `0${n}`

}

module.exports = {

formatTime

}

app.json

{

"pages": [

"pages/shoplist/shoplist",

"pages/logs/logs"

],

"window": {

"navigationBarTextStyle": "black",

"navigationBarTitleText": "美食",

"navigationBarBackgroundColor": "#d8b5b5"

},

"style": "v2",

"componentFramework": "glass-easel",

"sitemapLocation": "sitemap.json",

"lazyCodeLoading": "requiredComponents"

}

项目运行
服务器根目录下进入终端运行命令行node index.js,之后重新编译项目就可以啦

网址：黑马程序员微信小程序 案例3 https://www.yuejiaxmz.com/news/view/459827

相关内容

【2024届微信小程序经典案例】基于生活小助手小程序的设计与实现
基于微信小程序的智能社区服务小程序，附源码
【微信小程序】基础篇
悦运动小程序作品—微信小程序
基于微信小程序的时间管理小程序
【微信小程序】个人健康管理系统小程序
微信小程序常用控件汇总
微信小程序模版｜健康菜谱微信小程序源码
微信小程序项目实例——智能用电
二手交换市场小程序制作【二手交换市场微信小程序模板】

随便看看