dcloud离线打包内容分享（第三插件开发、h5到原生，原生到h5）

dcloud离线打包（第三插件开发、h5到原生，原生到h5）

dcloud 官方文档，怎么说呢，貌似没有完整的提供离线打包方法，只说了如何开发第三方插件，但是如何开发第三方插件，写的又不是很详细，并且开发出了第三方插件，如何集成到项目里，貌似根本没有写，本人，也是新手，刚好最近用dcloud开发了一个app，有一点经验，所以把一些经验分享出来，希望能帮到大家！

1.离线打包和在线打包，大家要明白一点，在线打包，人家帮你做了什么。举个例子，语音这块，用dcloud(h5）开发，就一行代码就搞定，为什么呢？因为在线打包，人家把原生调用的一些内容已经引进去了，所以，我们不需要考虑原生的，但是离线打包呢？

2.有的同学可能会问，那怎么样把自己开发的第三方插件，也同样用在线打包的方式打包进去呢？那你想象一下，这可能吗？你知道在线打包的规则吗？除非dcloud官方同意你这么做。

        3.所以，想要离线打包，前提还是，怎么把你开发的app(h5)，集成到原生的android工程中，用eclipse或者android studio 打包你的app，这一块详见 http://ask.dcloud.net.cn/article/526，写的很详细。

       4.按照教程把你的app集成好了之后，先打包测试一下，看是否操作正常，如果没问题，说明你的app集成就对了！此时你再回过头来看第三方插件开发的内容 http://ask.dcloud.net.cn/article/66，你就大概明白怎么回事了，这样第三方插件也就开发出来了，在插件里面，就是java代码开发的内容了，记住Iwebview ，这个很有用，举个例子，你要打开你自己的activity 窗口 ，只需要这样，

GpsSqlLiteConstant.pWebview = pWebview;
Intent localIntent = new Intent(pWebview.getActivity(), OffineMapActivity.class); 这个具体的用法，自己去看源码。

	5.从h5到原生，到这里，大家应该就会搞了，但是从原生到h5,大家应该还是会遇到，所以，我在这里也给大家说明一下，你可以选择在原生activity中集成h5页面，也可以先返回到h5中，再调用h5的页面，个人建议先回到h5中，再调用，因为我们开发就是在h5的app中开发，这样可以保证，引用到的js或者css，都能识别，不需要为了不兼容问题，再花时间，先给大家上一段代码,activity中引用h5页面，

public class SaveInforActivity extends Activity {

    IWebview webview = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       // setContentView(R.layout.activity_save_infor);
        final  FrameLayout rootView = new FrameLayout(this);



        rootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                webview.onRootViewGlobalLayout(rootView);
            }
        });

        // 设置单页面集成的appid
        String appid = "tab_sample_index";
        // 单页面集成时要加载页面的路径，可以是本地文件路径也可以是网络路径
        String url = "file:///android_asset/apps/xxxx/www/views/task/tab_sample_index.html";

        webview = SDK.createWebview(this, url, appid, new IWebviewStateListener() {
            @Override
            public Object onCallBack(int pType, Object pArgs) {
                switch (pType) {
                    case IWebviewStateListener.ON_WEBVIEW_READY:
                        // 准备完毕之后添加webview到显示父View中，设置排版不显示状态，避免显示webview时，html内容排版错乱问题
                        ((IWebview) pArgs).obtainFrameView().obtainMainView().setVisibility(View.INVISIBLE);
                        SDK.attach(rootView, ((IWebview) pArgs));
                        break;
                    case IWebviewStateListener.ON_PAGE_STARTED:
                        // 首页面开始加载事件
                        break;
                    case IWebviewStateListener.ON_PROGRESS_CHANGED:
                        // 首页面加载进度变化
                        break;
                    case IWebviewStateListener.ON_PAGE_FINISHED:
                        // 页面加载完毕，设置显示webview
                        webview.obtainFrameView().obtainMainView().setVisibility(View.VISIBLE);
                        break;
                }
                return null;
            }
        });
        setContentView(rootView);

        final WebView webviewInstance = webview.obtainWebview();
        // 监听返回键
        webviewInstance.setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (keyCode == KeyEvent.KEYCODE_BACK) {
                    if (webviewInstance.canGoBack()) {
                        webviewInstance.goBackOrForward(2);
                        return true;
                    }
                }
                return false;
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }
}
本人亲测，代码完全可靠，可以显示页面，mui.ready,mui.init都可以执行，但是不太推推荐，个人推荐第二种，直接上代码 

Intent intent = new Intent();
intent.setClass(MainActivity.this, io.dcloud.PandoraEntry.class);
startActivity(intent);
如果想跳转之后，直接调用某个方法，这样操作 
GpsSqlLiteConstant.pWebview.evalJS("test('" + 参数 + "')"); 
GpsSqlLiteConstant.pWebview 这个就是Iwebview，test(),这个是h5中写的js方法，大家可以通过 evalJS()方法，调用到h5中写的任何js方法，test方法如下
 function test(tid){
       		mui.openWindow({
				url: '../task/tab_sample_index.html',
				id: 'tab_sample_index',
				extras:{
					tid:tid
				}
			});
       }
至此，我想大家应该就都会了，如果觉得写的还不错，而且帮到了你，请点赞吧，如果有不明白的，请留言！代码的话，请谅解，因为是公司的项目，不方便上传，如果小伙伴有需要部分代码，或者想要一起学习交流的话，请加一下这个QQ群，488505459，一起学习，一起探讨，谢谢！