CODERFE

微信小程序——知乎日报

2016月9月,微信开始内测“小程序”,引起了各路开发者的关注,网上的教程也是如雨后竹笋一般的冒了出来,而且 Github 上已经有了 awesome-wechat-weapp 系列了,收集了小程序的开发教程、官方文档、设计规范、API 等等资源。今天也来用微信小程序练练手,做了一个微信小程序版的知乎日报。

准备

创建项目

使用开发者工具就可以创建一个小程序,当然也可以进行代码的编辑,我还是选择了使用 VSCode 来进行开发。要注意的是 AppID 只有内测的开发者才有,但是它也提供了无 AppID 开发环境,只是 API 有所限制罢了。微信的这个开发者工具其实还是比较封闭的,暂时没有同步刷新等功能。为了方便在 VSCode 中开发,可以配置一下:

1
2
3
4
"files.associations": {
true"*.wxml": "html",
true"*.wxss": "css"
}

完整的开发者工具界面

开发者工具

项目结构

项目结构

注意点

  • app.json 是小程序的全局配置项,增添 / 删除页面时必须在 pages 中增添 / 删除页面路径,否则会报错。
  • 一个框架页面由四个文件组成: pagename.js / pagename.wxss / pagename.wxml / pagename.json ,这四个文件必须要有相同的文件名和文件路径。

小程序版知乎日报

Github 地址

小程序知乎日报

TODO

  • 内容暂时无法显示
  • 首页增加下拉显示前一天的资讯

最后

感谢 izzyleung 整理的知乎日报 API 接口