在微信小程序中搭建子母页面,通常涉及以下步骤:
创建页面文件
在 `pages` 目录下创建新的页面文件夹,例如 `subPage`。
在 `subPage` 文件夹中创建 `subPage.wxml`、`subPage.wxss`、`subPage.js` 和 `subPage.json` 四个文件。
编写子页面代码
在 `subPage.wxml` 中编写子页面的结构。
在 `subPage.wxss` 中编写子页面的样式。
在 `subPage.js` 中编写子页面的逻辑,包括数据和方法。
在 `subPage.json` 中配置子页面的导航栏标题等。
在母页面中引入子页面
在母页面的 `wxml` 文件中,使用 `
```html
```
在母页面的 `js` 文件中,使用 `this.importComponent` 方法引入子组件,例如:
```javascript
const subPage = this.importComponent('/pages/subPage/subPage');
```
在母页面中显示子页面
在母页面的 `wxml` 文件中,使用 `
```html
```
在母页面中调用子页面方法
在母页面的 `js` 文件中,通过 `this.selectComponent` 方法获取子组件的实例,然后调用其方法,例如:
```javascript
onLoad: function (options) {
let myView = this.selectComponent('subPage');
myView.childrenFn();
}
```
传递参数
如果需要从子页面向父页面传递参数,可以使用 `wx.navigateBack` 方法返回时携带参数,或者在父页面使用 `getCurrentPages` API 获取当前页面栈,然后修改父页面的数据。
子页面 (subPage.wxml):
```html
```
子页面 (subPage.js):
```javascript
Page({
data: {
message: 'Hello from sub page!'
},
childrenFn: function() {
console.log('This is a function from sub page');
}
});
```
母页面 (index.wxml):
```html
```
母页面 (index.js):
```javascript
Page({
navigateToSubPage: function() {
wx.navigateTo({
url: '/pages/subPage/subPage'
});
}
});
```
通过以上步骤,你可以在微信小程序中搭建一个简单的子母页面结构。根据实际需求,你可以进一步扩展和优化代码。