egret微信好友排行榜制作教程

egret微信好友排行榜制作教程

1 先设置开放域目录
打开game.json文件
{
“deviceOrientation”: “portrait”,
“openDataContext”: “src/myOpenDataContext”
}
2 主域中 存入玩家信息
wx.setUserCloudStorage({
KVDataList: [{ key: ‘score’, value: “33” }],
success: res => {
console.log(res);

},
fail: res => {
console.log(res);
}
});

3 开放域中 读取数据


wx.getFriendCloudStorage({
  keyList: ['score'], // 你要获取的、托管在微信后台都key
  success: res => {
    console.log(res.data);
  }
});

4 下面最难的就是绘制排行榜了
首先开放域中调用默认的sharecanvas画布 给他填充个红色长方形

let sharedCanvas = wx.getSharedCanvas()
let context = sharedCanvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 300, 600)

然后在主域上显示

 let openDataContext = wx.getOpenDataContext()
    let sharedCanvas1 = openDataContext.canvas

    let canvas1 = wx.createCanvas()
    let context = canvas1.getContext('2d')
    context.drawImage(sharedCanvas1, 10, 10)

egret 好友排行榜demo https://github.com/egret-labs/egret-target-wxgame/tree/master/demos/openDataContext

egret加载网络图片的方法

egret加载网络图片的方法

protected onComplete() {

		var imgLoader: egret.ImageLoader = new egret.ImageLoader;
		egret.ImageLoader.crossOrigin = "anonymous";
		imgLoader.load("https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJCWpvVtU7gUyvovhiaS96cc4nLlHwWfX8CllhABoiaGvrXexXppgofV5ZvtvicBrcJr4yJkKpObibesA/132");
		imgLoader.once(egret.Event.COMPLETE, this.imgLoadHandler, this);
	}
	private imgLoadHandler(evt: egret.Event): void {
		if (evt.currentTarget.data) {
			egret.log("加载头像成功: " + evt.currentTarget.data);
			let texture = new egret.Texture();
			texture.bitmapData = evt.currentTarget.data;
			let bitmap = new egret.Bitmap(texture);
			bitmap.x = 200;
			bitmap.y = 200;
			this.addChild(bitmap);
		}
	}

egret 摇杆代码

egret 摇杆代码

        //  实现原理就是 注意 定时器更新的坐标速度一定要保证一致所以我用了相等距离计算的
        //要拖拽的对象
        var draggedObject: egret.Shape;
        var offsetX: number;
        var offsetY: number;
        var chushiX;
        var chushiY;
        var jiaoduX;
        var jiaoduY;
        var pianyijiaoduX;
        var pianyijiaoduY;

        //画一个白色的正方形
        let stageW = this.stage.stageWidth;

        let stageH = this.stage.stageHeight;
        var bg1: egret.Shape = new egret.Shape();
        bg1.graphics.beginFill(0xffffff);
        bg1.graphics.drawRect(0, 0, stageW, stageH);
        bg1.graphics.endFill();
        bg1.x = 0;
        bg1.y = 0;
        bg1.touchEnabled = true;
        this.addChild(bg1);

        //画一个红色的圆
        var circle: egret.Shape = new egret.Shape();
        circle.graphics.beginFill(0xff0000);
        circle.graphics.drawCircle(0, 0, 15);
        circle.graphics.endFill();
        circle.x = 163;
        circle.y = 466;
        this.addChild(circle);


        //黑色半透明圆 园的achor就是中心
        var circle1: egret.Shape = new egret.Shape();
        circle1.graphics.beginFill(0x000000);
        circle1.graphics.drawCircle(0, 0, 65);
        circle1.x = circle.x - 10;
        circle1.y = circle.y - 10;
        circle1.graphics.endFill();
        circle1.alpha = 0.2;
        this.addChild(circle1);

        //画一个蓝色的正方形
        var square: egret.Shape = new egret.Shape();
        square.graphics.beginFill(0x0000ff);
        square.graphics.drawRect(0, 0, 100, 100);
        square.graphics.endFill();
        square.x = 33;
        square.y = 66;
        this.addChild(square);
        var kaishimove = 0;

        //增加圆形的触摸监听
        circle.touchEnabled = true;




        this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, startMove, this);


        function startMove(e: egret.TouchEvent): void {
            chushiX = e.stageX;
            chushiY = e.stageY;
            circle.x = e.stageX;
            circle.y = e.stageY;
            circle1.x = circle.x - 10;
            circle1.y = circle.y - 10;

            //把触摸的对象放在显示列表的顶层
            this.addChild(circle);
            //手指在屏幕上移动,会触发 onMove 方法
            this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);



        }

        this.stage.addEventListener(egret.TouchEvent.TOUCH_END, stopMove, this);

        this.addEventListener(egret.Event.ENTER_FRAME, onEnterFrame, this);

        function onEnterFrame(e: egret.Event) {

            if (kaishimove == 1) {
                console.log(111);
                square.x += pianyijiaoduX;
                square.y += pianyijiaoduY;
            }


        }

        function stopMove(e: egret.TouchEvent) {
            kaishimove = 0;
            console.log(22);
            //手指离开屏幕,移除手指移动的监听
            this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);
        }
        function onMove(e: egret.TouchEvent): void {
            kaishimove = 1;

            circle.x = e.stageX;
            circle.y = e.stageY;
            jiaoduX = e.stageX - chushiX;
            jiaoduY = e.stageY - chushiY;

            var point2: egret.Point = new egret.Point(jiaoduX, jiaoduY);
            point2.normalize(1);
            pianyijiaoduX = point2.x;
            pianyijiaoduY = point2.y;


            console.log('pianyijiaoduX=' + pianyijiaoduX);

            console.log('pianyijiaoduY=' + pianyijiaoduY);
        }

ps: 触摸事件不会向下传递 所以我统一给舞台加了个事件

egret开发方法(最笨的方法)

egret开发方法(最笨的方法)
1 1个精灵1个对象名字 获取精灵设置属性也是直接获取对象设置属性 (不用想的少些代码 因为没有jquery好用) ps:如果要设置很多个精灵属性 那可以添加到数组 然后循环遍历数组里面的精灵进行操作
2 显示隐藏 用visible=true visible=false

ps:设置深度有点问题 能不能就不要用