1. The program code constituting the small
Through the development of tools to quickly create a wechatdemo project. Project generated inside the different types of files:
.json for Profile
.wxml a template file, the equivalent of HTML templates
.wxss as a style file, equivalent to HTML CSS style sheet
.js script logic file for the JS, HTML equivalent of js script
A description of the overall program of the app
Multiple pages describing each page
A project IDE configuration file project.config.json
A common library program logic utils
2. A small part of the main program (named app) three files, must be placed in the root directory of the project
Files Required role
app.js small program logic is
app.json applet common configuration is
app.wxss applet common style sheet No
2.1 a description of the overall program of the app app.js file (registration applet project)
2. Do not defined in the App (function) in the call getApp (), you can use this app to get the instance.
3. Do not call getCurrentPages when onLaunch of (), then page has not been generated.
4. By getApp () after acquiring instance, Do not attempt to call the lifecycle methods.
corresponds to the ApplicationContext, the whole applet context are to use, i.e. the entire service applet scope.
app.js program body layer is formed using this access logic, using getApp () .js page in the logical layer. property name can be accessed.
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
one hydrochloride () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
onLaunch (Object object)
applet is triggered when the initialization is complete, the global trigger only once. Parameters can also be used wx.getLaunchOptionsSync get.
Parameters: Consistent with wx.getLaunchOptionsSync
onShow (Object object)
applet start, or trigger the display from the background into the foreground. You can also use wx.onAppShow binding listen.
Parameters: Consistent with wx.onAppShow
onHide ()
applet is triggered from the foreground into the background. You can also use wx.onAppHide binding listen.
onError (String error)
applet is triggered when a script error or API call error occurred. You can also use wx.onError binding listen.
Parameters: Consistent with wx.onError
onPageNotFound (Object object)
foundation began to support the Library 1.9.90, low version is compatible with processing to be done.
Applet page to open when there is no trigger. You can also use wx.onPageNotFound binding listen. Note Refer wx.onPageNotFound.
Parameters: Consistent with wx.onPageNotFound
App development documentation portal
2.2 a description of the overall program of app.json app file (configuration applet project)
Role: Path of small micro-channel global configuration program, the decision of the page file, show window, set the network timeout, set up a multi-tab and so on.
All configuration options Pages and the, window, tabBar, NetworkTimeout, Debug
App.json configuration items list:
Attribute Type Required Description
pages String Array is set Page path
window Object No Set the default page of window performance
tabBar Object No Set the bottom of the tab performance
networkTimeout Object No set network timeout
debug Boolean No enable or disable debug mode
"pages": [
// Here's the first page displayed as Home
"pages/index/index",
"pages/logs/logs"
],
// applet to add / reduce page, you need to modify the array of pages
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"NavigationBarTitleText": "demo"
"navigationBarTextStyle": "black"
},
Property Type Default Description Minimum Version
navigationBarBackgroundColor HexColor # 000000 navigation bar background color, such as # 000000
navigationBarTextStyle string white color of the navigation bar title, supports only black / white
navigationBarTitleText string wechat navigation bar title text
navigationStyle string default navigation bar style, only supports the following values: default default styles; custom custom navigation bar, leaving only the micro-capsule letter button upper right corner of the client 7.0.0
The background color backgroundColor HexColor #ffffff window
backgroundTextStyle string dark style drop-down loading of only supports dark / light
BackgroundColorTop string #ffffff background color of the top of the window, only the channel support micro-client iOS 6.5.16
Background color backgroundColorBottom string #ffffff bottom of the window, only the channel support micro-client iOS 6.5.16
Are enablePullDownRefresh boolean false to open the drop-down refresh the current page. See Page.onPullDownRefresh
Distance from the bottom of the page, the unit is px pull on the bottom onReachBottomDistance number 50 page event is triggered. See Page.onReachBottom
pageOrientation string portrait screen rotation is provided to support auto / portrait / landscape display area in response to a change See 2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false set to true, the whole page can not scroll up and down. Valid only in page layout, you can not set up in the app.json
usingComponents Object No custom component configuration page 1.6.3
style string default enabled a new version of component styles 2.10.2
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
},
{
"pagePath": "page/weui/example/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"Text": "Extended Components"
},
{
"pagePath": "page/API/index",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
},
{
"pagePath": "page/cloud/index",
"iconPath": "image/icon_cloud.png",
"selectedIconPath": "image/icon_cloud_HL.png",
"Text": "Cloud Development"
}
]
},
If the applet is a multi-application tab (bottom or top of the client window has tab bar to switch the page), the performance of the specified item bar tab, and the tab corresponding to the page for the handover can be configured via tabBar.
receiving a list array can be configured with a minimum of 2 and a maximum of 5 Tab . tab array sorting order, each item is an object.
tabBar configure the portal , the portal in detail more than I do here. . .
3. Description plurality of pages each page (catalog pages every page stored in the applet)
File action required
page name .js This page logic is the logic
page name .json this page to configure whether
the page name .wxml structure of this page is
the page name .wxss this page style sheet No
js logic layer 3.1 page (registration page)
The logical layer of the page: its main function is the "registration page", each page directory / page name .js
pages use registration: registration with app.js applet project function App (Object) similar use
Page (Object); Object {} represents the object parameters, the initial data of the page designated lifecycle functions, event handlers and the like.
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
When you create a page execution //
},
onShow: function() {
// executed when the page appears in the foreground
},
onReady: function() {
// The first time the page rendering is completed execution
},
onHide: function() {
// execute page from the foreground becomes background
},
onUnload: function() {
Destruction // executed when the page
},
onPullDownRefresh: function() {
// execute the trigger pull-down refresh
},
onReachBottom: function() {
// executed when the page bottom
},
onShareAppMessage: function () {
// page is executed when users share
},
onPageScroll: function() {
While the rolling // page
},
onResize: function() {
// executed when the page size changes
},
onTabItemTap(item) {
// execute when you click tab
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// incident response function
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// free data
customData: {
hi: 'MINA'
}
})
3.2 json configuration page (page name .json)
Each page can also be used to configure the file .json window performance this page.
Configuration page is much simpler than app.json global configuration, just set the content window of configuration items app.json, page configuration items will cover the same configuration items app.json in the window.
.json page can be set only window-related configuration items to determine the window performance of this page, there is no need to write the key window.
Summary: Each page .json (page configuration), in fact, on the window of configuration items app.json inherit overwrite
Application: app.json configured to enable the pull-down refresh on, but some pages do not need, then you can rewrite disabled in the page name in .json. Another example is the title of each page, but also needs to be rewritten.
{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"NavigationBarTitleText": "micro-channel interface functions demo"
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}
All app.json the window configuration items in the page name in .json all be overwritten's,
but the page name .json configuration has its own characteristics is app.json global configuration which is not small.
Property Type Default Description
disableScroll Boolean false Set to true then the whole page can not scroll up and down;
only valid in page.json, you can not set this in app.json in.
View layer (.wxml page name and page name .wxss) 3.3 pages
WXML (WeiXin Markup Language) is a markup language designed framework, combined with the base component, the event system can be constructed structure of the page.
Data Binding
<!--wxml--> <view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
Rendering list
<!--wxml--> <view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
Conditions rendering
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
Custom Templates
WXML providing a template (Template), can then call in different places in the code fragment defined templates.
<!--pages/item/item.wxml-->
<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>
Using Templates
Is the use of property, use of a template declaration required template and then pass the required data, such as:
<!--pages/index/index.wxml-->
<import src="../item/item.wxml"/> <template is="msgItem" data="{{...item}}"/>
<!--pages/index/index.js-->
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
Scope Template
Template has its own scope, you can only use the data as well as incoming data template definition file defined in the <wxs /> module.
3.4 WXS
(WeiXin Script) is a small scripting language program, combined with WXML, you can build the structure of the page.
WXS and JavaScript is a different language, have their own syntax, and JavaScript are not consistent.
4. Under the root directory project.config.json
1) The project configuration file or configuration file called IDE project
On the "micro-letters developer tools" to do any configuration is written to the file.
2) Scenario:
Usually when using a IDE development tools, you will do something for your own design personalized configuration,
Such as color interface, compiler configuration, etc., when you change another computer to reinstall the tools, you have to be reconfigured.
3) The solution: is this project.config.json IDE project configuration files
When you reinstall the tool or work for the computer, as long as you load the same project code package,
Developer Tools will help you automatically return to the customized configuration of the time when you develop the project,
Which will include the editor of colors, the code is automatically compressed when uploading a series of options, etc.
4). The idea
That being said, each project can be customized set of their favorite IDE configuration
5. A shared library program logic (util directory)
This directory can customize the name
Public function js files, each page in the pages using the exposure by way of module.exports
Each page does not need to write duplicate Js code.