Know weexplus

Weexplus is based on the official weeX secondary development release. Weex and React Native are the same generation 2 cross-platform technology, which solves the problems of low performance and poor experience of the first generation, while maintaining the first generation multi-platform one set of code, based on the Web technology stack, support dynamic release and all other advantages. — Weexplus scaffolding author

The development of

  • Run the development environment (node environment is installed by default)
$ npm install  weex-toolkit -g
$ npm install weexplus -g
$ git cloneXXX // Download the project to local $cd$NPM install $NPM run dev $NPM run weexplusCopy the code

  • How do I request data? Front end has been sealed net module, how to use https://weexplus.github.io/doc/mo-kuai/netwang-luo-fang-95ee29.html

  • How does the page pass parameters? Use the navigator navigation controller module implements mass and specific reference documentation (https://weexplus.github.io/doc/mo-kuai/notify.html)

  • How do I get parameters? Through weexglobalEvent module addEventListener monitored onPageInit module events (specific reference documentation at http://weex.apache.org/cn/references/modules/globalevent.htm L)

The pit

  • No error was found in the reported file (as shown below). Solution: Create a file config.json according to the path specified in the reported error

  • Slow network speed, taobao mirror installation
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code
  • Return bug (save data to return multiple layers)
Var notify= weex.requiremodule ('notify');
notify.regist('twoPlusListTab',(p)=>{
    this.status=p.index;
})
navigator.setPageId('twoPlusList'); Var notify= weex.requiremodule () {requix.remodule ();}'notify');
notify.send('twoPlusListTab', {index:0}); / / the nav refs. BackTo ('twoPlusList'); // Return to the listCopy the code
Var notify= weex.requiremodule ('notify');
notify.regist('twoPlusListTab',(p)=>{ this.status=p.index; }) // Need to be set in global event listenersetPageId
globalEvent.addEventListener("onPageInit", () => {
    navigator.setPageId('twoPlusList'); Var that = this; var notify=weex.requireModule('notify');
notify.regist('threeUnlinkList',(p)=>{ that.refresh(); // The last action page is returned to the list page twoPlusList, which needs to be written to the data request callback function net.post("sinochem/tripartiteContract/add", query, res => {
    modal.toast({ message: "Saved successfully!" });
    var notify=weex.requireModule('notify');
    notify.send('twoPlusListTab', {index:0}); // Send the parameter to the list page notify.send('threeUnlinkList', {})// Communicate with the page to be refreshed navigator. BackTo ('twoPlusList'); // Return to list page});Copy the code

Common code block

  • Alert window (weex debug has a bug that can’t be used on Android. Sometimes you need to use this to make artificial breakpoints.
var modal = weex.requireModule('modal');

modal.alert({
    message: 'This is a alert'Duration: 0.3},function (value) {
    console.log('alert callback', value)
})
Copy the code
Modal. alert({message:'This is a alert');
Copy the code
  • The Confirm dialog box pops up
// Modal. Confirm ({message:'Do you confirm ? 'Duration: 0.3},function (value) {
    console.log('confirm callback', value)
})
Copy the code
// Modal. Confirm ({message:"this is message",
        okTitle: "Confirm",
        cancelTitle: "Cancel"
    },
    function(obj) {
        if (obj == "Confirm") {
            modal.alert({message:'confirm'});
        } else {
            modal.alert({message:'cancel'}); }});Copy the code
  • Regular match
// Can only enter numbers, can not enter negative numbers (amount, area)if(! (/ ^ [-]? [0-9] * \.? [0-9]+(eE? [0-9] +)? $/).test(this.area)||this.area<=0){ modal.toast({message:'Please enter the correct contract area'})
    return false;
}
Copy the code
// Verify id numberif(! (/(^\d{15}$)|(^\d{17}([0-9]|X)$)/).test(p.identityCode)){ modal.toast({ message:"Please enter the correct ID number." });
    return;
}
Copy the code

The document

  • Weexplus document weexplus. Making. IO/doc /
  • Weex weex.apache.org/cn/guide/ official document
  • Weex Stomp pit walkthrough juejin.cn/post/684490…
  • Vue official document cn.vuejs.org/
  • In the process of using weex tech.dianwoda.com/2017/12/25/ the pit…

other

  • Use vscode as the recommended editor: download address