小程序项目实战之readerMovie（一）

前言

很多人一开始都觉得小程序是小菜一碟，因为学过三大框架，熟知数据驱动的同学一定会认为能很快学会小程序。

然而事实并非如此，因为小程序的错误很隐秘，有的问题很难去调试，只能摸着石头过河

现在我就想把我过河的一些心得分享出来，让大家少走弯路

小菜--萝卜和青菜

————不要小看了萝卜和青菜，它们也会塞牙齿缝

从本地数据到渲染到视图上大概要经历这么几个过程：

①定义页面(app.json)

做一个新的页面之前就要记得定义页面，不定义页面的话就会报错

{
  "pages": [
    "pages/posts/post",
    "pages/welcome/welcome",
    "pages/posts/post-detail/post-detail"
  ]
}

②请求数据，并绑定到当前data属性之下

用本地数据去模拟接口数据：

// import postList from '../../data/posts-data'
var postData = require('../../data/posts-data')

注意导入的方法是require，不能使用import方法

绑定到data上面：

// this.data.postList = postData.postList
    this.setData({postList: postData.postList})

这里也有两种方式，考虑到请求数据是异步的所以一般采用setData,而且直接赋值会带来各种各样的问题

?导入模板,遍历数据

<import src="post-item/post-item-template.wxml" />
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
       <template is="postItem" data="{{...item}}"/>
</block>

这里不能直接在template上面写遍历，需要加一个遍历的组件，那就是block，这个组件不代表任何意义，只实现遍历的功能，并且不能绑定事件

④跳转至内页

点击事件:catchtap

加了一层view来绑定事件，并且需要把id值存在view上面,这样js中通过【event.currentTarget.dataset.postid】来获取id

 <view catchtap="onPostTap" data-postId="{{item.postId}}">
             <template is="postItem" data="{{...item}}"/>
</view>
onPostTap: function (event) {
        var postId = event.currentTarget.dataset.postid;
        // console.log("on post id is" + postId);
        wx.navigateTo({
            url: "post-detail/post-detail?id=" + postId
        })
}

⑤内页渲染

onLoad: function (option) {
        var postId = option.id;
        this.data.currentPostId = postId;
        var postData = postsData.postList[postId];
        this.setData({
            postData: postData
        })

    }