微信小程序在项目中遇到的一些问题

1.点击小程序的返回按钮给个提示

使用场景: 当前页填了很多信息, 想要返回,给用户一个二次确认弹窗。如图

代码如下:

/**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        wx.enableAlertBeforeUnload({
            message: '离开当前页面，填写的信息将不会保存，是否确认离开。',
            success: () => {}
        })
    }

• 优点: 使用小程序自带api,简单快捷
• 缺点: 不能自定义样式, 手指左滑返回不会触发该事件

如果在某些情况下取消返回前的提示信息需要怎么去设置呢?

// 根据某些情况取消提示
 if(this.data.pagetype =='ck') {
      wx.disableAlertBeforeUnload({})
  }

2.在苹果手机上, input输入框,在有滚动条的情况下,滚动页面,input中的值会固定在页面上,不跟随滚动条滚动

解决方案: 在input上添加**always-embed="{{true}}"**属性

<input class="fdm-input"
                            name="ljjyzcfy"
                            type="digit" data-type="digit"
                            data-navlist-index="4"
                            always-embed="{{true}}"
                            required
                            data-obj="jtzcqk" data-key="ljjyzcfy"
                            data-callback="countHgzfzc"
                            placeholder="请输入"
                            placeholder-class="placeholder-style"
                            bindfocus="bindfocus"
                            bindblur="bindblur"
                            value="{{jstools.toFixed(jtzcqk.ljjyzcfy, digit, 'ljjyzcfy', focusKey)}}"/>

官方文档

3.返回上一页带参数,并重新刷新上一页的数据

使用场景: 修改详情也保存后回到列表页, 列表页的数据需要刷新

大家很容易想到用wx.navigateTo()将参数带回去,这样是可以实现传参,但是路由也把详情页放在了历史记录中,这个时候在列表页点击返后按钮是返后的详情页,而不是列表页的上一页了, 所以从详情到列表页需要用

wx.navigateBack({
    // 返回上一页, 数字可变
    delta: 1
})

那怎么传参呢?

// 详情页的返后
 goBack() {
    // 当前页
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2]; //上一个页面 -3 上两个页面
    //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
    prevPage.setData({
      selectItem: this.data.selectItem
    })
    // 返回上一页
    wx.navigateBack({
        delta: 1
    })
}


// 列表页接收参数
/**
* 生命周期函数--监听页面显示
*/
onShow() {
    const pages = getCurrentPages();
    //当前页面
    const currPage = pages[pages.length - 1];
    // 为传过来的值
    let selectItem = currPage.data.selectItem;
    if (selectItem) {
      this.data.skxx.khyhzh = selectItem.name;
      this.data.skxx.khyhzhCode = selectItem.code || this.data.skxx.khyhzhCode;
      this.data.skxx.lhh = selectItem.lhh;
      this.setData(this.data);
    }
    // todo 做其他操作
}

4. input实现双向绑定公用方法

// wxml
<input class="fdm-input" type="idcard"
                name="lxdh"
                data-callback="sjhmBlur"
                data-obj="queryParams"
                data-key="lxdh"
                placeholder="请输入"
                placeholder-class="placeholder-style"
                bindblur="bindblur"
                value="{{queryParams.lxdh}}"/>
// js
// 输入失焦事件
bindblur(e) {
    const obj = e.currentTarget.dataset.obj;
    const key = e.currentTarget.dataset.key;
    this.data[obj][key] = e.detail.value.trim();
    const callback = e.currentTarget.dataset.callback;
    if (callback) {
        this[callback](e)
    }
    this.setData(this.data);
}
                

5.怎么在wxml中写一些方法

小程序和vue有些区别, 在vue页面我们可以直接在.vue文件里面调用js的方法,但是小程序却不行,如果我们需要在view中做一下数据处理,应该怎么使用呢? 这时候就有了wxs文件 wxs就是在page-frame中运行的js，可以在view数据做一些变换。

wxs对性能的贡献就只有一点：与wxml是在同一个线程运行的，避免了跨线程通信的开销

简单来说，就是可以在wxml里面使用js，对数据进行计算转换

怎么使用wxs呢

1. 建一个jtools.wxs文件,在里面写相应的方法(注意: wxs页面不能使用es6及以上的语法)
2. 在wxml中引入该jstool.wxs文件

6. 微信小程序阻止事件冒泡

将子类的点击事件bindtap写成catchtap

 <view class='hbmask' bindtap="click1">
    <button catchtap='click2'>保存相册</button>
 </view>

• bindtap：子元素使用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父元素上绑定的bingtap事件）
• catchtap：不会冒泡到父元素上，阻止事件冒泡

uniapp阻止事件冒泡

将子类的点击事件@click写成@click.stop

利用vue的事件修饰符stop