小程序初实践总结

近期组内接了小程序项目，也是有幸能够加入到项目中，做一些简单的开发。之前对小程序有所接触，但是仅限于自己了解和书写demo，真正项目开发还是第一次~开发过程中也是遇到了一些不熟悉和自己觉得是小坑的地方，做个简单总结，给自己做个记录，同时给需要的小伙伴一些小小参考。

一、添加一个新组建，控制台报错“Component is not found in path '../../components/xx/xx'”。

答：这个问题开始是很迷茫的，仔细检查了文件名称、引用路径以及父组件usingComponents，都没有发现有问题，但是控制台依旧提示找不到对应组件。后面经过大老提示：对于一个新的组件，必须在对应的js里添加Component({})，json文件里也要写上component:true。加上相关配置后，控制台就不会飘红了。

二、text组件，默认会出现上内边距。

答：使用text组件展示文字内容，看上去并没有什么技术而言，直接引用就好了（心里默默开森）

<text>
  this is component
</text>复制代码

但是，看到效果之后，显然有点蒙圈，为什么上边会出现那么大的距离啊？！

第一个想法是去看css，是否有默认内边距样式，然而并没有；通过padding、margin去设置值，也没什么用；然后。。然后。。。我就不知道怎么办了，只好请教度娘。

网上有小伙伴给出了答案，其实并不是样式问题，而是text组件本身问题，要修改这个问题，只需要把text标签和内容写在一行就可以了。

<text>is component</text>
复制代码

三、小程序分享功能，页面分享和按钮分享功能。

答：众所周知，小程序是可以进行分享的，有两种方式，一个是自带的分享功能，另一个是页面上按钮点击分享。本质上他们调用的是同一个方法，即onShareAppMessage，可以通过options参数的options.from区分是来自按钮还是原生分享，可以通过设置对应字段修改分享展示的内容，不设置则默认分享当前页。

onShareAppMessage (res) {
  // 来自页面内转发按钮    
  if (res.from === 'button') {
     return {
        title: `标题`,//分享标题        
        path: shareUrl,136);">//分享的链接        
        imageUrl:‘’        //分享展示的图片           
     };    
   } else {      
     return {        
       `分享标题`,imageUrl:''    
     };
   }
}复制代码

按钮分享，只需要给button添加一个open-type即可，<button open-type="share"></button>。但是此时按钮会有默认样式，可以通过控制台查看，进行css修复样式，分享回调同样调用上边方法。

四、小程序内获取某个元素或者组件距离顶部初始高度

答：实际开发中，我们基本会遇到需要获取某个元素位置信息的需求，早在jq一把梭的时代，获取这些属性值是很容易的，直接一个api就可以了。同样的小程序里也有比较实用的方法，我们可以给需要获取位置的元素/组件一个id，然后通过下面方法即可获取：

let query = wx.createSelectorQuery().in(this);
query.select('#testId').boundingClientRect(function(rect){
    //rect即包含了所需要的各种位置信息，如top、left、right、bottom等
})复制代码

如果在页面初始化时需要获取到位置，可以在onLoad方法里使用（最好使用setTimeout，否则可能会取不到），获取对应值之后就可以进行后续的处理了。

五、scroll-view组件使用

答：滚动组件的使用，在开发中可以说很普遍了。小程序也封装了scroll-view组件，并提供了一些封装好的方法，使用起来可以说很方便了，但是也不可避免的有一些需要注意的地方。

1、scroll-view的绑定scroll事件不触发

当页面组件按照文档方法书写完成后，去滚动页面发现页面滚动事件并没有触发，后面经过仔细查看，确定问题原因是scroll-view没有设置高度，而且必须是精准高度，不能用百分比。

2、scroll-view滚动到某一位置

我们开发时可能需要用到点击后滚动到某一位置或者初始化时滚动到对应位置，过去通常是通过锚点方式进行触发，同样的scroll-view为我们封装了一个很好用的方法scroll-into-view，对应的值也是一个id值，具体使用方法及注意事项可以参考文档（ scroll-view ）。

3、scroll-view中包含fixed定位元素，滚动时fixed定位元素闪动

这个问题算是比较坑了，在scroll-view里面，我们设置某个元素或者组件为fixed定位，在滚动页面时，会发现定位的元素会消失一下然后再出现，虽然不是什么严重问题，但是很影响用户体验。这个问题我看到社区里也有很多人在问，但是目前官方还没有给出合理方法。目前简单的应对方法我总结了两点：

一是把定位元素放到scroll-view外部，此类方法可以完美避开上述问题，但是某些场景下可能不太适用；

二是，在使用scroll-view时我们通常会设置scroll-with-animation=true即开启滚动过度动画效果，当我们把这个值设置为false时，上述问题也能很好的解决，即使定位元素在scroll-view内部也不会有闪现问题。但是此方法牺牲的也是用户体验，如果有短距离的页面滚动可以使用此类方法。

欢迎遇到此类问题的小伙伴进行补充，在官方给出完美方案之前，我们也能有自己的应对方案。

六、小程序checkbox样式

这个就不得不吐槽一下UI了，其他的都还好，但是对于表单相对应的样式，真的是丑爆了！而且，当你想通过css样式覆盖方法修改的时候，会发现，你的修改根本就是不起作用的！！根本原因就是你所看见的wxml结构与内容和样式所定义的根本不是一个样子！！！

当然也有机智的小伙伴探究出了方案（以checkbox为例）：

//wxml
<label>
    <checkbox>aaa</checkbox>
</label>

//wxss
//修改checkbox大小
checkbox .wx-checkbox-input{}
//修改checkbox选中后的样式
checkbox inputinput-checked{}
//修改checkbox选中图标样式
checkbox input-checked::before{}复制代码

当然，如果你不喜欢原组件，不想去修改css，完全可以自己仿写一个checkbox，样式自己写，切换效果通过点击事件（参数e，获取data）自己控制就好。

关于表单内容，后面会再总结一个自定义表单及自定义校验方法及自己进行的优化。

七、小程序页面跳转，跳转到其他域名页面

小程序页面跳转，我们可以通过wx.navigateTo()方法进行，但是当需要跳转到不同域页面时，直接跳转链接的方式就不好用了。小程序也为我们提供了方法，即webb-view( 使用方法见文档)。

以上就是在初次开发中遇到的问题及总结的使用方法，后面随着使用的增多，肯定还会有更多的问题出现，随时进行添加吧，算是对小程序使用自己的一个总结，有不足和错误之处，还希望各位大大提出宝贵意见。

ps：前期初次接触小程序书写demo时，也遇到了一些小问题，付个传送门：

初试微信小程序遇到的问题总结