基于uni-app的商城界面，可打包成APP、小程序、H5

立即下载用AI写一个

发布时间：2019-10-11

84人 | 浏览：10693次 | 收藏 |

技术：vue.js + uni-app

概述

基于uni-app开发的一个小商城，纯前端界面，不涉及后端接口（介意勿下）。可直接打包成微信小程序、H5（公众号商城）、APP（安卓和iOS），代码仅做演示，要上线仍需接上服务器接口。

详细

## 开发环境
只需要下载 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 编辑器，然后打开项目代码，即可进行开发了。（用平时的编辑器也可以开发，vscode、webstorm等都行，但是用 HBuilderX 能更方便的调试，运行到浏览器、微信开发者工具和手机中，所以还是推荐使用）

## 项目结构
![](/contentImages/image/20191009/ZOhmQUQ4h7hqFz80B4M.png)

- /pages 目录下是商城的所有页面，包括首页、列表页、详情页、分类页、购物车、用户中心、收货地址、订单页、搜索页、登录页（H5和APP）
- /static 目录下则是静态资源，包括所有图片
- app.vue 和 main.js 使用过vue.js开发的都知道，这是项目的入口
- manifest.json 是项目的各种配置，包括APP的配置，小程序的配置，和H5的配置
- pages.json 是配置页面路由、导航条、选项卡等页面类信息

## 代码实现
### 平台区分
在项目中，要打包成APP、微信小程序和H5，有些功能是有点区别的，所以要根据条件进行编译，让不同的平台执行不同的代码，比如在用户中心，如果没登录，微信小程序是获取授权，而H5或APP则是跳到登录页面

```html

	<button class="btn-auth" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信授权获取用户信息</button>


	<navigator url="/pages/login/index">
		<button class="btn-auth">登录</button>
	</navigator>

```

在代码中，使用 #ifdef 来进行区分不同的平台，在编译时会编译出不一样的代码，在js中，也是使用相同的方法

```js
// #ifdef H5 || APP-PLUS
uni.getStorage({
	key: 'userinfo',
	success: (res) => {
		this.auth = true;
		this.nickname = res.data.nickname;
		this.thumb = res.data.thumb;
	}
})
// #endif
```
这个表示只有打包成H5或者APP的时候，才会把代码打包进去，而微信小程序中则不会包含该代码。

其他代码的实现，就跟开发 vue 项目一样，只不过是组件和api需要用到uni-app的组件和api，可以参考[官方文档](https://uniapp.dcloud.io/)

### tabBar栏
对于最常用的tabBar栏，不需要自己写布局，写切换，只需要在 pages.js 里配置好，就自动生成了，完美的兼容APP端和H5端以及小程序端，在H5端就可能需要用到 --window-bottom 来处理定位的问题。
```json
{
"tabBar": {
		"color": "#b7b7b7",
		"selectedColor": "#AB956D",
		"backgroundColor": "#f5f5f5",
		"borderStyle": "white",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "/static/image/12.png",
				"selectedIconPath": "/static/image/11.png",
				"text": "主页"
			},
			{
				"pagePath": "pages/category/index",
				"iconPath": "/static/image/22.png",
				"selectedIconPath": "/static/image/21.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/index",
				"iconPath": "/static/image/32.png",
				"selectedIconPath": "/static/image/31.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/index",
				"iconPath": "/static/image/42.png",
				"selectedIconPath": "/static/image/41.png",
				"text": "我的"
			}
		]
	}
}
```

## 运行效果
### H5端
![](/contentImages/image/20191009/rZHUVQiJNFzADpdFYQk.png) ![](/contentImages/image/20191009/SdMBr1FwpS7m6QNkKem.png)

### 微信小程序
![](/contentImages/image/20191009/tSk1OEUnmnvkXnc0Zj0.png) ![](/contentImages/image/20191009/jQxEQCLfU8AnFoMv6Mx.png)

### APP端
![](/contentImages/image/20191009/I9hDoX2Z3D3fPO3xUNg.jpg) ![](/contentImages/image/20191009/9XfXLSf6Y98mGD2xGWk.jpg)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

基于uni-app的商城界面，可打包成APP、小程序、H5

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子