This article introduces a third-party development tool (WEPT) for WeChat applets)

WEPT, a third-party development tool of Applet development tools. main features of WEPT: real-time update. support for wxmlwxssjavascriptjson is more stable. unlike official tools, there is no restriction on frequent errors, no need to connect to the Internet, and no need to configure CORS at the back, supports mobile browsing. WEPT, a third-party development tool for applet development tools. main features of WEPT: real-time update. support for wxml wxss javascript json is more stable. unlike official tools that often encounter errors, there is no need to connect to the Internet, and no backend CORS configuration is required, supports mobile browsing.

Project address: github.com/chemzqm/wept

WEPT main functions:

Real-time update, supporting wxml wxss javascript json

More stable than official tools

No restrictions, no internet connection, no backend CORS configuration, support for mobile browser debugging

I personally test the availability of Mac and win7. if you encounter a bug, please open issue on github.

Details

WEPT is a real-time running environment for small programs. compared with the official developer tools, WEPT has the following features:

1. full real-time: it fully supports automatic hot update of wxml, wxss, javscript, and json files. after the files are saved, the corresponding changes are automatically updated to the running environment of the applet, developers do not need to re-create or restart the app unless they modify the app. json) does not need to be refreshed. Because there is no refresh, developers no longer need to spend time operating the interface to reproduce the page status before modification. Multi-terminal synchronization is supported throughout the process.

2. more stable: the WEPT mini-program build process is more stable than the official tool, and does not often report the appservice not ready as the official tool, or even directly crash. if a background or mini-program build error occurs, it will immediately give an error notification on the page. If you have installed growl or terminal-notifier, an error message is displayed on the desktop.

3. no restrictions: the applet page generated by WEPT can run on the mobile browser without the need to connect to the Internet. It uses a customized PROXY protocol to forward XHR requests in the background. developers do not need to configure backend CORS for debugging.

4. more APIs: in addition to all officially supported APIs, WEPT also provides gravity sensing and Compass APIs. you can debug them on mobile browsers that support html5 interfaces.

Implementation principle

Simply put, it is a web service that communicates with the frontend in real time with the backend through the WebSocket interface. The required files are dynamically compiled during backend service requests,

The front-end uses iframe to implement multi-party communication and control logic at the view layer, service layer, and control layer pages.

The front-end view layer and service Layer Code come from the latest version of the developer tool (currently 101100,

Slightly modified to support iframe communication and automatic updates), the control layer page is completely re-implemented, with a little React

UI status synchronization.

Install and use

1. First, you need to install node. make sure that the version is later than 6.0. if the version is earlier than, an error may be reported.

2. run the following command in any Directory:

3. npm install-g wept

4. after the installation is complete, run it in the project root directory. download the official demo:

5. wept

You can enable the service and access localhost: 3000 to start debugging (Chrome developer devtools is recommended to enable startup mode debugging ),

You can also change the port through the-p parameter, for example:

Wept-p 4000

Remember to use the IP address of the Lan on your computer when accessing your mobile phone.

API support

The following is the current support for all mini-program APIs:

Setting app. json window

✓ App. json tabbar settings

Login: Currently, the returned status is the same as that of the official tool without appid.

✓ User information retrieval interface: return test data

✗ Initiate payment: the payment is not in the appid status with the official tool and cannot be used.

UI Title setting

Animated bar loading

Redirect page

Renewal pull-down refresh

Animation Creation

Creating a Canvas painting

✓ Get the network status of the mobile phone: WIFI is returned by default

Token to get the mobile phone system information: Same as the official tool, the returned result is a simulated response.

Listen listens to gravity sensor data: supports debugging in mobile browsers such as Safari mobile, not supported by official tools (101100)

Butler listens to the compass data: supports debugging by mobile browsers such as Safari mobile. The official tool (101100) does not support debugging.

Restore request interface

✓ Websocket interface

Upload upload and download files

Secrets

Preview select/preview an image

Videos

Audio recording API

Audio playback control

✓ Background music control

Token to get the current location

✓ Use a native map to view the location

Producer storage synchronization API

Asynchronous API

Future plan

Support for image preview

Wxml, storage, and appData developer tool panel support

Provides desktop tool support

The preceding section describes the details of a small program third-party development tool (WEPT). For more information, see other related articles on php Chinese network!