uniapp小程序开发的超长实践总结！最全笔记收藏

本文链接：https://blog.csdn.net/m0_68271787/article/details/140008208

前言

在经历了多个uniapp小程序项目开发后，我将我所有的踩坑实战经验复盘总结，以下内容仅针对uniapp开发微信小程序的场景，其中除了uniapp外还有一些小程序开发的注意点，希望这篇文章可以帮助大家避坑。以下全文干货（干到口渴那种）

如果你期待或者需要一个开源的微信小程序社区，可以 oil社区 gitee链接关注我的开发进度噢，欢迎⭐star

uniapp简介

先放官方介绍，如果熟悉已经了解uniapp的同学可以跳过。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

使用uniapp的话我们可以使用 vue.js 的语法来写 小程序 ，简而言之就是将常规vue.js开发中 template 模板从 html 替换成 wxml 就可以开发小程序，那么这么做有什么好处呢！

减少技术学习压力，如果你会vue的话你可以直接上手，如果你不会vue的话顺便把vue学了，而且还可以享受到vue的周边生态福利
语法相交于原生的小程序语法更加方便，如果你开发过小程序那你一定会感受到 this.setData() 与 原生小程序组件 开发的麻烦与恐惧
uniapp除了可以打包成各个平台的小程序还可以打包成app，具体不列举，如官网下图。
小程序开发工具的代码提示比较拉跨，虽然相比前几年有很大进步，但是还是没有达到我想要的水平。

uniapp开发准备

ide工具安装

HBuilder官网链接

工欲善其事，必先利其器。开发uniapp的第一步是安装一个官方的ide工具 HbuilderX ，对于开发uni-app来说我只推荐这一个ide工具，确实非常方便，可以帮助我们快速生成页面模板和组件模板，可视化的页面配置，优秀的代码提示，代码补全能力 等等。

HbuilderX 相比 vscode 还是有一些不足之处，一些插件生态不是很健全。但是开发uni-app就是非 HbuilderX 莫属了（毕竟是官方的东西）

HbuilderX 的安装非常方便，直接在官网下载安装就OK了。下载完成后我们需要安装一些插件，打开HbuilderX ，在顶部栏选择工具->插件安装，如下图

打开后我们可以看到当前已安装的插件和一些官方插件，这里由于年代久远我不记得最初的时候哪几个没安装了，但是下面红框圈起来的是一定要安装的，一个是用于git版本管理的插件，一个是用于编译sass的插件。

我们还可以设置我们的编辑器主题和字符大小，代码缩进等，如果你是有其他编辑器使用习惯的可以适当调整。我原本是使用vscode进行开发的，所以我切换成了雅蓝的主题，实际页面效果和vscode one dark pro 的 编辑器风格 和 代码颜色 一模一样！

以上步骤我认为都是必要的，舒服美观的开发环境可以极大的提升你的开发兴趣！

项目目录结构分析

新建项目

HbuilderX 安装配置完毕后，我们就可以开始开发了，首先我们需要创建一个项目，我们点击ide左上角 文件-> 新建 ->项目 ，然后我们选择 uniapp 项目，模板选择 默认模板

创建完成后，我们可以看到左侧文件树中新增了一个以项目名命名的文件，其中是hbuilder为我们内置的项目模板

以下是uniapp给我们的项目框架介绍，有一些文件夹是没有在模板中内置的，因此我们需要自己手动创建以下，例如最外层的components,用来放置我们的一些全局通用组件

    
┌─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

如下图，在开发的过程中，我依据vue项目的开发习惯，在pages中依照业务功能来创建功能分类文件夹，最常见的是按照首页的tabbar来区分功能模块，每一个文件夹中存放该功能涉及的所有页面，且每一个功能文件夹中还有一个单独的components文件夹用于放置该仅功能文件夹中的页面依赖的组件。

新建页面

我们需要创建新页面的时候可以通过hbuilder内置的页面模板来快速创建，右键点击左侧文件树中当前的项目，选择 新建页面 ，输入页面名称以及选择模板就可以创建了，一般我选择的是scss的模板，创建完成后会自动帮你在page.json中注册该页面。

通用插件封装

既然uniapp选择使用vue.js作为开发框架，那么我们一定要利用上vue中的一些优秀特性，例如插件（plugin），关于vue插件的介绍大家可以直接去官网看。

vue 插件官方介绍链接

通过引入插件，我们可以极大的提升我们的开发效率，当然如果是第一次使用uniapp进行开发可能不清楚哪个功能适合封装成插件引入，下面我就介绍一下一些我在实际开发中封装的一些通用插件

在封装前我们需要写一个 config 文件，方便我们快速自定义一些颜色和请求路径等。

//congif.js
const config = {
	baseUrl:'https://example.cn',//请求的基本路径
	modalColor:'#5271FF', //弹窗颜色 
}

module.exports = config

弹窗插件

在小程序中，如果我们没有自定义弹窗和拟态框组件的话一般都是使用官方的showModal或者showToast api来进行一些用户交互。这种非常频繁使用到的操作非常适合封装起来快速调用。具体代码如下

插件代码

const config = require('../config.js')

var message = {
	toast(title, type = 'text') {
		if (title.length > 15) {
			console.error('toast长度超过15个字符,当前长度为' + title.length)
			return
		}
		var icon = 'none'
		if (type) {
			switch (type) {
				case 'text':
					icon = 'none'
					break
				case 'suc':
					icon = 'success'
					break
				case 'err':
					icon = 'error'
					break
			}
		}
		uni.showToast({
			title,
			icon
		})
	},
	confirm(title, confirmColor) {
		return new Promise((res, rej) => {
			uni.showModal({
				title,
				cancelColor: '#b6b6b6',
				confirmColor: confirmColor || config.modalColor,
				success: (result) => {
					if (result.cancel) {
						rej(result)
					} else if (result.confirm) {
						res(result)
					}
				}

			})
		})
	},
	async message(content, confrimText) {
		return new Promise((res) => {
			uni.showModal({
				title: '提示',
				content,
				showCancel: false,
				confirmColor: config.modalColor,
				success: (result) => {
					res(result)
				}
			})
		})
	}
}
module.exports = mes