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

    js的函数是怎么定义的? function 函数名(形参1,......) { 函数体: return 返回值 :                                 //  可以没有返回 ...

  2. linkinFrame--用maven搭项目结构

    OK,老早想写一套自己的web框架,然后也一直在看开源的一些框架源码.今天开始正式开始写自己的javaWeb框架,暂时就定义linkinFrame好了. 为什么要写一套自己的框架? 其实这是一个比较矛 ...

  3. POI--HSSFRow类

    用POI在工作表里作成一个行,可以用「HSSFRow」类,它的构造方法有三个. protected HSSFRow() protected HSSFRow(Workbook book, Sheet s ...

  4. Cisco配置aaa验证

    当您的网络中部署了一台集中的radius校验服务器(比如我司的SAM,cisco的ACS等),希望对登陆设备的用户身份进行合法性校验,而账号都统一由该radius服务器集中产生与维护,您希望所有的登入 ...

  5. VUE 框架

    一.什么是vue             它是一个构建用户界面的JAVASCRITPO框架 二.怎么使用VUE (1).引入vue.js 如:<script src='vue.js'>&l ...

  6. H5WebSocket前后台代码

    1.效果图 2.后台代码: public void Demo() { //return "Hello World"; HttpContextBase content = this. ...

  7. 基于 React + Webpack 的音乐相册项目（上）

    笔记仓库:https://github.com/nnngu/LearningNotes 上一篇文章用爬虫自动下载了一些图片,这一篇就用这些图片做一个音乐相册吧! 效果预览 点击图片,切换到背面: 演示 ...

  8. Apache 配置SSI速记

    1. 启用模块 httpd.conf LoadModule filter_module modules/mod_filter.so 2. <Directory 的Options配置中增加Incl ...

  9. Spring基础篇——bean的自动化装配

    上篇博文讲Spring的IOC容器时说道,虽然容器功能强大,但容器本身只是个空壳,需要我们主动放入装配对象,并告诉它对象之间的协作关系,然后容器才能按照我们的指示发挥它的魔力,完成装配bean的使命. ...

  10. 大白话说Java反射：入门、使用、原理

    文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java反射:入门.进阶.原理> 反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时 ...