建设简易电子商务网站流程图网店排行榜前十名
前言
在经历了多个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'breakcase 'suc':icon = 'success'breakcase '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