canvas教程

微信小程序全面实战,架构设计 躲坑攻略(5)

字号+ 作者:H5之家 来源:H5之家 2017-01-11 08:00 我要评论( )

swiper圆点的实现原理 // 圆点的父元素,用来控制圆点间的间距.wx-swiper-dot {width: 30rpx;// 圆点,可以通过font-size修改圆点的大小,color修改圆点的颜色:before {width: 100%;display: inline-block;font-siz

swiper圆点的实现原理

// 圆点的父元素,用来控制圆点间的间距 .wx-swiper-dot { width: 30rpx; // 圆点,可以通过font-size修改圆点的大小,color修改圆点的颜色 &:before { width: 100%; display: inline-block; font-size: 56rpx; content: '圆点编码'; } // active状态的圆点 &.wx-swiper-dot-active { &:before { color: #ffc81f; } } }

小程序WXSS的font-face的url不接受路径作为参数

可以将字体文件转换为base64,然后引用。

微信小程序全面实战,架构设计 && 躲坑攻略

font-face接受base64,不接受url

同样,如果想要使用iconfont,也可以使用类似的方案,将iconfont字体文件base64之后再引入。

小程序的margin表现有问题(最新版已经修复)

之前发生margin折叠的时候,会取小的那个值。会导致底部留白等设置失效。

canvas问题

canvas并没有深入研究,目前的发现的问题主要是两个,如下图标记:

层级问题,canvas总是会盖在其他元素上面。

支持度不好,在小米5、iPhone5s画图会出现畸形。

微信小程序全面实战,架构设计 && 躲坑攻略

canvas绘制饼图有Bug

最后通过CSS3的方式绘制饼图

<template> <view> <!-- 小于50% --> <view></view> <view></view> <!-- 大于50% --> <view></view> <view></view> </view> </template> .com-pie { position: relative; z-index: 0; display: inline-block; width: 100rpx; height: 100rpx; line-height: 100rpx; border-radius: 50%; color: #000; background-color: #ebebeb; background-image: linear-gradient(to right, transparent 50%, #cccccc 0); overflow: hidden; .percent-1, .percent-2 { position: absolute; top: 0; width: 60%; height: 100%; left: 50%; transform-origin: center left; } .percent-1 { background-color: inherit; z-index: -2; } .percent-2 { height: 110%; opacity: 0; z-index: -1; background-color: #cccccc; } &.selected { background-color: #ffe9a5; background-image: linear-gradient(to right, transparent 50%, #ffc81f 0); .percent-2 { background-color: #ffc81f; } } }

微信小程序的rpx会出现精度问题

设置margin-left/margin-right负值,可能导致页面能够左右晃动。 猜测 是rpx导致的精度问题。

rpx本质上会转换为px,在不同宽度的设备上,实际的rpx值会转换为带小数的px值,四舍五入可能出现问题,之前使用rem布局的时候在QQ浏览器遇到过类似的问题。

微信小程序全面实战,架构设计 && 躲坑攻略

rpx精度问题

wx.request表现不合理,并且携带特殊字符会报错

请求返回404错误,也会触发success回调。

不要想当然的认为会触发fail回调,判断一个请求成功或失败,请使用wx.request返回的状态来判断。只有不符合规范的请求,才会触发fail。

微信小程序全面实战,架构设计 && 躲坑攻略

wx.request回调

请求的数据中,如果有特殊字符(比如\u2820),会报错。

只会在真机上出现,开发者工具没毛病。估计会有更多的特殊字符会导致这个问题。

微信小程序全面实战,架构设计 && 躲坑攻略

特殊字符导致wx.request挂掉

开发者工具,切换页面的时候,有时候wxml不会同步切换

希望微信什么时候能解决一下。

微信小程序给wxml模板赋值的时候,解构放到前面可能会报错

最新版会遇到这个问题,老版本虽然不会报错,但是在部分真机上会出现问题。

原因未知,遇到这个问题的朋友可以考虑绕过去。

微信小程序全面实战,架构设计 && 躲坑攻略

解构赋值导致报错

微信小程序的scroll-view暴露的bindscroll函数并不能实时监听

依赖实时获取滚动位置的功能不能实现。比如滚动时toolbar的动态隐藏和显示。

最新版开发工具不能关掉自动刷新

微信小程序的会默认监听文件变化,然后自动刷新。

但不足的是每次都是全量刷新,而不是模块的热替换,反而会影响开发速度,尤其对于喜欢频繁Command + S的开发者,你会发现你的小程序在不断的刷新。建议关闭。

微信小程序全面实战,架构设计 && 躲坑攻略

建议关闭监听文件变化

但最新版开发者工具,不勾选也会自动刷新。

微信小程序不支持 requestAnimationFrame

微信小程序不支持 requestAnimationFrame ,所以部分性能优化做不了。不支持的原因未知。

Page.onload函数可以接受参数

该参数是有URL决定的,也就是URL携带的参数。

官方文档这块写的有点混淆,特意拿出来说一下。举个例子:url中传递的时候 id=1 ,那么 option.id=1 ,而不是什么 option.query 。

微信小程序全面实战,架构设计 && 躲坑攻略

Page.onload参数文档描述混淆

不要给Page.data传入太多无用数据,会影响渲染效率,在iOS上表现特别明显

尽量传入精简的数据,保持Page.data和view间简单的绑定关系即可。

真机上有概率卡死,目前不确定是代码问题还是小程序的问题。

有遇到类似问题的朋友欢迎指出。

总结说点啥?

本文主要围绕微信小程序的基础知识、如何设计微信小程序、开发过程中遇到的问题三个方面介绍。

微信小程序的基础知识主要包括:

两种配置文件 && 两个核心函数

WXML模板语法,页面渲染

页面间的跳转

交互事件

官方组件和官方API

如何设计微信小程序的内容主要包括:

构建系统 && 目录结构

引入Redux进行数据集中管理

简单的组件化解决方案

最后还介绍开发过程中遇到的难点 以及 微信小程序的大小坑。

微信小程序本身并不复杂,开发过程却比较艰辛,尤其是第一次在真机上运行的时候,觉得这个世界恶意满满。

 

来自:#comments

 



微信小程序开发

  • 上一篇:没有了
  • 下一篇:2016年中国微信小程序专题研究报告
  •  

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 微信开发者平台,微信开发者社区,微信小程序开发者社区

      微信开发者平台,微信开发者社区,微信小程序开发者社区

      2016-12-24 12:00

    网友点评