I believe the recent graduates have been introduced on various micro-channel applet refresh, we should also be concerned about the rise of this new stuff, but for learning Android development, iOS development of students, it may be difficult to do to get started right away, it is difficult to to understand what this is, that this article will briefly explain to you the following questions in theory.
1. What is the procedure of small micro-channel
technology stacks. 2. applet developed micro-channel is used, and its detailed explanation
applet development framework 3. Micro letter provided
I believe that through this article, you at least for micro-channel will have a little more program intuitive understanding, but also to use some simple development. Then look at the contents of the first part of what micro-channel program is a small, take a look at this before the official explanation.
We offer a new open capabilities, developers can quickly develop a small program. Applet can be easily access and dissemination in the micro channel, while having a great experience.
What small micro-channel program
has two first micro-channel applets these five words the most important word, is a small, one program, meaning we were to see the expression of these two words.
Program
first is the word program, small micro-channel program provides native experience, rather than H5, in theory, small micro-channel program provides a fully native experience.
How that micro-channel to achieve it? Overall micro-channel by means of a React Native of four, that React Native below I will be referred to as RN, on RN specific description please refer React Native Chinese nets, and micro-channel applet is basically based on RN frame design principle of their own to tinker with a wheel, why do I say that, please refer to small micro-channel framework principles.
In other words, micro-channel is a cloud operating system, you can develop a program that runs micro letter, your program is entirely similar to the native experience, as you use the Android SDK to develop a program that runs on the same Android phone while you develop a program for the micro-channel can run on Android, on iOS, all local micro letter, your program can run.
Small
though micro-channel small program can provide approximate native experience, but we do not panic, micro-channel applet is far from impossible to replace the native applications, there are two reasons:
First, micro-channel is bigger then complete, only one program, in micro letter inside play <Hearthstone legend> this big game, think I felt uncomfortable.
Secondly, micro-channel running iOS and Android, the micro-channel itself is limited, Apple can not make his own life micro letter to leather, so small micro-channel program itself will be subject to many restrictions.
But the client developer or development it is necessary to understand some of the small micro-channel program, which would also be able to know ourselves.
Technology stack
This section briefly introduce micro-channel small program used to some of the knowledge and knowledge of these simple to understand, about the following aspects:
HTML
CSS
JS
HTML
HTML we often use similar layout, is a language similar to XML documents, using tags to describe the structure of a page. HTML look at a simple example:
1.<!DOCTYPE html>
2.<html>
- <head>
- <meta charset="utf-8">
- <title>HelloWorld</title>
- </head>
- <body>
- <img src="hello_world.gif"/>
- <a href=" https://baidu.com"> This is a hyperlink </a> ;
- </body>
12.</html>
Some of the concepts above examples
lhtml, head, body, called tags, name tags labels.
limg label is a picture, you can set the image path through the property img src, to find a path through the picture.
la label is a hyperlink tag to link to the target set by the href, and a label is called open label content between close tag, the content of a label is a label to display text on the page.
This is a common HTML structure, you can copy and see through this example, we basically have been able to grasp the HTML syntax, and our layout is very similar, but pay attention to the label such as a label wording, and we usually the wording is slightly different.
HTML grasp here is almost up, not too get to the bottom of these labels is basically useless in the development of small micro-channel programs, micro-channel will have its own label components, but we must understand this writing job.
CSS
We've already talked about the wording of HTML, let's simply look at some of the basic features of CSS.
First of all, used to describe HTML page structure, it is important, that is to say, the main role is what HTML elements on a page describing roughly arranged, roughly in the order, not on the page looks. It looks elements (or what we call control), for example, what font size, what color, appearance or call these things on the show, described by the CSS, including the relative positions, are described in CSS.
To illustrate the role of CSS and writing, we do an extension of the earlier program.
1.<!DOCTYPE html>
2.<html>
- <head>
- <meta charset="utf-8">
- <title>HelloWorld</title>
- <style>
- .img_simple {
- border: 1px solid #ccc;
- padding: 5px
- }
- </style>
- </head>
- <body>
- <img class="img_simple" src="hello_world.gif"/>
- <a href=" https://baidu.com"> This is a hyperlink </a> ;
- </body>
20.</html>
Observant students may find out more than a style tags, style tags do not seem to be written in XML, that this is our CSS, similar to JSON, CSS is represented by the colon-separated key-value by a semicolon It represents a separation between the different attributes.
CSS understand the wording of later, then we carefully explore the CSS principle.
l If you give a label to add modified (looks) property, we need to find the tag
main components lCSS There are three
² selector
² location attribute
² element attributes
we one by one to interpret it:
Selector
Selector is through somehow find a label, for example, we have written above, the first to add a class attribute of the img tag img_simple, then .img_simple select the tag in the CSS, you can add a CSS attribute to the label, which is also similar to what we usually written findViewById.
Location property
in Android, we used some of the layout and position properties to determine the location of an element that the CSS if you want to determine the position of an element, it can usually only position attributes, and attribute position is similar to Android in our layout_marginLeft paddingLeft Wait.
Element attribute
element attributes is similar to what we used to the Android development textColor textSize other attributes.
Development of small micro-channel program does not directly use HTML, but basically it directly using CSS, so CSS still need to learn about where not to proceed with some of the specific details of the CSS continue the discussion, but provides us with several very good articles such as CSS Getting the best manual, Flex layout in CSS syntax, CSS3 profile, to facilitate your more detailed understanding of CSS.
JavaScript
this section I am going to explain in detail, at the same time and do a comparison of Java
variables and data types
1.var i = 10;
2.var S = "the Hello";
3.var BOOL = to true;
4.var arr = [1 , 2,. 3];
5.var the Array new new ARR = (. 1, 2,. 3);
declaration of variables and JS significantly different Java
· JS var keyword used to declare variables, can not use the particular type of variable
o because the variable is no data type can be changed at any time at run-time variable data types
· JS also has the concept of data types, `= 'followed by what type of data in general is what type
o numeric, which is unlike Java, Java int and float have points, but no JS
o string, the character js no data type declaration string while js can be used when double quotes may be used single quotes
o boolean
o array, the array has two ways to declare the way, they are completely equivalent
· different from Java, JS only two scopes, one is the global scope, one is a function scope, in JS between the curly braces are not every is a scope, it should be noted that
the function
1.function funName ( arg1, arg2) {
- // function body
- return value;
4.} -
6.funName (10, 20);
Clearly defined JS function in different ways and java
-JS is not private, and private qualifiers, either variable or function did not
function argument JS does not declare the variable name indicates it can, because the JS and has no concept of variable types, variables can be any type
· JS call the function exactly the same way and Java, the function name (parameter 1, parameter 2), to keep this in mind, it is important
-this define how the function is called a function literal in JS, in a nutshell is the literal representation of a function
function JS is also a data type, which is a huge difference and Java, in JS functions are first-class citizens, can be transmitted can be assigned, and a function type is as follows
1.var funName = function (arg1, arg2 ) { - // function body
- return value;
4.} -
6.funName (10, 20);
as defined above, an anonymous function syntax and define a normal function of a slight difference
· anonymous function is to declare a function variable, and the value of the variable is a function declaration, but this statement without function name
declarative statements and literal function · anonymous function is essentially equivalent, only a slight difference, is the function declared this way, we can use this function later in a statement the code, but this is not literal limit
* this function is very significant statement illustrates a problem, JS function is a data type, but the function is not in Java, Java function only in the literal definition of the way, not a value
-in fact, literally Create function of the amount, and ultimately JS engine processing procedure which is converted in this way by storing
the following function to make an extension
1.function funName (arg1, arg2) { - // function body
- return value;
4.} -
6.var fun = funName;
-
8.fun (10, 20 is);
* in the JS Either way function declaration, which is a value, and the value can be assigned to other variable
-function calls are assigned different functions and
calling a function by a function o name () way, remember there are brackets behind the
o and the function as variables when their assignment is a direct function name
o this point to keep in mind
the object
known, JS has no notion of the type of (not accurate), but this without prejudice to the JS is an object-oriented language, there are still JS inheritance and aggregation, JS achieve the object-oriented approach and a different Java, JS is a prototype-oriented language, it belongs to some of the senior JS skill, no special attention, but you know, can not declare a type JS, JS objects in a more similar to the concept in Java Map of
the above mentioned we define the way an array of JS, let's look at how to define objects in a JS
1. var obj = { - property1: "nihao",
- property2: 10,
- property3: true
5.} -
Object obj = new new 7.var ();
8.obj.property1 = "NiHao";
9.obj.property2 = 10;
10.obj.property3 = to true;
this way, you will find it and like JSON , while in the Map collection like a Java
-objects are some of the key-value pairs, each key-value pair is to declare a variable is an object in JS property
, there are two ways · declare the object, called an object literal first amount, the second way is a normal statement
· Whatever declaratively, in the use phase, if the assignment target attribute exists, modify its value, and if not, create and assign
However, students may not understand the JS the function that simple, then how complex functions, then we are going to look at how to add a function to an object
1.var obj = { - property1: "nihao",
- property2: 10,
- property3: true,
- sayName : function(arg1, arg2) {
- return value;
- }
8.} -
10.var obj = new Object();
11.obj.property1 = "nihao";
12.obj.property2 = 10;
13.obj.property3 = true;
14.obj.sayName = function(arg1, arg2) { - return value;
16.} -
18.obj.sayName ();
this is the way to add methods of an object, the signature has been introduced, in JS function is a data type, can be copied to a variable, we also introduced, in fact, object properties variable, it is well understood, add a method to an object, the object is to give a variable assignment on a function of the type of data it
summarized
above is JS simple syntax-based, focus on this part of Java and some different, more specific Please refer to the manual of grammar is very simple, for all of us, simple Kanji Yan, also pretty close grasp of the
HTML, CSS, JavaScript manual
micro-channel applet
next step is to enter the learning phase of the micro-channel applet, small micro-channel program is not difficult, but because we did not come into contact with the front-end development, it may not be easy to understand, practice a small case, there will be a deeper impression
before you start, there is little need to emphasize that although the program uses a small micro-channel a large number of front-end development of technology, but the small micro-channel native program, and the code can not be executed in the browser
environment
1. obtain a small micro-channel path Sequence AppID
Now that micro-channel or an applet inside stage, so we should have no qualifications inside, including me did not, so this step can be omitted
2. Install the IDE
1. Download
Windows64 bit IDE download
Windows32 bit IDE download
2. all the way to the next step to
3. new project
1. open the program has been installed
2. using micro-channel scan two-dimensional code to log on the phone
3. click the plus sign to create a new project
3. fill out the information, first input box no point AppId
4. Click Add Item, so far the project has successfully created a small micro-channel program
selection editor
in JS area, under normal circumstances do not use integrated development environment, that is, we often say IDE, similar to the Eclipse, AndroidStudio , IntelliJ IDEA and other
front-end developers more will to choose Atom, Sublime, EditPlus, etc. comes with some quick features editor, because JS is a dynamic language, and as such do not need to compile and run
we are doing development process micro-channel applet , you can use tools micro-channel provided in the editor for development, you can choose any editor that you want to use, edit text directly to
tools micro letter provided incidental editor is VS Code of core editor
core the concept of
a micro-channel program is actually similar to a small Android application development model is very similar to components used are very similar, then simply elaborate on the development of a micro-channel applet process
1. create project
2. write app.js file, similar to Android in the Application class
3. write app.json configuration file, similar to what we in Android Manifest Single-file, used to configure the project, the registration page
4. Write specific pages
of public documents
applet public document mainly refers to three app.js, app.json, app.wxss, respectively, look at these three documents the role of each of
app.js
similar to the manifest file in Android manifest for lifecycle event acquisition program, declaring global sharing of methods and data
app.json
We use app.json file path to global configuration of small micro-channel program, the decision of the page file, show window, set the network timeout, set up a multi-tab and other
app.wxss
applet common style sheets, similar to what we in Android Manifest in the application node configuration theme
layered
micro letter applet core concept of development, the stratification is a very important part, now first look at Android stratification in the
logical layer, which is usually written in our Activity
· view layer, that is, we usually written document layout
before the following list, briefly explain the development of small program modules, or components we called Android,
the reason why small program, called modules, because the applet not as complicated as Android, and no Service, Provider, BroadcastRevicer and other components, modules just a page, similar to the Activity Android in the
above is MVC Android stratification we often say that the system provides, in the development of small micro-channel program provides framework (framework), but also draws on many existing JS framework (React, Vue), due to the JS itself These characteristics, as well as the order of micro-channel applet is also relatively light, so the engineering, micro-channel small program to do some of the more thoroughly, and more specifically the hierarchical
micro-letter team for most of the existing program to do some analysis and found common the logic levels are: data logic, page (data presentation) and navigation (between pages)
For example, we take Weibo APP example:
data logic: people I am concerned, I am a fan of microblogging users send microblogging, these micro-Bo and data organization, such as by concern for grouping and so this type of data related to part with.
Page: The presentation of data, such as I am concerned about the people of microblogging list, a user of the microblogging home page, article pages, and so long microblogging.
Navigation: Jump between pages. For example, from the micro-blog list page can enter the micro-blog details page, click on the microblogging Posted avatar can enter personal home page, and so on.
Because of these considerations, micro-channel is given a development framework that name is MINA, the frame has the following portions in section of the page:
the logical layer
js file
view layer
wxml file storing the HTML code, the HTML this part is not native HTML code, but micro-channel offers its own set of labeling system
wxss file storage CSS code, CSS code here basically native CSS, CSS3 can support
some of the concepts brief introduction about the core, following by a small example to examples of how to develop micro-channel applet
IMDb interface
process
1. establish a project and configuration files
o create app.js global object, a method of obtaining watercress server data in the global object
o configuration Checklist
method o provide access watercress in global server
2 . New movie listings page
1. create a file to write wxml page structure
2. create wxss file to describe the style of elements in the page
3. create js file to retrieve data from the server watercress, and displayed on the screen
watercress open API
Douban is a well-known site, which has information related to movies, we have the example of the work performed Hit movies that pull information watercress server, and then presented through the list of
methods of data acquisition server watercress
IMDb provides an open API, the interface will be able to get a call
request address
https://api.douban.com/v2/movie/in_theaters
parameter
parameter is encapsulated in a json string included sending in the request body
parameters are supported :
· start a where to begin
· the total length of the count data
point here for more documentation
of engineering structures
· root directory, the root directory contains a number of project files and global file, there is generally the following three
oapp.js have App function, for example to obtain the entire applet life cycle, similar to the Application class in Android
oapp.json entire file is registered applet, similar to Anroid of Manifest
oapp.wxss positive sequence of the entire public CSS, similar to Android in the Application of Theme
· pages and the catalog, pages directory for storing all pages
omovies folder, hit movies list
get data to write logic §movies.js movie in this file, similar to the Activity Android in
§movies. the spatial structure of the file wxml movie page, similar to Android in the Layout
§movies.wxss movie store page, CSS, Layout is decorated
a small way Program developer, each page corresponds to the three documents, js, wxml, wxss, this is a good start is to create the
Create Project
In this step, mainly to create a project file, as well as some configuration files, similar to our Android in the Application, manifest and other
app.js
first look app.js, the main purpose is to get the file applet instance, access applet lifecycle
1.App ({ - onLaunch: function() {
- }
5. The})
App.json
This file is used to configure the applet, following some configurations, each configuration corresponding to the hyperlink is described in detail
next look at this code sample configuration file1.{ - "pages" : [
- "pages/movies/movies"
- ],
- "window" : {
- "backgroundTextStyle":"light",
- "navigationBarBackgroundColor": "#000000",
- "NavigationBarTitleText": "hit movies"
- "navigationBarTextStyle":"white"
- },
- "networkTimeout": {
- "request": 10000,
- "connectSocket": 10000,
- "uploadFile": 10000,
- "downloadFile": 10000
- },
- "debug": true
21.}
可以是用生成工具来生成配置文件
由以上得知, 这个程序只有一个页面, 就是pages中配置的movies页面, "pages/movies/movies" 这个配置的含义是, pages目录下, 有一个movies目录, movies中是具体的页面代码, 一共有三个文件, 分别是movies.wxml, movies.wxss, movies.js
app.wxss
app.wxss 是全局的样式表文件, 全局所有页面都会应用到这个样式表中所描述的样式
1.page {
- font-family: -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
- height: 100%;
- width: 100%;
- background-color: #fff;
- display: flex;
- flex-direction: column;
8.}
这个文件主要描述了全局所有的页面的基本主题, 包括字体, 宽高, 背景颜色等, 具体的CSS语法请参照手册, 这个文件中的语法就是标准的CSS3语法
movies页面
每一个页面对应的都有三个文件
·js文件, 其中存放js代码, 用于获取页面的生命周期, 请求网络等
·wxml文件, 其中是html的语法, 但是不是标准的html, 是微信自己的一套标签体系, 用来描述页面的结构, 控件之间的关系等
·wxss文件, 其中是标准的css语法, 用来描述页面上的控件的长相, 类似于字体, 颜色等
js文件
下面来看一下这个电影列表的js文件
1.// 调用Page方法, 传入一个匿名对象, 这个对象中可以包含页面的生命周期回调函数, 可以包含默认的用于显示的数据
2.Page({ - // 用于显示的数据
- data: {
- items: []
- },
- // 当页面加载完成时被调用
- onLoad: function() {
- // 页面加载完成的时候, 请求网络数据, 并设置给页面
- var page = this;
- getDoubanMovies(function(res) {
- // 通过这个方法, 可以将数据设置给页面
- page.setData({items: res.data.subjects});
- }, function() {
- });
- }
21.}) -
23.// 获取网络数据, 传入两个函数, 分别是成功和失败的回调
24.function getDoubanMovies(onSuccess, onFailed) { - var API_URL = "https://api.douban.com/v2/movie/";
- var params = {
- count : 20
- };
- // wx.request是微信提供的网络请求框架, 小程序开发的时候只能使用wx提供的api, 而不能使用ajax调用
- wx.request({
- url: API_URL +
in_theaters, - data: params,
- header: {'Content-Type': 'application/json'},
- success: onSuccess,
- fail: onFailed
- })
- }
和Android开发时最大的不同是, 小程序中可以将数据提供给layout(wxml, html), 在layout中写简单的js代码来获取数据并显示
接下来, 页面已经获取到数据了, 一起来看一下如何将这些数据显示在页面上
wxml文件
在看代码之前, 大家一定要知道一件事, 通过在js中调用Page.setData()方法, 可以将一个对象传给wxml文件, 在wxml文件中可以获取这个传入的数据, 并且可以通过{{ html中的代码 }}这种方式来在wxml文件中包含简单的js代码, 接下来简单的看一下如下代码
1.<scroll-view class="container_scroll" scroll-y="true"> - <block wx:for="{{items}}">
- <view class="item">
- <image class="poster" src="{{item.images.small}}"></image>
- <view class="meta">
- <text class="title">{{item.title}}</text>
- <text class="sub-title">{{item.original_title}}({{item.year}})</text>
- <view class="artists"><text>导演：</text><text wx:for="{{item.directors}}"> {{item.name}} </text></view>
- </view>
- <view class="rating">
- <text>{{item.rating.average}}</text>
- </view>
- </view>
- </block>
15.</scroll-view>
以上就是整个布局文件, 这里面使用了很多组件, 类似于Android中的控件, 微信小程序提供了很多组件, 便于我们进行开发, 基本能够满足日常的开发需求, 组件列表请查看官方组件文档
·scroll-view, 类似Android中的ScrollView
·block, 是语句控制标签
·view, 是类似于Android中的四大布局, 但是这个地方只有一个布局
这个地方不是特别容易理解, 请参照微信官方说明来仔细练习一下, 并且通过这个代码的运行, 思考一下这个地方
wxss文件
这个文件不是很重要, 这个文件主要用于描述布局中的元素的长相, 这个也是前端开发中的惯用技巧, 和我们在Android开发的时候直接在layout描述页面长相不同, 前端开发中布局和样式是分离的, 便于修改和控制
这个部分内容比较多, CSS本身也比较复杂, 酌情了解就可以
1..container_scroll { - display: flex;
- flex: 1;
- flex-direction: column;
5.} -
7..item {
- display: flex;
- padding: 20rpx 40rpx;
- border-bottom: 1rpx solid #eee;
- cursor: pointer;
12.} -
14..item .poster {
- width: 128rpx;
- height: 128rpx;
- margin-right: 20rpx;
18.} -
20..item .meta {
- flex: 1;
22.} -
24..item .meta .title,
25..item .meta .sub-title { - display: block;
- margin-bottom: 15rpx;
28.} -
30..item .meta .title {
- font-size: 32rpx;
32.} -
34..item .meta .sub-title {
- font-size: 22rpx;
- color: #c0c0c0;
37.} -
39..item .meta .artists {
- font-size: 26rpx;
- color: #999;
42.} -
44..item .rating {
- font-size: 28rpx;
- font-weight: bold;
- Color: # f74c31;
48. The}
These are small examples of this code, so far has been to achieve full
completion of the project
and the development of Android is different is that at the time of the end of a project, the compiler does not need to, because this is the front-end dynamic languages to direct the implementation of the program, and without confusion ah like, then we will continue to look at how to submit
Since I do not have a developer account, we will not have anyone, small micro-channel program this time is not yet open beta, so generally know how to submit to, at a later beta can re-contact the
last word
micro-channel technology uses a small set of front-end development, it may be more trouble to understand, but we do not need to worry about different languages and Android JavaScript front end and the like, JavaScript and HMTL, CSS is more simple, we simply look at, to get started quickly.
At the same time, any new technology, the best way to learn is through official documents, but because we may not be very clear front-end technology, so hope that through a number of incomplete, simple description, a small example, and lead us into this door, but we certainly hope to see more official documents.