Accumulation of applet knowledge points

uniiapp Some information about wechat payment

	methods:{
    // Define the event of clicking to place an order 
			async startPay(){
    // Structure and send a request for payment 
				let {pay_data} = await uni.$axios.request({
					url:'xxxxxxxxx',// Address 
					method:'get',// The way 
					data:{
						orderId:this.query.id// It's related to id
					}
				})
    // After sending the request   call requestPayment Method will automatically wake up payment 
				uni.requestPayment({
                    // According to the demand   All required items of wechat should be filled in 
					provider:'wxpay',
					timeStamp:'',
					nonceStr:'',
					package:'',
					signType:'',
					paySign:'',
					success:res=> {
						uni.navigateTo({
							url:'' // Where to successfully jump 
						})
					},
					fail:err=> {
						console.log(err);
						uni.navigateTo({
								url:''// Where does failure jump to 
						})
						
					}
					
				})
				
				
			}
		}

Wechat applet

The main way of parent-child communication

① Attribute binding （ Father and son ）

It is used for the parent component to set data to the specified properties of the child component , You can only set JSON Compatible data ( Only data can be passed , Cannot pass method )

//  Paternal JS
data:{
    count:1  //  Data in the parent component 
}




<!-- Paternal wxml-->
<view>
	<myTest02 count="{
   {count}}"></myTest02>
    <view> The data passed by the parent component is ：{
   {count}}</view>
</view>

  The subcomponent is in  properties Declare the corresponding attribute in the node and use

<!-- Subcomponents wxml-->
<view>{
   {count}}</view>






//  Subcomponents JS
Component({
    //  A list of properties of a component 
    properties:{
        count:{
            type:Number,
            value:0
        }
    }
})

② Event binding （ Son and father ）

Used by child components to pass data to parent components , You can pass any data ( Including arrays and methods )

Implementation steps

Event binding is used to pass values from child to parent , It can deliver Any kind of The data of . The procedure is as follows ：

① stay ** Parent component Of  js** in , Define a function , This function will be in the form of custom events , Pass to subcomponent

② stay ** Parent component Of  wxml** in , In the form of custom events , Will step 1 Function reference defined in , Pass to subcomponent

③ stay   Child components js in , By calling  this.triggerEvent(' Custom event name ', {/* Parameter object */}), Send data to parent component

④ In the parent component of  js in , adopt **e.detail** Get the data passed from the sub component

// step  1：  In the parent component of  js in , Define a function , This function will be in the form of custom events , Pass to subcomponent 
//  Parent component JS
Page({
	//  Define callback function 
	changeCount(e){
		console.log(' Trigger ')
	}
})

// step  2： In the parent component of  wxml in , In the form of custom events , take   step  1  Function reference defined in , Pass to subcomponent 

<!-- Paternal wxml-->
<!-- Use bind: Custom event name ( recommend ： The structure is clear )-->
<myTest02 count="{
   { count }}" bind:event="changeCount"></myTest02>
<!-- Or in the bind  Write the custom name directly behind -->
<myTest02 count="{
   { count }}" bindevent="changeCount"></myTest02>

// step  3： stay   Subcomponents  js  in , By calling this.triggerEvent(' Custom event name ', {/*  Parameter object  */}), Send data to parent component 

<!-- Son of wxml-->
<view>
	<button bindtap="setData"> Pass values to the parent component </button>
</view>



//  Son of JS
Component({
    //  Component initial data 
    data:{
        age:10
    },
    //  Component method list 
    methods:{
        setDate(){
            this.triggerEvent('event',{age:this.data.age})
        }
    }
})

 step  4： In the parent component of js in , adopt e.detail Get the data passed from the sub component 

//  Parent component JS
Page({
	//  Define callback function 
	changeCount(e){
		//  Get the data passed by the sub component 
		console.log(e.detail.age)
	}
})

③ Get component instance （ Father and son ）

The parent component can also use  this.selectComponent()  Get the sub component instance object, so you can directly access any data and methods of the sub component

 Can be called in the parent component  this.selectComponent("id or class Selectors "), Get the instance object of the subcomponent , To directly access any of the subcomponents   Semantic data and methods . When calling, you need to pass in a selector , for example  this.selectComponent(".my-component")

<!-- Paternal wxml-->
<view>
    <!-- Use bind: Custom event name ( recommend ： The structure is clear )-->
    <myTest02 count="{
   { count }}" id="box" class="box" bind:event="changeCount"></myTest02>
    <button bindtap="getSonObj"> Get subcomponent instance </button>
</view>

//  Paternal JS
Page({
    getSonObj(){
        //  Bear in mind ：  The label of the selector cannot be passed , Otherwise, the return is null
        // const child = this.selectComponent('.box') 
        const child = this.selectComponent('#box') 
        console.log(child)
    }
})