爱之初体验 - 小程序

Author Avatar
XibHe 9月 01, 2017
  • 在其它设备中阅读本文章

开发小程序已经有两周了,从最开始踌躇满志到现在喜忧参半。这中间经历了许多波折,好像又回到了第一次初恋时的感觉,迫切,含蓄,喜悦,又苦于不能迅速了解对方的方方面面,而感到沮丧。但随着一步步的接触,由浅入深,终会瓜熟蒂落,水到渠成。

框架

小程序由视图层,逻辑层,渲染层三部分组成的一整套框架。框架使用自己的视图层描述语言WXML(.WXML文件中使用的是view标签构建视图,相当于CSS中的div标签。)和WXSS,逻辑层是基于JavaScript框架。视图层和逻辑层间微信提供了用于数据交互,事件绑定的丰富组件和API。

框架的核心是一个响应的数据绑定系统。整个系统分为两块: 视图层(View) 和逻辑层(App Service)。框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会发生相应的更新。

组件

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。什么是组件:

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格的样式。
  • 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。

但使用起来还是有些不足,很多组件的风格与微信风格类似,不想使用这种风格的组件就需要自定义组件,而自定义需要花费一些额外的时间,就算自定义成功了,仍需要经过仔细的测试,确保该自定义组件在交互上不会与基础组件产生偏差。

API

框架提供了丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

说明:

  • wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作 为参数。当该事件触发时,会调用 CALLBACK 函数。
  • 如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
  • OBJECT中可以指定success, fail, complete来接收接口调用结果。

    开发工具

IDE

在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

在8月30日和8月31日,对开发工具进行了很大的更新。全新的视觉和交互体验,新增了申请测试报告功能,新增WXS功能。

开发中填的坑

微信小程序填坑记录
希望对你有帮助。

学习心得

多看官方文档,多看几遍,遇到问题时再看,没有问题时继续看;

关注论坛最新动态;

基础知识一定要过关(小程序的框架,组成部分,运行机制,自身限制);

不要眼高手低,人家的demo下载下来跑起来,看懂之后一定要自己尝试写一遍;

找一个自己熟悉的逻辑,开始模仿(结合实际的项目需求,一步一步解决遇到的问题)。

遗留问题

模态窗体上的textarea多行输入框,当滑动整个页面时,会将textarea里输入的内容一起滑动至输入框外部,随着滑动的方向一起滑动。官方文档中备注了关于textarea的一个tip:

textarea组件是由客户端创建的原生组件,它的层级是最高的。

或许正是由于textarea是最高层级导致的滑动问题。

demo下载

wxModeList

参考资料

微信公众平台 | 小程序

小程序中的循环列表,在点击时改变当前项的背景颜色

小程序操作按钮悬浮固定在底部

动态的显示或隐藏控件

微信小程序从子页面退回父页面时的数据传递

–EOF–

若无特别说明,本站文章均为原创,转载请保留链接,谢谢