微信小程序项目开发笔记（完结）

一、准备工作

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