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

简介: 单词中最好不要有大写字母,如果有大写字母,除单词第一个字母外,其余大写字母将被转换为小写。

0b4dfb40b94746ac94098cd03b8bf20a.gif


🏆今日学习目标:第十七期——页面跳转、组件自定义、获取页面参数值

😃创作者:颜颜yan_

✨个人主页:颜颜yan_的个人主页

⏰预计时间:25分钟

🎉专栏系列:我的第一个微信小程序


前言


哈喽大家好,本期是微信小程序专栏第十七期。本期主要内容是页面跳转、组件自定义、获取页面参数值。


每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


跳转到文章详情页面


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


eefb0b358a0742cc95c57c5db6dbf13b.png


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


10d215522a434529b96d7734c98e1b53.png


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


0565762dfa8b459c843ca3d71b0b0318.png


组件自定义


单篇文章绑定postId


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


5a1ac2eb33414866a9dfca7748953bce.png


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


d27b851ceeb843b886a8f1d35d8c29f0.png


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


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


event事件对象是由MINA框架在调用onTapToDetail函数时传递的参数,其中,currentTarget代表事件绑定的当前组件。


dataset对象包含当前组件中所有属性名以data-开头的自定义属性值。


837cf061dccf4f88aec30f0fb8b8eaf9.png


组件自定义属性名的规则


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


获取页面参数值


在post-detail.js中获取postId,如下:


2692f849faaf40d2a61ad97aa3f7cc6a.png


读取文章详情数据


现在,我们已经在文章详情页面中拿到了文章的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]
                }
            }
        }
    };


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
        })
    },


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


aadaa9f7c5bb49cbb8967ff86729bb30.gif

相关文章
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
4月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
166 1
|
4月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
832 1
|
4月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
123 0
微信小程序:自定义关注公众号组件样式
|
5月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
5月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
17天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
20天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
18 0

热门文章

最新文章