小程序踩坑第二谈

小程序学习总结

首先贴上官方文档的链接地址

小程序开发文档

1. 触发 upper 和 lower 事件的条件。如何在 scroll-view 中触发该条件

首先 upper 事件和 lower 事件是在 scroll-view 中使用,可以用在上拉自动加载和下拉刷新;或者单独的下拉刷新也可以,即 onPullDownRefresh,不过需要在全局变量中开启才行。

*在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh

注意 scroll-view 和 onPullDownRefresh 是不能够同时使用的,这个在开发文档中也有提示。

虽然都有文档但还是需要我们自己去踩坑才能更好的学习了解,下面是 demo



upper-threshold 是表示距顶部/左边多远时(单位px),触发 scrolltoupper 事件;

lower-threshold 是表示距底部/右边多远时(单位px),触发 scrolltolower 事件,定义好之后在  .js 文件中定义函数即可。


2 . 跳转带有底部菜单的时候使用什么方法

在小程序中一共有 5 种。下面我来做一下代码的搬运工

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

wx.reLaunch(OBJECT)

基础库 1.1.0 开始支持,低版本需做兼容处理

关闭所有页面,打开到应用内的某个页面。

wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

尤其注意的是:

tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

根据 tip 我们能知道只有通过 wx.switchTab 才能够跳转到 tabber 的界面,其他的都不行,尤其需要注意的是小程序的周期问题,onLoad, onShow . . . , 因为踩过坑,所以我会在最后把图列举出来。

3 . input 和 textArea 如何禁用获取焦点

说实话这个部分其实不难,直接看文档就可以解决,但是我第一次使用的时候不知道出现了什么毛病,总是不行,对于此我也很无奈,不过后来我自己迭代的时候删除了部分无用代码,把代码从新过了一遍,然后就成功了,什么毛病都没有。。。鉴于还是出了错,所以我在这做了记录。



第二个布局代码


view



js 种的代码我只保留了相关部分,可以看到其实只要设置一个 disable 为 true 即可禁用。

4 . 如何重写 toolBar

写过 Android 的朋友们应该都知道在 Android 开发中经常会出现自定义 View 的情况,包括自定义布局部分,在小程序中也一样,如果我不喜欢默认的 toolbar 该怎么办呢,别急:


在 app.json 中的 window 中设置 navigationStyle 为 custome 即可。自定义,可以在 app.wxss 中设置自定义标题的样式,然后把 toolbar 模板化,之后在各处引用即可。这里就不多做阐述。

navigationStyleStringdefault导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮

这里是官网文档的解释。右上角的胶囊按钮是无论如何无法去掉的,这一点需要注意。

5 . 当 margin 和 padding 不起作用的时候应该怎么办

在写代码的时候我遇到过很多次,就是设置了 margin 和 padding 的值但是界面显示没有一点点的变化,即使设置了很大也不行。相信大家或多或少都会有这种经历,那当我们遇到这种情况的时候应该如何思考呢。

答案:其实不用思考,我因为很长时间没有写过正统的 html 和 css 的代码了,所以有关的实现我确实记不清了。但是在小程序中,百分之九十的这种问题都可以通过包裹一个 view 来实现。因为在 Android 中的代码写多了,所以养成了距离什么直接设置的习惯。但是在小程序中一定要记得 view , view , view。增加个 view 万事大吉。

6 . 设置获取你点击第几个对象的时候如何进行设置判断

我们在 Android 中的列表可以通过 position 来确定,如果使用框架的话也可以直接得到。那么在小程序的列表呢?同样可以通过代码来得到。稍等:

//单击事件的响应  删除需要删除服务器上的数据


这里得到具体点击事件的关键就是 e.currentTarget.dataset.index 这句话。不过当列表点击某一个对象出现动画而不是跳转的时候会有坑。不能通过此方法,这里只适合用来点击跳转而不适合点击动画。需要 css 动画的知识来配合才行。这些大家遇到的时候自然可以看到。

7 .  显示隐藏时的坑(只能作用于 view)我们在使用的时候经常会需要显示隐藏来使用。不过这里有个坑,就是当需要来回显示的时候会出现问题。

首先我把方式写出来,其次我会把我遇到的一些错误来说出来。


样式


首先注意不能把这两个样式放在全局变量,只有放在页面的 wxss 下才会有效果。亲测效果会失效,,,希望懂原因的大佬可以解释一下。

还有同样的实现,不过是在代码中用法不一样


js 中的代码


样式中的代码同上

8 .  微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx,如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

这个其实是比较常识的问题,因为我跟着宇哥学小程序的时候没有实际按照设计图来,设计图给的是 px ,但为了适配考虑还是使用 rpx ,不过一开始我印象不够深刻。所以忘了。当然也有可能根据不同的手机来适配。

9 . 从 splash 页面跳转到带有底部菜单栏的界面的时候应该使用什么函数

底部菜单栏的有关跳转在上面已经有所介绍。只有一个方法。可以自行查看。

10 . 定义 util 文件函数的时候如何对外暴露接口部分

我们在写代码的时候经常会出现需要工具类的情况,那我们写工具类的时候如何对外暴露方法呢?


另一个


注意这里的名字,第一个部分的名字是对外暴露的名字(第一个名字是什么那么在外部调用的时候就用什么名字),后一个名字是定义在 util.js 中的具体函数的名字。


11 . 定义函数时写法的分别含义,(是否为函数的参数部分)


注意 = 后面的部分,有几个数就说明有几个参数,=> 代表具体的实现:{ } 这里的写法参考 kotlin 理解。

小程序的周期函数相关


你可能感兴趣的:(小程序踩坑第二谈)