基于uniapp实现的仿小米商城app（附源码）

❤         ❤          ❤         ❤

---

前言

为什么会有小程序的出现？

• 互联网平台利用小程序完成各个垂直领域的深入发展，进一步巩固平台的优势，为用户提供一站式解决方案。

• 小程序自身可以带来更多的用户流量，能够提升用户在平台的留存率。

对于企业来说，在当前流量成本越来越高的情况下，小程序无疑是一个比较理想的选择，而对于很多小微企业来说，小程序也是比较现实的选择。

uni-app

是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。 

uniapp开发环境

• HBuilderX开发（入口）
• Visual Studio Code开发（入口）

uniapp页面跳转API

​

uniapp部分生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序

uniapp组件生命周期

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之前被调用。详见(opens new window)
created	在实例创建完成后被立即调用。详见(opens new window)
beforeMount	在挂载开始之前被调用。详见(opens new window)
mounted	挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档(opens new window)
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

uviewUI

uni-app 是工具框架，它制定了很多通用的标准和 Api，帮助我们把编写的代码发布到多个平台，它并不是 UI 框架。而今天要介绍的uviewUI不仅仅是 web 应用界面的 UI 组件库，它专为 uni-app 而生，能够在 App、H5、各家小程序平台中完美一致地运行，同时它有着非常多的模板，可以直接下载使用，非常强大。我在此项目中的使用的是版本是 uview-ui@1.8.4

部分效果图展示

利用了uni.addInterceptor设置了一个登录拦截器，uni.addInterceptor 是 uni-app 官网提供的拦截器，可以利用它来实现登录拦截，用户在没有登录时是无法进行其他操作的。

项目源码：Uniapp-Shopping: 前端基于Uni-app和UviewUI，后端基于Node.js(Express.js)实现的购物小程序。