uni-app商城实战(一) | 8月更文挑战

669 阅读2分钟

 一、使用HBuilderX开发

1.安装HBuilderX

安装地址:www.dcloud.io/hbuilderx.h…

2.创建项目

在点击工具栏里的文件 -> 新建 -> 项目:

选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

选择的模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。

二、将项目运行到微信开发者工具

1.设置微信小程序AppID

点击项目中的mainifest.json -> 微信小程序配置 -> 微信小程序AppID,填写自己项目的AppID。

 2.设置微信开发者工具 

点击任务栏中的工具 -> 运行配置 -> 小程序开发工具路径,填写本地的开发者工具路径。

3.在微信开发者工具中运行小程序

点击任务栏中的工具 -> 运行到小程序模拟器 -> 微信开发者工具。

项目经过uni-app编译后会生成小程序,自动打开微信开发者工具。生成的代码在unpackage目录下。

 注意:由于小程序是通过自动编译形成的,所以不要在开发者工具中修改小程序代码,而要在HBuilderX中修改代码。

三、关闭sitemap

点击项目中的mainifest.json -> 源码视图 -> mp-weixin,添加"checkSiteMap": false。

 保存代码后会自动编译,编译后的小程序的project.config.json文件中会出现"checkSiteMap": false。

四、使用Git管理项目

1.创建git忽略文件

在根目录中创建.gitignore忽略不需要跟踪的文件

/.gitignore:

/node_module
/unpackage/dist

因为忽略了/unpackage/dist文件夹,但是不想忽略/unpackage文件夹,所以在/unpackage中增加.gitkeep文件,保证unpackage目录能正常被git跟踪。

2.Git本地管理项目

在根目录中打开PowerShell执行以下代码:

  • git init // 初始化git环境
  • git add . // 将文件添加到暂存区
  • git commit - m "项目框架" // 提交项目

3.将项目托管到码云上

  • git remote add origin git@gitee.com:jixueyuandi/happy-store.git
  • git push -u origin master

 五、创建tabBar

1.git创建tabbar分支

  • git checkout -b tabbar //创建tabbar分支
  • git branch // 查看所有分支

2.新建tabbar页面

右击pages,新建页面,填写页面名称,选择scss模板。

创建home、cate、cart、my四个页面

 3.设置tabBar

 在/pages.json中添加tabBar设置

	"tabBar": {
		"selectedColor":"#d81e06",
		"list": [
			{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "/static/tab_icons/home.png",
				"selectedIconPath": "/static/tab_icons/home-selected.png"
			},
			......
		]
	}

修改页面导航和页面背景

	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "快乐商城",
		"navigationBarBackgroundColor": "#c00000",
		"backgroundColor": "#F8F8F8"
	},

 页面效果:

4.提交代码合并分支

提交本地代码:

  • git add .
  • git commit -m "完成tabbar功能开发"

将tabbar分支推送到远程仓库进行保存:

  • git push -u origin tabbar

本地切换到master分支,合并tabbar分支,并提交到远程仓库

  • git checkout master
  • git merge tabbar
  • git push

删除tabbar分支

  • git branch -d tabbar

六、home页面

1.创建home分支,查看所有分支

  • git checkout -b home
  • git barnch

2.安装网络请求插件: @escook/request-miniprogram

  • npm init -y
  • npm install @escook/request-miniprogram

设置根路径、请求拦截、响应拦截

新建/utils/http.js:引入@escook/request-miniprogram包,设置根路径、请求拦截、响应拦截

// 倒人网络请求的包 @escook/request-miniprogram
import {$http} from '@escook/request-miniprogram'

// 请求根路径
$http.baseUrl = 'http://www.uinav.com'
// 请求拦截器
$http.beforeRequest = function(options) {
	uni.showLoading({
		title:'加载中......'
	})
}
// 响应拦截器
$http.afterRequest = function(options) {
	uni.hideLoading()
}
export default $http;

在/main.js中全局挂载:

// 全局挂载
uni.$http = $http

3.设置全局$showMsg() 

在utils文件夹下新建showMsg.js:

let $showMsg = function(title = "数据请求失败!", duration=1500, icon="none") {
	uni.showToast({
		title:title,
		duration:duration,
		icon:icon
	})
}
export default $showMsg;

在/main.js中全局挂载: 

// 全局挂载
uni.$showMsg = $showMsg

4.完成home页面

/pages/home/home.vue

数据和vue一样写在data中,方法和vue一样写在methods中,生命周期和小程序一样。

<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :duration="1000" :interval="3000">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
			};
		},
		onLoad() {
			this.getSwiperList();
		},
		methods:{
			// 获取轮播图数据
			async getSwiperList() {
				const {data: resData} = await uni.$http.get('/api/public/v1/home/swiperdata');
				if(resData.meta.status == 200) this.swiperList = resData.message;
			}
		}
	}
</script>

<style lang="scss">
swiper {
	height: 300rpx;
	.swiper-item,image {
			width: 100%;
			height: 100%;
	}
}

</style>

5.合并home分支

检查所在分支是home分支,查看当前文件状态:

  • git branch
  • git status

 保存本地代码:

  • git add .
  • git commit -m "完成home页面功能"

home分支推送到远程仓库:

  • git push -u origin home

本地切换到master分支,并合并home分支,并推送到远程仓库:

  • git checkout master
  • git merge home
  • git push

删除本地home分支

  • git branch -d home