app.json

Json configuration file app.json is the global configuration of the current applet, including all page paths, window appearance, interface presentation, bottom TAB, and so on. The configuration content of app.json in Demo project is as follows:

Pages: records the path of all pages of the current applet window: globally defines the background color and text color of all pages of the applet Style: globally defines the style version used by the applet components

SitemapLocation: Indicates the location of sitemap.json. UsingComponents: Global custom components

Project.config. json configuration file

Json is the project configuration file, Setting saves the configuration related to compilation. Projectname saves the name of the project. Appid saves the account ID of the applet Json is more about the configuration of wechat developer tools, while app.json is about the configuration of project code at the functional level.

Sitemap. json configuration file – indexed or not

Wechat is now open small program search, the effect is similar to THE PC page SEO. The sitemap.json file is used to configure whether the applet page allows wechat index.

When developers allow wechat indexing, wechat will build an index for the page content of the small program through the form of crawler. When the user’s search keyword matches the page index successfully, the applet’s page may be displayed in the search results.

On by default – Can be disabled

Note: The sitemap index prompt is enabled by default. To disable the sitemap index prompt, set the checkSiteMap field to false in the item.config. json setting of the applet project configuration document

The.json configuration file for the page

Each page in the appletops can be configured using a.json file for the appearance of the page window. The configuration items in the page will override the same configuration items in the app.json window, of course, when the current page is displayed

Common components

view text image

Common event

The corresponding event handler is defined in the.js file of the page. The event parameter is received by the event parameter (usually abbreviated as E).

Note that event handlers need to be level with data

<button bindtap=" event name ">Copy the code

Access data in data in js

In the js code, if you want to access the data in the data, it is through this.data.xxx

Js modifies the data in data

The data in page data can be reassigned by calling this.setData(dataObject), as shown in the following example:

OnAddHandle: function () {this.setdata ({count: this.data.count +1 // +1})}Copy the code

Event pass arguments

Small programs in the event parameters are special, can not bind the event and pass parameters for the event handler.

The ginseng

<button bindtap="onBtnString" data-info="2"> </button> Info will be the target of the name is stored in the event object in the dataset, 2 will be resolved as a value in the event handler, through the event. The target. The dataset. The info available to the value, the example code is as follows: OnBtnString (e) {this.setdata ({// this.data.count is the old value count: this.data.count + e.target.dataset.info }) }Copy the code

Use of bindinput – bidirectional binding

<input value="{{MSG}}" bindinput="inputHandle" class="ipt2" type="checkbox"></input inputHandle(e) { this.setData({ msg: e.detail.value }) }Copy the code

Conditional render v-if

Wx :if WX :else-if WX: Else Conditional rendering

<! - wx: if wx: else - if wx: else conditions apply colours to a drawing - > < view wx: if = "{{type = = = 1}}" class = "text" > m < / view > < view wx: elif = "{{type = = = 2 </view> </view> </view> </view>Copy the code

Wx: If versus Hidden

① Different running modes

Wx :if (display: none/block;) wx:if (display: none/block;) , which controls the display and hiding of elements

② Usage Suggestions

When switching frequently, it is recommended to use hidden control conditions complex, it is recommended to use WX :if with WX: ELif, WX :else to show and hide switch

Style import

The styles defined in app.wxss are global and apply to each page.

@import “/icon/icon.wxss”;

tabBar

TabBar tabBar is a common page effect in mobile applications. It is used to quickly switch between multiple pages. In small programs, they are usually divided into:

At the bottom of the tabBar

At the top of the tabBar

Note:

A tabBar can be configured with a minimum of 2 tabs and a maximum of 5 tabs. When rendering the top tabBar, only text is displayed instead of icon

"TabBar" : {" selectedColor ":" # C00000 ", "a list" : [{" pagePath ":" pages/home/home ", "text", "home page", "iconPath" : "static/tab_icons/home.png", "selectedIconPath": "static/tab_icons/home-active.png" } ] },Copy the code

Network data request

OnTapGet () {wx.request({// Request address, must start with https:// // must be configured in the request legitimate domain URL: 'https://www.escook.cn/api/get', / / request method: 'GET', / / request parameter data: {name: 'zs, age: 22}, / / request callback success for success: (res) => { console.log(res) } })Copy the code

navigation

Declarative navigation (tabbed)

Open-type is the way to navigate

jump

<! -- Declarative navigation --> <! To navigate to the tabBar page: The URL must start with the root path "/ "and the open-type attribute value must be set to switchTab --> <navigator URL ="/pages/message/message". Open-type ="switchTab"> Navigate to the message page </navigator>Copy the code

back

If you want to go back to the previous page or multi-level page, you need to specify the open-type attribute and the delta attribute,

The value of open-type must be navigateBack, indicating that back navigation is required

The value of delta must be a number, indicating the level to fall back

< navigateBack > </navigator>Copy the code

Programmatic navigation (JS mode)

The tabBar page is displayed

<! --> <button bindtap="gotoMessage"> --> <button bindtap="gotoMessage" GotoMessage () {wx.switchTab({// indicates the url to jump to: '/pages/message/message',})},Copy the code

The non-Tabbar page is displayed

<! -- <button bindtap="gotoInfo"> -- <button bindtap="gotoInfo"> -- <button bindtap="gotoInfo"> -- <button bindtap="gotoInfo"> wx.navigateTo({ url: '/pages/info/info', }) },Copy the code

Backward navigation

The wX.navigateBack (Object Object) method can be called to return to the previous page or multi-level page.

Regressive events

GoBack () {// if no parameter is passed, the previous page is returned. // If no parameter is passed, the number delta is passed, indicating the level of return. wx.navigateBack() },Copy the code

Pay attention to

TabBar pages do not have the backward effect. Because, when we jump to a tabBar page, we close all other non-Tabbar pages, so when we are on a tabBar page, there is no page to go back to

wxs

Syntax refer to ES5 JS syntax

In order to reduce the learning cost of WXS (WeiXin Script), WXS language borrowed a lot of JavaScript language in the design. But essentially, WXS and JavaScript are two completely different languages!

Outreach methods

Function toLower(STR) {return str.tolowerCase ()} // 2. Module. exports = {toLower: toLower}Copy the code

<! --> < WXS module="m2" SRC =".. /.. / utils/view WXS "> < / WXS > using < view > {{m2. ToLower (country)}} < / view >Copy the code

component

① In the project root directory, right-click, create components -> Test folder

② In the new Components -> Test folder, right-click and click “New Component”.

(3) Enter the name of the component and press Enter. Four files corresponding to the component will be generated automatically, with the suffix of.js,.json,.wxml and.wxss

Note: To ensure a clear directory structure, it is recommended to store the different components in separate directories.

Local reference

The way components are referenced in the.json configuration file of a page is called a “local reference.” The example code is as follows:

{ 
        "usingComponents": { 
        "my-test1": "/components/test/test" 
    } 
}

Copy the code

Global references

The way components are referenced in the app.json global configuration file is called “global reference”.

The example code is as follows:

"usingComponents": { 
    "my-test2": "/components/test2/test2" 
    }
Copy the code

Matters needing attention

By default, custom component styles only apply to the current component and do not affect UI structures outside the component. The benefits of isolation of component styles are:

(1) Prevent external styles from affecting internal styles of components

Global styles in app. WXSS do not apply to components

Only class selectors are affected by style isolation. Id selectors, property selectors, and tag selectors are not affected by style isolation

Sometimes, when you want to be able to control the style inside a component from the outside, you can modify the component’s styleIsolation option with styleIsolation as follows

{options: {// the default value isolated: indicates that the style isolation is enabled //apply-shared: indicates that the page WXSS style will affect the custom Component //shared: S tyleIsolation: 'isolated'}}) {"styleIsolation": "isolated"}Copy the code

The properties attribute

Max: {// The data type of the property value is type: Number, // the default value of the property value value: 10}, // simplify the way to define attributes Max: Number}Copy the code

Data listener

Data listeners are used to listen for and respond to changes in any property or data field to perform specific operations.

It acts like the Watch listener in Vue.

In the applet component, the basic syntax for a data listener is as follows:

Components({// observers: {' observ, observ ': function(observ, observ, observ) {// do something}})Copy the code

Wildcard mode, listening for changes in all properties of the object

observers: { 
        '_rgb.**': function (obj) { 
            this.setData({ 
                fullColor:`${obj.r}, ${obj.g}, ${obj.b}`
            }) 
    }
}
Copy the code

Pure data field

Pure data fields are data fields that are not used for interface rendering. In the Options node of the Component constructor, specify pureDataPattern as a regular expression that the field names conform to

Component({options: {// specify all data fields starting with _ as pure data fields pureDataPattern: /^_/}, data: {a: true, // common data field _B: true // pure data field}})Copy the code

Father, son and brother pass values

The father the son

The father

<my-text name='{{name}}'>
Copy the code

The child

  properties: {
    name: String,
  },
Copy the code

Child the parent

The father

 methods: {
    age() {
      this.triggerEvent('sync', {
        value: this.data.age
      })
    }
  }
Copy the code

The child

<my-text bind:sync="addAge">

addAge(e) {
    this.setData({
      age: e.detail.value
    })
  },


Copy the code

Brother by value

You can call this.selectComponent(" ID or class selector ") in the parent component to get an instance object of the child component, giving direct access to any data and methods of the child component. The call requires passing in a selector, such as this.selectComponent(".my-component"). The parent component's WXML file uses bind: custom event name (recommended: <my-test class="cusstomA" id="cA" count="{{count}} "bind:sync="syncCount"></my-test> <button Bindtap ="getChild"> get the child component instance </button> // getChild() {// remember that the following parameter cannot pass the tag selector, SelectComponent ('.customa ') const child = this.selectComponent('.customa ') // Call the setData method of the child component and change the count value,  child.setData({ count: This.data.count + 1}) child.addCount() This method is accessible on the __proto__ of the child instance object} // The code here is a bit problematic because the count data belongs to the parent and is passed to the child by the parent through a custom property. If you want to change the value of the count, You can change it directly in the parent component, and the child component can be updated automatically. There is absolutely no need to change the count value of the child component in this scenarioCopy the code