1.项目介绍

wxapp是基于uni-app，使用vue.js语法进行开发的微信小程序项目。

2.开发工具

devtools：微信开发者工具。安装完毕使用开发者账号微信登陆微信开发者工具且到开发工具的安全设置中开放服务端口HBuilderX：由DCloud推出的web开发IDE。安装完毕需要修改运行配置中正确的微信开发者工具安装路径推荐插件：NPM，内置终端，uni-app编译，eslint-js，js压缩，css压缩，less编译，scss/sass编译3.开发前的准备

3.1 小程序账号注册

到微信公众平台注册小程序账号。

3.1 开发环境搭建

Node.js：下载并安装Node.js及npm。

vue-cli：全局安装vue-cli脚手架。

npm install -g @vue/cli复制代码3.2 创建uni-app应用

vue create -p dcloudio/uni-preset-vue wxapp复制代码创建成功后修改manifest.json，配置已注册的小程序appId

3.3 uni-ui库

uni-ui是DCloud提供的基于vue组件，flex布局的跨端ui框架。

easycom组件模式：按照配置规则全局引入注册组件，而不需要另外引入，注册即可使用。优点：按需打包

uni-ui安装（vue-cli + easycom）npm i @dcloudio/uni-ui --savenpm i sass -Dnpm i sass-loader -D复制代码编辑根目录下的pages.json，添加easycom节点// pages.json{ "easycom": { "autoscan": true, "custom": {// uni-ui 配置规则 "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } },// 其它配置 pages: [// ... ]}复制代码4.项目文件目录介绍

api：restful请求目录，使用Fly.js发送http请求。components：自定义全局组件目录。i18n：国际化目录。static：静态资源目录，由于小程序对包大小的限制，需要考虑将必要的静态资源迁移至oss服务器。store：vuex状态管理目录。utils：自定义工具类目录。baseURLConfig.js：自定义环境配置文件。pages：主包页面目录。App.vue：主组件，所有页面的入口文件，用来配置全局样式及监听应用生命周期。但本身不是页面，不能编写视图元素。main.js：项目的入口文件，主要作用为初始化vue实例，定义全局组件。manifest.json：wxapp应用的配置文件。package.json：wxapp应用扩展节点配置。pages.json：wxapp应用页面管理全局配置文件。5.开发流程

以下开发流程均以使用HBuilderX为例。

主包及子包页面和组件开发流程相同。页面开发使用pages目录，组件开发使用components目录。

5.1 组件开发

选取components目录下的目标位置右键单击选择新建组件，推荐选择使用scss模板页面。组件逻辑代码开发，可按需引入相关的工具类，Service，其它组件等。5.2 页面开发

选取pages目录下的目标位置右键单击选择新建页面，推荐选择使用scss模板页面。在pages.json的pages节点下添加页面配置注册页面。若上一步已勾选在pages.json中注册会在页面创建时自动添加配置，可省略手动配置直接对其进行编辑。{// ...其它配置// 页面配置，规定节点的第一项为应用的入口页面（即首页） "pages": [ { "path": "pages/xxx", // 页面路径 "style": {} // 页面窗口表现 } ]}复制代码页面逻辑代码开发，可按需引入相关的工具类，Service，组件等。不论是组件或页面，大多数情况下需要在

复制代码6.2 tabBar配置

若希望在应用底部添加tab进行切换，推荐使用tabBar配置。在pages.json中提供了tabBar配置，方便快速开发及性能的提升。

6.3 路由与页面跳转

uni-app提供了一系列路由与页面跳转的api与路由相关的个性化配置，方便开发人员进行快速开发。

6.4 分包优化之subPackages和preloadRule

由于小程序的体积限制和资源加载限制，需要利用小程序的分包加载机制对应用进行拆分，配置分包加载规则。

当小程序启动时，默认会加载主包并打开主包内的页面，当用户进入到分包的某个页面时，自动加载分包，完成后再进行展示。分包配置可以有效减轻应用启动时加载的js数量，提升应用的启动速度。

subPackages为分包配置节点，它接收一个对象数组，数组的每一项都对应应用的一个子包，对