迟到的微信小程序开发小结

发表于 |

迟到的微信小程序开发小结

回顾一下…

从7月到9月，一直忙于微信小程序开发，发现一直没有总结过，就来总结下微信小程序的开发经验。

虽然项目本身壮志未酬身先死… 但是总结经验还是来一波的。

技术框架

  1. taro + typescript
  2. lerna
  3. 自研小框架 http-fetch-client + cherry-tomato

taro + typescript

为什么使用 taro

使用 taro 是调研了下当前主流的小程序框架

  1. wepy、mpvue等，感觉维护有点少
  2. taro 活跃度很高，更新也很快，维护的感觉很好
  3. 本人倾向于 react 语法.. 怎么感觉这才是关键
  4. 值得关注的新框架 kbone & remaxjs
    a. 这2个框架不同于其他，主要是运行时根据虚拟DOM生成需要的小程序节点，所以拥有比如其他依赖编译的框架更高的自由度，更接近 react/vue 原本的使用体验（当然原本的小程序能力限制还是有的，只是模版限制可能更少）
    b. 根据虚拟DOM生成需要的小程序节点 这一点带来灵活的好处同时也带来了更大的难度和风险，大家选择时要慎重。
    c. kbone 是微信官方推荐的
    d. remaxjs 是阿里某大佬开源的

为什么使用 typescript

既然已经使用了react, 再配上 typescript 不完全没问题么😊

typescript 在vscode里简直神器，各种提示各个规范，写起来都不用看原来都代码想是参数什么的

lerna

本来是想基于 lerna 做 monorepo ，方便以后扩展出 web/h5 等运行环境等，抽取公共代码。但是项目中落了… 还未考验运行效果。

中间遗留的问题及不完美的地方

  1. lerna 管理后的多个包… 每个都需要使用 babel or tsc 做转换，编译过程不是很实时，启动方式也比较麻烦，运行流程：
    a. lerna run dev --scope=主工程 启动主工程
    b. lerna run build:watch --scope=依赖包工程 watch依赖包工程
    c. 而且 小程序的npm包是需要从 node_module 复制到根目录(比如root/npm/xxx)才能被使用的，导致依赖包工程编译后还需要再复制一次，过程特别复杂，taro及微信小城本身的npm支持，都不支持watch并复制，所以得自己写 小程序npm 方案，结果一直没有特别好的运行下去。
    d. 猜想可以用解决方式：手动创建软连接，来使他像是一个工程的文件，暂时还没尝试，可以期待一下。
    f. 特别备注：web/h5 用webpack就很棒，直接可以打包 依赖包工程，完全没有以上问题。

推广一下自研小框架～

http-fetch-client http请求框架

为了支持微信小程序😄，现在已经支持注入请求模块了，意味着可以支持任意平台了～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import HttpFetchClient, { Response } from 'http-fetch-client';
const fetchClient = new HttpFetchClient({
  adapter: (request) => {
    const url = request.getURL();
    return new Promise((
      resolve, reject
    ) => {
      resolve(new Response({
        state: 200 // or 3xx,4xx, 500, xxx 等非0
        readyState: 4,
        headers: {...},
        body: {...},
        url: url
      }))
      reject(new Response({
        state: 0 // 一般是超时或者 abort
        readyState: 4,
        headers: {...},
        body: {...},
        url: url
      }))
    })
  }
})
fetchClient.get(...)
fetchClient.post(...)

cherry-tomato 小番茄真好吃

这是做 js Model 的，配合 typescript 让你轻松了解完整功能