关于react.js:电信杯网球积分赛微信小程序-总结

电信杯网球积分赛微信小程序是面向宽广网球爱好者，蕴含 赛事一键报名，主动匹配参赛，多类型抉择，集体荣誉展现 等性能，并配套相应的后盾管理系统。

这是本人第一次采纳 Taro 进行微信小程序的开发, 相比于微信小程序，Taro 开发中的很多问题都在网上找不到答案, 就只有认真地去看官网文档和社区发问, 这无疑也造就了本人看官网文档的习惯。

以下列举了本人开发中遇见的问题和解决办法

Canvas 绘制圆形图和环形进度条适配

在选手首页展现排名和较量问题时呈现了字体移位和图像偏移的状况, 在 iphone5 等老版本机型下及其显著。

在开发初期应用 Canvas 绘制的时, 采纳了

query.arc(x, y, 0.8 * radius, 1.5 * Math.PI, endAngle, false);

其绘图坐标下 x,y 没有绝对单位的束缚, 故在不同机型下呈现问题.

解决方案：
查看微信适配的解决方案, 能够应用 api 获取 设施宽高比 /750(微信小程序宽高)

var SystemInfo=wx.getSystemInfoSync();

通过这个能够取得用户零碎的信息，包含宽高的像素，你能够计算他们的比例，而后小程序里宽度都是 750rpx, 高度就通过那个宽高比取得，只有波及具体数值的高度的都通过这个比例计算就行

在 Taro 中相似, 最初在绘制时相应坐标乘以设施的 Dp 即可进行适配

import {getSystemInfoSync} from '@tarojs/taro';

const facility = getSystemInfoSync(); // 获取设施信息
const facility_width = facility.windowWidth; // 设施宽度
const service.dp = facility_width / 750;  

这次呈现谬误也让本人明确了提前明确标准的重要性, 对字体, 内外边距等提前进行标准, 思考适配等问题

组件的复用，按状态渲染

发现自己负责的问题填写页面会被复用拿来当作问题查看页面。效果图如下：

依据传入参数的不同又会分成这几种状态

解决方案
将组件每一局比分填写做成一个组件，依据状态来判断渲染，代码如下:

<FillScoreCard 
    tile={` 第 ${index + 1}局 `} 
    allowInput={allowModify}
    returnScore= 
    {this.getFillScore.bind(this,index)}
    initValue={e}
 />

组件外部依据 prop 传入的状态渲染。

其余方面的优化

因为本人只负责程序的一部分, 但很多其余团队成员开发中遇见的问题本人也应该留神，等本人遇见的时候就不会不知所措了。