Home

Awesome

ztaro

结合小程序框架taro,状态管理库zoro,微信小程序开发,h5开发实践方案

教程

演示

<img src="https://img.baobeicang.com/user_upload/rc-upload-1542346706655-4.gif" width="200" /><img src="https://img.baobeicang.com/user_upload/rc-upload-1542346706655-6.gif" width="200" />

特性

在taro框架的基础上集成了如下简易开发特性,如需了解taro框架,请移步taro官方网站

如何安装

$ npm install -g @tarojs/cli
$ npm install
or
$ yarn global add @tarojs/cli
$ yarn

开发前准备

本脚手架中config/config.js中的配置都是不可用的配置,需要在启动前,修改为你对应的配置

图片资源上传阿里云oss服务器

由于小程序包大小限制,为了节省空间,我们通常会将图片资源上传到远程服务器,目前taro的plugin还不支持自定义, 因此我们在编译成微信小程序引入gulp执行上传任务,插件地址gulp-alioss-upload

在编译成h5过程中,我们利用webpack的loader机制,编写了相同功能的alioss-upload-loader

以上两个工具的配置一致,都在config/config.js中配置

module.export = {
  oss: {
    // BUILD_ENV === dev环境下的阿里云配置
    dev: {
      accessKeyId: '这里是dev环境阿里云oss key',
      accessKeySecret: '这里是dev阿里云oss secrect',
      endpoint: 'https://**********.aliyuncs.com',
      region: '*********',
      bucket: '这里是dev阿里云oss bucket',
    },
    // BUILD_ENV === prod环境下的阿里云配置
    prod: {
      accessKeyId: '这里是prod环境阿里云oss key',
      accessKeySecret: '这里是prod阿里云oss secrect',
      endpoint: 'https://**********.aliyuncs.com',
      region: '*********',
      bucket: '这里是prod阿里云oss bucket',
    },
    path: 'src/assets/', // 这里指定oss资源文件根目录
    prefix: '@oss', // 指定需要上传资源的前坠同时也是资源根路径的别名
    formats: ['png', 'jpeg', 'jpg', 'svg'], // 指定可上传的资源格式
  },

在js中引用

const image = '@oss/logo.jpeg'

在样式中引用

.app {
  background-image: url("@oss/logo.jpeg")
}

在json中引用

{
  "logo": "@oss/logo.jpeg"
}

最终都会被替换成上传后的真实阿里云oss地址,不支持通过require或者import导入资源

import logo from '@oss/logo.jpeg' // 该写法错误,不支持

如何开发

在前后端分离的应用中,往往我们开始编写前端界面及逻辑时,后台的api接口仅仅提供了swaggar文件,可能还没编写代码,可能还没部署到开发环境,这样我们的工作便会处处受困于后台,因此我们可以在本地启动数据模拟服务,编写简易的后台api返回

$ npm run mock:weapp # 启动小程序端
$ npm run mock:h5 # 启动h5端

or

$ yarn mock:weapp # 启动小程序端
$ yarn mock:h5 # 启动h5端

以上命令会启动app,并且在本地启动mock服务127.0.0.1:3000,我们只需在mock目录下编写数据mock,在src中编写界面及逻辑即可

值得注意的是在mock模式下,我们需要配置project.config.json文件下的urlCheck: false


当我们某些模块编写完成,后台api也已就绪,需要进行联调阶段时,首先我们改写config/config.js 文件,配置dev环境下的api服务器地址

module.exports = {
  server: {
    dev: 'https://devapiserver',
    ...
  },
  ...
}

需要在微信后台配置相关安全域名,或者临时性的修改urlCheck: false

执行如下命令,启动开发联调环境

$ npm run dev:weapp # 启动小程序端
$ npm run dev:h5 # 启动h5端

or

$ yarn dev:weapp # 启动小程序端
$ yarn dev:h5 # 启动h5端

执行以上命令不会在本地启动mock服务器,直接连接dev环境服务器


如何编写MOCK

所有的mock api服务均放在mock目录下,该目录下的所有js将会自动注册到express服务器中,无需额外的引入

mock服务导出格式,参考mock/todos.js

module.exports = {
  'GET /v1/todos': getTodos,
  'POST /v1/todo': addTodo,
  'DELETE /v1/todo/:id': deleteTodo,
  'GET /v1/todo/httpStatusError': httpStatusError,
  'GET /v1/todo/serviceError': serviceError,
}

数据模拟查看faker文档

api编写参考express

如何打包

我们需要在产品开发完成后打包dev环境给测试,可执行如下命令

$ npm run build:weapp-dev # 打包dev环境小程序包
$ npm run build:h5-dev # 打包dev环境h5包

or

$ yarn build:weapp-dev # 打包dev环境小程序包
$ yarn build:h5-dev # 打包dev环境h5包

当测试完成准备上线,可执行如下打包命令

$ npm run build:weapp # 打包dev环境小程序包
$ npm run build:h5 # 打包dev环境h5包

or

$ yarn build:weapp # 打包dev环境小程序包
$ yarn build:h5 # 打包dev环境h5包

最终打包目录在dist文件夹中

request异步请求的使用

该项目中src/utils/request.js中对Taro.request进行了一次封装,增强了部分特性,使用方法同Taro.request

// request参数举例
request({
  url: '/api/v1/todo/:id',
  data: {
    id: '1234343',
  }
})

推荐所有的请求都走request,否则异步错误无法捕获

UI组件框架

未引入UI组件框架,如需要,请自行引入,可用taro-ui

数据处理框架zoro

zoro框架的使用这里不在描述,自行查看文档zoro

本方案中以todos的demo演示了整体框架使用方法