新产品要做一个微信小程序，不想吐槽老板没给任何准备就给出了需求和原型图，好像默认小程序闭着眼睛就可以很顺利开发好。现在半周下来（五一结束开始到今天）完成了差不多所有的界面，网络请求部分还跟服务端兄弟耗着:) 。总结下来小程序的开发速度肯定不会慢，门槛不高，缺点则在于限制非常多，并且其本质终究是换了毛皮的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. linkin大话数据结构--泛型

    泛型(Generic) 什么是泛型? java5开始出现的一种对Java语言类型的一种拓展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数类型时指定的类型占位符,就好比方法的形式参数 ...

  2. JDBC（四）

    1 Apache DBUtils框架 1.1 DBUtils简介 commons-dbutils是Apache组织提供的一个开源JDBC工具类库,它是对JDBC的简单封装,学习成本非常低,并且使用db ...

  3. web技术发展历程--读《大型网站技术架构_核心原理与案例分析》

    1 早期的web服务 2 CGI程序的出现.发展.凋零到MVC的兴起 CGI:通用网关接口技术. 随着CGI技术的出现,web服务端可以通过不同的用户请求产生动态页面内容. web服务器将请求数据交给 ...

  4. sed替换文本

    [root@localhost.localdomain home]#cat test ### @2=1492785988 /* INT meta=0 nullable=0 is_null=0 */ # ...

  5. 手把手的SpringBoot教程，SpringBoot创建web项目（一）

    1.引子 大家好,在接下里的半个多小时,我会给大家详细的介绍SpringBoot的基本使用,相信学完这门课程以后,你会对SpringBoot有一个清晰的认识,并且能够运用这门比较新颖的技术开发一些小程 ...

  6. 删除一个目录及其子目录下的所有.svn文件

    今天建立svn,加入代码,发现这些个文件夹中竟然已经有.svn文件夹,也就是它以前使用过svn, 这下就有点麻烦,在全新的svn里,这些.svn需要删除,又不可能一个一个手工去删除 网上翻了一下,发现 ...

  7. 使用xUnit为.net core程序进行单元测试(3)

    第1部分: http://www.cnblogs.com/cgzl/p/8283610.html 第2部分: http://www.cnblogs.com/cgzl/p/8287588.html 请使 ...

  8. 洛谷 [P2590] 树的统计

    迷之TLE #include <iostream> #include <cstdio> #include <cstring> #include <algori ...

  9. BZOJ 3173: [Tjoi2013]最长上升子序列 [splay DP]

    3173: [Tjoi2013]最长上升子序列 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1613  Solved: 839[Submit][St ...

  10. DaemonSet 典型应用场景 - 每天5分钟玩转 Docker 容器技术（129）

    Deployment 部署的副本 Pod 会分布在各个 Node 上,每个 Node 都可能运行好几个副本.DaemonSet 的不同之处在于:每个 Node 上最多只能运行一个副本. DaemonS ...