mpvue开发的微信小程序转字节跳动（头条，抖音）小程序遇到的坑（二）

川长思鸟来 2023-02-27 13:58 154阅读 0赞

碰到的问题汇总：

一、基于平台的差异

**1)登录**

在微信里

<van-button
            color="#958BFF"
            round
            block
            open-type="getUserInfo"
            @getuserinfo="getUserInfo"
          >微信授权</van-button>

在头条里

**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个图都搞定了，并且样式上也背领导接受。

下面展示一个最复杂的关系图吧。

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70][]

// 参数
    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
        }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70]: /images/20230209/ae8c6a3109ba47368db271c6db3d1d10.png