Wechat applet - component parameter transmission, state management

Wechat applet bind:tap

<view wx:for="{
    {deliveryManInfo}}" wx:key="index">

Set up wx:key="index" after ,view It can be used directly inside index,index Indicates the subscript of each item , from 0 Start .

<view data-index="{
    {index}}" bindtap="choosed">

// In the use of bindtap When you click on an event , Set up data-index, simultaneous assignment index, Then the click event can get the corresponding click item The subscript .
// Access method
choosed(e){
let choosetTab = e.currentTarget.dataset.index
}

Click the jump
Click on
State management tools

 
    /** *  Life cycle of components ：  When the old and new writing exist at the same time , The new writing shall prevail , The old writing will not take effect  */
    //  neographism （ At the same time, the new way shall prevail , The old one doesn't work ）
    lifetimes: {
    
        created(){
    },
        attached(){
    }
    },
    //  Old style  --  And data Flush , Not wrapped in lifetimes in （ At the same time, the new way shall prevail , The old one doesn't work ）
        created(){
    },
        attached(){
    }
    /** *  The life cycle of the page on which the component resides ： * show： The page where the component is located is displayed .（ Such as ： Switch pages , Switch tabbar etc. ） * hide： The page where the component is located is hidden .（ Such as ： Switch pages , Switch tabbar etc. ） * resize： When the size of the page where the component is located changes  */
    pageLifetimes: {
    
        show: function () {
    },
        hide: function () {
    },
        resize: function () {
    },
    },

created： The component instance has just been created , You can't call setData – Just created
attached： The component is fully initialized , Enter the page node tree
This life cycle is very useful , Most initialization can be done at this time （ Such as ： Initiate network request ）
Put it in UI In structure , It hasn't been rendered yet
ready: Execute after the component view layer layout is completed .-- Render completed
moved: When a component instance is moved to another node tree
detached： Leave the page node tree . You can clean up some timers and other work – When it was destroyed
error: Execute whenever a component method throws an error

to subcontract

1. Manual implementation wx.request Of Promise turn

//Promise turn 
requestPromise(url, method) {
    
    return new Promise((resolve, reject) => {
    
      wx.request({
    
        url,
        method,
        success: (res) => {
    
          resolve(res)
        },
        fail: (res) => {
    
          reject(res)
        }
      })
    })
  },
// call ---- Method 1 
getRequest() {
    
    this.requestPromise('https://www.escook.cn/categories', 'GET').then(res=>console.log(res),err=>console.log(err))
  }
// call ---- Method 2 
getRequest() {
    
    this.requestPromise('https://www.escook.cn/categories', 'GET').then(res=>console.log(res)).catch(err=>console.log(err))
  }
// call ---- Method 3 
 async getRequest() {
    
   try{
    
    const res = await this.requestPromise('https://www.escook.cn/categories', 'GET')
    console.log(res);
   }catch(err){
    
     console.log(err);
   }
  },

In many cases , We need to load the page at the beginning , Automatically request some initialization data . At this time, you need to enter the... On the page onLoad Calling function to get data in event

stay onLoad Receive navigation parameters in

On the surface , Components and pages are made up of .js、.json、.wxml and .wxss These four documents make up . however , Components and pages .js And .json The files are obviously different ：
Component's .json Declaration required in document “component”: true attribute
Component's .js What is called in the file is Component() function
The event handler function of the component needs to be defined to methods In nodes

Navigation bar height

Parent component

// page.wxml
<tabs tabItems="{
    {tabs}}" bindmytap="onMyTab" >
  Content - You can put slots here 
</tabs>
// page.js
  data: {
    
    tabs:[
     {
    name:" Experience problems "},
     {
    name:" goods 、 Business complaints "}
   ]
 },
  onMyTab(e){
    
    console.log(e.detail);
 },

Child components

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{
    {tabItems}}" wx:key="{
    {item}}">
      <view bindtap="handleItemActive" data-index="{
    {index}}">{
    {
    item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
    
  properties: {
    
    tabItems:{
    
      type:Array,
      value:[]
   }
 },
  /** *  The initial data of the component  */
  data: {
    
 },
  /** *  A list of methods for a component  */
  methods: {
    
    handleItemActive(e){
    
      this.triggerEvent('mytap','haha');
   }
 }
})

​ wx.switchTab Jump page , Parameters cannot be carried after the path . If you need to carry parameters , Can pass getApp() function , Combined with global variables , stay onShow Get the corresponding parameters in .

vant-webapp

Not in onLaunch Called when getCurrentPages(), here page Not yet generated .

Life cycle

onLoad(Object query) Trigger when the page loads . A page can only be called once , Can be in onLoad
Get the parameters in the path to open the current page .
onShow() Page shows / Trigger when entering the front desk .
onReady() Triggered when the page is first rendered . A page can only be called once , Representative page is ready , Can interact with view layers .
So the loading order is to load first onLoad, Then the onShow, Last onReady