uni-app项目开发学习总结

UniApp是一个基于Vue.js开发的跨平台应用框架，可以用于开发同时运行在多个平台（如iOS、Android、H5等）的应用程序。

首先，你需要安装UniApp的开发环境。你可以在UniApp官网上找到安装步骤和相关文档。安装完成后，可以通过以下步骤来创建一个简单的UniApp博客应用：

1. 创建UniApp项目：打开命令行工具，进入你想要创建项目的目录，运行以下命令来创建一个新的UniApp项目：
```
vue create -p dcloudio/uni-preset-vue my-blog
```
按照提示选择创建项目的配置，建议选择默认配置。

2. 创建页面：使用命令行工具进入刚才创建的项目目录，然后运行以下命令来创建一个博客列表页面和一个博客详情页面：
```
uni-app create -t page pages/blogList
uni-app create -t page pages/blogDetail
```
这样会在项目目录下生成对应的页面文件。

3. 编写页面代码：打开刚才创建的`pages/blogList.vue`和`pages/blogDetail.vue`文件，在这些文件中编写博客列表和博客详情的页面代码，可以使用Vue.js的语法和UniApp的组件。

4. 配置路由：在项目目录下找到`/src/router/index.js`文件，添加博客列表和博客详情的路由配置，例如：
```javascript
import BlogList from '@/pages/blogList.vue'
import BlogDetail from '@/pages/blogDetail.vue'

const routes = [
  {
    path: '/blogList',
    name: 'blogList',
    component: BlogList
  },
  {
    path: '/blogDetail/:id',
    name: 'blogDetail',
    component: BlogDetail
  }
]
```

5. 运行应用：在命令行工具中运行以下命令来启动开发服务器，然后可以在浏览器中预览应用：
```
npm run dev:mp-weixin
```
这样会启动一个微信小程序的开发服务器，你可以在微信开发者工具中预览应用。你也可以使用其他命令来构建并预览在不同平台的应用，具体命令可以查看UniApp的文档。

当然，我可以为你详细介绍如何使用UniApp开发一个完整的博客应用。下面是一个步骤指南：

1. 环境设置：
   - 安装Node.js：确保你的计算机中安装了最新版的Node.js。你可以在官方网站（https://nodejs.org）上下载并安装。
   - 安装HBuilderX：HBuilderX是UniApp的官方开发工具，支持Windows、MacOS和Linux系统。你可以在UniApp官网（https://uniapp.dcloud.io）上下载并安装HBuilderX。
   - 创建UniApp项目：打开HBuilderX，选择新建项目 -> 选择模板 -> 选择UniApp，并填写项目相关信息后创建项目。

2. 页面布局：
   - 建立页面结构：在项目目录的`pages`文件夹下，创建博客列表页（blogList.vue）和博客详情页（blogDetail.vue）的文件。
   - 设计页面布局：使用Vue的语法和UniApp提供的组件系统，设计博客列表页和博客详情页的布局。例如，可以使用`<uni-list>`和`<uni-card>`组件来展示博客列表，使用`<uni-rich-text>`组件来展示博客详情。

3. 数据管理：
   - 创建数据源：在项目目录下，创建一个`data`文件夹，并在该文件夹下创建一个名为`blogs.js`的文件。在`blogs.js`文件中，定义一个博客数据数组，包含多个博客对象，每个对象代表一篇博客，包括标题、作者、内容等字段。
   - 导入数据源：在`<script>`标签中，导入`blogs.js`文件，并将博客数据数组赋值给一个名为`blogs`的变量。

4. 博客列表页：
   - 显示列表：在`blogList.vue`文件中，使用v-for指令遍历`blogs`数组，显示博客列表。可以使用`<uni-list>`和`<uni-list-item>`组件来展示每篇博客。
   - 路由跳转：为每个博客列表项添加点击事件，通过uni.navigateTo方法跳转到博客详情页，并传递博客的ID参数。

5. 博客详情页：
   - 获取参数：在`blogDetail.vue`文件中，通过uni.getStorageSync方法获取路由参数中的博客ID，并保存到一个变量中。
   - 显示详情：根据博客ID，从`blogs`数组中找到对应的博客对象，显示博客的详细信息。可以使用`<uni-card>`和`<uni-rich-text>`组件来展示博客的标题和内容。

6. 发布分享：
   - 导航栏添加按钮：在页面的导航栏上添加一个发布按钮，通过uni.navigateTo方法跳转到博客发布页。
   - 发布页面设计：创建一个名为`blogPublish.vue`的页面文件，设计博客发布页面的布局，并在`<script>`标签中定义相应的数据和方法。
   - 发布功能实现：在`blogPublish.vue`文件中，实现博客发布功能，将发布的博客数据添加到`blogs`数组中，并使用uni.navigateBack方法返回到博客列表页。

7. 数据持久化：
   - 使用uni.setStorageSync方法：在博客发布功能中，使用uni.setStorageSync方法将`blogs`数组存储到本地缓存中，以实现数据的持久化。

8. 样式美化：
   - 根据设计要求，编辑各个页面的样式，包括字体、颜色、布局等，使应用更加美观。

当开发UniApp博客应用时，另外一些功能和技术可以进一步考虑。以下是一些主题：

1. 用户登录与身份验证： 

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "babybus"
			}
		}, {
			"path": "pages/category/category",
			"style": {
				"navigationBarTitleText": "分类",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/cart/cart",
			"style": {
				"navigationBarTitleText": "购物车",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/user/user",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}

		}

   - 创建用户登录页面：设计一个登录页面，用户可以输入用户名和密码进行登录。
   - 用户认证与授权：使用后端技术（如JWT）实现用户身份验证和授权功能，确保只有经过登录的用户才能发布博客、评论等操作。
   - 用户注册与密码找回：提供用户注册和密码找回的功能，通过发送电子邮件或手机验证码进行身份验证。

2. 博客搜索与过滤：
   - 添加搜索栏：在博客列表页中添加一个搜索栏，用户可以根据关键词搜索博客。
   - 博客过滤与排序：提供博客按照日期、浏览量等进行排序和过滤的选项，使用户更容易找到感兴趣的博客。

3. 博客分类与标签：
   - 创建博客分类和标签：为博客添加分类和标签功能，方便用户对博客进行分类和检索。
   - 分类和标签筛选：在博客列表页中，提供分类和标签选择器，用户可以根据自己的兴趣选择相应的分类或标签进行筛选。

4. 图片和多媒体上传：
   - 添加图片和多媒体上传功能：在博客发布页面中，提供图片和多媒体文件的上传功能，使用户能够添加图片、视频等丰富的多媒体内容。
   - 图片预览和缩略图：在博客详情页面中，提供图片预览和缩略图功能，使用户能够查看和浏览博客中的图片内容。

@font-face {
  font-family: "iconfont"; /* Project id 3995406 */
  src:
       url('~@/static/iconfont/iconfont.ttf') ;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shouye:before {
  content: "\e65d";
}

.icon-denglu1:before {
  content: "\e612";
}

.icon-gouwuchekong:before {
  content: "\e600";
}

.icon-dianpu:before {
  content: "\e895";
}

.icon-fenxiang:before {
  content: "\e624";
}

.icon-kefu:before {
  content: "\e625";
}

.icon-shoucang:before {
  content: "\eca7";
}

.icon-sousuo:before {
  content: "\e86e";

5. 评论和社交分享：
   - 添加评论功能：为每篇博客添加评论区域，用户可以发表评论、回复他人的评论等。
   - 社交分享功能：在每篇博客下方，提供社交分享按钮，方便用户将博客分享到其他社交媒体平台。

6. 个人中心和用户设置：
   - 创建个人中心页面：提供一个个人中心页面，用户可以查看自己的博客、评论等信息。
   - 用户设置：在个人中心页面中，允许用户进行个人资料修改、密码重置等操作，提供良好的用户体验。

7. 数据备份和恢复：
   - 实现数据备份功能：定期将博客、用户数据等重要数据备份到云存储或其他安全介质上，以防止数据丢失。
   - 数据恢复功能：提供数据恢复功能，使管理员能够在发生数据丢失或错误时，方便地将数据恢复到之前的状态。

这些是一些额外的功能和技术可以增加到UniApp博客应用中。根据你的需求和项目规模，你可以选择实现其中一些功能，或者进一步扩展和改进这个应用。祝你开发顺利！

当开发购物车功能时，你可以遵循以下步骤：

1. 创建购物车页面：
   - 在UniApp中创建一个购物车页面，可以命名为`cart.vue`。
   - 设计购物车页面的布局，包括商品列表、总价格、结算按钮等。

<template>	
	<view v-if='cart.length>0'>
	<klg-address :address='address'></klg-address>
		<view class="cart-title">
			<text class="iconfont icon-shouye">购物车</text>
		</view>
		
		<view class="">
			<view v-for='(item,index) in cart' :key='index'>
				<zjl-goods :goods='item' :showCheck='true' :showNum='true' 
				:allowLongTap='true' @changeNum='changeNum' @changeChecked="changeChecked">
				</zjl-goods>
			</view>
		</view>
		<!-- 购物车统计 -->
		<zjl-settle :cartData="cart" showAllCheck='true' buttonText='结算' @handleAllChecked="handleAllChecked"></zjl-settle>
	</view>
	<view v-else>
		<view ><img src="../../static/cart_empty.png" alt=""></view>
		<view><text class="text">购物车为空</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cart: [],
			address:{},
			}
		},
		
		onShow() {
			this.cart = uni.getStorageSync('cart') || [];
			this.address = uni.getStorageSync('address') || [];
			console.log(this.cart);
		},
		methods: {
			changeNum(e){
				let index = this.cart.findIndex(v=>v.goods_id == e.goods_id);
				if(e.cartNum === 0){
					this.cart.splice(index,1);
				}else{
					this.cart[index].cartNum = e.cartNum;
				}
				console.log(this.cart);
				uni.setStorageSync('cart',this.cart);
			},
			changeChecked(e){
				let index = this.cart.findIndex(v=>v.goods_id == e.goods_id);
				this.cart[index].checked=e.checked;
				uni.setStorageSync('cart',this.cart);
				console.log(this.cart);
			},
			handleAllChecked(e){
				console.log(e);
				this.cart.forEach(v => v.checked =e);
				uni.setStorageSync('cart',this.cart);
			}
		}
	}
</script>

<style lang="scss">
	.cart-title {
		padding: 15rpx;
		font-size: 30rpx;
		border-bottom: var(--separateLine);
	}
	img{
		
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
		width: 300rpx;
		
	}
	.text{
		font-size:32rpx;
		
	}
</style>

2. 数据存储与管理：
   - 创建一个本地存储（Local Storage）或全局变量（Vuex）来存储购物车中的商品信息。
   - 定义商品对象的结构，包括商品ID、名称、价格、数量等属性。

3. 添加商品到购物车：
   - 在商品列表页或详情页中，为每个商品添加一个“添加到购物车”的按钮。
   - 在点击按钮时，将选中的商品信息添加到购物车的数据存储中。

4. 显示购物车商品列表：
   - 在购物车页面中，根据存储的购物车数据，使用v-for指令遍历商品列表，展示每个商品的名称、价格、数量等信息。
   - 使用计算属性或过滤器计算购物车中商品的总价，并显示在页面上。

5. 修改购物车商品数量：
   - 为购物车中的每个商品项添加增加和减少数量的按钮。
   - 在点击按钮时，通过修改购物车存储中商品的数量属性来更新页面上的商品数量。

6. 从购物车中移除商品：
   - 为购物车中的每个商品项添加一个删除按钮。
   - 在点击按钮时，从购物车存储中移除对应的商品信息，并更新页面展示。

7. 结算功能：
   - 在购物车页面中，添加一个结算按钮。
   - 在点击按钮时，根据购物车存储中的商品信息，进行相关的结算逻辑（如生成订单、支付等）。

8. 数据持久化与登录：
   - 在用户登录状态下，将购物车的数据保存到你的后端服务器中，以便用户在不同设备或会话下保持购物车数据的一致性。
   - 当用户退出登录后，清空本地购物车数据。

template>
	<view class="" v-if="token">
		<view class="container">
			<!-- 头像昵称区域 -->
			<view class="top-box">
				<image src="../../static/au.webp" class="avatar" mode="widthFix"></image>
				<view class="nickName">Au</view>
			</view>
			<!-- 面板的列表区域 -->
			<view class="panel-list">
				<!-- 第一个面板 -->
				<view class="panel">
					<!-- panel 的主体区域 -->
					<view class="panel-body">
						<!-- panel 的 item 项 -->
						<view class="panel-item">
							<text>0</text>
							<text>收藏的店铺</text>
						</view>
						<view class="panel-item">
							<text>1</text>
							<text>收藏的商品</text>
						</view>
						<view class="panel-item">
							<text>1</text>
							<text>关注的商品</text>
						</view>
						<view class="panel-item">
							<text>0</text>
							<text>足迹</text>
						</view>
					</view>
				</view>
				<!-- 第二个面板 -->
				<view class="panel">
					<!-- 面板的标题 -->
					<view class="panel-title">我的订单</view>
					<!-- 面板的主体 -->
					<view class="panel-body">
						<!-- 面板主体中的 item 项 -->
						<view class="panel-item">
							<text class="iconfont">&#xe897;</text>
							<text>全部订单</text>
						</view>
						<view class="panel-item">
							<text class="iconfont">&#xe60c;</text>
							<text>待付款</text>
						</view>
						<view class="panel-item">
							<text class="iconfont">&#xe673;</text>
							<text>待收货</text>
						</view>
						<view class="panel-item">
							<text class="iconfont">&#xe68e;</text>
							<text>退款/退货</text>
						</view>
					</view>
				</view>
				<!-- 第三个面板 -->
				<view class="panel">
					<view class="panel-list-item">
						<text>收货地址管理</text>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
				</view>
				<!-- 第四个面板 -->
				<view class="panel">
					<view class="panel-list-item">
						<text>联系客服</text>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
					<view class="panel-list-item">
						<text>意见反馈</text>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
					<view class="panel-list-item">
						<text>关于我们</text>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
				</view>
				<!-- 第五个面板 -->
				<view class="panel">
					<view class="panel-list-item" @click="logout">
						<text>退出登录</text>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

以上是购物车功能的基本开发步骤。你可以根据自己的需求和业务逻辑进行扩展和改进，例如添加优惠券、配送方式等功能。同时，记得进行测试和优化，确保购物车功能的稳定性和良好的用户体验。祝你开发顺利！