使用微信小程序实现「分答」这款APP的基础功能
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img Initial commit Oct 9, 2016
pages 新增load动画 Oct 20, 2016
utils Initial commit Oct 9, 2016
app.js Initial commit Oct 9, 2016
app.json 新增load动画 Oct 20, 2016
app.wxss 更新markdown和背景色 Oct 10, 2016
readme.md Update readme.md May 29, 2018

readme.md

「分答」 Power by 微信小程序

开发文档和背景阅读

一些想法个人关于「微信小程序」的一些见解


feature

  • flex布局

基本使用官方推荐的flex来写布局,结合margin和padding能实现大部分的样式要求。

  • 动态刷新

tabBar的第一个菜单「收听」使用了微信提供的组件scroll-view可滚动视图区域,页面加载后从网络上拉取数据填入视图层同时写入Storage(应该就是html5中的localStorage),滚动到底部时触发更新事件,同时设置标志位防止重复触发。应用官方的加载提示动画。

tip:滚动视图组件的上下滚动用鼠标滚轮,使用鼠标拖动的话很容易触发下拉事件,哪怕并没有到达顶部。滚动视图组件内不要放与内容无关的元素

  • 带参切换页面

点击某个问题进入问题的详情页,同时导航网址带有该问题的编号,具体数据优先从Storage抓取, 查询不到就请求后台。同样的,点击个人头像或者个人简介bar进入个人详情页。(未完全完成)

  • template写视图层模板

找人页面的两个榜单均使用template渲染


TODOs

  • 滚动到顶部时的动画效果

  • 输入搜索关键词时的动态提示

  • 完整的带参切换页面功能

预览图

预览图