Detailed introduction to developer tools

The test phone is IPHONE6, developer tool version 0.10.102800. The canvas in the WeChat applet is different from the h5 canvas. The canvas of the WeChat applet is called wxcanvas below. Here are all the dry things I tested little by little. , be patient and watch: 1.wxcanvas does not have width and height attributes and width and height styles like h5canvas. It only has style, which can be understood as a box; 2. Don’t think of wxcanvas as a real H5canvas, just think of it as a p. Things that draw ranges also exist. Changing the width and height will display it, or in other words There is redrawing here, but I don’t know how to implement it specifically; 3. Changing the width and height of the style of wxcanvas does not change the size of the things on the original canvas; 4. The enlargement and reduction in the css transform transformation cannot change the original painting. The size of things on the cloth is 5. Official statement: context is just a container for recording method calls, used to generate records

1. Detailed explanation of wxcanvas in small program development

Introduction: The test phone is IPHONE6, developer tool version 0.10.102800, the canvas non-h5 canvas in the WeChat applet has many differences In the same place, the canvas of the WeChat applet is called wxcanvas

2. Basic style library of the applet--WeUI

Introduction: TODO: Mini program integrates WeUI WeUI is tailor-made for WeChat Web services. WeUI is a basic style library that is consistent with WeChat's native visual experience. It is designed by WeChat's official design team for WeChat Web development, which can make users' usage perception more unified. Contains various elements such as button, cell, dialog, progress, toast, article, actionsheet, icon, etc. 1. Use WeChat developer tools to add a new project MWL 2. Download WeUI...

3. A preliminary study on the technology to achieve the first experience of WeChat mini program developer tools (picture)

Introduction: WeChat mini programs are currently a hot topic, and there are already many related to WeChat mini program development on the market article, I took some time to play with the WeChat applet tonight, and took a look at the implementation of the WeChat applet developer tool. It is developed using Node.js. The UI is developed based on the NW.js framework and supports Windows. Cross-platform with Mac. The first experience of WeChat mini program development tools is of course to first download the WeChat mini program development tool, WeChat Web developer tool download address, and then find a small program source code in WeChat Zhihu WeChat mini...

4. The Alipay mini program was quietly launched on May 4th. How should WeChat take over?

Introduction: In fact, as early as January this year, some netizens revealed that Alipay will also be launched Mini program and posted a screenshot of the developer tool. It is rumored that Alipay will launch the Alipay mini program next week. It is not surprising that WeChat connects offline by scanning the QR code to call the mini program, and offline is what Alipay does. Proud moat.

5. Detailed explanation of asynchronous processing examples in WeChat applet (async/await)

Introduction: I have done both Promise and co, but I finally couldn’t help but come up with the ultimate solution for ES7: async/await. async/await is also used in conjunction with Promise. Let’s take a look at the sample code first. This usage is very similar to the co usage we talked about before: To use async/await in a small program, rely on the WeChat web developer tools The Babel conversion tool is not enough, because some additional Babel plug-ins are needed to compile the code that uses async/await...

#6. Teach you a way to delete WeChat Methods for invalidating projects in web developer tools

Introduction: I use WeChat web developer tools daily to learn and develop our WeChat mini programs. In the process, we may create many mini program projects. There will always be times when I need to delete the ones we do not have. Normally, we can enter the project we want to delete, find the "Delete Project" button under the "Project" menu, and unbind the project from the developer tools (the code will not actually be deleted). However, sometimes we delete the code folder first, or move the location of the code folder, and then return to the developer tools, we will find that we cannot enter the project and cannot delete it...

7. Share a tutorial on setting up a WeChat applet to access the nodejs interface server

##Introduction: I have recently been developing a WeChat application account applet. The background data interface of the applet requires https secure requests, so my nodejs server needs to be able to provide https support. Now I will build the entire https server. Say it. First, I tried the previous expired certificate. When simulating it in the developer tools, I could access the interface normally. When testing it on the mobile phone, the wx.request of the WeChat applet reported an SSL handshake failure error (request error: request : fail ...

##8.

Take you to understand the origin of the mini program

Introduction: After a thorough understanding of how WeChat mini-programs are structured, you may quietly realize that all innovations in react are highly efficient. Based on the virtual DOM, WeChat built a WeChat browser, which is the mini program running environment. (Original link) Attached is the original text address, with some modifications. The following is the text - First, you need the following tools. 1. Mac computer 2. WeChat web developer tool.app 3. WebStorm / other programmers or IDEs, it is best to support renaming first,...

9.

As Developer tools that Python programmers must know

##Introduction: Python has evolved a wide range of An ecosystem that makes the lives of Python programmers easier and reduces the need for them to reinvent the wheel. The same idea applies to the work of tool developers, even if the tools they develop do not appear in the final product. program. This article will introduce the developer tools that Python programmers must know.

##10. Front-end Advanced (6): Observe the function call stack and scope chain. and closure

Introduction: In front-end development, there is a very important skill called breakpoints Debugging. In Chrome's developer tools, through breakpoint debugging, we can very conveniently observe the execution process of JavaScript step by step, and intuitively perceive key information such as function call stacks, scope chains, variable objects, closures, and this. Changes. Therefore, breakpoint debugging plays a very important role in quickly locating code errors and quickly understanding the execution process of the code. This is also an essential advanced skill for our front-end developers. Of course, if you are familiar with JavaScript...

【Related Q&A Recommendations】:

javascript - How to debug low-level IE browsers in the developer tools of IE F12?

javascript - The https domain name configured in the WeChat applet is valid in the developer tool test, but when previewing on the mobile phone, it prompts "not verified". What's going on?

javascript - Have questions when modifying values ​​through developer tools and using jquery's text(), val(), attr(), data() methods to obtain the modified values?

javascript - When looking at other people's code, how can I quickly find where the corresponding event is bound?

javascript - How to get the size displayed when an element is selected in the chrome developer tools?

The above is the detailed content of Detailed introduction to developer tools. For more information, please follow other related articles on the PHP Chinese website!