In the last article, we implemented the first applet page and learned some knowledge of applet, so we continue to learn.

Page jump

In the first small program page, a button is reserved, which is to jump to other pages, there are three main ways to jump in the micro channel small program:

  • wx.navigateTo()
  • wx.redirectTo()
  • wx.switchTab()
wx.switchTab({
  url: '/index'
})
Copy the code

Path can be written correctly, distinguish absolute path and relative path:

Absolute path: Usually preceded by /, to find a relative path from the root directory down: relative to the current page, each time using.. / It’s a jump up one floor

The main differences between the first and second methods are as follows: the former keeps the current page (parent page, execute onHide()), jumps to another page (child page), and finally returns to the current page (parent page). The relationship between the two pages is parent-child. The latter closes the current page (using the onUnload() method) and jumps to another page without being able to return. The two pages are parallel.

The third is a special jump to a tabBar page and close all other non-Tabbar pages. Using the above two jumps will not work. You can jump from a tabBar page to a non-Tabbar page in either of the above two ways.

By the componentswiper

Swiper is usually used in conjunction with swiper-item. Swiper-item is a container for the entire rotation chart, and swiper-item is a container for a single rotation item. Swiper-item is only used in the former container. Therefore, all swiper-items should be applied to the swiper parent.

  <swiper catchtap='onSwiperTab' indicator-dots='true' autoplay='true' interval='5000'>
    <swiper-item>
      <image src='/images/post/bl.png' ></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/xiaolong.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/vr.png' ></image>
    </swiper-item>
  </swiper>
Copy the code

We should not assume that only images can be placed inside a Swiper-Item. Other things can be placed inside a Swiper-Item, such as text. Realize some other business, such as round broadcast.

Set vertical=’true’ to set the scrolling direction of the rotation. Indicator -dots=’true’ indicator is displayed

In a wheel image, the actual size of the image is controlled by the image tag, which has width and height by default.

Binding of events

There are two kinds of events:

Bubbling event: if the child node is clicked, the event on the parent node will also be executed. But if you click on the event above the parent node, the event above the child node will not begin with bind: which means bubbling, followed by the event name

Non-bubbling event: When an event on a component is fired, the event is not passed to the parent node. It is generally added on child nodes. Start with catch: indicates non-bubbling, followed by the event name

<view bindtap='onbind'< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;'onBind'> I am event 1</view> </view> onBind:function (event) {
    console.log("Event 1 executed.")
  },
  onbind: function (event) {
    console.log("Event 2 executed.")}Copy the code

If I click on event 1 and I don’t click on event 2, event 2 will also fire, so that’s bubbling; Catchtap = catchtap = catchtap = catchtap = catchtap = catchtap = catchtap There is also a catch:tap method for declaring events.

tabBarConfiguration page

Json is the global configuration of some applet projects. You can configure the required configuration of the page individually in the JSON file below the page.

TabBar is a property of the global app.json file, just as all project pages need to be registered in the global app.json file, tabBar is a property of the global app.json file.

 "tabBar": {
    "position":"top"// The default position of the button is "bottom". The default position is "top""borderStyle": "white"// tabBar color"list": [{"pagePath": "pages/posts/post"// The page path must first be defined in the Pages property"text": "Reading"."iconPath": "images/tab/yuedu.png", // Unselected image"selectedIconPath": "images/tab/yuedu_hl.png"// Selected image}, {"pagePath": "pages/movies/movies"."text": "Film"."iconPath": "images/tab/dianying.png"."selectedIconPath": "images/tab/dianying_hl.png"}}]Copy the code

When configured in the global app.json file, the project starts with a switch at the bottom by default;

Data binding

There is no dom node concept in the applet. You can’t add data to the page by manipulating the DOM node like you can with jQuery. Conversely, applets use data binding to achieve data first. The advantage of this is that you don’t have to manipulate the DOM and reduce page load time.

<view>
  <view  src='{{author_img}}' catch:tap='onBind'> {{date}} < / view > < view > Page ({/ / Page initial data data: {date:"I am Event one."}}Copy the code

In the data attribute of page() in the JS file of the corresponding page, fill in the data required by the page in the form of key-value pairs, and then use {{key}} at the corresponding position of the page to bind the data. Of course you can bind multiple data in one location, just {{key1}}{{key2}}. Use “{{key}}” to bind data to tag attributes.

<view>
  <view catch:tap='onBind'>{{date}}{{title}}</view>
</view>

Page({
   data: { 
     date:'stp 17',
     title:' hi icessun'
   },
  onLoad: function (options) {
     var dates={
       date:'stp 18',
       title:'icessun'
     }
     this.setData(dates)
  }
}
Copy the code

When the page is initialized, a request is sent to the server. After processing the data, the data is bound to the page using the this.setData() method. The parameters received in the this.setData() method are stored in the data property and then bound to the page using the data property’s key value. Of course, the same attribute name (key value) will be overwritten