以下全文使用wxapp指代小程序应用

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组件模式：按照配置规则全局引入注册组件，而不需要另外引入，注册即可使用。

优点：按需打包

  1. uni-ui安装（vue-cli + easycom）

    npm i @dcloudio/uni-ui --save
       
    npm i sass -D
       
    npm i sass-loader -D
    复制代码

  2. 编辑根目录下的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 组件开发

  1. 选取components目录下的目标位置右键单击选择新建组件，推荐选择使用scss模板页面。

  2. 组件逻辑代码开发，可按需引入相关的工具类，Service，其它组件等。

5.2 页面开发

  1. 选取pages目录下的目标位置右键单击选择新建页面，推荐选择使用scss模板页面。

  2. 在pages.json的pages节点下添加页面配置注册页面。若上一步已勾选在pages.json中注册会在页面创建时自动添加配置，可省略手动配置直接对其进行编辑。

    {
      // ...其它配置
         
      // 页面配置，规定节点的第一项为应用的入口页面（即首页）
      "pages": [
       {
        "path": "pages/xxx", // 页面路径
          "style": {}          // 页面窗口表现
        }
      ]
    }
    复制代码

  3. 页面逻辑代码开发，可按需引入相关的工具类，Service，组件等。

不论是组件或页面，大多数情况下需要在<style>标签上添加scoped属性，限制样式仅应用到父元素及其子元素（即当前vue实例），解决样式私有的问题，防止影响覆盖全局的公共样式。

6.补充

6.1 自定义组件引入及注册

<template>
 // ...
</template>
<script>
 // 1.引入组件
  import xxx from '@/components/xxx'
  
  export default {
   // 2.组件注册
    components: {
    xxx
    },
    // ...
  }
</script>
<style scoped>
/*
 * ...
 */
</style>
复制代码

6.2 tabBar配置

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

6.3 路由与页面跳转

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

6.4 分包优化之subPackages和preloadRule

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

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

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

属性名称类型是否必填描述
rootString是子包根目录，相对路径
pagesArray是子包页面配置，同主包pages
nameString是子包名称

preloadRule为分包预加载配置节点，当打开小程序某个页面时，自动预加载需要的子包，提升进入子包页面时的启动速度。它接收一个对象，属性名称key是当前页面的路径，属性值value是子包预加载的配置。子包预加载配置如下表：

属性名称类型是否必填默认值描述
networkString否wifi指定预加载时的网络类型
可选值：all（不限网络），wifi（仅wifi）
packagesArray是无字符串数组，进入页面时的子包的root或name属性
APP表示主包

小程序分包操作步骤：

  1. 在应用的根目录下新建子包，目录结构如下

    wxapp：

  • components：子包自定义组件目录。

  • pages：子包页面目录。

  • static：子包静态资源目录。

  • components：子包自定义组件目录。

  • pages：子包页面目录。

  • static：子包静态资源目录。

  • account_module：account子包目录。

  • order_module：order子包目录。

修改pages.json分包配置

{
  // ...
     
  // 分包配置
  "subPackages": [
   {
     "root": "account_module",
      "name": "account_module",
      "pages": [
       {
         "path": "pages/***",
          "style": {}
        }
        // ...
      ]
    },
    {
     "root": "order_module",
      "name": "order_module",
      "pages": [
       {
         "path": "pages/***",
          "style": {}
        }
        // ...
      ]
    }
  ],
  // 子包预加载规则配置
  "preloadRule": {
   "pages/***": {
     "network": "all",
     "packages": ["account_module"]
    },
    "pages/***": {
     "network": "all",
     "packages": ["order_module"]
    },
    "pages/***": {
     "network": "all",
     "packages": ["account_module", "order_module"]
    }
  }
}
复制代码

7.预览及发布

在小程序整个开发过程中支持实时预览。通过打开微信开发者工具的模拟器进行预览，通过HBuilderX发布新的小程序体验版。

前提条件：按照要求（第二节及第三节）安装及配置开发工具。

7.1 调试及预览

点击HBuilderX顶部导航栏的运行->运行到小程序模拟器->微信开发者工具或发行->小程序-微信，唤起微信开发者工具，并自动打开小程序完成调试预览。

运行及发行区别：

  • 发行模式会对项目进行压缩，完成后的应用体积更小，运行则不会。

  • 运行模式打开小程序，模拟器可以实时预览，不必重复运行，发行只会压缩并打开当前状态的项目。

通常情况下，当处在开发阶段时多使用运行模式，便于开发调试。开发完成后，使用发行模式打开微信开发者工具，并借助预览及真机调试功能测试小程序功能及兼容性。

7.2 发行

  1. 点击HBuilderX顶部导航栏的发行->小程序-微信，打开微信开发者工具。

  2. 点击微信开发者工具右上角的上传，输入正确的版本号，完成小程序体验版的发布。

8.附录

  • uni-app：https://uniapp.dcloud.net.cn/

  • vue-cli：https://cli.vuejs.org/zh/guide/

  • vue.js：https://cn.vuejs.org/v2/guide/

  • vuex：https://vuex.vuejs.org/zh/

  • node.js：https://nodejs.org/zh-cn/

  • fly.js：https:///wendux/fly