当前位置:网站首页>Accumulation of applet knowledge points
Accumulation of applet knowledge points
2022-04-23 15:41:00 【Roydly】
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)
}
})
版权声明
本文为[Roydly]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204231533385994.html
边栏推荐
- Node. JS ODBC connection PostgreSQL
- 布隆过滤器在亿级流量电商系统的应用
- PHP PDO ODBC loads files from one folder into the blob column of MySQL database and downloads the blob column to another folder
- 字节面试 transformer相关问题 整理复盘
- 小程序知识点积累
- PHP operators
- 导入地址表分析(根据库文件名求出:导入函数数量、函数序号、函数名称)
- 字符串最后一个单词的长度
- Mysql database explanation (VII)
- Demonstration meeting on startup and implementation scheme of swarm intelligence autonomous operation smart farm project
猜你喜欢
随机推荐
Advantages, disadvantages and selection of activation function
fatal error: torch/extension.h: No such file or directory
自动化测试框架常见类型▏自动化测试就交给软件测评机构
开源项目推荐:3D点云处理软件ParaView,基于Qt和VTK
Calculate the number of occurrences of a character
Control structure (I)
Why is IP direct connection prohibited in large-scale Internet
IronPDF for . NET 2022.4.5455
Go并发和通道
基于 TiDB 的 Apache APISIX 高可用配置中心的最佳实践
Multi level cache usage
What if the package cannot be found
pywintypes.com_error: (-2147221020, ‘无效的语法‘, None, None)
大厂技术实现 | 行业解决方案系列教程
Introduction to dynamic programming of leetcode learning plan day3 (198213740)
时序模型:长短期记忆网络(LSTM)
[backtrader source code analysis 18] Yahoo Py code comments and analysis (boring, interested in the code, you can refer to)
How to test mobile app?
小程序知识点积累
Node.js ODBC连接PostgreSQL