小程序踩坑第二谈

jiwenjie
1,643 阅读8分钟 
				小程序学习总结

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

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

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

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

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

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

<scroll-view 
    upper-threshold="150" 
    lower-threshold="125"
    scroll-y="true" 
    bindscrolltoupper='upper'
    scroll-into-view="{{toView}}" 
    scroll-top="{{scrollTop}}"
    bindscrolltolower='lower' class='home-bg'>
    
</scroll-view>

upper-threshold 是表示距顶部/左边多远时（单位px），触发 scrolltoupper 事件；

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

upper: function() {
    wx.showNavigationBarLoading()
    console.log('upper')
    wx.showLoading({
      title: '正在刷新',
    })
    this.queryTaskAll()
    setTimeout(function(){
      wx.hideLoading()
    }, 1200)
  },

  lower: function() {
    wx.showNavigationBarLoading()
    console.log('lower')
    wx.showLoading({
      title: '正在加载',
    })
    
    setTimeout(function() {
      wx.hideLoading()
    }, 1200)
  }

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() 获取当前的页面栈，决定需要返回几层。

尤其注意的是：

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

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

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

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

 <view class='editContent'>
        <textarea 
          value='{{item_content}}' 
          readonly="{{content_readonly}}" 
          class='create-content-input'                                    placeholder-class='content-holder' 
          placeholder="{{pleast_input_content}}" 
          bindinput="inputContent" 
          type='text' 
          disabled='{{textArea_disabled}}'
          focus='{{can_edit_content}}' 
          maxlength='-1'></textarea>
      </view>

第二个布局代码

<view class='editContent-title'>
        <input 
          value='{{item_title}}' 
          readonly="{{title_readonly}}" 
          class='create-title' 
          disabled='{{input_disabled}}'
          bindinput="inputTitle" type='text' 
          maxlength='15'></input>
      </view>

detail.js 种的相关代码

data: {
    . . .
        
    input_disabled: true,
    textArea_disabled: true,
   
    . . .

  },

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

4 . 如何重写 toolBar

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

"window": {
    "backgroundTextStyle": "light",
    "navigationStyle": "custom",
    "navigationBarBackgroundColor": "#F8D300",
    "navigationBarTitleText": "码个蛋",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#F8D300",
    "enablePullDownRefresh": true
  },

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

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

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

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

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

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

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

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

//单击事件的响应  删除需要删除服务器上的数据
  shortTap: function(e) {
    let that = this;
    let index = parseInt(e.currentTarget.dataset.index);
    //触摸时间距离页面打开的毫秒数
    let touchTime = that.data.touch_end - that.data.touch_start;
    console.log('当前点击位置为' + index)

    console.log(touchTime);
    let list = that.data.getData

  },

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

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

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

<view class='save-style {{showOrHidden? "show":"hide"}}'>
           <block class='edit'>
               <image 
                bindtap='image_can_edit' 
                class='dialy-change' 
                src='{{detail_change}}'></image>
               <image 
                bindtap='image_can_delete' 
                class='dialy-delete' 
                src='{{detail_delete}}'></image>
           </block>

          
        </view>

          <view class='{{TshowOrHidden? "show":"hide"}}'>
              <view 
                class='save-style-two' 
                bindtap='save_dayBook'>
                <text class='tv-save-style'>{{tv_save}}</text>
              </view>
           </view>

      </view>

样式

.hide {
  display: none;
}
 
.show {
  display: block;
}

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

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

<view> 
 <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button> 
</view> 
<view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> 
 <canvas canvas-id="pieCanvas1" style="width:400px;height:280px;"></canvas> 
</view>

js 中的代码

Page({ 
 data: { 
  showView: true
 }, 
 onLoad: function (options) { 
  // 生命周期函数--监听页面加载 
  showView: (options.showView == "true" ? true : false) 
 } 
 , onChangeShowState: function () { 
  var that = this; 
  that.setData({ 
   showView: (!that.data.showView) 
  }) 
 }, 
})

样式中的代码同上

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

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

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

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

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

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

module.exports = {
  postReq: postReq,
}

另一个

module.exports = {
  formatTime: formatTime,
  Time: Time,
  onDate: onDate
}

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

// 时间和日期的综合信息显示
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour,  minute, second].map(formatNumber).join(':')
}

11 . 定义函数时写法的分别含义，（是否为函数的参数部分）

const req = (action, data, header, method, success, err) => {

  wx.request({
    url: baseUrl + action,
    data: data,
    method: method,
    header: header,
    dataType: "json",
    success: function (res) {
      success(res)
    }
  })
}

const postReq = (action, data, success) => {
  var header = {
    'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
  let cookie = wx.getStorageSync("cookieKey");
  if (cookie != null && cookie != undefined) {
    header.Cookie = cookie
  }
  req(action, data, header, 'POST', success)
}

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

小程序的周期函数相关

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
    // Do something when show.
  },
  onHide: function() {
    // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
avatar
文章
阅读
粉丝