目錄結(jié)構(gòu)
/component
/index-page
/index.js
/index.wcss
/index.wxml
/index.json
/pages
/index
/index.wcss
/index.wxml
/index.js
/index.json
/web
/web.wcss
/web.wxml
/web.js
/web.json
小程序
/pages/index/index.wxml
<cny-index-page
id="index_page"
str="{{str}}"
arr="{{arr}}"
bind:onFund="onFund"
>
</cny-index-page>
/pages/index/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
str:'',
arr:[]
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
// 父調(diào)子
// 頁面獲取自定義組件實(shí)例
let countDown = that.selectComponent('#index_page');
countDown.music_click(); // 通過實(shí)例調(diào)用組件事件
},
onFun: function(that) {
},
})
/pages/index/index.json
{
"usingComponents": {
"cny-index-page": "../../component/index-page/index"
}
}
組件
/component/index-page/index.wxml
<view><view>
/component/index-page/index.js
Component({
// 父組件傳值，給默認(rèn)值
properties: {
arr: {
type: Object,
value: {}
},
str: {
type: String,
value: ''
},
},
// 組件本地值
data: {
},
// 組件加載完成觸發(fā)
ready: function() {
// 使用父的變量
this.data.str
// 使用父方法
this.triggerEvent('onFun',e)
},
// 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時執(zhí)行
detached: function() {
},
methods: {
// 播放音樂
music_click() {
},
}
})
/component/index-page/index.json
{
"component": true
}
web-view
/pages/web/web.wxml文章來源：http://www.zghlxwxcb.cn/news/detail-414855.html
<web-view web-view src="{{weburl}}" bindmessage="onMessageHandle">
</web-view>
/pages/web/web.js文章來源地址http://www.zghlxwxcb.cn/news/detail-414855.html
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
// 用戶消息 處理
onMessageHandle: function(e) {
// 注意： 由于微信小程序接收h5傳來的數(shù)據(jù)，都是push到數(shù)組尾部的， 所以在取數(shù)據(jù)時，要取數(shù)組最后一條
var type = e.detail.data[[e.detail.data.length - 1]].type
var pages = getCurrentPages();
for (var i = 0; i < pages.length; ++i) {
var currentPage = pages[i];
let currentPage_url = currentPage.route;
if (currentPage_url == 'pages/index/index') {
// 獲取頁面組件
let countDown = currentPage.selectComponent('#index_page');
// countDown.music_click(); // 通過實(shí)例調(diào)用組件事件
countDown.setData({
datas: datas,
})
break;
}
}
},
})
h5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h5 向支付寶小程序傳參數(shù)</title>
<!-- 引入支付寶js -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 無解的是， 只有當(dāng)頁面小程序后退、組件銷毀、分享時 數(shù)據(jù)才能觸發(fā)message事件，進(jìn)行傳輸數(shù)據(jù)，其他不能
// 這種只能符合新開頁面進(jìn)行修改數(shù)據(jù)，然后修改成功進(jìn)行回退使用
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
</script>
</head>
<body>
</body>
</html>
到了這里，關(guān)于微信小程序組件、web-view、h5之間交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
