微信小程序（上）

1

EChart在某些配置较低的手机上出现无法交互的情况，换成自定义控件解决了这个问题。

2

新建一个自定义组件，布局如下

wxml

根据官方文档的说法，最好使用canvas2d进行绘制。

3

js

通过SelectorQuery获取canvas对象，这里的in方法用于获取自定义组件中的节点。

node属性用于获取节点实例，即canvas对象，size用于获取节点尺寸，就是canvas的宽高。这里有一个坑，通过节点获取到的画布宽高，仅仅是画布的宽高，想要在真机上正常显示，还需要获取手机的密度，并将画布的宽高乘以密度，canvasContext同样缩放屏幕密度倍数。

pixelRatio，官方说明为像素比，应该就是开发android时，1dp等于多少px。

4

绘制柱状图，其实并不复杂，统计图的要素就那么多。

首先是标题，如果需要标题的话，那么就要在绘制标题时，就需要指定标题的样式，然后预留出标题周围需要的边距。然后可以把绘制标题的方法抽取一个单独的方法。

坐标轴，确认坐标轴原点的位置，要考虑预留出坐标轴名称的位置，预留刻度名称的位置。

当获取到数据时，绘制跟数据有关的部分，也就是刷新方法。

如果需要动态刷新，js的canvas需要把原有的画布内容清空，于是要有一个clear方法。

5

提示条canvas的要覆盖在统计图canvas上，同理要根据屏幕密度对画布进行调整。同时初始化一组跟统计图canvas同样的坐标系。

绑定屏幕点击事件bindtouchastart，点击屏幕时记录点击的位置，显示提示条。

6

当手指在屏幕上滑动时，监听事件bindtouchmove，根据滑动距离变化触发页面刷新，统计图canvas，提示条canvas根据需要，是否都需要刷新。

大致思路是这样， 源码 供参考。

在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面 *** 作与交互性；

<a name="gXpSi"></a>

1、小程序提供的下拉刷新（无法自定义刷新动画）

可能遇到的问题：

1）下拉时没有出现刷新的点点动画

可能是因为设置的页面背景色与点点动画一致导致无法看到动画，可以在页面配置中配置背景文字颜色：

2、scroll-view内refresher-enabled属性开启自定义刷新

基本库要求：2101

官方文档： scroll-view

3、原始scroll-view自定义下拉实现（为兼容2101一下的下拉刷新

通过监听手指移动距离控制需要下拉模块的下拉距离，主要事件bindtouchstart，bindtouchmove和bindtouchend，bindtouchmove记录手指开始下拉时的起始位置，bindtouchmove计算下拉距离，bindtouchend判断并实现刷新方法。

我的自定义下拉组件（Taro框架）

<a name="fEutw"></a>

1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新

页面配置 disabledScroll ，禁止页面滚动，同时页面内的列表滚动需要自己再优化调整；

2、scroll-view的scroll问题

需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……

3、页面下拉刷新结束后再滑动列表出现闪屏

在禁止页面橡皮筋效果后，如果页面内存在需滚动区域使用scroll-view效果比view更加流畅；

不设定固定高度不会发生闪屏但是页面滚动非常不流畅；

4、使用官方提供的scroll-view自定义的动画时，当scroll-view内容不足充满一屏时下拉出现问题

将scroll-view设置固定高度后，将其子元素的高度设置多一像素达到隐形撑满的效果。

5、scroll-view内fixed元素问题

ios内scroll-view内fixed元素层级会出现问题，可能出现被遮挡的问题。

6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题

一个是页面滚动条一个是scroll-view滚动条，由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。

Q5和Q6可以合并成一个问题，当页面需要一个吸顶 *** 作时，即滑动距离超过阈值时导航条吸顶的功能，若scroll-view将整个页面包含就会出现Q5的问题，可能导致在ios内吸顶的导航栏无法显示，若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。

1）在页面未触发吸顶时禁止scroll-view模块下拉，触发后放开滚动，同时会导致无法下拉。

2）页面滚动触发，scroll-view模块可下拉，但是滚动区域无法滚动，且下拉动画只显示一次。

我们在做一些譬如视频播放等功能的时候，有时候是期望可以全屏展示视频的，微信小程序为我们提供了这样的功能。

我们可以在选择将整个小程序设置为全屏或者只把某个页面设置为全屏。

需要注意的点是

有些时候，我们需要在全屏状态下，自定义一个左上角胶囊或者返回按钮，来实现页面的返回或别的功能。为了美观，我们需要把这个按钮和右上角的胶囊对齐。

从图中我们可以看到，小程序顶部的标题栏，主要包括红色的手机状态栏和绿色的页面标题栏部分。我们需要获取到的是手机状态栏的高度，以及绿色部分的高度，好让我们自己的控件和标题对齐。

PS：小程序在 wxgetSystemInfo 这个方法的[270]基础库上新增了几个属性，其中有一个如下：

由于我们使用的是26的基础库，并不敢升到27上去，所以没有办法去试一下，不过大胆猜测一下这几个属性跟这个标题栏高度是不是相关？哈哈哈~

步骤一：注册一个小程序账号并认证

注意事项：

1、商家主体类型为个人或只需小程序的展示功能的企业、媒体、政府、组织，可不注册订阅号和服务号，直接注册并认证小程序。

商家主体类型为企业的商家在注册小程序（只需展示功能）时，可不 *** 作微信认证（支付300元认证费），只对公账户小额打款认证即可；

2、商家需展示+微信支付功能且主体类型为企业（包括个体工商户）、媒体、政府、其他组织时，建议先注册并认证服务号，再复用服务号资质快速注册并认证小程序；

3、如您有已微信认证的企业（包括个体工商户）、媒体、政府、其他组织类型的服务号，可选择复用公众号资质快速注册认证小程序，无需重新提交主体材料、无需对公打款、无需支付300元认证费用。

4、小程序已认证，无法复用小程序的资质快速认证服务号；

5、小程序注册好后，需在小程序管理后台填写小程序的基本信息。

步骤二：通过SaaS平台制作微信小程序店铺

1、注册得有店账号，创建店铺，填写店铺的基本信息：名称、主营品类、店铺地址等。

2、系统会根据你的主营品类为你推荐主题模板，选择一键启用即可；如果不喜欢，自己可以再进行挑选，里面有上百套精美模板。

如果不选择模板，也可以自主设计，通过各种功能组件，可视化拖拽，就像搭积木一样，非常简单。这就需要自身有一定的设计审美基础。

3、上传商品，得有店支持第三方商城网站的批量导入，比较省心；

4、设置店铺信息，如物流快递、同城配送/到店自提、连接打印机、开启消息通知、员工角色权限、配置微信支付等等，将整个线上开店逻辑打通。

5、整个店铺搭建完毕，将小程序授权给得有店，就可以发布给微信审核了，通过之后，就可以上线运营了。

步骤三：优化商城小程序页面与内容

1、将店铺的优惠活动放在首页，如店铺优惠券领取，限时特价购、拼团活动、砍价活动等。

2、显眼的会员卡领取入口，以丰富的会员专享权益吸引用户成为会员，积累忠实客户。

3、店铺的地图，放置后消费者去门店时可以一目了然知道位置在哪里。

在小程序开发中我们经常会用到标签中属性的属性值，有时候我们通过data-和 etargetdataset来获取属性值会出现一点小bug，即是调用出来的数据是undefined，即取不到值。

本博客，提供两种解决方案，如下：

（一）方案1–去掉驼峰式命名，改成纯小写式命名

很多人可能会像我我一样卡在这里了，怎么找都找不到原因，怎么更改都是undefined。

其实，很简单！

那就是data后面的属性名写得不规范！在data后面的属性名是不能按照驼峰式的写法，只要把定义的属性名全部换成小写就没有问题了！

（二）方案2–consolelog（e）查看

直接consolelog（e）也能看出问题。

e对象中包含两个对象分别是currentTarget和target，而真正的数据包含在currentTarget。

打印出e，找到你的数据，通过对象调用的方式即可。

总结：

驼峰式的写法的自定义属性名很可能是无法被浏览器识别的，所以，不管是在小程序开发还是在其他方面的开发中，我们写一些自定义的属性名的时候最好都要全部用小写。再次说明，写一些自定义的属性名的时候我们都要用小写。

最后，微信小程序内容还在开发过程中，很多知识是不完善，也是不稳定的。

知识是会更新换代，也许到了某一天，这个bug又会被完善。

各位看官，珍重！

---------------------

原文：>

以上就是关于微信小程序（上）全部的内容，包括:微信小程序（上）、关于小程序自定义组件observer 频繁触发导致内存溢出、微信小程序：自定义柱状图等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！