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

选题简介
- 工具使用心得
- 选题简介
新闻版块
- 创建项目
- 数据来源（知乎日报）
- 基本页编写
- 详情页编写
- - 数据获取
  - WxParse
- 样式表转换
- - 转换方法
  - 样式文件的引用
天气版块
- 数据绑定
- 数据来源
- 数据的展示
全局配置
- 页面配置
- 窗口配置
- 导航条配置

选题简介

工具使用心得

小程序是一种用户只需要扫描二维码或在微信上搜一搜即可打开的应用，无需下载安装即可使用的手机应用。微信小程序的开发直接使用微信团队提供的开发工具，有官方的标准开发文档，其基本开发思路同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=thiswx.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=thiswx.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 = thiswx.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"}]
}

至此整个项目开发完毕。

微信小程序开发实录——每日速递相关推荐

尚硅谷微信小程序开发仿网易云音乐App 小程序后端接口服务器搭建
目录小程序学习视频相关的教程文档与笔记分享配套服务器源码地址: 接口使用说明文档接口列表启动服务测试服务启动OK网页 http://localhost:3000/test.html编辑 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序存在的风险_微信小程序开发技术风险存在，如何规避是重点
微信小程序开发技术风险存在,如何规避是重点微信小程序自上线以来已经历经三年的时间,不断推陈出新,推展业务,如今已形成了一定规模和影响力,线上购物.在线点餐.预订服务.便捷出行.小游戏等多种多样的小程 ...
微信小程序开发多少钱怎么看价格成本
按照功能来看,很多人还是感觉app功能会比较全面,但是小程序的功能也逐渐完善,就开发和维护成本来看,也是小程序受欢迎的原因之一.有些不可替代的事实不得不承认,APP游戏是小程序"玩" ...
2019高校微信小程序开发大赛获奖作品——《brain头脑智序》
目录前言交互流程说明图我的任务登录授权(login) 首页(tababr分析) 房间准备区(preparing) 便签编辑区最终方案选择(房主权限) 会议报告页面(report) 前言今年 ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
微信小程序开发【一】-- 初识小程序
小程序已经火了很久了,一直想学习小程序,苦于工作比较忙,加班比较多没时间,当然这其实都是理由,很多时候习惯了搬砖,习惯了固定的圈子,很难也不想涉足其他的领域,但是也不能老错过一波又一波新鲜的东西吧. ...
在线刷题题库微信小程序开发制作功能介绍
在线刷题题库微信小程序开发制作功能介绍 1.题库大全:支持搜索查询各类课程试题答案. 2.多试题类型:支持单选题.多选题.判断题.问答题等多种类型. 3.批量导入:支持批量导入课程试题. 4.试题纠错 ...

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

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

选题简介

工具使用心得

选题简介

新闻版块

创建项目

数据来源（知乎日报）

基本页编写

详情页编写

数据获取

WxParse

样式表转换

转换方法

样式文件的引用

天气版块

数据绑定

数据来源

数据的展示

全局配置

页面配置

窗口配置

导航条配置

微信小程序开发实录——每日速递相关推荐

最新文章

热门文章