• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

知识点

1.小程序里面,点击页面顶部的返回按钮的时候,返回的那个页面不会刷新。页面直接跳转返回都可以传参跳转。需要做处理的时候,在onshow的时候接收参数并处理即可。

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

这个只能是用“曲线救国”来形容了。因为不能直接操作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物理像素。有时候会出现在大屏手机上显示过小的情况。

4. 小程序中的数据改变需要调用setData去设置。如果想改变数组中的某一项的某个值,可以这样设置:

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

动态设置某个值的时候可以这样设置

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

5.wx:if的使用,跟vue中的v-if原理一样, 如果不符合渲染条件,它不会渲染相应部分; 小程序中有元素显示频繁切换的需求,例如选中与不选中这样。建议使用 display: hidden,通过class控制。这样能够提高用户体验。

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

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 wx:if="{{true}}">
             <view> view1 </view>
            <view> view2 </view>
        </block>
11.小程序中picker-view中bindchange方法会在滑动结束后点确定才触发,如果我随手一滑,还没等他停下就就按确定按钮或者跳转页面,那么bindchange没触发就不能获取到滑动后改变的值
12.开发者工具断点有bug,对象为undefined,对象里面的值却是有东西的。

 

 

 

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap