Basic usage knowledge points of mini programs (very comprehensive, recommended!)

<template name="component">
<view>Hahaha</view>
  <text>Hey hey hey</text>
  <text>{{name}}</text>
  <text>{{age}}</text>
</template>
<template is="compoent"/>
<template is="compoent"/>
<template is="compoent"/>
<template is="compoent" data="{{name: '小屏', age:'123'}}" />

{
  "usingComponents": {
    "my-cut":"/pages/compent/my-cut" }
}

  // Setting styleIsolation of options in the component: "apply-shared" will cause the style attributes of the page settings to affect the style of the component // Setting styleIsolation of options in the component: "shared" will cause the style attributes of the page settings to affect the style of the componentComponent({
	options:{
    styleIsolation: "apply-shared"
  },
})

Component({
properties:
    // title: String
    title:{
      type: String,
      value: "I am the default value",
      //Monitor new and old values ​​observer: function(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    },
    
  },
    // In the component, you can use this property to dynamically set the CSS style externalClasses: ["tltleclass"]

})

<my-cut title="Haha" tltleclass="red"></my-cut>
<my-cut title="Hey Hey" tltleclass="green" />
<my-cut/>

.red{
  color: red;
}
.green{
  color: green;
}

<view class="contention">
  <block wx:for="{{titled}}" wx:key="index">
    <view class="tit"> <text class="intext {{index == increat? 'active' : ''}}" data-count="{{index}}" bindtap="targetTap">{{item}}</text> </view>
  </block>
</view>

methods: {
    targetTap(e){
      const index = e.currentTarget.dataset.count
      this.setData({
        increat:index
      })
        this.triggerEvent("targetCount" , {})
    },
    amend(){
      this.setData({
        titled: ["Politics", "Mathematics", "English"]
      })
    }

  }

<switch titled="{{list}}" bind:targetCount="targetCount" class="sw-class"></switch>

  targetCount(){
  //Get the component object const content = this.selectComponent('.sw-class') 
    console.log(content)
    // content.setData({
    // titled:["Politics", "Mathematics", "English"]
    // })
    // Open specifications generally do not recommend this method of modifying functions directly. It is recommended to use methods within the component to modify the method and call content.amend() on the page.
  },

<view>
  I am a title</view>
<slot></slot>
<view>
  I am a content</view>

<my-slot>
<button size="mini"> Button</button>
</my-slot>
<my-slot>
 <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.woyaogexing.com%2F2021%2F04%2F26%2F1b402c98095d452486508b8250b21f3f%21360x640.jpeg&refer=http%3A%2F%2Fimg2.woyaogexing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625711145&t=d9d310d5e9c878a9d4b7bc7057f2b754"/>
</my-slot>
<my-slot>
  <slider value="20"></slider>
</my-slot>

<view>I am the title of the multi-slot</view>
<view> <slot name="slot1" ></slot> </view>
<view> <slot name="slot2" ></slot> </view>
<view> <slot name="slot3" ></slot> </view>
<view>I am the tail of the multi-slot</view>

Component({
  /**
   * List of component properties */
  options:{
    multipleSlots:true
  }
  )}

<!-- Use of multiple slots -->
<!-- Notes:
You need to give each slot a name. You must set the multipleSolts property under the options object under the component object to true -->
<my-mslot>
<button slot="slot3">415461</button>
<slider slot="slot1" value="20"></slider>
<text slot="slot2">Hehehehe</text>
</my-mslot>

properties: 
	title: string,
	content:{
	type: array,
	value:[1,2.3],
	observer:function(newVal,oldVal){
        console.log(newVal,oldVal)
      }
	}
}

data:{
	counter: 0
}	

methods:{
foo(){
	
}
}

options:{
//Set to true if you need to use multiple slots
	multipleSlots:true,
	//Set the isolation mode of the style styleIsolation: "apply-shared", //The style attributes set on the page affect the style of the component //styleIsolation: "shared" The style attributes set on the page affect the style of the component}

externalClasses:["on","tre"]

observers:{
	counter: function(newVal){
		console.log(newVal)
	}
}

  pageLifetimes:{
    show(){
      console.log("The page where the monitoring component is located")
    },
    hide(){
      console.log("When the page where the monitoring component is located is hidden")
    },
    resize(){
      console.log("Monitor page size changes")
    }
  }

lifetimes:
    created(){
      console.log("Component created")
    },
    attached(){
      console.log("The component is added to the page")
    },
    ready(){
      console.log("The component is rendered")
    },
    moved(){
      console.log("The component is moved to another location in the node tree")
    },
    detached(){
      console.log("component")
    }
  }

onReady: function () {
    wx.request({
      url: 'http://httpbin.org/post',
      method:'post',
      data:{
        name:"wangshuai",
        age:19
      },
      success:function(res){
          console.log(res)
      }
    })
  },

export default function request(option) {
    return new Promise( (resolve, reject) => {
      wx.request({
        url: option.url,
        method: option.method || 'get',
        data: option.data || {},
        success: function (res) {
            resolve(res)
        },
        fail: function (res) {
          reject(res)
        }
      })
    })
}

 onReady: function () {
    //Mini program native network request// wx.request({
    // url: 'http://httpbin.org/post',
    // method:'post',
    // data:{
    // name:"wangshuai",
    //age:19
    // },
    // success:function(res){
    // console.log(res)
    // }
    // })
    request({url: 'http://httpbin.org/post',method:"post"}).then(res=>{
      console.log(res)
    }).catch(err =>{
      console.log(err)
    })
  },

<button size="mini" bindtap="showToast">showToast</button>
<button size="mini" bindtap="showModal">showModal</button>
<button size="mini" bindtap="showLoading">showLoading</button>
<button size="mini" bindtap="showAction">showAction</button>
<button size="mini" open-type="share">Share</button>

Page({
	showToast(){
    wx.showToast({
      title: 'I am showToast',
    })
  },
  showModal(){
    wx.showModal({
      title:'Delete',
      cancelColor: 'cancelColor',
      success:function (params) {
          console.log(params)
          if (params.cancel) {
              console.log("Clicked Cancel delete")
          } 
      } 
    })
  },
  showLoading(){
    wx.showLoading({
      title: 'Waiting',
      mask: true //Give a mask to prevent other operations})
    setTimeout(()=>{
      wx.hideLoading({
        success: (res) => {},
      })
    },1500)
  },
  showAction(){
    wx.showActionSheet({
      itemList: ['Photo', 'File'],
    })
  }
})

<navigator url="/pages/home/home">Jump to home</navigator>

<navigator url="/pages/home/home">Jump to home</navigator>
<navigator url="/pages/home/home" open-type="redirect">Jump to home (redirect)</navigator>
<navigator url="/pages/home/home" open-type="reLaunch">Jump to home(reLaunch)</navigator>
<navigator url="/pages/home/home" open-type="switchTab">Jump to home (switchTab)</navigator>