新产品要做一个微信小程序，不想吐槽老板没给任何准备就给出了需求和原型图，好像默认小程序闭着眼睛就可以很顺利开发好。现在半周下来（五一结束开始到今天）完成了差不多所有的界面，网络请求部分还跟服务端兄弟耗着:) 。总结下来小程序的开发速度肯定不会慢，门槛不高，缺点则在于限制非常多，并且其本质终究是换了毛皮的web开发，或多或少存在很多web app的通病，即使微信帮助提供了很多原生支持，这还是牺牲了很多开发自由度换来的。写本文的目的不在小程序开发的学习上，毕竟笔者一直都只听闻小程序大名，使用起来不过三四日，心得与教学谈不上，坑多少是踩了一些，下面主要还是列出目前遇到的一些问题点和吐槽。

1. 资源路径

之前出现过 开发工具中在wxss内定义元素的背景图background-image使用url('')路径时只能使用相对路径否则会找不到资源，但其实只有使用绝对路径'/'开头才能正确在手机上显示。

在页面的脚本中引入其他js脚本时只能使用相对路径。

2. 富文本需求

业务需要使用富文本的，目前找不到完美使用富文本的办法，只好改用截图来呈现。

3. 样式编辑

每个页面都有自己的wxss，用来编辑本页的样式，其中<page>相当于<body>，每个页面的底色以及底层尺寸都哦定义到page{}里就好。

并且目前用的尺寸单位都是rpx，这尺寸有点小，750rpx才等于iphone6的屏幕宽度。

view是个比较通用的标签，拿来代替div。

4. swiper组件
可以用来实现轮播图片组件。这个比较顺利因为不会有什么高级需求显示图片能滑动切换就足够
用来做支持左右滑动切换的界面时会有一些问题

  • swiper-item内部的滚动需要注意 普通的view标签小程序天然实现了safiri下的平滑滚动，但在swiper中则无效，手动给swiper-item加上 -webkit-overflow-scrolling: touch 且还必须加上overflow-y: auto
  • swiper有两种改变选项卡的方式，一是用手滑来滑去，二是动态更改current节点的值为需要滚动到的选项卡的索引
  • 选项卡更改流程为： 用手左右滑动，滑动结束后能触发更改事件，在这里可以执行新选项卡的数据渲染逻辑。
  • 手动点击某个切换按钮，触发选项卡切换，切换完成后也会触发更改事件。更改事件都是在切换动画完全结束才会触发，也就是说手一直拖着不放则不会触发。
  • 数据量比较多时至少开发工具上会有极大性能问题，卡到爆炸，手机端还好点，但是还是担忧，给wx:for渲染的节点再加个wx:key安慰一下自己。

5. 界面的事件交互

wxml里不能通过数据绑定来触发函数了，那界面要如何与脚本交互呢。微信给出的方案是通过其提供的很多个事件，包括bindtap，bindchange这些东西，这些事件节点传入自己定义的函数，在脚本中再从自带的event参数中获取本次事件触发的一系列参数。尴尬的事情就是不能很自由的绑定参数，全都得通过event参数来获取。比如界面上有一个节点:

绑定了makeOrder函数后并不能直接传入参数，只能在脚本中定义makeOrder函数时在其自带的参数中获取数据，获取的办法就是在节点上多加一个data-前缀的属性，此属性会被视为参数传递给这个事件回调。就像下图这样：

让我感觉自己在写jQuery。

6. scroll-view组件

至今没看懂真实完美用法。

只能感受到垂直方向的滑动，通过scroll-x或scroll-y节点决定是横向滚动还是纵向滚动，但目前的真实效果是scroll-x下并不能横向滚动，下级的每个view同时只会显示一个，并可以更改scroll-into-view节点来滚动到指定id的下级view中，这种场景下还算完美实用，相当于不支持手势滑动的纵向swiper。
scroll-y下滚动仍是纵向的，但是不再是只有一个view能被显示，而是所有view都能自由的滚上滚下，更改scroll-into-view则可以直接滚动到对应id的view，这种情况下这个组件也就很长的介绍网页会用用吧想不到其他合适的场景。
还有就是scroll-view下的overflow、height等属性也值得调整。

7. 数据绑定
有几个蛋疼的点。比如说很多节点比如wx:for这些里面绑定的数据也都必须使用{{}}包围，否则视为字符串。
比如说即使是{{}}包围了，也不能绑定函数，这直接导致数据在试图层面的格式化称为不可能的事情，想要格式化一个时间数据的话，就必须在js里遍历数据先格式化好时间字符串。。。这实在是不太舒服，可能是angular的pipe能力用爽习惯了。
数据的更新给出的方案是手动调用this.setData。。。虽说this.setData({'key1.key2', value})这样诡异的方式也可以，还是感觉自己在用jQuery，从无限DOM操作改为无限JS操作了。

8. 消息提示API

目前的消息提示框类型就只有一种，即使图标可以自定义，好歹把模拟安卓原生的Toast给提供了嘛。

微信小程序半周问题总结的更多相关文章

  1. mpvue 微信小程序半屏弹框（half-screen-dialog）

    <template> <div> <a @click="isShow">half-screen-dialog</a> <!-- ...

  2. 微信小程序一周时间表

    <view class="dateView"> <image class="dateLeft" bindtap="prevWeek& ...

  3. 两周撸一个掘金微信小程序

    利益相关 无 声明 这并不是掘金官方小程序(貌似没有搜到掘金 APP 对应的官方小程序),完全为第三者开发者开发,仅用于学习交流,禁止用于其他用途.若要使用官方正版,可访问掘金 官方网站,或下载掘金官 ...

  4. 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...

  5. 原创：经验分享：微信小程序外包接单常见问题及流程

    从九月底内测到现在已经三个半月.凌晨一点睡觉已经习以为常,也正是这样,才让无前端经验的我做微信小程序开发并不感到费劲.最近才开始接微信小程序的外包项目,目前已经签下了五份合同,成品出了两个.加上转给朋 ...

  6. 微信小程序事件始末及相关资料整理

    转载请注明来源:前端之巅 微信公众号 小道消息 昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...

  7. 两天快速开发一个自己的微信小程序

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...

  8. 边做边学入门微信小程序之仿豆瓣评分

    微信小程序由于适用性强.逻辑简要.开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票.外卖点餐.移动商城.生活服务等场景服务提供商迅速切入 ...

  9. 在微信小程序中使用LeanCloud（一）

    之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...

随机推荐

  1. bxslider使用教程

    bxSlider下载+参数说明 "bxSlider"就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备,适应各种屏幕: 支持多种滑动模式,水平.垂直以及淡入淡出 ...

  2. scipy.optimize.minimize 解决实际问题

    接上博客问题http://www.cnblogs.com/shizhenqiang/p/8274806.html # coding=utf-8 from scipy import optimize i ...

  3. centos7 下搭建hadoop2.9 分布式集群

    首先说明,本文记录的是博主搭建的3节点的完全分布式hadoop集群的过程,环境是centos 7,1个nameNode,2个dataNode,如下: 1.首先,创建好3个Centos7的虚拟机,具体的 ...

  4. Linux指令--grep

    原文地址:http://www.cnblogs.com/peida/archive/2012/12/17/2821195.html.感谢作者的无私分享. Linux系统中grep命令是一种强大的文本搜 ...

  5. php中urldecode()和urlencode()起什么作用

    urlencode()函数原理就是首先把中文字符转换为十六进制,然后在每个字符前面加一个标识符%.urldecode()函数与urlencode()函数原理相反,用于解码已编码的 URL 字符串,其原 ...

  6. jQuery的标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')

    $()可以是$(expresion),即css选择器 $("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签 $(&q ...

  7. JavaScript 函数创建思想

    //定义一个函数的步骤//1.开辟一个新的空间地址//2.把函数体里面的代码当做字符串存储到空间里面(一个函数如果只定义了,没有执行的话,这个函数没有任何意义)//3.在把我们的地址给我们的函数名fu ...

  8. Android原生代码与html5交互

    一.首先是网页端,这个就是一些简单的标签语言和JS函数: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...

  9. Css3：transform变形

    transform 语法: transform      向元素应用 2D 或 3D 转换. transform : none | <<span class="title&quo ...

  10. 面向对象_04【关键字：super使用】

    super关键字:解决当子类重写父类对象方法后,子类对象无法访问父类的成员1,调用父类成员变量和方法 super.成员变量 super.成员方法([参数1,参数2.......])Example: / ...