美文网首页让前端飞微信小程序程序员
小程序入门技术点总结第二篇

小程序入门技术点总结第二篇

作者: 小伙子太认真 | 来源:发表于2019-03-13 21:51 被阅读14次

    这里,是我的第一篇,挺基础的。可以看看。

    接下来讲解我整理出来的第二篇。一般比较基础的话,我可能就用一张图说明

    1、轮播组件

    2、app.json全局配置和index.json页面配置

    3、模拟数据的使用

    4、如何跳转到详情页面并进行页面数据绑定。


    1、轮播组件怎么使用?

    微信小程序实现轮播就是使用swiper和swiper-item组件就行。参数的话根据自己的项目需求添加即可

    图一

    2、全局配置页面配置

    区别还是有点大的,全局配置的参数有15种,而页面配置只有一种,类似于全局配置的window。

    全局配置 页面配置,不用写window

    3、模拟数据的使用

    模拟数据其实跟require.js差不多,都是创建一个独立的文件夹,声明一个变量存储数组数据,再通过module.exports={}以键值对的形式,做一个数据接口。通过引用js文件获取到数据,将数据设置到AppData里面,就可以在对应的页面使用了。需要的看一下上一篇的模块js。(这里只提供思路)

    4、如何跳转到详情页面并进行页面数据绑定?

    情况是这样的:就是点击轮播图,会跳转到相应的详情页面。这个不同于我们写页面,我们写页面只要使用a标签就行是吧!但是微信小程序就写了一个详情页面,需要对页面进行渲染,以及数据绑定。也就有了一些挑战性。

    实现该功能的思路:

    上面图一就是在相应的位置,设置data-postid="xx"。为的就是可以通过点击事件将postid作为页面之间的参数传递,传过去详情页面。然后详情页面进行postid获取,通过postid找到对应的数据进行数据处理、存储进AppData里面,就可以进行页面页面数据绑定。

    1、data-postid之后,在js文件中获取postid,使用路由,让页面进行参数传递。

    首页的js文件

    2、页面加载获取参数,通过postid获取对应的数据(跟数组一样啦)。进行数据设置。注释的不用管

    详细页面的js文件

    相关文章

      网友评论

        本文标题:小程序入门技术点总结第二篇

        本文链接:https://www.haomeiwen.com/subject/smdgpqtx.html