【原】小写了一个cnode的小程序

     小程序刚出来的第一天，朋友圈被刷屏了，所以趁周末也小玩了一下小程序。其实发觉搭建一个小程序不难，只要给你一个demo，然后自己不断的查看文档，基本就可以入门了，不过对于这种刚出来的东西，还是挺多坑的，也就是文档说的bug&tips

　　本文只是搭建了cnode的首页和详情页，其他的什么个人中心啊，搜索啊，都是一样的道理，照葫芦画瓢，首页和详情页会了，其他的页面也就会了，所以其他页面我就偷懒没写了。

　　为什么会想到模仿cnode呢，因为这个网站有公开的API文档，调用起来方便。文档地址在这里：https://cnodejs.org/api

接下来，正式开始我们的微信小程序之旅

构建准备工作

构建过程我这里直接列举一些链接的方式，因为想把主要的篇幅用来写程序的过程。

1、首先你需要注册一个微信小程序的开发平台： 点这里

2、其次你需要完善你的信息，来获取AppID，如果没有AppID的话，微信小程序的有些功能是用不了的，个人的话是无法申请到的，要有企业的验证信息，不过可以看看这篇文章破解：点这里

3、需要下载一个微信开发者工具：点这里

4、前面的步骤准备好之后，开始构建我们的项目，构建过程可以看看这篇文章：点这里

正是开始搭建

这是我们完成之后的视图

 

页面分析：

    我们可以看到，页面的页脚有3个导航按钮,分别是首页、搜索、我的。

    首页的话有5个tab切换，分别是全部、精华、分享、问答、招聘，当我们点击文章标题的时候，可以跳转到对应的详情页，按返回，可以回到上一级页面。上拉，可以加载更多。接下来我们就来完成这些功能。

小程序的开发文档在这里，可以跟着文档来看下面的代码：文档

我们的目录结构如下：

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/detail/detail.wxml

pages/detail/detail.js

pages/detail/detail.wxss

app.js

app.json

app.wxss

 

首先是使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
    "pages": [
        "pages/index/index",
        "pages/my/my",
        "pages/search/search",
        "pages/detail/detail"
    ],
    "window": {
        "navigationBarBackgroundColor":"#2b2e33",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "cnode",
        "backgroundColor": "#fff",
        "backgroundTextStyle": "#dark"
    },
    "tabBar": {
        "color": "#74777e",
        "selectedColor": "#f06000",
        "borderStyle": "white",
        "backgroundColor": "#fff",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "image/wp.png",
        "selectedIconPath": "image/wpselect.png",
        "text": "首页"
    }, {
        "pagePath": "pages/search/search",
        "iconPath": "image/ss.png",
        "selectedIconPath": "image/ssselect.png",
        "text": "搜索"
    },{
        "pagePath": "pages/my/my",
        "iconPath": "image/my.png",
        "selectedIconPath": "image/myselect.png",
        "text": "我的"
    }]
    },
    "networkTimeout": {
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
    },
    "debug": true
}

     我们在app.json中的pages来设置我们的设置页面路径，数组的第一项代表小程序的初始页面，我们的首页是初始页，所以在page中的第一个。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

     在app.json中的list中，我们从来设置tab列表，也即是页面中底部的导航栏，该list最少2个，最多5个。并且设置了对应页面路径、tab按钮的文字、icon路径，选中之后的图片路径等。

　　其他的配置内容可以看看文档，因为不可能全局介绍完，否则内容太多了。

 

     注意点：

　　当我们跳转到详情页的时候，因为详情页是新增页面，但是底部的导航栏是没有详情这个选项的，所以我们需要在app.json中pages数组中增加详情页的路径，但是在list数组中不需要增加，否则会报错。

 

配置文件搞好了，接下来开始书写我们的首页

一个小程序页面由四个文件组成，分别是：js、wxml（相当于html）、wxss(相当于css)、json（页面配置），这四个文件必须具有相同的路径与文件名。

所以我们首页结构是：

pages/index/index.js

pages/index/index.wxml

pages/index/index.wxss

 

index.js如下：

/*
* @Author: xianyulaodi
* @Date:   2017-01-16 17:33:45
*/

//创建精选页面对象
Page({

    data: {
        loading: false,
        loadtxt: '正在加载',
        currentTab: 'all',
        dataList:[],
        page:1,
        section: [
            {name : '全部',tab : 'all'},
            {name : '精华',tab : 'good'},
            {name : '分享',tab : 'share'},
            {name : '问答',tab : 'ask'},
            {name : '招聘',tab : 'job'}
        ]
    },
    /*
    *@param {Number} page      页数
    *@param {String} tab       主题分类。目前有 ask share job good
    *@param {Number} limit     每一页的主题数量
    *@param {String} mdrender  当为 false 时，不渲染。默认为 true，渲染出现的所有 markdown 格式文本。
    */
    onLoad: function(){
        var self=this;//这里需要注意
        wx.request({
          url: 'https://cnodejs.org/api/v1/topics', 
          data: {
             'page':self.data.page,
             'tab':self.data.currentTab,
             'limit':10,
             'mdrender':true,
          },
          header: {
              'content-type': 'application/json'
          },
          success: function(rs) {
            var dataArr=rs.data.data;
            console.log(dataArr);
            var dataList=self.data.dataList;
            //合并数组，用于上拉加载更多,没有append方法，我这种方法不是很好，因为到后面数组会很大
            var renderArr=self.data.page==1 ? dataArr : dataList.concat(dataArr);
            self.setData({
                loading: true,
                loadtxt: '数据加载完成',
                dataList: renderArr
            })
          }
        })
    },

    // 页面上拉触底事件的处理函数，用于上拉记载更多
    onReachBottom:function(e){
        var page=this.data.page;
        // 控制一下，最多显示十页的数据
        if(page<10){
            this.setData({ page: page+1 });
            this.onLoad();
        }
        return false;
        
    },
    handleTap: function(e){
        //console.log(e);
        let tab = e.currentTarget.id;
        if(tab){
            this.setData({ 
                currentTab: tab,
                page:1  //重置page为1
            })
            this.onLoad();
        }
    },
    /*
    使用wx.navigateTo或者直接使用它的组件navigator要注意：
    在app.json里面也需要pages里面的配置里要写上跳转的路径，但是在app.json里面不需要写上这个跳转的路径。
    */
    goToDetail:function(e){
        var id=e.target.id;
        console.log(id);
        // wx.navigateTo，是保留当前页面，调到应用内某个页面，使用wx.navigateBack可以返回
        wx.navigateTo({
          url: '../detail/detail?id='+id
        })
    }
})

View Code