A micro channel small program
which is to develop a hybrid manner.
Is installed in the micro-letter (a program space up to 2M).
1.1 Registration
1
Small micro-channel application development combat tutorial
2 Click Register Now: Go to the bottom of the page
3
Small micro-channel application development combat tutorial
4 Click on the small form-filling program to enter page
5
Small micro-channel application development combat tutorial
submitted after 6 completed, will let you go to the mailbox activated. After activation you can enter a small program development.
1.2 Installation Development Tools
1.1 After registration, we have developed an account, but there is no way to develop content out of thin air, we need to download the development tools. Using development tools provided by the development of micro-channel.
download link:
1 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
After entering, you will see allows you to choose the version information.
1
Development combat micro-channel applet tutorial
selecting a corresponding version installed. For example: My computer is windows64 bit operating system, then I would choose Windows 64-bit
After clicking it will start the download
1
Development combat micro-channel applet tutorial
After the download is complete, to obtain an installation package
1
Small micro-channel application development tutorial combat
double-click the installation, the next step until the end of the next step.
After installation, it will automatically open the login screen. There is a two-dimensional code, the two-dimensional code is scanned through the micro channel login.
After logging
1
Small micro-channel application development combat tutorial
1.3 project to create small programs
Click the image above applet project
1
Small micro-channel application development combat tutorial
project directory: the directory where the project is
AppId: id applet. You will get a id have been registered. You can enter it.
We do not sign up, click only small test program for testing
Project Name: The name of your current projects created which is unique.
After completed:
1
Small micro-channel application development combat tutorial
establish common Quick Start template: If you check the demo will automatically create a case under the project directory
After clicking OK, the editor will start
1
Small micro-channel application development combat tutorial
preview window: a small program you write the preview window, you can click on is actually a phone simulator
Function window: many function buttons
Directory Project status: directory structure
Code Editor window: Code can edit
Debug window: the process of writing the code, debugging, output will be here some information. There are also features of the console also functional structure of the document.
1.4 Directory Structure Description
1.4.1 pages
This folder is used to put all the small page program needs.
The folder is a subfolder, each sub-folder represents a page.
Created out of the default pages in two: 1 index represents the index page 2 logs on behalf of logs page
1.4.2 utils
This folder is used to put all the tools. can delete.
1.4.3 app.js
This file, called the application builder.
The entire configuration of the application, there can be in writing, mainly lifecycle functions and global data applications.
Global script file
App({
/** onLaunch
- When the applet initialization is complete, it will trigger onLaunch (Global triggers only once)
*/
/** onShow
- When the applet is started, or from the background into the foreground display will trigger onShow
*/
/**onHide
- When the applet from the foreground into the background, it will trigger onHide
*/
/** onError
- When a small script error occurs or api call fails, it will trigger an error message and bring onError
*/
})
1.4.4 app.json
This file is a small program configuration files.
Configuration is the content of the applet.
This is a JSON file requires the use of compliant JSON syntax.
key must use double quotes
There can not comment
You can not have a comma after the last attribute value of the object
pages: the current configuration page applet during operation needed
Its value is an array, each member is on the path is essentially a paging file is in the description of index.wxml but you can omit the suffix
It has a feature: If, after you finish adding an item and save the files and folders not yet exist, it is created automatically
window: configuration interface of the applet
"window"
"BackgroundTextStyle": the text background color
The background color of the navigation section: "navigationBarBackgroundColor"
"NavigationBarTitleText": Navigation Header text
"NavigationBarTextStyle": Navigation Text Color
"TabBar": bottom button
"List": Each button configuration in which there is an array
Member of the array is an object
"PagePath": Click on the button when the jump page to which the value of the property must be an item pages array
"Text": Text
"IconPath": icon path,
"SelectedIconPath": when the icon is selected path
1.4.5 app.wxss
In fact, css files. Content inside it is global style configuration. Similar to our reset.css
This is a global style file. It will be automatically applied to all pages.
1.4.6 project.config.json
This is the configuration for the project.
1.5 Local File
pages is a folder, the folder is a subfolder, each sub-folder represents a page.
Subfolders within:
1.5.1 Local script
.js files: files in the local script only works on the current page
Page({
/**data
- The initial page of data
*/
/** onLoad
- Lifecycle function - listen for page loads
*/
/**onReady
- Lifecycle function - listen first page rendering is complete
*/
/**onShow
- Lifecycle function - page display monitor
*/
/**onHide
- Lifecycle function - monitor page Hide
*/
/**onUnload
- Lifecycle function - monitor page unload
*/
/**onPullDownRefresh
- Page-related event handler - the drop-down monitor user actions
*/
/**onReachBottom
- Pull the bottom of the page event handler
*/
/**onShareAppMessage
- Users click on the upper right corner to share
*/
})
1.5.2 local style
wxss files located within the page, is for the local style of the current page. app.wxss together responsible for the global style of the current page. If there is a conflict, precedence wxss style of the current page.
1.5.3 page skeleton
Wxml page within a file, build a skeleton for the current page.
Html tags within the document, we call elements.
Tags within wxml file, we call components. Because of the html element is encapsulated. So called components.
Second, the mixed-use development
just a content distribution starts from the beginning of the browser, and later the WebApp.
You are essentially doing things on the page end.
Hybird is a mixed-use development. It means: a development, multi-terminal use.
Small micro-channel program is part of mixed-use development.
Mixed-use development in three forms:
1 hybird browser rendering
2 reactnative native API
3 micro-channel applet
Third, the property
for a html, the content is constituted by the label. For JS, we called the label as "elements."
For a wxml, the content is constituted by the label. For JS, we become tagged as "components."
In fact, wxml is on the html tag is encapsulated. After packaging, not the elements, but the component. Nor can you use jQuery and other content.
3.1 Common Properties
For html tags for
Standard attributes two parts
It is all part of the tag has attributes (common property)
Tag is another portion of some of the unique properties (specific attribute)
For wxml label for
Standard attributes two parts
All labels are part of the property (common property)
Tag is another portion of some of the unique properties (specific attribute)
wxml of common attributes:
id id components
class used to style the form of the class
style inline style
hidden components used to hide
Custom data- * attributes
the bind | the catch event properties
Non-common attributes:
src attribute image component and the like
Fourth, data related to
the desired page data corresponding to an object definition js file. Attribute name is called data.
Small micro-channel data-driven program belongs.
Data pages are required for the initialization must be defined.
Data rendering process is the process corresponding to the data into the page. (Interpolation process)
Interpolation Syntax: {} {}
Note: It does not provide a true inside the js environment, just a fake environment. You can only perform simple operations without being able to call method.
We met before interpolation syntax:
underscore: <%=%>
MVC in: <%%>
ejs中: <%%>
In ES6: $ {}
In less: @ {}
In sass: # {}
4.1 Interpolation
Interpolation template:
1 <view>{{num * 2}}</view>
2 <view>{{title.toUpperCase()}}</view>
Interpolation data definitions:
1 data: {
In 2: 123,
3 title: "aichuangketang"
4 }
After the rendering:
1
Small micro-channel application development combat tutorial
4.2 modify the data
To use a page to modify the data:
this.setData(option);
option is a target
key: To modify the properties of the string may be a single level hierarchy may be multilevel
value: the value corresponding to the key is to be modified
demo:
Before you change the data:
1
Small micro-channel application development combat tutorial
change the code:
1 onLoad: function (options) {
2 var me = this;
3 console.log ( "index page page loads")
4 setTimeout(function() {
5 me.setData({
6 title: "Ashoka classroom"
7 "obj.name": "王老四"
8 })
9 console.log(me)
10 }, 3000)
11 },
After executing the code:
1
Small micro-channel application development combat tutorial
4.3 data loss
Change the data, must be modified by the setData method. Because it is a method of providing a micro channel.
If dot syntax or grammatical brackets directly modify the value of a property. It can not be rendered on the page. This is called data loss.
Note: Try to change only the critical information.
demo:
Before you change the data:
1
Small micro-channel application development combat tutorial
change the code:
1 setTimeout(function() {
2 me.data.title = "Ashoka classroom";
3 console.log(me.data)
4 }, 3000)
Status:
1
Small micro-channel application development combat tutorial
page states:
1
Small micro-channel application development combat tutorial
data has been modified, but the page does not change.
Fifth, the event
according to the characteristics of the event, there are two types
All components have events General Event
touchstart touch start
touchend touch end
touchmove Touch Mobile
touchcancel Touch Cancel
tap tap
longtap Press
longpress Press
transitionend transition is complete
animationstart animation begins
animationend end of the animation
animationinteration animation execution once again trigger
Another type is some peculiar events (a) specific components
For example submit event of the form
According to the binding mode of the event, it can be divided into two categories
One is a bubbling event
bind[eventName]
The other is not bubbling event
catch[eventName]
5.1 Binding bubbling event
Component structure:
1 <!--pages/event/event.wxml-->
2 <view bindtap='parent'>
3 <view bindtap = 'show'> I is a component </ view>
4 </view>
Js code corresponding to:
1 // pages/event/event.js
2 Page({
3
4 /**
* Page 5 of the initial data
6 */
7 data: {
8
9 },
10 // definition of show events
11 show: function() {
12 console.log ( "click me");
13 },
14 // definition of parent events
15 parent: function() {
16 console.log ( "Click to father")
17 }
18 })
After clicking: two events will output
1
Small micro-channel application development combat tutorial
5.2 binding does not bubbling event
Component structure:
1 <!--pages/event/event.wxml-->
2 <view bindtap='parent'>
3 <view catchtap = 'show'> I is a component </ view>
4 </view>
Code
1 // pages/event/event.js
2 Page({
3
4 /**
* Page 5 of the initial data
6 */
7 data: {
8
9 },
10 // definition of show events
11 show: function() {
12 console.log ( "click me");
13 },
14 // definition of parent events
15 parent: function() {
16 console.log ( "Click to father")
17 }
18 })
After clicking: Only Event child element of the parent element does not trigger trigger
1
Small micro-channel application development combat tutorial
5.3 event object
View event object:
1
Small micro-channel application development combat tutorial
list to change the finger: changedTouches
currentTarget: component binding events
id: id current component
offsetLeft: left value of the distance parent element of the assembly
offsetTop: top value from the parent element of the assembly
dataset: the custom data component
detail: finger position
target: the component that triggered the event
timeStamp: page load time to event-triggered intervals
touches: a list of fingers
type: type of event
. . . . . To be continued. . . . .
For more information on the front of the head