Egret社区

用egret做微信开发的一些技巧

2016-3-28 12:00
27326138
本帖最后由 nofastfat 于 2016-4-18 11:27 编辑

首先,本文仅适合egret-web版,native请勿参考,会把自己坑死

回复可见已经去掉~~~~~~~

1.title,微信修改title,如果简单的用document.title 修改是不生效的,微信的坑,跟egret没半毛钱关系。需要用原生html的办法(也可以用TS来写):
[mw_shl_code=javascript,true]function updateTitle(title){
                    var $body = $('body'); document.title = title;    // hack在微信等webview中无法修改document.title的情况   
                    var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load', function() {      setTimeout(function() {        $iframe.off('load').remove()      }, 0)    }).appendTo($body)
            }[/mw_shl_code]

2.长按识别二维码,微信里面这个功能应该是基于Image标签进行识别的,而egret整个渲染都是基于canvas,所以,你懂的。解决方案就是在egret里面调用原生的<image>,控制位置和src,代码就不贴了

3.声音,困扰很多人的声音,按照官方的改码率、加载完成再播什么的都试了,ios还是破音,android上依旧出现音量无法控制的BUG。终极解决方案,还是回到了原始的html标记<audio>上:
[mw_shl_code=javascript,true]<audio id="bgmMusic" style='position: absolute;' src="resource/music/bgm.mp3" autoplay='autoplay' loop="loop"></audio>
function setBgm(play){
                    var bgm = document.getElementById('bgmMusic');
                    if(play){
                            bgm.play();
                    }else{
                            bgm.pause();
                    }
            }[/mw_shl_code]

4.预览图片,egret无类似功能。预览建议使用weixin的api,不要用原生js那一套,容易有方向的问题

5.上传图片,修改图片尺寸+转base64,坑爹玩意,微信和原生JS那一套都坑爹,我也没有找到合适的方案(eif识别方向,转得慢,识别麻烦),有朋友方法可以跟帖,请不吝赐教。

6.加载,加载模式是egret做微信开发的一个不足的地方。方案一就是压,能用jpg的尽量不用png,用tinyPNG都能压,再次推荐,自己google。方案二就是自己维护加载队列,根据实际逻辑做个先后载的顺序,比如先载入前1-3页的资源,后续的资源丢在后台偷偷的载,一次性把所有资源载完只有=死了。
7.合并JS,参考我这个帖子:http://bbs.egret.com/thread-16765-1-1.html

8.多语言,请使用AssetAdapter,超级tmd的好用(在我做的外包中,有个就用到了双语言,见最后链接)
  a.命名,中文资源命名假如为:bg.png, 则E文命名为 en_bg.png, 就是在需要多语言的资源前面加统一前缀
  b.对于多语言通用的资源,加在unChecks配置表中,手动加
  c.下面的Global.langPre,就是语言前缀标识。AssetAdapter资源返回的时候,一定要用原始的资源标识,不要加前缀,不然eui会无法识别的。
  d.怎么使用这个类? this.stage.registerImplementation( "eui.IAssetAdapter", new AssetAdapter() );
  e.这里负责资源如何获取,如何加载关我鸟事

[mw_shl_code=javascript,true]class AssetAdapter implements eui.IAssetAdapter {
    private static unChecks: any = {
        'mask_png':1,
        'p1_c_png': 1,
        'p3_room0_jpg': 1,
        'p3_room1_jpg': 1,
        'p3_room2_jpg': 1,
        'maskBg_png':1,
        'p6_s9_png': 1,
        'bgComm_jpg':1,
        'p6_default_img_png':1,
        'p0_mask_png':1,
        'p0_cloud_png':1,
        'px_arrow_png':1,
        'p4_arrow_png':1,
        'grid_01_jpg': 1,
        'grid_02_jpg': 1,
        'grid_03_jpg': 1,
        'grid_04_jpg': 1,
        'grid_05_jpg': 1,
        'grid_06_jpg': 1,
        'grid_07_jpg': 1,
        'grid_08_jpg': 1,
        'grid_09_jpg': 1,
        'grid_10_jpg': 1,
        'grid_11_jpg': 1,
        'grid_12_jpg': 1
    };
   
    /**
     * @language zh_CN
     * 解析素材
     * @param source 待解析的新素材标识符
     * @param compFunc 解析完成回调函数,示例:callBack(content:any,source:string):void;
     * @param thisObject callBack的 this 引用
     */
    public getAsset(source: string, compFunc:Function, thisObject: any): void {
        
        
        function onGetRes(data: any): void {
            compFunc.call(thisObject, data, source);
        }
        
        var extSource: string = source;

        if(AssetAdapter.unChecks[source] != 1) {
            extSource = Global.langPre + source;
        }
        if(extSource != source) {
            trace(source + " ==>" + extSource);
        }
        
        if(RES.hasRes(extSource)) {

            
            var data = RES.getRes(extSource);
            if (data) {
                onGetRes(data);
            }
            else {
                RES.getResAsync(extSource, onGetRes, this);
            }
            
        }
        else {
            RES.getResByUrl(source, onGetRes, this, RES.ResourceItem.TYPE_IMAGE);
        }
    }
}
[/mw_shl_code]
9.(4.18号更新)想调用系统原生的alert,prompt,但是又不希望title出现当前的网址?试试下面这个黑科技:
        [mw_shl_code=javascript,true]window.prompt = function(name){ //alert 同理
                    var iframe = document.createElement("IFRAME");
                    iframe.style.display="none";
                    iframe.setAttribute("src", 'data:text/plain,');
                    document.documentElement.appendChild(iframe);
                    window.frames[0].window.prompt(name);
                    iframe.parentNode.removeChild(iframe);
            }[/mw_shl_code]

10.总结,web版egret很多   没有/不稳定/有BUG  的功能都可以借助原生html+JS的解决方案来实现。
给自己打个广告吧: http://bbs.egret.com/thread-16892-1-1.html
入我佛门请往这里:http://bbs.egret.com/thread-15763-1-1.html











分享到 :
12 人收藏
各种上线H5产品展示,个人站点:http://www.nofastfat.com/wp/?page_id=82

138 个回复

倒序浏览
天堂不开饭  登堂入室 | 2016-3-28 12:14:01
希望能看到点干货
nowpaper  初窥堂奥 | 2016-3-28 12:15:01
看看顶一个
Once  斑竹 | 2016-3-28 13:06:19
支持干货
Once  斑竹 | 2016-3-28 13:06:52
支持干货
hushanjing  登堂入室 | 2016-3-28 13:25:24
。。。看着好累!
cfcf  初窥堂奥 | 2016-3-28 13:51:52
半山  登堂入室 | 2016-3-28 13:53:52
希望能看到点干货
run21321  登堂入室 | 2016-3-28 14:29:48
顶                           
hwjb1985  登堂入室 | 2016-3-28 14:30:49
看看看看看
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部