title: wechat applet development
date: 2020-06-26 07:45:20
tags: wechat applet
categories: wechat applet development

file

Document address

• Applet framework reference document

• Applet component reference document

• Applet API reference

• Applet server API reference

• Official documents

Framework interface

Life cycle and functions in Page

Page({
  /**
   * Initial data of the page
   */
  data: {
      
  },
  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
      
  },
  /**
   * Life cycle function -- listen to the completion of the first rendering of the page
   */
  onReady: function () {
    
  },
  /**
   * Life cycle function -- monitor page display
   */
  onShow: function () {
    
  },
  /**
   * Life cycle function -- monitor page hidden
   */
  onHide: function () {
    
  },
  /**
   * Life cycle function -- monitor page unloading
   */
  onUnload: function () {
    
  },
  /**
   * Page related event processing function -- listening to user pull-down action
   */
  onPullDownRefresh: function () {
    
  },
  /**
   * Handling function of page pull bottom event
   */
  onReachBottom: function () {
    
  },
  /**
   * Users click the upper right corner to share
   */
  onShareAppMessage: function () {
    
  }
})

Event function and setData usage

<!--Bind an event handler in the component, such as bindtap，When the user clicks the component, the corresponding Page The corresponding event handler is found in.-->
<view bindtap="myTap" 
      data-name="Wechat applet" style="width:200rpx;height:200rpx;background:pink;">
    {{name}}
</view>

/**
  * Initial data of the page
  */
  data: {
    name:"tom"
  }, 
// Custom click event
  myTap: function(res){
    var name1=res.currentTarget.dataset.name
    this.setData({
      name:name1
    })
  }

[the external link image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-fywjbkoa-1593224681646)( https://i.loli.net/2020/06/26/reNxQFd5mOKIpA1.png ]

API

Basic grammar

/**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    console.log(wx.getSystemInfoSync().model)
  },

/**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    //Load animation
    wx.showLoading({
      title: 'Data loading....',
    })
    //Set timer, disappear after a certain time
    setTimeout(res=>{
      wx.hideLoading()
      },1500)
  },

[the external link image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-lk3vfm2n-1593224681655)( https://i.loli.net/2020/06/26/udqGaTHWMcJi9P4.png ]

/**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
   wx.showToast({
     title: 'Submitted successfully',
   })
  },

route

wx.switchTab(Object object)

Sample code

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "home page"
    },{
      "pagePath": "other",
      "text": "other"
    }]
  }
}

wx.switchTab({
  url: '/index'
})

wx.navigateTo(Object object)

Sample code

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // Add a listener for the specified event to get the data transferred from the opened page to the current page
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // Transfer data to the opened page through eventChannel
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // Listen for the acceptDataFromOpenerPage event to obtain the data transferred from the previous page to the current page through eventChannel
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

wx.reLaunch(Object object)

Sample code

wx.reLaunch({
  url: 'test?id=1'
})

// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

wx.navigateBack(Object object)

Sample code

// Note: when you call navigateTo to jump, the page that calls the method will be added to the stack, while the redirectTo method will not. See example code below

// This is page A
wx.navigateTo({
  url: 'B?id=1'
})

// This is page B
wx.navigateTo({
  url: 'C?id=1'
})

// navigateBack in page C, which will return to page A
wx.navigateBack({
  delta: 2
})

network

Initiate a request

wx.request

Sample code

//demo.js
Page({

  /**
   * Initial data of the page
   */
  data: {
   resData:[],
   num:1
  },
  
  //Click to switch to the function on the next page
  nextPage: function(){
    this.data.num++
    this.getList(this.data.num)
  },
  // Encapsulate get data function
  getList:function(p=1){
    wx.request({
      url:'https://edu.newsight.cn/wxList.php',
      // Pass parameters
      data:{
        num:6,
        page:p
      },
      success:res=>{
        console.log(res)
        this.setData({
          resData:res.data
        })
      }
    })
  },
  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    // Call data acquisition function
    this.getList()  
  },

 
})

/*demo.wxss*/
.out{
  padding: 30rpx;
  box-sizing: border-box;
}
.row{
  display: flex;
  height: 150rpx;
  margin-bottom: 20rpx;
}
.pic{
  flex:2;
}
.pic image{
  width: 100%;
  height: 100%;
}
.text{
  flex: 8;
  border-bottom: 1px solid #eee;
  /* background: #ccc; */
  padding-left: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}
.text .title{
  font-size: 38rpx;
}
.text .time{
  color: #999;

}

<!--demo.wxml-->
<view class="out">
  <view class="row" wx:for="{{resData}}" wx:key="index">
    <view class="pic">
      <image src="{{item.picurl}}" mode="widthFix"></image> 
    </view>
    <view class="text">
      <view class="title">{{item.title}}</view>
      <view class="time">{{item.posttime}}-{{item.author}}</view>
    </view>
  </view>
  <button type="primary" bindtap="nextPage">next page</button>
</view>

lass="out">





{{item.title}}
{{item.posttime}}-{{item.author}}


next page

>The effect is as follows

[the external link image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-vxo2msmn-1593224681663)( https://i.loli.net/2020/06/26/fA7qv9yX62pjbED.png ]