微信小程序项目开发
- 一、准备工作
- 二、正式开发
-
- 1.初始化页面样式
- 2.搜索框
- 3.轮播图
- 4.导航图
- 5.楼层图
- 6.分类界面
- 7.缓存数据技术
- 8.商品列表页面
- 9.商品列表页面渲染
- 10.上拉获取剩余数据
- 11.下拉刷新enablePullDownRefresh
- 12.加载等待框wx.showLoading&隐藏wx.hideLoading
- 13.跳转商品详情
- 14.商品详情页面布局
- 15.商品放大预览wx.previewImage
- 16.工具栏跳转购物车
- 17.加入购物车
- 18.获取收获地址
- 19.地址与按钮切换
- 20.地址数据渲染
- 21.物品数据渲染
- 22.结算工具
- 23.支付界面
- 24.微信支付
- 25.个人中心
- 26.订单页面
- 27.收藏功能
- 28.收藏界面
- 29.搜索中心界面布局
- 30.渲染搜索界面
- 31.图片上传wx.uploadFile
- 三、项目发布
一、准备工作
1.新建小程序项目
PS.我在新建的时候使用了APPID!
2.整理项目
2.1 删除文件或代码
删除图示的代码,之后来到pages文件夹下,删除logs文件夹
2.2 整理文件或代码
来到全局文件下,找到app.wxss,将默认样式全部删除
来到全局文件下,找到app.js,将默认代码全部删除
之后输入wx-app创建新代码,这里我更换了主题,黑屏看着有点难受
之后找到首页index.wxml,删除里面的所有代码
找到index.wxss,删除里面的所有代码
这里就不演示图片了
2.3 添加单文件标题
来到index.json文件下,添加这一行代码:
// An highlighted block
"navigationBarTitleText": "优购首页"
3.搭建目录结构
在文件主目录下新建以下五个文件夹,效果如下图
目录名 | 作用 |
---|---|
styles | 存放公共样式 |
components | 存放组件 |
lib | 存放第三⽅库 |
utils | 帮助库 |
request | 接口帮助库 |
4.搭建项目的页面
页面名称 | Value |
---|---|
⾸⻚ | index |
分类⻚⾯ | category |
商品列表⻚⾯ | goods_list |
商品详情⻚⾯ | goods_detail |
购物⻋⻚⾯ | cart |
收藏⻚⾯ | collect |
订单⻚⾯ | order |
搜索⻚⾯ | search |
个⼈中⼼⻚⾯ | user |
意⻅反馈⻚⾯ | feedback |
登录⻚⾯ | login |
授权⻚⾯ | auth |
结算⻚⾯ | pay |
找到app.json文件,在pages数组中新增需要的代码项
// An highlighted block
"pages": [
"pages/index/index",
"pages/category/index",
"pages/goods_list/index",
"pages/goods_detail/index",
"pages/cart/index",
"pages/collect/index",
"pages/order/index",
"pages/user/index",
"pages/feedback/index",
"pages/search/index",
"pages/login/index",
"pages/auth/index",
"pages/pay/index"
],
5.搭建项目的tabbar
新建一个icons文件夹,用于存放tabbar图标
在app.json中创建一个tabbar数组,在list中写属性
"tabBar": {
"color": "",
"selectedColor": "",
"backgroundColor": "",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "",
"text": "",
"iconPath": "",
"selectedIconPath": ""
}
]
},
二、正式开发
1.初始化页面样式
来到全局配置文件app.wxss,书写以下代码:
这里要特别注意,wxss不支持通配符*
page,
view,
text,
swiper,
swiper-item,
image,
navigator {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 主题颜色 */
page {
/* 定义主题颜色 */
--themeColor: #d32677;
font-size: 28rpx;
}
如果要在组件中使用全局定义的主题颜色,就需要使用var(–themeColor)
2.搜索框
在此,项目需求是点击搜索框可以实现跳转到搜索页面功能
找到之前新建的components文件夹,新建一个组件文件夹Search
使用微信开发小助手的新建component功能建立好四个基本文件
在Search.wxml中建立一个搜索框,实现跳转到搜索页面:
<view class="search_input">
<navigator open-type="navigate" url="/pages/search/index"><text class="iconfont icon-shoucang1"></text>搜索</navigator>
</view>
来到index.json文件下,新增使用组件代码
{
"usingComponents": {
"Search":"/components/Search/Search"},
}
之后我们就在index.wxml中使用该Search组件
<view class="xcx_index">
<!-- 搜索框开始 -->
<Search></Search>
<!-- 搜索框结束 -->
</view>
3.轮播图
这里需要对外网的资源进行请求,我找的是itheima的
使用wx-request快速的建立一个请求,在此我已经在我的小程序中把它加入了白名单,当然也可以直接不校验https
为了避免回调地狱的问题,使用Promise技术
来到我之前创建的request文件夹,新建一个index.js文件,书写下列代码:
export const request = (params) => {
return new Promise((resolve, reject) => {
wx.request({
...params,
success: (result) => {
resolve(result)
},
fail: (err) => {
reject(err)
}
});
})
}
回到首页的那个index.js,在onload生命周期函数中使用它
// An highlighted block
import {
request } from "../../request/index.js"
Page({
onLoad: function(options) {
request({
url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata" })
.then(result => {
this.setData({
swiperList: result.data.message
})
})
},
})
之后就是引用轮播图了,使用wx:for渲染图片:
<swiper autoplay="{
{true}}" indicator-dots="{
{true}}" circular="{
{true}}" interval="2000" indicator-active-color="#497">
<swiper-item wx:for="{
{swiperList}}" wx:key="goods_id">
<navigator>
<image mode="widthFix" src="{
{item.image_src}}"></image>
</navigator>
</swiper-item>
</swiper>
4.导航图
与上述差不多的思路,从接口拿到数据之后渲染到页面上
把发送请求的函数单独写在与onload平级中,然后只需要在onload中使用this调用发送请求的函数
onLoad: function(options) {
this.getCateList();
}
getCateList() {
request({
url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems" }).then(result => {
this.setData({
CateList: result.data.message
})
})
},
页面渲染部分是使用wx:for,这里不过多演示代码了
5.楼层图
分为标题页和图片页,我需要分别的渲染,大致思路还是拿到数据之后渲染,非常简单
6.分类界面
6.1 搜索框
分类界面嘛,少不了搜索功能,引用组件就行,参考2步骤
6.2 左右两侧滚动功能
要满足左右两侧都能滚动而互不干扰的效果,就需要用到一个组件scroll-view,参考完文档之后,最适合我的是scroll-y属性
这里要在wxss中设置一下flex布局!
.fenlei_index .cates_container {
height: calc( 100vh - 90rpx);
display: flex;
}
.fenlei_index .cates_container .left_menu {
flex: 2;
}
.fenlei_index .cates_container .right_content {
flex: 5;
}
index文件代码:
<scroll-view scroll-y class="left_menu">
<view class="menu_item" wx:for="{
{leftMenu}}" wx:key="*this">
{
{
item}}
</view>
</scroll-view>
<scroll-view scroll-y class="right_content">
</scroll-view>
6.3 渲染左右两侧的数据
思路还是和之前一样,调接口拿数据
默认拿到的是第一项的数据。
Page({
data: {
leftMenu: [],
rightContent: [],
currentindex: 0
},
onLoad: function(options) {
this.getCates();
},
getCates() {
request({
url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"
}).then(res => {
this.Cates = res.data.message
let leftMenu = this.Cates.map(v => v.cat_name)
let rightContent = this.Cates[0].children
this.setData({
leftMenu,
rightContent
})
})
},
})
回到index,使用wx:for渲染数据
6.4 点击左侧栏切换右侧数据
这里涉及到了Tab栏切换的相关知识,给左侧菜单绑定一个事件,把当前的索引号传进去,让右侧数据根据传过来的索引号更新数据
//index代码
<view bind:tap="handleItemTap" data-index="{
{index}}">
//js代码
handleItemTap(e) {
const newindex = e.currentTarget.dataset.index
let rightContent = this.Cates[newindex].children
this.setData({
currentindex: newindex,
rightContent
})
},
6.5 右侧界面置顶功能
在一个tab栏内对右侧界面进行上下滑动时,切换至下一个tab栏,会出现右侧界面不置顶的bug,使用scroll-top解决
<scroll-view scroll-top="{
{scrollTop}}" scroll-y class="right_content">
</scroll-view>
在data中定义这个scrollTop,在每一次渲染右侧页面时,给scrollTop赋值为0即可
7.缓存数据技术
使用缓存技术(本地存储)能够让用户第二次打开小程序的速度提升
web中的本地存储和 小程序中的本地存储的区别:
1 写代码的方式不一样
web: localStorage.setItem("key","value");localStorage.getItem("key")
小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key")
2:类型转换
web: 不管存入的是什么类型的数据,最终都会先调用一下 toString(),把数据变成了字符串再存入进去
小程序: 不存在类型转换的这个操作 存什么类似的数据进去,获取的时候就是什么类型
在onload生命周期函数书写代码:在上述4步骤中已经定义了getCates()方法
onLoad: function(options) {
//获取本地存储数据
const Cates = wx.getStorageSync("cates");
//如果没有
if (!Cates) {
this.getCates();
} else {
//有数据
if (Date.now