Weweb is a front-end framework compatible with small program syntax, you can use small program writing method, to write web single-sided applications. If you already have an applet, you can use it to run your applet in your browser. In the popular small program today, it can make your small program code get maximum play, he has the following advantages:

  • Cross-platform, a set of code multi-terminal operation (small program, H5, the future directly packaged into Android, ios app is not a dream)
  • Own commonly used components, perfect inheritance of the small program built-in components
  • Compatible with small program RPX syntax, so that the page is easier to adapt to various models

The project is based on the small program developer tools built-in small program running framework to achieve, we carefully study the small program official bottom framework, the implementation of small program running on the Web side of the service and view engine, in order to make weWeb can adapt to the performance requirements of the Web side, compared with the small program native framework, mainly the following adjustments:

  • The framework core library has been greatly refined to eliminate the irrelevant parts of the Web, so that the size of the core library is greatly reduced
  • The original three-tier architecture is simplified into Service and View two-tier architecture
  • Page resources and built-in components that are not commonly used in frames are loaded asynchronously, reducing the volume of the core library and improving the loading speed
  • Support custom login page instead of wechat login function
  • Remove the page-level restrictions imposed by applets
  • Js versions of WXML and WXSS compilers are implemented to meet cross-platform compilation requirements and seamlessly integrate into weWeb

Applicable scenario

  • Like the development of small program, or only understand small program development, want to write a Web application through the development of small program
  • After the development of a small program, at the same time want to have the same function of the H5 application, and hope to reuse the code of the small program
  • Instead of small program developer tools for small program part of the function in the browser side debugging

The development of

The development method can be used directly in the same way as you used to develop small programs, with no additional learning cost, just after the development of the small program, through the following two ways of running, convert the compiled code into the corresponding H5 application, and then throw the compiled code on the server

run

Install Node on the system first. The official installation package will also install dependency management tool NPM for you

Method 1: Use the CLI tool to convert applets directly

Installation:

npm install weweb-cli -gCopy the code

Run example:

#./demos/demo20170111/ This is where the applet is stored
weweb ./demos/demo20170111/Copy the code

Options:

  • -h, –help Displays the help information
  • -v, –version Displays the version information
  • -o, –open Opens small programs using Chrome, Mac only
  • -l, –list opens the update history using the default browser
  • -p, –port \ Specifies the service port. Default: 2000
  • -d, –dist \ Specifies the build path
  • -t, –transform Transforms applets only, not Web services

Method 2: Manually build and run:

# Clone [weweb] project after installing dependencies
npm i

# Build core library:
npm run build

Run the following command:
./bin/weweb ./demos/demo20170111/

# Compress app code: use the environment variable NODE_ENV=production
NODE_ENV=production ./bin/weweb demos/demo20170111

# Replace the compiler: if the default compiler fails, use the environment variable DFT_CMP=true to switch to the built-in compiler of wechat developer tools
DFT_CMP=true ./bin/weweb demos/demo20170111

Environment variables can be used in combination
NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111Copy the code

Online Demo

The QR code of demo applet is as follows:

Small program TWO-DIMENSIONAL code

Click here to view the weweb compiled H5 online demo can compare the small program and the conversion generated h5 application difference demo source

Matters needing attention

Weweb uses our own compiler to compile WXML and WXSS by default, but the compiler is still in the trial stage, and some cases may not be tested completely. If some abnormal situations are found in the process of using WeWeb, you can try to switch to the official compiler of wechat to see whether the problem can be solved. Welcome to give us an issue if there is a similar problem. We will correct it as soon as possible

Use the environment variable DFT_CMP=true as follows:

DFT_CMP=true ./bin/weweb demos/demo20170111Copy the code

After conversion into H5, there will be some problems that some apis cannot support due to cross-domain access interface and separation from wechat environment. We can solve some common problems by adding weWeb configuration items to the applet’s app.json file:

  • Login: after converting to H5, the native login mode of small program will not be supportedloginUrlItem to set up the callwx.loginIs displayed on the login page
/** * The loginUrl must be the applets registered in app.json */

"weweb": {"loginUrl":"/page/H5login"} call wx.loginSuccess() after successful login; This API can automatically return to the source page sample code: SUCCESS:function(rt){
if(rt.result){
  var login = require(".. /.. /modules/login/index.js");
  app.globalData.userInfo = rt.result;
  login.setLoginInfo(rt.result);
  wx.loginSuccess();
}else{
  toast.show(self,rt.status.status_reason||'Login failed'); }}Copy the code
  • Cross-domain request: If the back-end interface does not support JSONP, you can add a requestProxy configuration item to set the server proxy address for cross-domain request
/** * here /remoteProxy is a proxy interface implemented by weWeb server * in actual projects please change your real proxy address. If the interface supports returning JSONP format, you do not need to do this configuration

"weweb": {"requestProxy":"/remoteProxy"
}Copy the code

Small program conversion into H5 effect description

  • After being converted to H5, related interfaces that depend on the wechat environment cannot be supported, for example, login. You need to modify the interfaces to be compatible with H5
  • Small program conversion to H5, special circumstances, individual style may have some abnormalities, have to adjust compatible

Finally, put our Github address

Github.com/wdfe/weweb.