Vue.js是一个渐进式JavaScript框架,这个框架的核心思想是通过数据双向绑定来实现页面的响应式,再通过组件化开发的思想将一个完整的应用拆分成多个独立的组件并组合成一个完整的应用。
而小程序是微信推出的一种轻量级应用,具有开发简单、易于传播、体验流畅等特点,成为了移动互联网时代又一重要的应用场景。
这篇文章将介绍使用Vue构建小程序商城的原理和详细步骤。
1.技术选型
Vue.js作为主要技术框架,借助于mpvue(一个基于 Vue.js 的小程序开发框架)来构建小程序商城,同时使用了weui-wxss(一套基于 WeUI 封装的小程序组件库)来实现页面的快速布局和美化。
2.开发流程
2.1 建立项目
使用mpvue官方提供的快速构建方式,可以快速的创建一个mpvue的小程序项目。
安装mpvue:
```
npm install --global vue-cli
vue init mpvue/mpvue-quickstart my-project
```
2.2 部署组件
根据需求,我们要拆分出各个小模块,并将其作为一个组件单独开发。
以商品列表页为例:
```
- {{item.name}}
export default {
props: ['goods-list'],
created () {}
}
```
2.3 路由配置
使用Vue-router来进行小程序的路由跳转和页面切换操作,同时配合mpvue提供的page.json自动化配置,完成小程序的页面路由配置。
例:
```
const routes = [
{
path: '/',
name: 'home',
config: {
navigationBarTitleText: '小程序商城'
},
component: home
},
{
path: '/goodsList',
name: 'goodsList',
config: {
navigationBarTitleText: '商品列表'
},
component: goodsList
}
]
const router = new Router({
routes // (缩写) 相当于 routes: routes
})
```
2.4 接口调用
通过微信提供的API进行后台接口的跨域调用,同时可以使用Axios、Fetch等第三方库对接口进行封装和统一。
例:
```
import Fly from 'flyio'
const fly = new Fly()
// 定义接口地址
const BASE_URL = 'https://app.xxx.com/'
// 登录接口
export const login = (params) => {
return fly.get(`${BASE_URL}/login`,params)
}
```
2.5 页面样式
使用weui-wxss来快速实现小程序的页面样式美化,这个组件库基于微信的UI组件库WeUI。
例如:
```
! weui.wxs 的基本使用
```
3.生命周期
mpvue的生命周期同Vue一致,可以根据不同的阶段进行相应的操作和处理。
4.优化
4.1 防止因数据绑定占用太多内存而影响性能。
通过使用v-once指令让部分静态内容只渲染一次。
```
```
4.2 合理使用v-show和v-if指令。
v-if每次都会重新渲染,而v-show只是通过display属性来切换可见性。
```
```
4.3 使用事件代理,减少事件监听器数量
使用事件代理让整个应用都只有一个vue实例监听,并通过事件委托将事件冒泡到指定的组件上,从而减少不必要的事件监听器数量。
5.总结
通过Vue.js和mpvue框架的搭配,以及weui-wxss组件库的应用,可以快速的构建出一个小程序商城,并开发各种各样的有趣应用。最重要的是,我们可以轻松掌握Vue全家桶的用法,从而在项目中做到优化、扩展和升级。