微信小程序开发实录——每日速递

选题简介

工具使用心得

小程序是一种用户只需要扫描二维码或在微信上搜一搜即可打开的应用，无需下载安装即可使用的手机应用。微信小程序的开发直接使用微信团队提供的开发工具，有官方的标准开发文档，其基本开发思路同H5类似，只是将前端中常见的HTML、CSS变成了自定义的WXML、WXSS，个别标签以及写法有所区别。其次JSON、JS文件中的写法也稍有限制，但是整体需要掌握的内容并不多。
一旦掌握了这些标准，剩下的就是专注于开发整个项目了。

选题简介

我选择的开发内容为：新闻推荐+天气预报，属于偏工具的内容性产品，核心功能在于通过各种途径获取网络上的数据，并将之显示到小程序界面上，其总体功能结构下图：

图1-1 整体结构图

新闻版块

创建项目

在微信开发者工具中创建了项目之后，删除掉原有的界面内容和样式，删掉log文件，在app.json中添加page：

  "pages":[
    "pages/logs/logs",
    "pages/index/index"
  ],

其余的暂时先不管。

数据来源（知乎日报）

用浏览器打开该网址：https://news-at.zhihu.com/api/4/news/latest，可以看到即将使用的数据内容，如图2-1所示：

图2-1 数据来源

首先将数据的获取函数写入index.js的onLoad函数中，再使用微信小程序自带的request方法，用‘url’定位数据链接，成功获取到数据后，再用success函数返回得到的数据

<!--pages/index/index.js-->
  onLoad: function (options) {
    var that=this
    wx.request({
      url: 'https://news-at.zhihu.com/api/4/news/latest',
      success:function(rsp){
        //console.log(rsp);
        that.setData({
          "top":rsp.data.top_stories,
          "all":rsp.data.stories
        })
      }
    })
  },

源数据分为两部分，分别是“stories”、“top_stories”，这里为了方便后续处理，我将得到的数据修改为 “all”、“top”。
调用时需要特别注意源数据的树状结构，它直接决定后续的界面内容如何设计。

基本页编写

基本页分为两部分，一部分是轮播图，另一部分是新闻列表。
首先是轮播图，微信小程序提供了swiper方法来显示，具体代码如下：

<!--pages/index/index.wxml-->
  <swiper class='swiper' indicator-dots='true' indicator-color='#fff' indicator-active-color='red' autoplay='true'  circular='true'>
   <block wx:for="{{top}}">
     <navigator url='../detail/detail?id={{item.id}}'>
       <swiper-item>
        <image src="{{item.image}}" class='slide-image'></image>
        <text class='title'>{{item.title}}</text>
       </swiper-item>
     </navigator>
    </block>
  </swiper>

在这里负责内容的循环，负责页面的跳转，其中具体的数据均为在第三步中获取的数据。实现的效果如图2-2所示：

图2-2 轮播图效果

其次是新闻列表，对比轮播图的实现方法，不再需要标签，但同样需要用循环，只是此次循环的内容不再是“top”，而是“all”。这里为了节省篇幅不再赘述。

详情页编写

这部分要麻烦一点。
详情页顾名思义就是点开新闻后里面具体的呈现的页，在主页的设计过程中已经添加好了链接，现在就是需要填充好详情页的内容。

数据获取

依然在onLoad函数中、使用request方法，用‘url’定位数据链接，不同的是由于这里要用的数据是JSON格式的，所以需要规定一下：

<!--pages/detail/detail.js-->
onLoad: function (options) {
  var that=this
  wx.request({
    url: 'https://news-at.zhihu.com/api/4/news/' + options.id,
    headers:{
      'Content-Type':'application/json'
    },
    success:function(rsp){
     //console.log(rsp)
     that.setData({
       'art': rsp.data,
       'content': WxParse.wxParse('content','html',rsp.data.body,that,0)
     })
    }
  })
},

这部分的数据树形就比较简单粗暴，仅由两层构成，其中‘body’包括了HTML全部的页面信息。
也正由于数据源有这种特点，主页中呈现的内容会出现一大堆的HTML标签。

WxParse

WxParse是小程序中解析html的一个插件，由于在上一步中获取的文章内容都是HTML的，而小程序默认是不支持html格式的内容显示的，需要显示html内容的时候，就可以通过wxParse来实现。
（wxParse官方下载地址：https://github.com/icindy/wxParse）
下载好后，将下载好的文件拷贝到自己的工程文件夹下，在js文件中引用。

var WxParse = require('../../wxParse/wxParse.js')

引用后，将success函数中setData方法中的‘content’修改为：

'content': WxParse.wxParse('content','html',rsp.data.body,that,0)

此时，‘content’中的内容就转换成了微信小程序可以解析的内容。

样式表转换

在详情页的数据页面中，我们不难发现，里面也导航了它自定义的css样式：

图2-3 数据源页面截图

在这里，为了将里面的样式内容全部“copy”出来，需要另外准备出一个css文件，而该文件就是我们定义content内容的样式文件。
值得一提的是，虽然html和微信小程序基本是同源的，但是css与wxss确确实实还是有很多区别，不能直接引用，需要一定的转换。

转换方法

直接给出网址：https://linux.ctolib.com/o2team-html-to-wxapp.html
这种方法需要安装node.js，但如果装好后，就是一两个命令行的事情了，这里为了节省篇幅不再赘述。

样式文件的引用

将转换好的文件拷贝到工程文件中，在wxml进行引用：

<import src='../../wxParse/wxParse.wxml'/>

在wxss中进行引用：

@import "/wxParse/wxParse.wxss";
@import "/common/zhihu.wxss";

zhihu.wxss即为转换好的文件。主体中采用对应的wxParse插件中的模板：

<!--pages/detail/detail.wxml-->
<import src='../../wxParse/wxParse.wxml'/>
<view>
<view class='art-header'>
  <image src='{{art.image}}' class='art-image'></image>
  <view class='art-title'>{{art.title}}</view>
   <!--<view class='art-source'>{{art.image_source}}</view>--> 
  </view>
<view class='content'>
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
{{content}}
</view>
</view>

至此，整个新闻版块的内容开发完毕。

天气版块

这部分内容开发思路同第二章差不多，由于未牵扯到样式文件的转换，对比起来还会简单一些，唯一不同的就是数据的获取与处理上，这里进行重点说明。

数据绑定

在wxml页用input方法，弄一个输入框：

<input placeholder='输入城市(*^▽^*)' name='cityid' bindblur='getCityId'></input>

再在js中对’getCityId’方法进行定义：

  <!--pages/weather/weather.js-->
getCityId: function (event) {
  this.setData({
    id: event.detail.value == '' ? '北京' : event.detail.value
  })
  this.getResults()
},

这里输入的数据默认为‘北京’。

数据来源

这里所用的天气数据，来自于聚合数据（官网：https://www.juhe.cn）。在这里，我这边申请了一个免费的数据接口，如图3-1所示：

图3-1 数据接口

该接口的具体说明文档如下：

图3-2 接口API文档

图3-3 必填参数

根据以上文档，我们就可以在js中定义接口函数：

<!--pages/weather/weather.js-->
//获取聚合数据的接口
getResults: function () {
  let that = this
  wx.request({
    url: 'http://apis.juhe.cn/simpleWeather/query',
    data: {
      city: that.data.id,
      key: '15a6891cc915fe01ca472b285561f4d4'
    },
    success: function (rsp) {
      console.log(rsp)
      that.setData({
        city: rsp.data.result.city,
        future: rsp.data.result.future,
        realtime: rsp.data.result.realtime,
      })
    }
  })
},

在页面加载函数中，执行该函数：

// 生命周期函数--监听页面加载
onLoad: function (options) {
  this.getResults();
},

请求回来的数据如图3-4：

图3-4 实时数据截图

数据的展示

获取到数据之后，按照同样的方法，我们对数据进行拆分，数据树状图如下：

图3-5 数据树图

在这里，‘realtime’代表实时的天气数据，‘funture[1]’为今天的天气情况数据，‘funture[2]’、‘funture[3]’、‘funture[4]’、‘funture[5]’为未来四天的天气数据。后续的内容基本就是样式的编写了。

全局配置

微信小程序的全局配置是在根目录下的 app.json 文件中，主要用来决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

页面配置

整个项目涉及到三个页面，新闻页、新闻详情页、天气页：

  "pages":[
    "pages/index/index",
    "pages/detail/detail",
    "pages/weather/weather"
  ],

当然如果有空还可以顺手加个登录页。

窗口配置

窗口配置涉及到整个窗口背景颜色、文字样式、和标题内容：

  "window":{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "每日速递",
  "navigationBarTextStyle":"black"
},

导航条配置

导航条就是小程序最下方显示的内容，这部分也是连接两个内容的核心，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
对于tabBar的List中文字text，微信团队中还没提供相应的方法来修改它的样式，在网上找了很多方法效果也不好，还非常复杂，这里为了美观，借助List中的‘iconPath’属性为每个List中加了个小图标放在文字上方，最后好看了很多：

"tabBar": {
  "color":"#999999",
  "selectedColor":"#6fdc56",
  "backgroundColor":"#ffffff",
  "borderStyle":"black",
  "position":"bottom",
  "list":[
    {
      "pagePath":"pages/index/index",
      "text":"新闻",
      "iconPath": "images/news.png",
      "selectedIconPath": "images/news.png"
    },
    {
      "pagePath": "pages/weather/weather",
      "text": "天气",
      "iconPath": "images/weather.png",
      "selectedIconPath": "images/weather.png"
    }
  ]
}

至此整个项目开发完毕。