See online article feel pretty good, to be a record.
Profiles
app.json configuration (global)
{
// pages used to configure the path
"Pages": [
"Pages / index / index", // home
"pages / Test / Test" // jump page
],
"window": {
"enablePullDownRefresh": to true // whether to support the pull-down refresh
"backgroundTextStyle": "dark", // refresh the drop-down font color, support Light
"backgroundColor": "# e04c4c", // set the background color of the drop-down refresh
"navigationBarBackgroundColor": "#fff" // set up micro-channel program in the top navigation bar color
"navigationBarTitleText": "yejiawei", // top navigation bar text
"navigationBarTextStyle": "black" // top navigation bar text style, black or White
"onReachBottomDistance": 50 // set from the bottom position of the pull-trigger event
},
"the tabBar": {// set the tab configuration of the switching field
"list":[
{
"PagePath": "Pages and the / index / index", // jump path
"text": "Home", // tab text
"iconPath": "/images/t1.jpg" // set the background FIG path
},
{
"pagePath": "Pages / the Test / the Test",
"text": "Test",
"selectedIconPath": "/ Images / T1 .jpg "// set when you select the picture path
}
],
" color ":" # e04c4c ", // Font color button settings tab
" selectedColor ":" # 000 " , // set the button to select the color
" backgroundColor ": "# 1aad16", // set the background color tab button
"borderStyle": "black", // set tabbar border color, only support Black / White
"position": "top" tabbar // set position, the set top Image not
},
"NetworkTimeout": {
"request": 10000, // timeout request request
"connectSocket": 10000,// connectSocket timeout
"downloadFile": 10000, // download file timeout
"uploadFile": 1000 // timeout upload files
},
"debug": to true // turn on debug mode, the console output program information
}
Page.json configuration (page)
App.json configuration settings to cover the window configuration
{
"navigationBarBackgroundColor": "#FFFFFF", // set the micro-channel program top navigation bar color
"navigationBarTextStyle": "black", // the top navigation bar text style, black or White
"navigationBarTitleText": "micro-channel interface functions demo", // top navigation bar text
"backgroundColor": "#eeeeee", // set the background color of the drop-down refresh
"backgroundTextStyle": "light", // Font color drop-down refresh to support the Light
"enablePullDownRefresh": to true, // whether to support the pull-down refresh
"disableScroll": true, // whether to support scrolling
"onReachBottomDistance": from the bottom position to pull trigger event on 50 // set
}
program entry function (App)
App ({
OnLaunch: function (Options) {
// load the program calls
},
onShow: function (Options) {
// call from the background into the foreground, the default program is first loaded back to the calling
},
onHide: function () {
// switching from front to back calls
},
the onError: function (MSG) {
// given program calls
},
the myFunc: function () {
// custom function
},
GlobalData: {
// custom data globally
the userInfo: "yejiawei"
}
})
the above methods have onShow onLaunch options and parameters, options parameter which has the following properties
{
path: "Pages / index / index" // program opens a path
query: {}, // query can be passed when calling wx.navigateTo
scene: 1001, // open the applet scene value
referrerInfo: {// enter this program from other programs, will return this field
appId: ..., // appId other programs
extraData: ... // data transmission over another program
}
}
may be used var app = getApp (); to obtain the applet instance, console.log (app.globalData.userInfo)
entry function page (Page)
Page ({
the Data: {
msg: state "haha" // page
},
onLoad: function (Options) {// page is loaded trigger},
the onReady: function () {// page rendering is completed trigger},
onShow: function () {// start page rendering trigger},
onHide: function () {// trigger switch to the background page},
onUnload: function () {// page unload trigger},
onPullDownRefresh: function () {// refresh the page drop-down trigger},
onReachBottom: function () {// slip bottom on page trigger},
onShareAppMessage: function () {
// page Supply trigger, you need to return a object, only the definition of this method, will have a forwarding function
return {
title: "Share page", // share the title of the page
path: "/ pages / logs / logs" // share the path to the page
}
},
onPageScroll: function (Options) {// page scroll trigger},
myFn : function () {// custom function
console.log (this.route); // get the current page path
this.setData ({// modify the state
MSG: "haha"
}, function () {
// End status modification, this method is called
})
the console.log (getCurrentPages ()); // get the current page stack instance
}
customData: {// custom attribute}
})
page routing
Methods wx.navigateTo (object) to jump to a specific page and tabbar can not jump to the page (this page reserved)
wx.navigateTo ({
url: '/ Pages and the / logs / logs the above mentioned id = 1?', // Page Road King , can pass the query parameter
success: function () {// perform successfully navigate
the console.log ( "successful jump");
},
fail: function () {// perform navigation failed
the console.log ( "Jump failure") ;
},
complete: function () {// navigation call is completed
the console.log ( "navigation end");
}
})
page methods wx.navigateBack (object) to return to the previous
wx.navigateBack ({
Delta: // 2 Back step 2
})
method wx.redirectTo (object) destruction of the current page, jump to a specific page, the page can not jump to tabbar
use and navigateTo as
methods wx.reLaunch (object) destruction of all pages, jump to any specified page
using the same method and navigateTo
method wx.switchTab (object) tabbar jump to the page
using the same methods and navigateTo
modular
js module.exports and exports files can expose interfaces
exports a reference module.exports of
() function Fn {
the console.log ( "performing the method of introduction");
}
exports.fn = Fn;
method file
var = the require Common ( '../ common.js');
common.fn ();
WXML file details
Binding state
Double variables surrounding braces <view> {{msg}} </ view>
Properties tab double quotes wrapping <view id = "item"> </ view>
double quotes wx content will be converted to a string Therefore true, false intended to express the need to wrap the double braces
bound object, the object does not need braces <template is = "mytemplate" data = "{{a: 1, b: 2}}"> </ template >
list traversal
<View WX: for = "{{[1,2,3,4,5]}}" WX: Key = "Item {} {}">
{{}} index: Item {} {}
</ View>
alias to the index item and
<View WX: for = "{{[1,2,3,4,5]}}" WX: for-index = "myIndex" WX: for-item = "myItem">
{{ myIndex}}: {{myItem}}
</ View>
rendering a multi-node block
<block WX: for = "{{[. 1, 2,. 3]}}">
<View> {{index}}: </ View >
<View> Item {} {} </ View>
</ Block>
traversal string
<View WX: for = "Array">
{{Item}}
</ View>
binding key, when rearranged based on the id assembly state of the component may be multiplexed and components
<WX Block: for = "{{[. 1, 2,. 3]}}" WX: Key = " the this">// when the item is a string or number can use this item as a representative of Key
<View> index {} {}: </ View>
<View> item {} {} </ View>
</ Block>
conditions render
<View WX: IF = "{{to false}}"> haha </ View>
<View WX: elif = "{{to true}}"> haha1 </ View>
<View WX: the else = "{{to false}} "> haha2 </ view>
can also be used to control the multi-node block code block
template
Declare a template
<Template name = "MyTemplate">
<View>
{{A}}: {{B}}
</ View>
</ Template>
Use this template obj: {A:. 1, B: 2}
<Template IS = "mytemplate" data = "{ {... obj}}"> </ template>
events
Bindtap binding events using <view bindtap = "fn" data -my-data = "222"> </ view>
event object
myFn: function (Event) {
the console.log (Event);
custom // start with the data used in the property, and then saved in event.currentTarget.dataset
}
event Category
bubbling event
touchstart began to touch
touchmove touch mobile
touchcancel touch interrupted
touchend touch left
tap instant touch
longpress than 350ms touch
transitionend transition end
animationstart animation starts
animationiteration trigger again after animation execution
animationend end of the animation trigger
non-bubbling events, in addition to the above events are non-bubbling event
binding event
can be used to bind bind and catch
bindtap or bind: tap does not stop bubbling
catchtap or catch: tap to stop bubbling
in WXML file import other files WXML
Mentioned above may template code into a single file wxml, then <import src = "../ common.wxml" /> Import in the current file, you can immediately use
the <include src = " ../common.wxml action "/> is the addition to the template and wxs code, are copied to the location of the include
use wxs (code can be written separately in wxs file may be written in the tag wxs)
Module
In fact, the role and the role of wxs js file is the same, but provides another way to write js
external access code wxs be defined module.exports need to use export
to create a wxs file that defines the following code
var message = " How are you? ";
module.exports.message = the Message;
in wxml file
first use wxs tags into <wxs src =" ../ common.wxs " module =" wxsData "/>
use <view class =" demo "> {{wxsData.message}} < / view>
used in other documents wxs
var = wxsData the require (" ../ common.wxs ");
WXSS file
Dimensions use rpx, RPX a pixel represents a physical
import other file WXSS @import "../common.wxss";
custom components (components and the like inside vue)
To create a custom component
The first step, modifying json
modify json file { "component": true}
second portion, WXML file writing
<View class = "Demo"> {{text}} </ View>
<slot> </ slot>
slot is slot, and the vue as
a third step, WXSS in writing
.demo {color: red;}
use only class selector
fourth section, js file write
the component ({
properties: {
// properties of the component can be specified type, and default values, and the props verification vue like
text: {
type: String,
value: 'default',
}
},
Data: {
// state assembly
SomeData: {}
},
Methods: {
// assembly custom method
customMethod: function () {}
}
})
a fifth step, the components used
in order to use this custom component page, modify his JSON, insert the following fields
"usingComponents": {
"My-Component": "../myComponent/myComponent"
}
using <my-component> </ my -component> In the page assembly can
simultaneously be used <my-component text = "I transferred attribute"> </ my-component> attribute value passed to the components inside
the details of file WXML
Writing and general WXML file written agreement, but more than a slot
with no name slot can only have one, if you are using multiple slot, the following steps need to operate
the first step, in the Component js function, add the following
options: {
multipleSlots: to true
},
the second step, with a plurality of writing the name in WXML slot
<View class = "Demo"> {{text}} </ View>
<slot name = "a"> </ slot>
< slot name = "b"> < / slot>
the third step is used in the page
<my-component text = "I transferred attribute">
<View slot = "a"> I a </ View>
<View slot = "b"> I b </ View>
<my-the Component> /
details WXSS file
Use only class selector
can inherit the style outer component
style definition file app.wxss, invalid component
may additionally use: host to define a style element tag
: host {color: black;}
details js file
Using Component function as
Component ({
Properties: {// property of the component acceptable
myProperty1: {// attribute name
type: String, // type (required), the currently accepted types include: String, Number, Boolean, Object , Array, null (represents any type)
value: '', // initial value attribute (optional), if not specified will be selected according to the type of a
function function (newVal, oldVal) {// the attribute value change listener: observer }
},
myProperty2: // String definition simplified manner
},
Data: {}, // status component
methods: {// set method
onMyButtonTap: function () {
the console.log (this.id); // tag assembly ID
the console.log (this.dataset); // Data component custom property collection
console.log (this.data); // set of attributes and state of the component
console.log (this.hasBehavior ()) // assembly whether the behavior attribute is
this.setData ({}) // attributes and state can be set
/ *
custom events can trigger assembly manually, for example, the component binding a custom event
<my-component bindmyEvent = "myFn "> </ my-component>
to manually trigger myEvent, need to call
this.triggerEvent ( 'myEvent', {
// event parameters
}, {
bubbles: to true, // if bubbling
composed: true, // parent to the internal components of the same name looking events
capturePhase: true // whether capture
}
);
/
}
},
the created: function () {}, // assembly is created in memory implementation
attached: function () {}, // performed before assembly mounted
ready: function () {}, // performed after assembly mounted
detached: function () {}, // assembly is removed performed
moved: function () {}, // assembly moves when performing
Relations: {
/
nested interrelated components will need to use this field
handling the same nested child nodes
assume a nested structure as html
<Custom-UL>
<Custom-Li> Item. 1 </ Custom-Li>
<custom-li> item 2 </custom-li>
</ custom-ul>
the need to custom-li assembly defined below Relations
'./custom-ul': {// path nested parent element
type: 'parent', // associated parent node should be the target node
linked: function (target) {} , // executed when inserted into the custom-ul custom-li, target-UL is Custom
linkChanged: function (target) {}, // Custom-Li is performed after the move, target is custom- UL
UNLINKED: function (target) {} // custom-li executed when removed, target is custom-ul
}
in custom-ul component defined in this field have, but turn into a child type
different nested sub handling node
<Custom-div>
<Custom-span> Item. 1 </ Custom-span>
<div-Custom> Item 2 </ Custom-div>
</ Custom-div>
In this case behavior is necessary to use as a common node of the path, assuming custom-span and has a custom-div named customFormControls behavior of
custom-span, and custom-div internal relations defined manner as before, except that the type change ancestor to
define custom-div
'customFormControls': {
type: 'the descendant', // associated descendant node to the destination node should
target: customFormControls
}
/
},
behaviors: [
/
effect behaviors is used to create a common component js, exactly the same internal code, and Component
behavior ({// ...})
is mainly used to merge the code and the current component, property of the same name of the current main component
* /
]
})
demand loading
Step-demand loading of the following
main tabbar package should contain only
the first step, create sub-folders in the project root directory, sub-page written on the inside of
the second step, add the following configuration in app.json
"subpackages": [
{
"the root": "Package1", // sub-root folder
"pages": [// sub path contained in the page can not be added to the app.json
"pages / Demo / demo "
]
}
]
in tabbar configuration item, sub-page can not be applied
a third step, the use of sub-files
in tabbar page, the page reference sub
wx.navigateTo ({
URL: '../../package1 / Pages / Demo / Demo '
})