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

    有哪些其他js? window.location.href = "跳转页面"      //   不写获得本页面url,写跳转到指定页面 confirm('内容')     // ...

  2. xml格式字符串转为Map

    import org.dom4j.Document;import org.dom4j.DocumentException;import org.dom4j.Element;import org.dom ...

  3. 使用非java代码编程

    使用非JAVA代码     JAVA语言及其标准API(应用程序编程接口)应付应用程序的编写已绰绰有余.但在某些情况下,还是必须使用非JAVA编码.例如,我们有时要访问操作系统的专用特性,与特殊的硬件 ...

  4. AM调制的FPGA实现

    一.说明: 功能:AM调制 平台:Vivado 2016.4 和 Matlab R2017a 二.原理: 1. AM调制原理 AM已调信号的时域表达式: 已调信号的频域表达式: 本质上AM调制就是频谱 ...

  5. wer

    概述 快速入门流程: 使用叮当扫码产品请遵循以下操作步骤: 1. 新建项目信息 2. 新建产品信息 3. 添加发货产品 4. 发货 5. 收货 (具体使用操作请查看详细的使用说明) 文档目的: 本文档 ...

  6. 2018-02-02-解决IDE中无法忽略的非代码文件

    layout: post title: 2018-02-02-解决IDE中无法忽略的非代码文件 key: 20180202 tags: GIT 版本管理 modify_date: 2018-02-02 ...

  7. Centos7.0关闭防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,使用iptables必须重新设置一下 1.直接关闭防火墙 systemctl stop firewalld.service #关闭firew ...

  8. Sql Server的艺术（七） SQL 数据插入操作

    --用INSERT插入单行数据 在SQL中,可以通过INSERT...VALUES语句直接向数据库表中插入数据.可以整行,也可以部分列. 基本语法: INSERT INTO table_name [c ...

  9. Servlet 浅析

    在我们学习Servlet之前,有必要了解一下Web容器的工作模式 我们所有的请求其实都是先到达了web容器,然后才分发给已经注册好的Servlet 请求由Servlet的service方法调用doGe ...

  10. Call to undefined function mysql_connect()错误原因

    从PHP5.0开始就不推荐使用mysql_connect()函数,到了php7.0则直接废弃了该函数,替代的函数是: mysqli_connect();