退出

  • 文章收藏

  • 消息

  • 修改资料

  • 开发进度

    2017-12-24

    重写后端REST API代码,优化资源内容和结构,数据的处理下放到后端,节省资源。

    添加评论展示功能,新增comments列表REST API。评论列表采用扁平结构,仅显示回复对象,而无嵌套。

    在话题页面增加搜索框。

    添加搜索页面,新增search REST API,完成搜索逻辑。实现搜索关键词高亮,忽略大小写并使大小写保持原文。如果文章正文中含有关键词,则excerpt部分会自动截取(第一处)含有关键词的部分并高亮。

    优化逻辑,解决了在文章列表中连续点击话题区域,使navigateTo超过5层而导致的页面无法继续开启的bug,话题详情页面点击话题区域将刷新页面,而不开启新的页面。

    2017-12-17

    完成了文章列表卡片的UI设计和交互逻辑,包括功能菜单;

    完成了各个页面的分享功能。

    开发过程中遇到的一些坑

    onPageScroll更改style不会渲染

    如果在onPageScroll中更改涉及外观的style,如height和border-radius,小程序不会对其进行渲染,虽然wxml页面内容已经显示添加style,但实际页面却保持原样。但是更改position,top等不涉及外观变化的style,是可以正常作用的。

    input的value属性可以实时更改其内容

    开发文档中对value属性的描述是设置input组件的初始值。实际上,在任何时候,只要(通过setData)更改value的值,input中的内容就会相应的变化。

    小技巧:通过触摸获取页面滚动位置

    由于小程序不能操作dom,如果不是在onPageScroll事件中,是无法直接获取页面滚动位置的。在触摸相关事件中会返回clientY和pageY两个变量,用pageY-clientY就可以得到页面滚动高度了。

    js文件头部引用路径必须为相对路径

    例如,我们可以这样写:

    var rest = require("../../utils/rest.js")

    然而却不能这样写:

    var rest = require("/utils/rest.js")

    即便这样写,编译器仍然会将其当作相对路径来解析,报出如下错误:

    '/pages/index/utils/rest.js' not exist

    我不知道是不是js文件里本来就没有这种绝对路径的写法,毕竟我对js不熟,没有专门看过,都是拿起来就写的。

    wx:for的封闭性

    wx:for接收一个list作为参数,而for循环内的元素只能访问index和item两个根list有关的变量,无法反问Page.data中的其他数据。所以如果要改变for循环中组件的状态,只能更改list之内的数据。例如,你不能另外设置一个data.toogle,然后在for循环内用wx:if来操作它的状态;你也不能在list外部生成一个动画,然后绑定到for循环中的元素上去。

    总之,你必须想办法改变index或item中的数据来实现这些功能。有时候这会让事情非常麻烦。

    模版的封闭性

    模版是一个封闭的空间,如果有要使用的页面数据,必须在模版中使用data传入,才可以使用。如果没有被坑过,就算一开始记得,后来也很容易忘记。

    <template is="msgItem" data="{{...item}}"/>

    button的样式

    如果你在button中定义了type, plain, size等属性,那么它会覆盖你写的wxss样式表。如果你想自己定义按钮样式,建议不要加上这些属性。

    另外你还需要将button::after的display属性设置为none,否则会留下一个丑陋的背景框。

    share图片的比例

    在自定义分享卡片时,最好使用5:4的图片比例。否则在确认是否分享的对话框内,图片会不等比的拉伸到5:4的比例,导致图片变形,而大家收到的卡片会在图片下方留下一段空白。

    支付宝 微信 BTC
    支付宝扫一扫,向我打赏
    来源:原创

    声明:本站原创文章采用 BY-NC-SA 创作共用协议,转载时请以链接形式标明本文地址;非原创(转载)文章版权归原作者所有。 ©查看版权声明

  • 白銀の魔法師
  • 所有的信徒都别无二致,所有的信仰都一文不值
  • 发表评论

    你目前的身份是游客,请输入昵称和邮箱! 输入资料 关闭