uni-app系列一，搭建微信小程序项目开发基本结构

就是个人
1,722 阅读4分钟

2018年接触uni-app以来，已经开发过微信小程序，h5，APP等好几个项目了，此过程整理一份基本的代码开发结构。一为了记录目前的开发流程，日后好更新；二为了团队的其他的小伙伴可以根据这个流程，自己动手搭建基本的项目开发框架。

话不多说，动手撸。

一 下载安装 uni-app 官方推荐的编辑器 HbuilderX

打开HbuilderX下载页面，点击download按钮，显示如下所示的弹窗。

HbuilderX提供windwos和mac两个系统的版本，并且有正式版和Alpha版本，Alpha为最新功能发布版本，但不够稳定，适合尝鲜新功能，各位小伙伴按需下载安装即可。

小孩子才会做选择，大人当然是

安装过程就不赘述了，当然是一直下一步啦下一步啦。

安装之后，打开编辑器，首先要做的就是安装插件啦，点击工具的工具选项，点击插件安装，一般开发用的css预处理器（less.scss）,uni-app多端编译，App调试等，可以通过插件市场查找更多的插件。

插件安装完成，接下来就是使用HbuilderX初始化项目了

二 初始化uni-app项目

点击工具栏->文件->1.项目，选择项目类型(uni-app)，填写项目信息，点击创建按钮完成项目的初始化

项目新建完成，首先看下初始化的项目都提供了那些文件和目录

三 改造uni-app项目，开箱即用

1.基于promise封装uni.request请求

在项目根目录下新建ajax文件夹，在此文件夹下新建index.js 和apis.js 两个文件

apis.js 存放ajax请求的接口列表。

const code = "code" //验证码 
export default { code }

index.js方法具体的请求方法，get,post,del,put。

import apis from "./apis"
import config from "@/config"
import utils from "@/utils"

/**
 * method 请求方法，默认GET
 * path 请求路径
 * params 拼接在url后面的参数 例如 /id/1
 * data 请求参数，body
 * showLoading 是否显示加载中提示，默认true
 * showToast 是否现在请求失败提示，默认true
 * */

function ajax(method = "GET", path = "", params = "", data = {}, showLoading = true, showToast = true) {
	if (showLoading) {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
	}
	// 拼接请求url
	let url = `${config.api}/${path}${params}`

	//自定义请求头信息
	let header = {
		'content-type': 'application/x-www-form-urlencoded'
	}
	// 请求头部携带token信息验证
	const token = utils.getLocalStorage("token")
	if (token) {
		header.token = token
	}
	// 基本promise封装uni.request请求方法
	return new Promise((resolve, reject) => {
		uni.request({
			url,
			method,
			data,
			header,
			success: (res) => {
				if (res.data.status == 200) {
					// 请求状态码为200成功响应返回
					resolve(res.data.data)
				} else {
					// 弹出请求失败的提示信息
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				}
			},
			fail: (err) => {
				// ajax请求失败提示,超时,服务端错误等
				uni.hideLoading()
				uni.showToast({
					title: "请求失败，请重试",
					icon: "none",
					duration: 2000
				});
				reject(err)
			}
		});
	})
}

2.在项目根目录下新建compnnents文件夹存放组件。

3.在项目根目录下新建config文件夹，在此文件夹下新建index.js,此文件存放项目基本配置信息，例如请求api的接口地址。

const api = "http://127.0.0.1/api"
export default {
	api
}

4.在项目根目录下新建mixin文件夹，在此文件夹下新建index.js,此文件存放全局mixin方法，例如路由跳转，弹窗提示等。

export default {
	methods: {
		// 跳转路由
		navigateTo(url) {
			uni.navigateTo({
				url
			});
		},
		reLaunch(url) {
			uni.reLaunch({
				url
			});
		},
		switchTab(url) {
			uni.switchTab({
				url
			});
		},
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		// 设置页面标题
		setNavigationBarTitle(title) {
			uni.setNavigationBarTitle({
				title
			});
		},
		// 成功提示
		showSuccessTip(msg) {
			uni.showToast({
				title: msg,
				icon: 'success'
			});
		},
		// 失败提示
		showErrorTip(msg) {
			uni.showToast({
				title: msg || '操作失败,请重试',
				icon: 'none'
			});
		},
		// 默认提示
		showTip(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			});
		}
	}
}

5.在项目根目录下新建store文件夹，在此文件夹下新建

actions.js,

getters.js,

index.js,

mutations.js,

mutation-types.js,

state.js此文件存放全局vuex方法。

index.js为vuex入口文件，提供方法供外部调用

import Vue from 'vue'
import Vuex from 'vuex'

import mutations from "./mutations"
import * as actions from "./actions"
import * as getters from "./getters"
import state from "./state"

Vue.use(Vuex)

const store = new Vuex.Store({
	mutations,
	actions,
	getters,
	state
})

export default store

6.在项目根目录下新建utils文件夹,文件夹下新建filters.js，全局过滤器方法；

新建index.js，全局工具方法，例如本地存储的设置获取，手机号码，邮箱的校验等。

// 获取 LocalStorage
const getLocalStorage = (name) => {
	try {
		const value = uni.getStorageSync(name);
		if (value) {
			return value
		}
	} catch (e) {
		// error
	}

}
// 设置 LocalStorage
const setLocalStorage = (name, value) => {
	try {
		uni.setStorageSync(name, value);
	} catch (e) {
		// error
	}
}
// 删除 LocalStorage
const removeLocalStorage = (name) => {
	try {
		uni.removeStorageSync(name);
	} catch (e) {
		// error
	}
}
// 清空本地缓存
const clearLocalStorage = () => {
	uni.clearStorage();
}
// 验证手机号码
const RegExpPhone = (value) => {
	return /^1[3|4|5|7|8][0-9]\d{8}$/.test(value)
}
// 验证码身份证号码
const RegExpIdCard = (value) => {
	return /^[1-9]\d{14}(\d{2}[0-9xX])?$/.test(value)
}

// 验证邮箱格式
const RegEmail = (value) => {
	return /^[-\w.]{0,64}@([a-zA-Z0-9]{1,63}\.)*[-a-zA-Z0-9]{1,63}$/.test(value)
}

export default {
	getLocalStorage,
	setLocalStorage,
	removeLocalStorage,
	clearLocalStorage,
	RegExpPhone,
	RegExpIdCard,
	RegEmail
}

添加完这些文件及文件夹之后，项目的整体结构如下

到这边，万事俱备，只欠最后一步啦

四 添加第三方插件

1.添加icon字体库，打开iconfont，登录账号，新建项目，挑选合适的图标加入项目

在项目根目录的static文件夹下新建font文件夹存放字体文件的css文件

在App.vue  style标签里引入icon图标的css文件

<style>
    @import url("./static/font/iconfont.css");
</style>

2.添加oss文件上传，参考案例

在项目根目录的utils文件夹下新建oss文件夹存放案例中的文件

3.添加UI库uview，参考案例

打开官网的安装指南页面 uviewui.com/components/…

使用第二种方法，手动下载uview UI库放到项目根目录之下

添加完成之后，此时项目的结构如下,红色框就是这一步添加的文件

到此，终于结束啦，大功告成，关机睡觉

哦，好像哪里不对，文件都有了可是没有引用，没有引用怎么用

五 完善配置文件，方便调用

1.项目根目录下的main.js添加代码

import Vue from 'vue'
import App from './App'

import uView from "uview-ui";
Vue.use(uView);//使用ui库

import utils from './utils'
import config from './config'
import ajax from './ajax'
import store from "./store"

import globalMixin from "./mixin"
import * as filters from "./utils/filters.js"

Vue.mixin(globalMixin)
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

Vue.config.productionTip = false

// 举例：在vue文件夹中通过 this.$config.api接口调用config的属性
Vue.prototype.$config = config
Vue.prototype.$ajax = ajax
Vue.prototype.$utils = utils
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()

2.配置uviewui

"easycom": {
	"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}

3.idnex.vue添加实例代码，查看配置是否生效

<u-button >默认按钮</u-button>
<text class="iconfont icon-Home"></text>

编译到微信小程序，预览成功，控制台无报错

六 瞎扯几句

好久没写技术贴了，上一次在掘金写还是2年前，写了一篇python爬虫的文章，那个时候在学习爬虫，就顺便记录了下。

平时开发轻车熟路的事情，写起来竟然要耗费这么多时间，果然写文章高产的牛人那是更牛了

万事开头难，希望能坚持把开发中的点滴记录下去。

最后，放一个github的链接，就是整个项目的全部文件了，开箱即用。

欢迎拍砖，欢迎喷

avatar
文章
阅读
粉丝