19 year goal: Kill English! I opened a new public account to record a programmer learning English experience
If you want to improve your English, you can follow the public account: CSEnglish programmer learning English, spend 10 minutes every day to hand in homework, learn English with me
preface
Our company uses weeX to ensure the unity of the three terminals. To extend the web development experience, the hops on the three terminals are in the form of URLS, that is, the <\ A > component or the customized openUrl method.
If you click the B button now to go to the /b.html page, write openUrl(‘/b.html’) in the vue file. In H5, simply call window.location.href = /b.html, which will open a view in native, and then download the corresponding B.Min. JSJS file corresponding to/B.html to render the native view. The mapping relationship between pages and JS files and how to maintain weeX support scheme design can browse through the previous article to view the jump rule of App.
Url hopping is used for page hopping. In order to facilitate parameter transfer, we also adopt the form of concatenating parameters after URL to transfer parameters between pages.
Positive transfer and
Both WeeX (Native) and WEEX (H5) are redirected through the URL of the page.
Hypothetical case:
x.com/a.html Go to x.com/b.html?age=12.
1) WEEx (native) > Weex (native) instantiation takes parameters from the URL and passes them into the instance
Note in the WEEX document
Each Weex page is created and destroyed. During the Weex page running, Native has the opportunity to actively send messages to the Weex page. Native has the opportunity to pass in external data when creating a Weex page, and the JS framework has the opportunity to generate different page content for the same JS bundle with different data.
When rendering a WEEx page, native has the opportunity to pass in an Object type data to the WEEx page. The data can be obtained through weex.config.
In our design, Native first intercepts the url of the jump, then intercepts the parameters, and then transmits the parameters to the WEEX instance. This allows us to fetch data through weex.config.age to render different page contents.
[_instance renderWithURL:[NSURL URLWithString:mstrURL] options:[self SHWeexOptionsWithH5URL:mstrH5URL withURL:mstrURL] data:nil];
Copy the code2) weex (web) > weex (web) read parameters from url in weex-vue-render layer, write weex.config
Native implements data transfer in the way mentioned above, so the Web side should also use the same way weex.config.age to obtain the parameter age in the page.
Weex dependency files on the web side of our company are packaged by Webpack, so after the requireweex-vue-render dependency, get the parameters of the current URL and save them into the weex.config object.
require('weex-vue-render'H5 implements the h5 hack to write the page URL parameter to weex.configlet urlParamObj = {};
try {
urlParamObj = utils.parseUrl(window.location.search.slice(1), '&'."=", {maxKeys: 0});
} catch (error) {
console.log('--------------weex.js parseUrl---------------------');
console.log(error);
console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -');
}
for (let key in urlParamObj) {
window.weex.config[key] = encodeURIComponent(urlParamObj[key]);
}
Copy the code3) Native > Weex (native) 4) Native > Weex (Web
In cases 3 and 4, the native weeX is redirected to both weex native (WEEX) and WEEX Web (WEB) in the form of URLS. Example: x.com/b.html?age=12. We also talked about how to write parameters to weex. Config objects in Weex native and on the Web. To get the parameters, write weex.config.age in vue to get the age parameters passed in.
So far, we have unified the forward parameter transmission mode from page A to page B on the three terminals (ios, Android, and H5).
Reverse the participation
1) weexA (native) > weexB (native), return to the weexA page, weexB (native) > weexA (native)
On the order submission page, we can select the coupon and enter the coupon usage page. First, forward transmission will be performed, because the order data of the order submission page will be used in the selection page.
Then select any coupon from the “Select coupons” page and return to the “submit order” page. In this case, you need to bring the coupon data back, which is called “reverse pass”.
We could have used the BroadcastChannel API to transmit data between instances, but the JS Framework of Vue does not support this feature, so we are currently using the globalEvent API to transmit data between instances.
We first added the fireGlobalEvent method to our internally integrated Module, which is called on the coupon selection page.
fireGlobalEvent('getConpon', {
id: '3323',},function () {
if (web) {
} else {
navigator.pop()
}
})
Copy the codeThis method first registers the getCoupon event and then passes the data object
{
id: '3323'
}
Copy the codeFinally, a callback is registered, and the current page performs the callback to roll back the previous page.
On the previous page (submit order page), an event listener is registered to receive data from the event when the event name is triggered.
const globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener('getCoupon'.function (e) {
console.log("get getCoupon")});Copy the codeThis is the implementation in the business logic, so let’s look at what Native does to get back to the previous page and pass the parameter (Android for example).
public void fireGlobalEvent(String name, String data, final JSCallback callback) {
SHStorageManager.putToCache(SHWeexConstants.WEEX, SHWeexConstants.NAME, name);
SHStorageManager.putToCache(SHWeexConstants.WEEX, SHWeexConstants.DATA, data);
if (null != callback) {
callback.invoke(new JSONObject());
}
}
Copy the codeWhen the fireGlobalEvent method is called in a business, Native caches the event name and data that is passed in. The callback function defined in the business is then executed, and the callback contains the navigator.pop() method, which means to exit the current WEEX instance and go to the previous page.
public void onResume() {
if(wxInstance ! = null) { wxInstance.onActivityResume(); String data = SHStorageManager.get(SHWeexConstants.WEEX, SHWeexConstants.DATA,"");
if(! TextUtils.isEmpty(data)) { String name = SHStorageManager.get(SHWeexConstants.WEEX, SHWeexConstants.NAME,"");
try {
JSONObject jsonObj = JSONObject.parseObject(data);
Map<String, Object> params = new HashMap<>();
for(Map.Entry<String, Object> entry : jsonObj.entrySet()) { params.put(entry.getKey(), entry.getValue()); } wxInstance.fireGlobalEventCallback(name, params); } catch (Exception e) { SHWeexLog.e(e); } finally { SHStorageManager.removeFromCache(SHWeexConstants.WEEX, SHWeexConstants.DATA); SHStorageManager.removeFromCache(SHWeexConstants.WEEX, SHWeexConstants.NAME); }}}}Copy the codeThen native will appear on a page, before deposit to cache data and event name, and then call apifireGlobalEventCallback official instance, call the corresponding event, and transfer data.
When the fireGlobalEventCallback method is executed in Native, the event listener on the previous page gets the data.
Thus, the reverse transmission of data in native is completed.
2) weexA (Web) > weexB (Web), weexB (Web) > weexA (Web)
Reverse parameter transfer is easier to handle on the WEEX Web. The AB page is used to transfer parameters in the form of concatenating parameters after the connection. Therefore, the reverse parameter transfer and forward parameter transfer can follow the previous logic.
In the design of THE API, the callback is specially used to determine whether the Web environment is available. Since H5 and Native have completely different behaviors in reverse parameter transmission, the judgment logic is carried out in business, which is more convenient for people to handle different situations when writing business.
fireGlobalEvent('getConpon', {
id: '3323',},function () {
if (web) {
openUrl('/a.html? id=' + '3323');
} else{ navigator.pop(); }})Copy the code