(五)小程序的页面跳转--自定义组件--及相关使用)

(五)小程序的页面跳转--自定义组件--及相关使用)

页面跳转:

声明式跳转:

<navigator open-type="navigateTo" url=""/>   // 同下就只是open-type的内容不同

编程式跳转:

1. wx.navigateTo() // 推出新页面，并把新页面放入页面堆栈
2. wx.navigateBack() // 返回到前面的页面，并把页面堆栈中的上层页面弹出
3. wx.redirectTo() // 释放当前页面，进入新页面
4. wx.switchTab() // tabBar布局的页面，切换tab
5. wx.reLaunch() // 释放所有页面，并进入目标页面，相当于重新打开程序，进入到指定页面

注意: 跳转时候的url可以使用绝对路径，也可以使用相对路径，示例代码统一使用相对路径。url后面可以携带参数，格式跟html的链接格式一致

//实现方式 
wx.navigateTo({
      url: '../logs/logs?id=111&name=abcd',
})

页面跳转传参数 URL传参

/pages/meeting/index?mid=
//接收的页面用option参数接收
 onLoad: function (option) {
    var that = this;
    that.mid = option.mid;
}

创建自定义组件（子组件）

1. 首先没有明确组件应该放到那个地方 但是还是建议在components下面自己新建一个文件夹 进行组件的存放
2. 自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。例如创建一个collection组件，在components目录下创建collection目录。 然后右键直接新建一个index 系统会自动帮你生成所使用的四个文件，要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）
3. 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。
4. 要注意的就是这些 举个例子 for example such as

collection/index.wxml

<view class='collection'>
    <image src='{{collected?"images/heart-fill.png":"images/heart.png"}}'></image>
</view>

collection/index.wxss

.collection {
    width:50rpx;
    height:50rpx;
}

.collection image {
    width:100%;
    height:100%;
}

collection/index.js

Component({
    properties: {
        // 这里定义了collected属性，属性值可以在组件使用时指定
        collected: { 
            type: Boolean,
            value: false
         }
    },

    data: {
    },

    methods: {
    }

})

使用自定义组件 (父组件向子组件传值)

就是要在使用页面的.json文件里面 ，进行声明引用，此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径 v-collection的可以自己随便起一个名字。
然后就可以在自己的wxml里面进行使用了 和使用基础组件一样

{    
    "usingComponents": {       
         "v-collection": "/components/collection/index"    
    }
}

.wxml

<view>
    <v-collection collected='{{collected}}'><v-collection/>
</view>

.js

Page({
    data: {
        collected: false
    },
})

这个就完成了是使用 同时也体现了 父组件向子组件传值 的一些操作 类似于Vue的 prop传值

子组件向父组件传值 使用事件

父组件 wxml

        <submit-bar  bind:submit="submit" ></submit-bar>

父组件 js

      submit(event) {
          console.log(event);
      },

子组件

      this.triggerEvent("submit", 'Hello Grayly')

过程就是 子组件触发 父组件js 事件打印出console