云开发后端实践记录——微信小程序开发（前端基础设计）

云开发后端实践记录——微信小程序开发（前端基础设计）

确认学习目标

• 微信云开发的Vue3——前端
• 微信云开发的Django——后端
• 完成业务，一个帮助农民进行买卖农作物的平台，含本地性质，用于每个城镇进行农产品贩卖

---

---

前言

随着新时代的发展，很多App技术上其实很高，但是技术是需要开源并给人们应用的，本技术旨在未来使用本App进行家乡经济作物的开发与贩卖，实现本地“菜为货物，人为运力”的情况。

App开发技术记录

后端部署方案

首先是微信云开发至少要有，这个界面自己想办法进

我这里选择构建一个Django项目进行开发后端，前端暂时不进行开放
基于模板开发

模板会到git的仓库里去

选择流水线开发，设置一下对应的仓库，这样只要我们推送，就会执行dockerfile进行构建应用了。

前端部署方案

采取uniapp进行前端的开发，使用它的组件库或者自己的组件库进行前端开发，我决定学习Vue并实现一个属于自己的简单版本的组件库进行设计。

在UI设计好样图后还要考虑一下，需要申请报备的应用

首先，小程序商城是必须要认证的，每年300元，如果申请公众号，并且做公众号认证，那么只需要付一次300元，可以同时做公众号认证，和小程序认证。
1、邮箱准备：需要未注册公众号或小程序的一个邮箱，公众号和小程序都需要申请，同时准备两个邮箱。
2、执照准备：营业执照副本清晰彩色照片，个体户或企业均可。
3、开户行：对公开户行及账号。
4、管理员：管理公众号或小程序的管理员，最好是法人，包括：姓名、身份证号码、绑定个人银行卡的微信扫描、手机号码、邮箱。
5、公章准备：打印“申请公函”后公司盖章，个体户只需要法人签字。
6、认证费：每年300元，交费后可以关联一个同名的“小程序”认证。
7、小程序关联注册：公众号认证后，可以关联注册一个小程序，需要另外准备一个未注册邮箱。

程序需求理解

本文档的作用在于记录下本次的开发经验，在下一次开发时能通过本文档再次接受需求并交付App
项目完成度

• UI设计
• 前端基础实现
• 后端设计
• 前端代码调试
• 后端代码调试

前端基础实现

首先我们采用uniapp进行开发，uniapp现在可以支持Vue3了，之前一直推荐我使用Vue2的
我们先展示代码实现后的效果，期间借鉴了别人的UI，如有侵权，立马删除。

1.uniapp的页面管理
pages.json
主要管的就是下面的那个Tabbar以及上面的个人中心、一六农品的东西。
代码是这个

{
   
	"pages": [
		{
   
			"path": "pages/index/index",
			"style": {
   
				"navigationBarTitleText": "一六农品"
			}
		},
		{
   
			"path" : "pages/category/category",
			"style" : 
			{
   
				"navigationBarTitleText" : "一六农品"
			}
		},
		{
   
			"path" : "pages/order/order",
			"style" : 
			{
   
				"navigationBarTitleText" : "一六农品"
			}
		},
		{
   
			"path" : "pages/profile/profile",
			"style" : 
			{
   
				"navigationBarTitleText" : "个人中心"
			}
		}
	],
	"globalStyle": {
   
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#dcdcdc",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
   
			"background": "#efeff4"
		}
	},
	"tabBar": {
   
		"color": "#7A7E83",
		"selectedColor": "#070000",
		"backgroundColor": "#ffffff",
		"borderStyle": "black",
		"list": [
			{
   
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "/static/tabbar/Home.png",
				"selectedIconPath": "/static/tabbar/home_full.png"
			},
			{
   
				"pagePath": "pages/category/category",
				"text": "农产品分类",
				"iconPath": "/static/tabbar/supple.png",
				"selectedIconPath": "/static/tabbar/supple_full.png"
			},
			{
   
				"pagePath": "pages/order/order",
				"text": "预选农产品",
				"iconPath": "/static/tabbar/purchase.png",
				"selectedIconPath": "/static/tabbar/purchase_full.png"
			},
			{
   
				"pagePath": "pages/profile/profile",
				"text": "个人中心",
				"iconPath": "/static/tabbar/mine.png",
				"selectedIconPath": "/static/tabbar/mine_full.png"
			}
		]
	}
}

然后是每个页面的开发
先看看项目的目录（static里可以放我们的静态资源，如果可以的话，其实也可以用nginx进行代理转发来加载）

分为主页、商品页面、预选页面、个人中心
主页的代码实现

<template>
	<view>
		<!-- 轮播图区域 -->
		<view class="banner-container">
			<swiper class="swiper" autoplay interval="3000" circular>
				<swiper-item v-for="(item, index) in banners" :key="index">
					<image :src="item.image" class="banner-image" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 热门商品区域 -->
		<view class="HotItem">
			<view class="hot-title">热门商品</view>
			<view class="more" @click="goToHotItems">更多</view>
		</view>
		
		<!-- 商品列表区域 -->
		<view class="ItemList">
			<view class="Item" v-for="(item, index) in items" :key="index" @click="goToProduct(item.id)">
				<view class="Image">
					<image :src="item.image" class="item-image" mode="aspectFill" />
				</view>
				<view class="ItemDetails">
					<view class="ItemName">{
   {
    item.name }}</view>
					<view class="shopName">{
   {
    item.shop }}</view>
					<view class="price">￥{
   {
    item.price }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>