weex 多页面之间数据共享有什么好的解决方案？

Question

多页面之间需要共享一些数据，例如：登陆后的用户信息

除了使用 storage 之外，还有其他解决方案吗？

Answer 1

我们是重写了官方的storage模块，增加了数据写入修改删除的监听，实现所有页面的数据交互

新建StorageAdapter接口

package cn.com.lygtq.storage.adapter;

import com.taobao.weex.bridge.JSCallback;

public interface ILygTQStorageAdapter {
    void addListener(String key, JSCallback callback);
}

新建StorageAdapter

public class LygTQStorageAdapter implements IWXStorageAdapter, ILygTQStorageAdapter {

    // 以删除为例，其他可参看原始StorageAdapter实现
    @Override
    public void removeItem(final String key, final OnResultReceivedListener listener) {
        execute(new Runnable() {
            @Override
            public void run() {
                Map<String, Object> oldData = StorageResultHandler.getItemResult(performGetItem(key));

                Map<String, Object> data = StorageResultHandler.removeItemResult(performRemoveItem(key));
                if (listener == null) {
                    return;
                }
                listener.onReceived(data);
                fireListener(key, "delete", data, oldData);
            }
        });
    }
    
    private HashMap<String, List<JSCallback>> mListeners = new HashMap<>();
    private static String mListenerPrefix = "_lygtq_storage_listener_";

    @Override
    public void addListener(String key, @Nullable final JSCallback callback) {
        String listenerKey = mListenerPrefix + key;
        List<JSCallback> callbacks = mListeners.get(listenerKey);
        if (callbacks == null) {
            callbacks = new ArrayList<>();
            mListeners.put(listenerKey, callbacks);
        }
        callbacks.add(callback);
    }

    public void fireListener(String key, String type, Map<String, Object> data, Map<String, Object> oldData) {
        String listenerKey = mListenerPrefix + key;
        List<JSCallback> callbacks = mListeners.get(listenerKey);
        if (callbacks != null) {
            for (JSCallback callback : callbacks) {
                Map<String, Object> eventParams = new HashMap<String, Object>();
                eventParams.put("type", type);
                eventParams.put("data", data);
                eventParams.put("oldData", oldData);
                // callback.invokeAndKeepAlive(eventParams);
                callback.invoke(eventParams);
            }
        }
    }
}

新建StorageModule

public class LygTQStorageModule extends WXStorageModule {

    ILygTQStorageAdapter mLygTQStorageAdapter;

    private ILygTQStorageAdapter ability() {
        if (mLygTQStorageAdapter != null) {
            return mLygTQStorageAdapter;
        }
        mLygTQStorageAdapter = (ILygTQStorageAdapter) WXSDKEngine.getIWXStorageAdapter();
        return mLygTQStorageAdapter;
    }

    @JSMethod(uiThread = false)
    public void addListener(String key, @Nullable final JSCallback callback) {
        if (mLygTQStorageAdapter == null)
            mLygTQStorageAdapter = ability();
        mLygTQStorageAdapter.addListener(key, callback);
    }
}

然后注册adapter、module就可以使用了

Answer 2

如果是navigater切换，官方的说法只能用storage。 如果换成router做单页，用vuex共享数据反而更方便。

Answer 3

我们项目中有两种方法，一、native提供module，weex这边utils封装一层，然后每次从这里取；二、storage，但是一定要注意weex下的异步问题。

Answer 4

我们用的是vue router https://router.vuejs.org/zh-cn/