# WeChat Web Development - Getting Started Guide

This article describes how to get started developing WeChat web pages.

WeChat Web page, that is, when ordinary web pages run in WeChat built-in browser, you can have some WeChat capabilities to achieve.

Before you get started, you need to have a basic foundation in web development. If you are starting out with nothing, you can learn front-end web development first or try to learn something simpler. WeChat Weixin Mini Program

# I. Prepare before starting

First, prepare a basic web page

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>微信网页开发</title>
    </head>
    <body>
        <div>这是内容</div>
    </body>
</html>

Web page html file upload to the server (back-end server, object storage, etc.), through a specific URL access to the browser access.You can even open it directly with the local development tool, usinglocalhost,127.0.0.1, etc.

The effect of visiting in the browser: At this point, you can copy the same URL to WeChat desktop chat box, send the link message, you will find that in the WeChat built-in browser to open the same page.

At this point, you are ready to open the web page in the WeChat built-in browser.

Depending on your front-end stack, you may be native web developer, or you may be using frameworks such as Vue, React, etc.Whether it's local or remote server development, whatever the form, as long as you can continuously encode the open web page, you've done the pre-positioning.

# II. Applying for Developers

Because the WeChat built-in browser does not open the debug console, there are also some special triggers that are not easy to simulate.So the WeChat development team made WeChat developer tool for web development, which makes it easy to develop and debug on a PC or Mac by simulating the behavior of the WeChat client.

In addition, specific support for WeChat web pages is dependent on Service Account and you must be a developer of a service number to be able to do development debugging work with that service number.

The process of binding as a Service Account web developer is as follows

# 1. Log in Service Account Manage background Enter the corresponding service number.
# 2. In Setup & Development - Development Interface Management - Developer Tools - Web Developer Tools, bind the developer WeChat number.

The corresponding developer's WeChat number must pay attention to the "Service Account," after binding you can use the account in WeChat developer tools AppID debugging development.

Each Service Account can bind up to 50 developer WeChat numbers simultaneously.

# III. WeChat Developer Tools

Download WeChat Developer Tool , use WeChat to scan the code to login, click on "Service Account Web" to develop.

When opened, the display looks like the following figure: The various functional areas are somewhat tagged in this diagram. The next step is to explain the functions of the functional areas:

# 1. URL Enterer

The main input to debug the page address, support local and cloud URL (as long as you can access the local browser, you can use to fill in)

  • On the left side of the input box is the "Refresh" button, which can be clicked to force the page to be refreshed.
  • To the right of the input box is the "Favorites" button, which is similar to the bookmark function in the browser. You can select pages that you often need to debug by clicking the icon of URL on the star in the address bar.Uncollectible is also very simple, you can uncollectible by clicking on the star of the URL you have already collected.
  • After the collection button is the "collection folder" button, after the collection you can see the collection in the folder.
# 2. simulator

The content of the URL will be rendered in the simulator, in mobile style by default. You can modify the model and display ratio of the simulator in the upper left corner of the emulator to complete page development in various scenarios.

# 3. Debugging the console

The developer tool is integrated with Chrome Dev Tools, and the operating experience is consistent with the normal browser, which is not described here.

# 4. toolbar

"Preview" button, the current URL will be converted to a two-dimensional code, so that you can directly use WeChat open the terminal scan code.

The Clear Cache button mainly cleans the cache of content that is opened in the current emulator and is used to simulate business scenarios such as unopened.

# 5. Cloud development

WeChat The integrated back-end service capabilities of the development team facilitate developers to achieve front-end development, rapid on-line and iteration without building a server.

Specific content can be read in detail Cloud development

# IV. WeChat Capacity development

Now, you can officially develop a WeChat web page. There are three main contents:

content introduce
Web authorization Through this mechanism, user identification information is obtained and business logic implemented.(Supported by Service Account only)
JS-SDK WeChat built-in browser to provide a set of capabilities, developers can complete the corresponding action through the SDK interface.
Open labels WeChat When the built-in browser opens a page, it renders a specific tag into a corresponding component to accomplish a specific task.

You can access the various documents and learn about them.

# V. Cloud development

Developers can use cloud development Weixin Mini Program, MiniGame, Service Account,You can use cloud capabilities without building a server.

Cloud development provides developers with full native cloud support and WeChat service support,Weaken back-end and operational concepts, eliminating the need to build servers and using the platform's APIs for core business development, enabling rapid up-to-date and iterative development, while this capability is compatible with and not mutually exclusive to the cloud services already used by developers.

Cloud development provides several basic capabilities to support:

ability Effect Introductions
Cloud Functions No need to build your own server Code running in the cloud, WeChat private protocol natural authentication, developers only need to write their own business logic code
data base No need to build your own database A JSON digital library that can be operated on the Weixin Mini Program front end and read and write in cloud functions
storage No need to build your own storage and CDN Directly upload / download cloud files in the Weixin Mini Program front end, and visual management in the cloud development console
Cloud Calls Native WeChat Service Integration The ability to use Weixin Mini Program open interfaces without authentication based on cloud functions, including the ability to call and access open data
Static Website Hosting No need to build your own website resource server Website resources can be developed in the cloud and even offer a default domain name for use

Detailed cloud development documentation is available Detailed documentation

Documentation used in Service Account Visible Using Cloud Development in Web Pages

# VI. WeChat Developing style library

WeUI is a foundational style library consistent with the native visual experience of WeChat, which is tailored by the official WeChat design team for both the WeChat intra-web pages and the Weixin Mini Program, which makes user usage more consistent.Using WeUI in WeChat pages or mini programs has the following advantages:

  • The same visual effects as WeChat on your account, making it easier for all WeChat users to use your website or Weixin Mini Program
  • Easily accessible and quickly used, reducing development and design costs
  • WeChat Design team carefully crafted, clear, concise and generous

The style library currently contains forms, basic components, operational feedback, navigation-related, search-related, hierarchical specifications, etc., and is open source on GitHub .

Visit http://weui.io or WeChat to scan the QR code to preview.