Micro letter Developer Tools New Project
Tutorial: https://blog.csdn.net/michael_ouyang/article/details/54923784
C: \ Users \ Administrator \ WeChatProjects \ applet-1
1. The test page is added app.json
Open global file app.json, add "pages / test / test" (to add a directory test page is located) in a file inside
2. Global Object get
In app.js you have a page GlobalData , which is a global object. Add a property info: " Hello "
Case 1: In a non- app.js other files js obtain documents
By getApp () Example acquired global, resources can be acquired global object
In index.wxml you add a file button
getApp () After obtaining global objects, can be obtained app.js global property
app.globalData.info
Case 2: In the current app.js acquisition (file F5 to refresh run the project):
Get in the current file, then only need to use this to get it on behalf of the current object
6. Jump
wx.navigateTo () and wx.redirectTo () the difference:
wx.navigateTo () is to retain the current page, jump to a page after the jump page can return to the previous page.
wx.redirectTo () is off the current page, jump to a page, can not return to the previous page after the jump.
Method One: index.wxml:
In index.wxml a new button component and use bindtap event binding function
index.js: In index.js of P Age internal function, add changeToTest Inside the function used wx.navigateTo , the need to write a page jump, which is passed an object, the object provided with url attribute corresponding is the path to the page jump needs (note: this is a relative path is received, and the page does not require .wxml suffix)
Method two:
Use API wx.redirectTo () function (button supra)
Method three:
Using Components <navigator>
Jump parameter passing
To wx.navigateTo example:
About the above , wx.navigateTo incoming url is jump page ( use relative paths)
wx.navigateTo({
url:"pages/home/home"
});
Then the parameters passed to the next page, you only need to back path, add? question mark,? Followed by contact parameters to Key - value manner.
Here a pass value for the two parameters
wx.navigateTo({
url:"pages/home/home?type=2"
});
Then home.js in () the onLoad function values obtained : option.type can be obtained as follows:
onLoad: function (option) {
this.setData({
type:option.type,
});
console.log(option.type);
}
7. Title Bar navigation bar
The title bar window
in app.json files inside, set by the window object inside the property
Example: App.json:
navigation
Navigation bar TabBar
If our small program is a multi- tab application (bottom or top of the client window has a tab bar to switch pages), then we can tabBar configuration item designated tab performance bar, and a tab corresponding to the page displayed when switching.
The Tip : by page jump ( wx.navigateTo ) or redirect page ( wx.redirectTo page) is reached, even if it is defined in the tabBar page configuration is not displayed at the bottom of the tab bar.
tabBar is an array, it can be configured with a minimum of 2 and a maximum of . 5 th Tab , Tab sorted in order of the array.
8. Modular scope and
File scope
In JavaScript variables and function declarations only valid documents in the file; a different file with the same name can be declared variables and functions, will not affect each other.
Example:
By global function getApp () can be acquired global application example, global data may be required if the () the App settings, such as:
/* app.js */
App({
globalData: 1
})
/* a.js */
// This is a local variable localValue
var localValue = 'a'
// get app.js instance
var app = getApp ()
// by app operated global variables example,
app.globalData++
/* b.js */
// can be redefined in different files localValue this variable
var localValue = 'b'
// If a.js file execution first, then b.js acquired is a.js variable values have been executed
console.log(getApp().globalData)
Modular (require () is passed in a relative path js file)
We may some common code that pulled into a single js file as a module. Only through module module.exports or exports in order to expose the external interface. Example:
/* common.js */
function sayHello(name) {
console.log(`Hello ${name} !`)
}
module.exports = { sayHello : sayHello}
The need to document the use of these modules using require (path) will be introduced into the common code
/* a.js */
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
}
})
9. Data Binding
{{}}
10. The conditions for rendering ( WX: IF and wx: for must be used separately )
<block wx:if="{{boolean==true}}">
<block wx:for="{{arr}}">
<view class="bg_black">内容：{{item}}</view>
</block>
</block>
<block wx:elif="{{boolean==false}}">
<view class = "bg_red"> No content </ view>
</block>
- Rendering list
- Template, quote
- Selector
Style introduced
with can import external style sheets, the relative path outreach @ import stylesheet to import @import statement followed by; indicates the end of the statement.
Top of the page is a node, so the effect on the entire page style or modify the top-level node style use the page selector.
Applet does not currently support Media Query.