---
title: Hi 运动(教练端)小程序
date: 2017-12-28
tags:
- 小程序
- Gulp
sidebarDepth: 2
categories: 项目
---

# Hi 运动(教练端)小程序

> 请编辑过的人员留下你的姓名

- 文档编辑人员 杜文华(2020/4/27)

## 项目地址

- svn://svn.webdev.ouj.com/biz/hiyd_miniprogram/wx

## 技术选型

> 目标:单纯的微信小程序，没有任何跨端的需求

1. 针对当时有挺多可选择的方案，(1)原生,(2)框架
2. 框架来说，就是更多的用于跨端的，所以感觉没多大必要。但是原生也会有原生的问题

原生的问题:

1. 比如 npm 的管理就比较棘手，官方的 npm 引入需要构建然后需要外部相对路径的引入，这样的灵活性不太高
2. 对于 sass，TypeScript 等预编译的操作无法实现
3. 不支持 ES7 以上的高级语法，如 async await 等特性
4. 不管是体验版还是开发版只能存在一种环境，一旦发布预览测试环境切换繁琐
5. 缺少集中式的 API 地址和 ENV 环境变量管理

最终由于技术人员大家的技术都倾向于原生比较容易上手，框架需要再熟悉可能有碍于开发效率等，选择了原生

## 最终的技术栈

> Gulp4.x + TypeScript(后来觉得 wx 的类型可能有点坑就放弃了) + Babel + Scss + 原生小程序内置 Api + jest(单元测试,node 版本要尽量高不然会报错) + Mobx

5/22注后来发现TypeScript也是可以做的，wx的类型直接引入微信的库就可以了，我们要做的只是用TypeScript转换成JS就可以了

## 项目架构

```Bash
- dist
- node_modules
- src
  |- ...
  |- __test__               --- jest单元测试
  |- assets                 --- 静态资源文件(*png,*jpg)
  |- components             --- 公共组件(自定义)
  |- custom-tab-bar         --- 自定义tabbar(一定要放在最外层)
  |- libs                   --- 用上了ES7的async的地方都得用这个库 (在头部得引入不然会报错)
  |- miniprogram_npm        --- 小程序的npm
  |- pages                  --- 页面
     |- ...

     |- ...
  |- router                 --- 封装的路由
  |- services               --- 业务层
     |- lib                 --- 封装的ajax
  |- styles                 --- 定义的全局scss
  |- utils                  --- 工具类
  |- index.d.ts             --- 用来提示类型的(不是用TypeScript但是可以透过工具达到类型提示的效果)
  |- ...
- gulpfile.js               --- 构建打包的配置文件
```

## 开发时发现的问题

### 2020/5/6

小程序的背景图片不能直接引入本地的，可能是因为线上的缘故吧。要转成 base64 或者是引入线上服务器的地址才可以引入。

数据流最后是通过 mobx 进行传递。写了一些例子可能都不太好，没有那种修改了马上更新的操作，放在 globalData 就更加不行

使用 async 的地方都得引入 libs 里面的 runtime 库不然会报错(本地可能不报错，但是线上会报错)

### 20205/14

商品管理的拖动还是存在bug，比如无法实时看到拖动的效果，只能在拖动完最后才能看到效果。(最主要还是安卓存在的性能问题，因为每次都会load图片，安卓load图片就会出现性能的问题，IOS不会有这个问题，实现的原理得自己看下里面的)

保存海报是通过canvas画出来的，所以要看一下对应的微信提供的Api

小程序自带的mobx在App.js无法使用，因为没有办法代理App.js里面的数据。page里面如果在onload，等生命周期使用。得下一轮循环才行(不知道是不是推到微任务里面去了)

### 2020/5/22

tabPage是自定义，并且是重写了onShow方法，是在Page实例化前调用的，所以在tabPage的onShow里面没有找到当前tabPage的this。