微信小程序入门级教程-04

作者: liuuuuuu | 来源:发表于2018-03-22 17:30 被阅读11891次

    前言

      上篇教程我们讲解了关于js文件中的假数据优化和模板化开发,今天我们这里就来继续完成小程序的功能,添加项目详情页开发,期间会遇到很多小问题,会一一讲解。

    目录

    https://www.jianshu.com/p/9c9b555b52e8

    效果图 项目结构图

    操作步骤

    1. pages中添加新的文件夹,内部建立[*.wxml,*.wxss,*.js,*.json]
    2. 页面中随意写点东西,例如<text>我是详情页</text>
    3. json中配置导航背景颜色与文字信息,看自己需要。
      talk-details
    {
      "navigationBarTitleText": "文章详情",
      "navigationBarBackgroundColor": "#2c2e3b"
    }
    
    1. js中首先写入Page({}),避免报错如下:
      报错图
    2. 准备工作好了,接下来就是正式开始编码了,页面编码如下:
      talk-details.wxml
    <view class="container">
        <image class="banner" src="{{articles.thumbnail}}" alt="slt"></image>
        <view class="authorData">
            <image class="avatar" src="{{articles.avatar}}"></image>
            <text class="nickname">{{articles.name}}</text>
            <text class="constText">发表于</text>
            <text class="releaseData">{{articles.date}}</text>
        </view>
        <text class="title">{{articles.title}}</text>
        <view class="option">
            <view class="icon">
                <image class="collection" src="../../images/avatar/avatar-02.jpg"></image>
                <image class="share" src="../../images/avatar/avatar-03.jpg"></image>
            </view>
            <view class="hr"></view>
        </view>
        <text class="content">{{articles.content}}</text>
    </view>
    

      样式文件就不单独列出来了,看自己喜欢怎么排版就怎么写,这个随意,我们主要讲的东西是交互类的东西,样式这个东西就不细谈了。

    1. 写完页面和样式文件后,接下来就是开始编写js文件了。
      talk-details.js
    let details = require("../talk/talk-data/talk-data");
    Page({
        data: {
            articles: {}
        },
        onLoad: function(options){}
    });
    

    我们在此引入了talk-data中的假数据,上篇文章已经讲解了怎么引入,所以在这里,我们直接引入就可以了。

    1. 回到文章列表页面,制作一个点击事件然后跳到详情页。

      • 错误点:点击事件绑定在template上:
    image.png

      疑问:为什么绑定在template上,点击没效果??
      解析:咱们打开console看看页面结构。

    效果图

      这下子清楚了吧?因为页面结构中根本找不到template这个DOM节点,所以根本也就不存在绑定了函数,那么下一个问题来了,咱们把函数绑定在template父级DOM上,是否可以了呢?如果有这么想的同学,请在看看上图,看看里面出现了block标签吗?没有,对吧,因为block只是一个快级的文章临时标签,不会实际渲染在页面结构中,所以这个问题,大家一定注意好吗。

    解决方法:在emplate外部添加一个view容器包括住,如下图:

    效果图

    如此绑定函数,即可准确的实现整篇文章的点击事件,我们接下来就在talk.js中实现跳转功能。

    1. 文章跳转到文章详情页面
    • 注意点:我们一般点击文章观看,实际是可以随时返回的,所以我们在此要使用wx.navigateTo跳转,而不是使用wx.redirectTo,切记!
    知识点 简介
    wx.navigateTo 相当于文章隐藏,其实页面并不会真正被销毁掉
    wx.redirectTo 页面被销毁,无法返回上一页

      大家可以看到我们在上图中,给view绑定了一个data-aid的属性,这里是将文章的id绑定在这个DOM上,方便我们做交互。

    image.png

      在上图中,点击事件实际会有一个event参数的,里面将存放该DOM的一些属性。不知道的同学,可以打印出这个event看看有什么东西。

    event属性

      可以看到,我们在该属性中找到了我们绑定的文章ID,所以在这里,我们先将id存在一个变量中,然后再跳转文章详情页时带过去,以get的方式。

    接下来,talk页面的事情完成之后,咱们又要回到talk-details页面了,走你。

    1. talk-details页面接收参数
      • 注意点:如果有页面传参数过来,在获取参数页面的reload函数中,将会得到该参数,如下所示:
        talk-details.js
    let details = require("../talk/talk-data/talk-data");
    Page({
        data: {
            articles: {}
        },
        onLoad: function(options){
            let aid = options.aid; // 直接获取文字id
            this.setData({
                articles: details.articleList[--aid]
            })
        }
    });
    

      上面代码就直接获取了由talk页面传过来的aid这个参数,然后获取参数后,因为之前已经引入了假数据文件talk-data.js,所以我们在这里,就直接将data中的articles对象替换成对应ID的文章对象。

      然后页面之前已经写好了对应代码,所以这个时候,整体功能就已经完成了,关于本节中详细说明的几个注意点,大家可以着重看看,谢谢大家!

    项目源码:demigod-liu / douban-movies

    说明

    原创作品,禁止转载和伪原创,违者必究!

    相关文章

      网友评论

      • SLan荥:好奇
        articles: details.articleList[--aid]
        这个--是什么意思
        liuuuuuu:@SLan荥 --aid就是索引值先自减再计算
        liuuuuuu:@SLan荥 这个字段也就是个属性,这个属性是个数组
        liuuuuuu:@SLan荥 details是引用的假数据,里面有个articleList字段

      本文标题:微信小程序入门级教程-04

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