❤ ❤ ❤ ❤
前言
为什么会有小程序的出现？
-
互联网平台利用小程序完成各个垂直领域的深入发展，进一步巩固平台的优势，为用户提供一站式解决方案。
-
小程序自身可以带来更多的用户流量，能够提升用户在平台的留存率。
对于企业来说，在当前流量成本越来越高的情况下，小程序无疑是一个比较理想的选择，而对于很多小微企业来说，小程序也是比较现实的选择。
uni-app
是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
uniapp开发环境
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、各家小程序平台中完美一致地运行，同时它有着非常多的模板，可以直接下载使用，非常强大。我在此项目中的使用的是版本是 [email protected]
部分效果图展示
利用了uni.addInterceptor设置了一个登录拦截器，uni.addInterceptor 是 uni-app 官网提供的拦截器，可以利用它来实现登录拦截，用户在没有登录时是无法进行其他操作的。
项目源码：Uniapp-Shopping: 前端基于Uni-app和UviewUI，后端基于Node.js(Express.js)实现的购物小程序。