【微信小程序】页面跳转、组件自定义、获取页面参数值

🏆今日学习目标：第十七期——页面跳转、组件自定义、获取页面参数值
😃创作者：颜颜yan_
✨个人主页：颜颜yan_的个人主页
⏰预计时间：25分钟
🎉专栏系列：我的第一个微信小程序

---

---

前言

哈喽大家好，本期是微信小程序专栏第十七期。本期主要内容是页面跳转、组件自定义、获取页面参数值。
每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~

---

跳转到文章详情页面

新建文章详情页面。在app.json中新增页面路径，然后保存。

注册跳转事件。使用一个view组件将template包裹起来，将catchtap事件注册到view组件上。

在post.js中编写事件的响应函数onTapToDetaill。

组件自定义

单篇文章绑定postId

要想实现点击文章就跳转到相应的文章详情页面，就需要给每个文章设置一个id，然后绑定这个id，如下，绑定postId：

我们可以看到，每篇文章的id号都被绑定在该文章的view容器上。

通过dataset获取组件自定义属性

通过event.currentTarget.dataset.postId获取当前文章的postId。

event事件对象是由MINA框架在调用onTapToDetail函数时传递的参数，其中，currentTarget代表事件绑定的当前组件。
dataset对象包含当前组件中所有属性名以data-开头的自定义属性值。

组件自定义属性名的规则

1. 必须以data-开头。
2. 多个单词由连字符“-”连接。
3. 单词中最好不要有大写字母，如果有大写字母，除单词第一个字母外，其余大写字母将被转换为小写。
4. 在js中获取自定义属性值时，多个单词将被转化为驼峰命名。

获取页面参数值

在post-detail.js中获取postId，如下：

读取文章详情数据

现在，我们已经在文章详情页面中拿到了文章的postId，接下来要根据这个postId去缓存数据库中读取文章详细数据。

DBPost.js

如下，我们在DBPost.js中增加代码。首先修改constructor构造函数，增加一个构造参数postId并将postId保存到this变量中。
然后增加一个方法getPostItemById用于获取指定id号的文章数据。

// ES6语法
class DBPost{
    constructor(postId){
        this.storageKeyName = 'postList';
        this.postId = postId;
    }
    // 获取指定id号的文章数据
    getPostItemById(){
        var postsData = this.getAllPostData();
        var len = postsData.length;
        for(var i=0;i<len;i++){
            if(postsData[i].postId == this.postId){
                return{
                    // 当前文章在缓存数据库数组中的序号
                    index:i,
                    data:postsData[i]
                }
            }
        }
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

post-detail.js

先获取指定id号的文章数据，然后使用this.setData绑定数据。

   onLoad:function(options) {
        // 获取指定id号的文章数据
        var postId = options.id;
        this.dbPost = new DBPost(postId);
        this.postData = this.dbPost.getPostItemById().data;
        this.setData({
            post:this.postData
        })
    },
1
2
3
4
5
6
7
8
9

---

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~