小程序开发知识点及坑点总结

时间 2019-12-06

标签程序开发知识总结繁體版

原文原文链接

知识点html

1.小程序里面，点击页面顶部的返回按钮的时候，返回的那个页面不会刷新。页面直接跳转返回均可以传参跳转。须要作处理的时候，在onshow的时候接收参数并处理便可。vue

2. 页面有弹层时，阻止下面的页面滚动。ios

这个只能是用“曲线救国”来形容了。由于不能直接操做dom。就要经过class控制。经过设置外层的dom为fixed，宽度高度为100%；小程序

.tripFix_root{
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;
}

 <view class="wx_wrap recharge {{fixflag?'tripFix_root':''}}"></view>

若是，你是index页面中用了组件，而后组件里有弹窗，这个时候要阻止的是index里面的最外层dom。这就要组件事件（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html）来处理了。数组

3.小程序样式单位rpx（responsive pixel）: 能够根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。有时候会出如今大屏手机上显示太小的状况。dom

4. 小程序中的数据改变须要调用setData去设置。若是想改变数组中的某一项的某个值，能够这样设置：工具

Page({
  data: {
    array: [{text: 'init data'}],
  },
  changeItemInArray: function() {
    this.setData({
      'array[0].text':'changed data'
    })
  }
})

动态设置某个值的时候能够这样设置this

var param = {};
var string = "array["+index+"].text;
param[string] = 'changed data';
that.setData(param);

5.wx:if的使用，跟vue中的v-if原理同样，若是不符合渲染条件，它不会渲染相应部分；小程序中有元素显示频繁切换的需求，例如选中与不选中这样。建议使用 display: hidden，经过class控制。这样可以提升用户体验。spa

6. 名称以 bind 开头的事件不阻止冒泡，名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab。code

7.在 WXML 中，可使用 dataset 定义 data 中的数据，会经过事件传递。它的事件以 data- 开头，多个单词以 - 连接，如 data-a-b。也能够整个对象一块儿传，如data-item="{{item}}"，须要注意的是，使用这种方式定义的变量不能有大写。它会自动转成驼峰命名，调取的时候去驼峰命名的名字。

8.block标签，<block/> 并非一个组件，它仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性。

由于 wx:if 是一个控制属性，须要将它添加到一个标签上。若是要一次性判断多个组件标签，可使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。这样能够减小标签的使用。

<block wx:if="{{true}}">
             <view> view1 </view>
            <view> view2 </view>
        </block>

9.输入框Input坑点

1）键盘弹起，页面自动上推。。可是目前，没有用户到达此版本，

2) 输入框输入号码时，按照344格式化，直接return字符串并不生效。用setData设置则生效，但ios下能够明显看到有间隔，安卓下实际上有间隔，可是必须输入框失焦才会显示出来。

3) 不能在bindinput事件中setData，不然ios下有一个严重的bug。具体表现为，输入事，光标移至中间输入或删除，光标会自动跳到最后。

10.<block/> 并非一个组件，它仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性。

由于 wx:if 是一个控制属性，须要将它添加到一个标签上。若是要一次性判断多个组件标签，可使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

</block>

11.小程序中picker-view中bindchange方法会在滑动结束后点肯定才触发，若是我随手一滑，还没等他停下就就按肯定按钮或者跳转页面，那么bindchange没触发就不能获取到滑动后改变的值

12.开发者工具断点有bug，对象为undefined，对象里面的值倒是有东西的。