mpvue开发的微信小程序转字节跳动（头条，抖音）小程序遇到的坑（二）
碰到的问题汇总：
一、基于平台的差异
1)登录
在微信里
微信授权 在头条里
2)API
最常见的例子：
微信：wx.setxxx 头条：ttxsetxxx
并且会有微信支持而头条不支持的情况，毕竟微信的开发环境是最久也最全的。
3）属性
在微信小程序里v-if的反应还算可以，但是在头条小程序里，慢如蜗牛，没办法，全部改成了v-show，相应的样式也要调整。
二、UI框架不兼容
1）我用的vantUI在转到tt小程序后，有些不支持；
比如多选：van-checkbox-group和展开：van-collapse-item
替代方案是van-checkbox-group自己用div手写样式和逻辑，用微信原生的picker也行。
van-collapse-item可以自己写样式，用v-show还控制。
2）mpvue-echarts不支持
尝试修改源码失败后，解决方案是自己用tt提供的api画canvas，还可以，我们用到了关系图，雷达图，柱状图和折线图。
用了2天，4个图都搞定了，并且样式上也背领导接受。
下面展示一个最复杂的关系图吧。
效果如下
// 参数
let obj = {
num : 0,//成功找到坐标的次数
dWidth:375,
dHeight:375,
id: 'canvas', // canvas 的id
fix: true, // 是否固定半径，默认为false
minMargin: 10, // 两个圆的最短距离，默认为10
minRadius: 0, //最小的圆半径，默认为30
radiuArr: [], //圆的半径的数组，当fix为true时该值必须填
radiuArrText:['大','啊啊','搜索大','得到大萨','存储存储存','实打实大大多','啊啊'],
total: 7//圆的个数，默认为10
}
class Circle {
constructor(x, y, r, color){
this.x = x;
this.y = y;
this.r = r;
this.c = color ? color : this.getRandomColor()
}
getRandomColor(){
let r = Math.floor(Math.random()*100) + 155;
let g = Math.floor(Math.random()*100) + 155;
let b = Math.floor(Math.random()*100) + 155;
return `rgb(${r},${g},${b})`
}
}
Page({
data: {
},
onLoad: function () {
this.constructor();
this.init()
},
// 画图
constructor() {
let maxRadius = parseInt(obj.dWidth/obj.total/2 * 1.414);
let minRadius = 13;
// 将原始数据转化为圆的半径
let a = [100,95,95,80,73,65,62];
let list = [];
a.forEach(function(item,index){
let r = parseInt(item * maxRadius / Math.max(...a)) < minRadius ? minRadius : parseInt(item * maxRadius / Math.max(...a));
list.push(r)
});
console.log('list',list);
// 开始
obj.num = 0;
obj.minRadius = parseInt(obj.dWidth/obj.total);
this.setData({
num : 0,
ctx : tt.createCanvasContext(obj.id),
dWidth : obj.dWidth,
dHeight : obj.dHeight,
fix : obj.fix,
minMargin : obj.minMargin,
minRadius : 26,
radiuArr : list,
total : obj.total,
circleArray : [],
circleNumber : 1
})
},
init(){
let n = 0
while (this.data.circleArray.length < this.data.total) {
this.setData({
circleArray:[]
})
let i = 0;
while (this.data.circleArray.length < this.data.total) {
this.createOneCircle()
i++
if (i >= 100) {
break;
}
}
n++
if (n > 100) {
break;
}
}
let that = this;
console.log(this.data.circleArray);
let circleArray = this.data.circleArray.sort((a, b) => b.r - a.r);
// 画线
let lineObj = {};
for (var m = 0; m < circleArray.length; m++) {
let ctx = that.data.ctx;
ctx.beginPath();
ctx.moveTo(circleArray[m].x, circleArray[m].y);//起始位置
for (var x = 0; x < circleArray.length; x++) {
if(circleArray[m].x == circleArray[x].x && circleArray[m].y == circleArray[x].y){
}else {
ctx.lineTo(circleArray[x].x, circleArray[x].y);
}
}
ctx.lineTo(circleArray[m].x, circleArray[m].y);//结束位置
ctx.setStrokeStyle("#958bff");
ctx.setLineWidth(1);
ctx.stroke();
ctx.closePath();
}
// 根据半径从大到小画圆。
circleArray.forEach(function(c,index){
that.drawOneCircle(c,index)
});
this.data.ctx.draw()
},
drawOneCircle(c,index) {
let ctx = this.data.ctx;
ctx.beginPath();
ctx.setStrokeStyle(c.c);
ctx.setFillStyle(c.c);
ctx.arc(c.x, c.y, c.r, 0, 2*Math.PI);
ctx.stroke();
ctx.fill();
ctx.setFillStyle('black');
ctx.font = '13px cursive'; //设置字体
let width = ctx.measureText(obj.radiuArrText[index]).width;
ctx.fillText(obj.radiuArrText[index], c.x, c.y+5);
ctx.setTextAlign('center');
this.data.circleNumber += 1;
this.setData({
circleNumber:this.data.circleNumber
})
},
createOneCircle(){
let x,y,r;
let createCircleTimes = 0;
while(true) {
if(this.data.circleArray.length === 0){
console.log('111');
x = Math.floor(this.data.dWidth/2);
y = Math.floor(this.data.dHeight/2);
}else {
x = Math.floor(Math.random()*this.data.dWidth);
y = Math.floor(Math.random()*this.data.dHeight);
}
let TR = this.getR(x,y);
if (!TR) {
continue;
} else {
console.log(obj.num);
r = TR
}
if (this.check(x,y,r) || createCircleTimes > 200) {
obj.num ++ ;
break
}
}
this.check(x,y,r) && this.data.circleArray.push(new Circle(x, y, r))
},
check(x,y,r) {
return !(x+r > this.data.dWidth || x-r < 0 || y + r > this.data.dHeight || y-r < 0)
},
// 获取一个新圆的半径，主要判断半径与最近的一个圆的距离
getR(x,y) {
if (this.data.circleArray.length === 0) return Math.floor(Math.random()*20 + obj.minRadius)
let lenArr = this.data.circleArray.map(c => {
let xSpan = c.x-x
let ySpan = c.y-y
return Math.floor(Math.sqrt(Math.pow(xSpan,2) + Math.pow(ySpan,2))) - c.r
})
let minCircleLen = Math.min(...lenArr)
let minC = this.data.circleArray[lenArr.indexOf(minCircleLen)]
let tempR = this.data.fix ? this.data.radiuArr[this.data.circleArray.length] : minCircleLen - this.data.minMargin
let bool = this.data.fix ? (tempR <= minCircleLen - minC.r) : (tempR >= this.data.minRadius)
return bool ? tempR : false
}
})