Article Directory
Past review
uniapp steps on the pit to record uni.$on Why can’t the data in data be modified
newsletter page
scene
When we jump from one page to another, we hope that the parameters of the page to be jumped are dynamically generated and can be reused. For example, when we are shopping on Taobao, we click on a product and enter the product details page. The corresponding relationship between the product and the product details page requires the business page to pass the information parameters of the product to the product details page
And sometimes we even want to pass multiple communication messages. In this way, the redirected page can provide a more differentiated copy function.
communication plan
| serial number | communication method | method name | advantage | shortcoming | Applicable scene |
|---|---|---|---|---|---|
| 1 | page cache | uni.setStorage(OBJECT) uni.getStorage(OBJECT) |
Global cache, it still exists next time you open it, easy to access, the official comes with a synchronous and asynchronous caching method | Not suitable for page communication, low-frequency cache. Because the number is too large, it is difficult to manage | Global dynamic variables, such as user name, user level, user authority, etc. |
| 2 | Vue global variables | vue.prototype.key= | Set once, use globally | same page cache | packaged method |
| 3 | routing communication | uni.navigateTo(OBJECT) | Add ?key=value to the url to set the variable by jumping, and take the variable in onLoad. easy to use | You need to convert the object into url corresponding parameters by yourself, and the object depth can only be one layer, and the url length is limited | Jump page pass simple variable |
| 4 | newsletter page | uni.$emit(eventName,OBJECT) uni.$on(eventName,callback) |
Using key for communication, you can communicate multiple times instead of packaging together, which is convenient for business iteration | Key value management problem, will communicate with the global, easy to trigger other pages by mistake | global newsletter, page newsletter |
| 5 | channel communication, event communication | EventChannel.emit(string eventName, any args) | Realize communication in the success of routing jump | Only 1-to-1 page communication, not global communication | Jump Page Newsletter |
Communication plan summary
| General Classification of Communications | Communication method serial number | Communication Features |
|---|---|---|
| direct communication | 3,4,5 | Direct page-by-value communication, suitable for local communication and page wake-up |
| indirect communication | 1,2 | Suitable for global static variables by modifying and reading global variables |
The difference between uni.$emit and EventChannel.$emit
| uni.$emit | EventChannel.$emit | |
|---|---|---|
| father to son | callback in success | callback in success |
| child's father | any position | callback in event |
| scope | global until destroyed | Partial, end when the page is destroyed |
| statement | concise | slightly complicated |
| Caution | If the listener registered by uni.on needs to be destroyed when the page exits | no need to pay attention |
How to pass on from father to son
I read the father-to-son method for a long time before I found the method of father-to-son from the official document.
Sequence diagram of page jump
ThinktriggerIt needs to be triggered after the declaration, so we need to trigger it in the callback function
actual code
//A页面
uni.navigateTo({
url: url,
success(res) {
console.log('回调函数')
uni.$emit('test',{
value:'页面通讯测试' })//页面通讯
res.eventChannel.emit('test_data', {
value:'通道通讯测试'})//通道通讯
}
})
//B页面
onLoad() {
console.log('页面跳转成功')
uni.$once('test',res=>{
console.log('通讯成功！')
console.log(res)
})
const eventChannel =this.getOpenerEventChannel()
eventChannel.on('test_data',res=>{
console.log(res)
})
}
Recommended use of uni.$on and eventChannel.on
The two are actually similar in use, and both can achieve the role of father to son, son to father. But because of the scope, evenetChannel variables on different pages can have the same name, eventChannel is more suitable for father to son, uni.$on is suitable for son to father