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

    1. https://github.com/didapinchegit/rocket-console 在github上下载rocketmq-consoler的源码, 用mvn clean packag ...

  2. Django_xadmin_应用外键搜索功能错误

    问题: 当我在给某一张表加上外键搜索的时候,会出现 TypeError: Related Field got invalid lookup: icontains 问题原因: a 表关联 b表,也就是说 ...

  3. JDK自带的缓存--包装类的缓存

    关于包装类和基本类型的文章我前面已经整理过了,这里大致罗列下重点.我们主要是想研究下包装类的缓存. 1,自动装箱和自动拆箱 java1.5之后就提供了自动装箱和自动拆箱的功能,当然我们也可以手动来装箱 ...

  4. PHP 运行 php-fpm 报错

      报错如下: [27-Aug-2017 18:34:23] WARNING: Nothing matches the include pattern '/usr/local/php/etc/php- ...

  5. android CheckBox与监听

    <CheckBox  android:id="@+id/cb1"  android:layout_width="fill_parent"  android ...

  6. Linux防止ARP攻击的一些方法

    方法一,最常用的绑定网关 一般服务器的网关是不会变动的,且vps也适用. 一.查看当前网关 [root@local@xiaohuai ~]# arp -a ? (218.65.22.122) at 8 ...

  7. Win10下通过IIS调试ASP程序遇到的问题和解决方案

    最近维护了以前别人的写的一个ASP的系统,记录一下调试过程中的问题和解决方案. 环境篇 万维网发布服务(W3SVC)已经停止 问题: 万维网发布服务(W3SVC)已经停止.除非万维网发布服务(W3SV ...

  8. 文件首行为空白行，为什么该行字符串长度为1(line.length()=1)

    问题描述:最近编写程序遇到一个问题,文件首行的内容为空,但调用line0.length()返回的确为1 .如下图: 最初认为可能存在制表符,或者换行符的原因,于是调用了line0.trim();方法, ...

  9. unicode文件处理(如果是ANSI编码就不需要了)

    1.unicode文件的打开必须用rb模式. 3.wchar_t str[100] = { 0 }; 这个占200个字节. 2.宽字符对应的处理 fgetc fgetwc fputc fputwc f ...

  10. 3.移植驱动到3.4内核-移植DM9000C驱动

    在上章-使内核支持烧写yaffs2,裁剪内核并制作补丁了 本章,便开始移植以前2.6内核的驱动到3.4新内核 1.介绍 首先内核更新,有可能会重新定义新的宏,去除以前的宏,以前更改函数名等 所以移植驱 ...