Introducing a third-party development tool (WEPT) for WeChat mini programs

WeChat mini program development tool Third-party development tool WEPT, WEPT main functions: real-time update, support wxml wxss javascript json more stable, unlike official tools that often make mistakes, no restrictions, no need to connect to the Internet, no back-end configuration CORS, support mobile browsing .

Project address: github.com/chemzqm/wept

Main functions of WEPT:

Real-time updates, support wxml wxss javascript json

More Stable, unlike official tools that often go wrong

No restrictions, no need to connect to the Internet, no back-end configuration CORS, support mobile browser debugging

Personal test available on Mac and win7, if you encounter bugs, Welcome to open an issue on github.

Detailed introduction

WEPT is a real-time running environment for WeChat mini programs. Compared with the currently officially provided developer tools, it has the following characteristics:

1. Completely real-time: It fully supports automatic hot update of wxml, wxss, javscript and json files. After the file is saved, the corresponding changes will be automatically updated to the running environment of the mini program. Developers do not need to rebuild or restart operations at all. In most cases (unless app.json is modified) there is no need to refresh. Because there is no refresh, developers no longer need to waste time operating the interface to reproduce the page state before modification. The entire process supports multi-terminal synchronization.

2. More stable: WEPT's mini program construction process is more stable than official tools. It will not frequently report appservice not ready errors like official tools, or even crash directly. If it encounters background or mini program construction Error, it will immediately give an error reminder on the page. If you have growl or terminal-notifier installed, it will also pop up an error reminder on the desktop.

3. No restrictions: The mini program pages generated by WEPT can run on mobile browsers, and the use process does not require an Internet connection. It uses a backend to forward XHR requests through a custom proxy protocol that developers can debug without configuring backend CORS.

4. More APIs: In addition to supporting all officially supported APIs, WEPT also implements gravity sensing and compass APIs. You can debug on mobile browsers that support the corresponding html5 interface.

Implementation Principle

Simply put, it is a web service that communicates with the backend in real time through the WebSocket interface and the frontend. The required files are dynamically compiled when the back-end service is requested.

The front-end implements the multi-party communication and control logic of the view layer, service layer and control layer pages through iframe.

The front-end view layer and service layer codes come from the latest version of WeChat developer tools (currently 101100,

slightly modified to support iframe communication and automatic updates), control The layer page is completely re-implemented, using a little React

for UI state synchronization.

Installation & Use

1. First you need to install node. Please make sure the version is greater than 6.0. Lower versions may report errors.

2. Then run it 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 start the service, visit localhost:3000 to start debugging (it is recommended to use Chrome developer devtools to enable startup mode debugging),

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

wept -p 4000

Remember to use the LAN IP address of your computer when accessing via mobile phone.

API support status

The following is the current support status of all mini program APIs:

✓ app.json window settings

✓ app.json tabbar settings

✓ WeChat login: currently returns the same status as the official tool without appid, and returns

for simulation ✓ Get user information interface: return test data

✗ Initiate payment: Same as official tool, no appid status, cannot be used

✓ Set interface title

✓ Title bar loading animation

✓ Page jump

✓ Pull down to refresh

✓ Create animation

✓ Create Canvas painting

✓ Get mobile phone network status: Return to WIFI by default

✓ Get mobile phone system information: Same as the official tool, the return is simulation return

✓ Monitoring gravity sensing data: Supports mobile browser debugging such as Safari mobile, the official tool (101100) does not support

✓ Monitoring compass data: Supports Safari mobile Waiting for mobile browser debugging, the official tool (101100) does not support

✓ request request interface

✓ websocket interface

✓ Upload and download files

✓ Save file

✓ Select/Preview image

✓ Select video

✓ Recording API

✓ Audio playback control

✓ Background music Control

✓ Get the current location

✓ Use the native map to view the location

✓ Storage synchronous API

✓ Storage asynchronous API

Future Plan

Image preview function support

wxml, storage, appData developer tool panel support

Provide desktop tool support

The above is the detailed content of Introducing a third-party development tool (WEPT) for WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!