小程序商城架构设计 小程序商城方案

小程序项目之商城项目

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 小程序项目之商城项目
• 前言
• 一、新建项目
• 二、使用git管理项目

• 2.1 本地管理
• 2.2 把项目托管到码云

• 三、配置 tabBar

• 3.1 创建分支 `git checkout -b tabbar`
• 3.2 创建 tabBar 页面
• 3.3 `修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点`
• 3.4 `删除默认的 index 首页`
• 3.5 `修改导航条的样式效果`
• 3.6 `提交分支 `

• 四、功能业务的实现

• 4.1 `配置网络请求 `

• 4.1.1 由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。
• 4.1.2 在uni-app项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。
• 4.1.3 按照下面地址安装包

• 4.2 `配置小程序分包`

• 4.2.1 在项目根目录中，创建分包的根目录，命名为subPackages
• 4.2.2 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

• 4.3 `封装 uni.$showMsg() 方法`
• 4.4 `滚动条区域的可用高度`

• 4.4.1 动态计算窗口的剩余高度
• 4.4.2 滚动条动态设置高度
• 4.4.3 重置滚动条的位置

• 4.5 `组件问题`

• 4.5.1 新建components文件夹,当页面html代码过多的时候就封装组件
• 4.5.2 不需要引入，直接在页面内就能使用
• 4.5.3 绑定自定义属性传值

• 1、绑定自定义属性
• 2、在组件内通过props属性定义

• 4.5.4 自定义组件封装事件

• 1、组件上绑定自定义事件
• 2、组件内部绑定事件
• 3、组件内部绑定的事件触发外部的自定义事件

• 4.6 `vuex问题`

• 4.6.1 配置vuex问题

• 1、在项目根目录中创建 store 文件夹，新建 store.js 文件
• 2、初始化 Store 的实例对象
• 3、在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上

• 4.6.2 使用vuex的数据

• 1、导入模块 `import {map类型} from 'vuex'`
• 2、导入属性或方法 `...map类型('暴露模块名',['属性/方法'])`
• 3、方法内使用模块内的方法 `this.commit('模块名/方法名')`

• 4.6 `上拉加载更多`

• 4.6.1 打开pages.json，为页面配置上拉触底的距离
• 4.6.2 在页面中与methods节点平级声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为
• 4.6.3 当列表数据请求成功之后，进行新旧数据的拼接处理

• 4.7 `将需要复用多次的代码抽离为 mixin`

• 4.7.1 新建mixins文件夹,新建js文件
• 4.7.2 在各个页面中复用该组件

• 4.8 `下拉刷新`

• 4.8.1 pages.json配置文件中，为页面单独开启下拉刷新效果
• 4.8.2 监听页面的 onPullDownRefresh 事件处理函数
• 4.8.3 将停止刷新效果的回调函数作为参数在数据加载完毕后执行

• 总结

---

前言

一、新建项目

二、使用git管理项目

2.1 本地管理

2.2 把项目托管到码云

三、配置 tabBar

3.1 创建分支 git checkout -b tabbar

3.2 创建 tabBar 页面

3.3 修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点

3.4 删除默认的 index 首页

3.5 修改导航条的样式效果

3.6 提交分支

四、功能业务的实现

4.1 配置网络请求

4.1.1 由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。

4.1.2 在uni-app项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

4.1.3 按照下面地址安装包

https://www.npmjs.com/package/@escook/request-miniprogram

// 导入网络请求的包
/*------------------main.js-------------------*/
import { $http } from '@escook/request-miniprogram'
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

4.2 配置小程序分包

4.2.1 在项目根目录中，创建分包的根目录，命名为subPackages

4.2.2 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

4.3 封装 uni.$showMsg() 方法

/*------------------main.js-------------------*/
// 封装消息提醒方法
uni.$showMsg = function(title = "数据加载失败", icon = "success",duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon
  })
}

4.4 滚动条区域的可用高度

4.4.1 动态计算窗口的剩余高度

<script>
  export default {
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
    }
  }
</script>

4.4.2 滚动条动态设置高度

<!-- 左侧的滚动视图区域 -->
<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}"></scroll-view>
<!-- 右侧的滚动视图区域 -->
<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}"></scroll-view>

export default {
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
    }
  }

4.4.3 重置滚动条的位置

4.5 组件问题

4.5.1 新建components文件夹,当页面html代码过多的时候就封装组件

4.5.2 不需要引入，直接在页面内就能使用

4.5.3 绑定自定义属性传值

1、绑定自定义属性

2、在组件内通过props属性定义

4.5.4 自定义组件封装事件

1、组件上绑定自定义事件

2、组件内部绑定事件

3、组件内部绑定的事件触发外部的自定义事件

4.6 vuex问题

4.6.1 配置vuex问题

1、在项目根目录中创建 store 文件夹，新建 store.js 文件

2、初始化 Store 的实例对象

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// import moduleCart from './cart.js'
// import moduleUser from './user.js'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {
	// 将模块定义在这里
	/** 例：
		'm_cart': moduleCart,
    	'm_user':moduleUser	
	*/    
  },
})

// 4. 向外共享 Store 的实例对象
export default store

3、在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

const app = new Vue({
  ...App,
  
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()

4.6.2 使用vuex的数据

1、导入模块 import {map类型} from 'vuex'

2、导入属性或方法 ...map类型('暴露模块名',['属性/方法'])

3、方法内使用模块内的方法 this.commit('模块名/方法名')

4.6 上拉加载更多

4.6.1 打开pages.json，为页面配置上拉触底的距离

4.6.2 在页面中与methods节点平级声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为

4.6.3 当列表数据请求成功之后，进行新旧数据的拼接处理

4.7 将需要复用多次的代码抽离为 mixin

4.7.1 新建mixins文件夹,新建js文件

/*---------------tabBar-badge.js----------------*/
import { mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
  computed: {
    ...mapGetters('m_cart', ['total']),
  },
  onShow() {
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge()
  },
  methods: {
    setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2,
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
      })
    },
  },
}

4.7.2 在各个页面中复用该组件

// 导入自己封装的 mixin 模块
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
  // 省略其它代码...
}

4.8 下拉刷新

4.8.1 pages.json配置文件中，为页面单独开启下拉刷新效果

4.8.2 监听页面的 onPullDownRefresh 事件处理函数

4.8.3 将停止刷新效果的回调函数作为参数在数据加载完毕后执行

总结