Using the micro-credit program to develop the front-end "QuickStart" _javascript tips

Objective

In the early hours of September 22, 2016, micro-letter official through the "micro-letter public class" public number issued on the micro-credit program (micro-letter application number) of the beta notice. The whole circle of friends instantly exploded like a pot, with various speculations and introductory articles born in the night. It is said that only 200 public numbers have been received in the closed-beta invitation.

Although the number of limited places is very rare, but rely on the Chinese developers to crack and share the spirit of the network quickly appeared on the development tools cracked version and API documentation. However, it may be the micro-letter compromise or already expected, September 24, micro-credit official released the Micro-trust program can be used without crack developer tools and documentation, for the effort to crack the developers should be a moment the whole people are bad.

The following are the development tools and documentation addresses provided by the micro-letters:
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418

As a front-end developer with the spirit of the geek, I also immediately tried the water in this craze and downloaded the Applet development tool. Below is the landing interface:

From the overall layout, this IDE tool can be divided into three parts, first on the left is the navigation operation area, the middle is the directory or display area, the right side for the debugging area (much like the Chrome Debugging tool). I will be the front end of the angle from the point of view of the code and macro point of view of the micro-trust program.

Code angle

Throughout the development document, the front-end technology of micro-credit program can be divided into "framework", "Component" and "API interface".

1. The framework

Micro-letter provides a set of its own front-end framework for the development of small programs, and the current mainstream front-end framework compared to both the same place, there are special places.

The special place is that it can only be used in the micro-trust program development tools, and has made relatively strict use and configuration restrictions, developers must be in accordance with the usage of their provisions. Some external frameworks and Plug-ins are not available in the applet, and because the framework is not running in the browser, JavaScript cannot be used in some of the web's capabilities, such as Document,window.

The similarity lies in the fact that it contains the same "logical layer" and "view Layer" as other frameworks, data-driven, and not manipulating DOM elements. The following is an example of code:

(1) Data binding

<!--wxml-->
<view> {{message}} </view>
//page.js
page ({
 data: {message
 : ' Hello mina! '
 }
})

The page () method is used to register a webpage. Accepts an OBJECT parameter that specifies the page's initial data, lifecycle functions, event handler functions, and so on. How is this at first glance similar to the current popular Vue framework syntax, the Vue code is as follows:

<view> {{message}} </view>
//page.js
new Vue ({
 data: {message
 : ' Hello mina! '
 }
})

All are double bracket interpolation syntax, even the data initialization and two-way binding format are the same, well, let's just be a coincidence.

It should be noted here that the micro-letter applet provides the wxml suffix of the file type, in fact, is similar to XML tags language files.

(2) List rendering

<!--wxml-->
<view wx:for= "{{array}}}" > {{item}} </view>

Page.js
Page ({
 data: {
 array: [1, 2, 3, 4, 5]
 }
})

Such a list rendering grammar believe that the students have learned angular and Vue are relatively easy to master, are very similar, of course, conditional rendering and so on.

(3) Event binding

<view bindtap="add"> {{count}} </view>

Page ({
 data: {
 count:1
 },
 add:function (e) {
 This.setdata} ({
 data:this.data.count + 1< c17/>})
 }
)

If you have studied react, then there is a setstate method that can be used to change the value of the state, and here the setdate is the same, using the binding Add method to change the value of count in the view.

(4) Style import

/** common.wxss **/
. small-p {
 padding:5px;
}

/** APP.WXSS **/
@import "COMMON.WXSS";
middle-p {
 padding:15px;
}

Here the applet provides yet another new type of file suffix WXSS, used to describe the Wxml component style, which provides style import functionality for precompiled languages like sass and less, as well as the RPX and REM unit size features.

(5) Modular

Common.js
function SayHello (name) {
 console.log (' Hello ' + name + '! ')
}
Module.exports = {
 Sayhello:sayhello
}

var common = require (' common.js ')
Page ({
 hellomina:function () {
 Common.sayhello (' MINA ')
 }
})

Micro-Letter Small program adhering to the JS modular mechanism, familiar with require.js or sea.js students should be very familiar with, here through the Module.exports exposed objects, through the require to get objects.

2. Component

Small program components are actually part of the framework, mainly responsible for UI rendering, but also with some features and micro-letter style style. Basically, the components that are commonly used on the mobile end are included, such as form components, navigation components, media components, and so on. The following are the eight types of components provided by the applet:

For small program components are not very complex to use, according to the use of the sample document can be easily handled, detailed address: https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1474644085698

3.API interface

In contrast to the development of micro-credit, the micro-credit program provides developers with more API interfaces, which can easily be tuned to provide the ability of micro-letter, such as monitoring gravity sensors and compass data, websocket connection, payment function. The following is an example of an API that initiates a network request:

Wx.request ({
 URL: ' test.php ',
 data: {
 name: ' Luozh ',
 age:18
 },
 header: {
 ' Content-type ': ' Application/json '
 },
 success:function (res) {
 Console.log ("successful Request")
 },
 fail : function () {
 Console.log ("Request Failed"
 }}
)

Wx.request initiated the HTTPS request. A micro-mail program, at the same time only 5 network request connection. For more information on API interfaces, please refer to the official documentation.

The above is about the micro-credit program front-end code part of the simple introduction, I believe that a bit of front-end framework to use the experience of the students are relatively easy to start with, the following will be explained from a macro perspective I personally believe that the micro-letter applet to the front end of the field of impact.

Macroscopic angle

Micro-Letter Small program came out, online about its impact on the front end of endless, more articles and comments that the front-end again fire, the front of the second spring, JavaScript and HTML5 of the new era came.

Of course, the emergence of micro-credit program will bring some effect to the front end, but the birth of any thing is the pros and cons coexist, micro-trust procedures are no exception. The following is a brief description of my personal opinion:

1. Lee

(1) Improve development compatibility: Micro-letter applet can be said to redefine the app, so that an application in the Android, iphone and Windows Phone can be run, for the front-end to achieve a "compile, run everywhere" concept.

(2) Promote the development of front-end technology: micro-letter Applet with its simple development environment, so that the JavaScript and HTML5-oriented front-end technology in the vast micro-social groups spread, more and more people began to contact the front-end, to participate in the front-end coding and design to contribute to the front-end technology.

(3) Other ...

2. Disadvantages

(1) Increase front-end workload and learning costs: The original front-end engineer is responsible for a wide range of platforms, including the PC end, mobile end, app applications, micro-letter applet will require the front-end involved in the development of micro-letter applications, to a certain extent increased the cost of learning and work. At the same time, enterprises will increase the cost of development and investment.

(2) Front-end competition is becoming increasingly obvious: the emergence of micro-credit programs may attract a group of backstage, app development and other areas of the personnel to the front-end development, and these are inherently strong logical thinking or strong perceptual thought people will squeeze out those in front of the edge of the novice, Could make most low-level front-end developers risk losing their jobs or finding work.

(3) Other ...

Here is a brief introduction of a few micro-letter procedures to the front end of the impact, more people can be added.

Summarize

From the point of view of code and macroscopic, this paper expounds the content and influence of the micro-letter applet in the front-end field, hoping to help the developers who do not understand the micro-trust program to get started and understand this new technology field quickly.

As for the effect of small programs on the front end, we can also say that:

The development of technology is not based on a platform to change, but through technology to drive a platform change, it is because the development of the front-end to the birth of the "small program" this possibility ...

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!