【原】小寫了一個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
        })
    }
})

代碼有點長，不過沒關系，我們來分析一下：

  Page()函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。

    Page()里面有很多的參數，不過我們只用到了其中的三個，onLoad和onReachBottom,data。

　 onLoad是監聽頁面的加載，也就是說頁面一加載完成就會執行。 onReachBottom是頁面上拉觸底事件的處理函數，我們這里用來做上拉加載更多的操作，也就是上拉一次，請求的頁碼參數就加1；data是頁面初始數據。

     那么獲取到的數據怎樣傳給頁面呢，可以通過page()中的data參數，它是頁面的初始數據。如果你想改變初始數據，比如頁面請求完成了，可以通過this.setData來對初始數據進行修改。

　　還有對於請求參數的修改，我們不是直接傳到onLoad里面，而是通過this.setData()來對初始參數就行修改，從而達到修改參數目的，比如首頁上面的五個tab切換，后者是上拉加載更多的實現，都是通過這種方式來進行傳值的。

     除此之外，我們還注冊了兩個事件，一個是handleTap，控制首頁(index頁)的tab切換，每次切換我們要拿到該tab對應的tab值，從而拿到該tab對應的數據。在page定義中的相應事件處理函數，參數是event。我們來看看下面的代碼：

 handleTap: function(event){
        console.log(event);
        let tab = event.currentTarget.id;
        if(tab){
            this.setData({ 
                currentTab: tab,
                page:1  //重置page為1
            })
            this.onLoad();
        }
   }

我們console.log(event)的內容如下：

 

我們注冊的另一個事件是goToDetail，用來跳轉到詳情頁，並傳入一個id過去：

 goToDetail:function(e){
        var id=e.target.id;
        // wx.navigateTo，是保留當前頁面，調到應用內某個頁面，使用wx.navigateBack可以返回
        wx.navigateTo({
          url: '../detail/detail?id='+id
        })
    }

    這里我們調用小程序里面提供的wx.navigateTo來跳轉到詳情頁，它會保留當前頁面，當你返回的時候可以返回上一級頁面。也可以這么理解，wx.navigateTo相當於在當前頁面上方加了一層遮罩，這個遮罩就是你要跳轉頁面，當你點擊返回時，這層遮罩消失，因此你又回到了當前頁。

 

 接下來我們介紹index.wxml

代碼如下：

　　

<import src="../../common/template.wxml"/>

<view class="index">
    <view class="nav-scroll">
        <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
            <text wx:for="{{section}}" wx:key="tab" id="{{item.tab}}" catchtap="handleTap" class="nav-name {{item.tab == currentTab ? 'nav-hover' : ''}}">{{item.name}}</text>
        </scroll-view>
    </view>

    <view class="mod-item" wx:for="{{dataList}}" wx:key="{{index}}">
        <image src="{{item.author.avatar_url}}" class="image-item"></image>
        <view class="text" catchtap="goToDetail" id="{{item.id}}" >{{item.title}}</view> 
        <!-- 下面的寫法也可以跳轉到詳情頁：
         <navigator class="text" url="../detail/detail?id={{item.id}}" open-type="navigate" hover-class="other-navigator-hover">
        {{item.title}}
        </navigator> -->
    </view>

    <template is="loadings" data="{{loading,loadtxt}}" />
    
</view>

      其實跟我們的html差不錯，不過它又不是html，因為在這里你不可以使用html的語法，否則會報錯，而是要使用文檔中規定的那些標簽。可以看看文檔中組件部分。

　　我們對里面的內容進行分析：

      在WXML中，小程序提供了模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。

      我們的index.wxml中也引入了一個loading的模板，我們來看看common/template.wxml里面的內容

<!-- loading模板  -->
<template name="loadings">
    <view class="tips {{loading ? 'hide': ''}}">
        <image src="../../image/loading.gif" mode="aspectFit" />
        <text>{{loadtxt}}...</text>
    </view>
    <loading hidden="{{loading}}">
        {{loadtxt}}...
    </loading>
</template>

    我們定義的是一個loading的模板，這樣的話在需要用到loading的地方都可以用到。不過有個前提，調用它的地方要提供和模板里面一樣的數據結構。

如何使用呢，使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：

<template is="loadings" data="{{loading,loadtxt}}" />

   注意點：在模本里面的文件路徑是相應於引用它的頁面的路徑，如果圖片路徑被寫在一個js文件A里，而B引用了這個js文件，那么圖片的路徑必須是相對於B的相對路徑。所以，最好在公共的js文件里使用絕對路徑。

    繼續我們的頁面分析，頁面的數據那里來的呢，來自於index.js的app()里面的data參數里，比如我們的data里面有section這個數組，可以用來渲染首頁的tab切換，data里面有dataList這個數組，用來渲染請求返回的數據。在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

　　前面我們也說了我們handleTap和goToDetail兩個事件，怎樣綁定在頁面上呢，可以用bindTap或catchTap的方式，不過catchTap不會冒泡，使用方法是這樣：

<view class="text" catchtap="goToDetail" id="{{item.id}}" >{{item.title}}</view> 

 

注意點：

當你的小程序可以正常運行的時候，應該會有這樣的一個報錯;

 

 解決方法：打開小程序微信公眾平台設置小程序開發設置，配置服務器合法域名（必須是https），如下圖

 

 

    這樣，我們的首頁基本就完成了。因為css部分和正常的css一樣，沒啥好說的。分析一下首頁的代碼，發覺小程序有點借鑒react的思想，比如數據初始化還有一些page上提供的事件。如果你之前玩過react，入門起來會快很多。如果你有用騰訊的artTemplate這個js模板引擎的話，就更好理解一些。

 

接下來說一說詳情頁：

我們在首頁中，通過wx.navigateTo跳轉到了詳情頁，並傳入了詳情頁需要的id

   goToDetail:function(e){
        var id=e.target.id;
        wx.navigateTo({
          url: '../detail/detail?id='+id
        })
    }

 

我們來分析一下詳情頁的一些內容，首先來分析它的js，也就是pages/detail/detail.js

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

// 引入這個是為了解析詳情頁的html
var WxParse = require('../../wxParse/wxParse.js');

Page({

    data:{
        title:'',
        loading: false,
        loadtxt: '正在加載',
        data:{}
    },
    onLoad: function(params){
        console.log(params); //這里是上一個跳轉頁面傳過來的參數，可以直接獲取
        var id=params.id;
        var self=this;//這里需要注意
        wx.request({
          url: 'https://cnodejs.org/api/v1/topic/'+id, 

          header: {
              'content-type': 'application/json'
          },
          success: function(rs) {
            console.log(rs);
            var data=rs.data.data;
            var content=data.content;
            self.setData({
                loading: true,
                loadtxt: '數據加載完成',
                data: data
            });
            /**
            * WxParse.wxParse(bindName , type, data, target,imagePadding)
            * 1.bindName綁定的數據名(必填)
            * 2.type可以為html或者md(必填)
            * 3.data為傳入的具體數據(必填)
            * 4.target為Page對象,一般為this(必填)
            * 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
            * 可參考此文：https://weappdev.com/t/wxparse-version0-2-html-markdown/326 -->
            */
            WxParse.wxParse('content', 'html', content, self,5);
          }
        });
    },

})

我們怎樣來拿到上一個頁面傳過來的值呢，我們可以在onLoad時間中寫一個參數，這個參數就是獲取url上傳過來的值，它是一個對象

onLoad: function(params){
        console.log(params); //這里是上一個跳轉頁面傳過來的參數，可以直接獲取
}

這是控制台打印的內容，這樣的話，根據獲取的id，我們就可以傳給后台請求到對應的詳情頁了。

     詳情頁和首頁的原理基本差不多，不過詳情頁content字段返回的是html結構，微信小程序暫時還沒有富文本html、md解析組件。所以如果直接渲染content的話，會直接把html標簽頁顯示出來。

 那怎么辦呢，我們需要引入一個外部的從來解析html的組件wxParse，鏈接地址在這里：https://weappdev.com/t/wxparse-version0-2-html-markdown/326

這樣的話，html的富文本就可以在頁面上正常顯示了。這樣，我們的任務也就完成了

 

項目已上傳到github: https://github.com/xianyulaodi/cnodeLittleProgram

 

    總結：因為獲取的AppID是沒有交錢的，所以不能正常的發布。不過可以用來上手。總體下來， 小程序入門不難，大部分時間還是看文檔為主，最好的學習方式是把對着demo來看文檔，或者對着文檔來看demo,然后自己再模仿寫一個。可以模板cnode，豆瓣，知乎日報這些，因為這些有開放的API可以拿來用。

　　不過怎么說呢， 個人覺得，小程序還是不能取代原生app的，除了剛出來那會被刷爆朋友圈之外，現在感覺冷下來了，而且還有挺多坑沒有填完，所以不用急着去玩小程序，搞好我們前端的基礎才是最重要的。