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

前言

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

目录

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

---

效果图 项目结构图

操作步骤

1. 在pages中添加新的文件夹，内部建立[*.wxml，*.wxss，*.js，*.json]。
2. 页面中随意写点东西，例如<text>我是详情页</text>。
3. json中配置导航背景颜色与文字信息，看自己需要。
   talk-details

{
  "navigationBarTitleText": "文章详情",
  "navigationBarBackgroundColor": "#2c2e3b"
}

4. js中首先写入Page({})，避免报错如下：
   报错图
5. 准备工作好了，接下来就是正式开始编码了，页面编码如下：
   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>

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

6. 写完页面和样式文件后，接下来就是开始编写js文件了。
   talk-details.js

let details = require("../talk/talk-data/talk-data");
Page({
    data: {
        articles: {}
    },
    onLoad: function(options){}
});

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

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

   • 错误点：点击事件绑定在template上：

image.png

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

效果图

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

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

效果图

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

8. 文章跳转到文章详情页面

• 注意点：我们一般点击文章观看，实际是可以随时返回的，所以我们在此要使用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页面了，走你。

9. 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

说明

原创作品，禁止转载和伪原创，违者必究！