微信小程序开发中常见问题的解决

1、使用模版时，可以传入多个对象

<template is="banner" data="{{list1,list2}}"></template>

<template is="banner" data="{{...list1,...list2}}"></template>  //展开运算符，可以把对象展开，需要时使用

2、修改上一页数据

let pages = getCurrentPages();// 获取页面栈
let current= pages[pages.length - 1]; // 当前页面
let url = current.route //当前页面url
let options = current.options //如果要获取url中所带的参数可以查看options
let prevpage= pages[pages.length - 2]// 上一个页面
let data = prevpage.data // 获取上一页data里的数据
if(prevPage){//存在上一页
  prevPage.changeDataPageA('load');// 调用上一页的函数
  prevPage.setData({address_id: id})// 修改上一页的数据
  wx.navigateBack();// 返回上一页
}

3、当用户点击微信自带的返回按钮时，你如果想让用户返回指定的页面时可以在unload里写，注意delta的值需自行-1

wx.navigateBack({
   delta: 2
})

4、跳转或函数需要页面参数，只需要一个参数时，可以使用id，需要多个参数时，用data-xx

<view bindtap='test' id="123">测试</view>

<view bindtap='test' data-price="123" data-num="1">测试</view>


test(e){
    const id = e.currentTarget.id  //获取id
    const price = e.currentTarget.dataset.price  //获取price
    const num = e.currentTarget.dataset.num  //获取num
}

5、当数据不需要在页面上显示时，可以使用this.data.num = 1 取代 this.setData({num:1})

6、当页面跳转次数过多时，navigateTo无法跳转

7、当for循环套template的时候，如果template里需要使用index，需要传到data里

<view wx:for="{{list}}" wx:key="{{index}}">
  <template is='list' data='{{item,index}}' />
</view>

8、小程序上传图片和保存图片的地址需要是https开头！

9、setData修改对象的部分属性：

this.setData({
    'baseInfo.age':24
})

setData修改数组对象的部分属性：

this.setData({
	[`family[${index}].age`]:44
});

10、蒙层禁止页面滚动 catchtouchmove='true' 

11、函数防止多次点击可以使用节流函数或者自己封装个函数

submit(){
if(this.data.clicked) return
    clicked(this)
    // you code
}
function clicked(this){
    this.setData({
        clicked: true
    })
    setTimeout(function(){
        this.setData({
            clicked: false
        })
    },5000)
}

12、保存图片时先调用wx.saveImageToPhotosAlbum()，在用户拒绝授权的时候提示保存失败，显示授权按钮，引导用户点击授权后保存。

wxml:
<view bindtap='downLoad' wx:if="{{!openType}}">保存海报</view>
<button bindtap='downloadTry' open-type="openSetting" wx:if="{{openType}}">去授权</button>
js:

download(that,srcImage){
    wx.downloadFile({
    url: srcImage,
    success: function(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function(res) {
          wx.showModal({
            content: "保存成功！",
            showCancel: false
          });
        },
        fail: function(res) {
          console.log(res)
          if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === 'saveImageToPhotosAlbum:fail authorize no response' || res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            wx.showModal({
              content: '保存失败，请同意授权！',
              showCancel: false,
              success(res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                  that.setData({
                    openType: true
                  })
                }
              }
            })
          }
        }
      })
    }
  })
}

downloadTry(that, srcImage) {
  wx.downloadFile({
    url: srcImage,
    success: function(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function(res) {
          wx.showModal({
            content: "保存成功！",
            showCancel: false
          });
        },
        fail: function(res) {
          if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === 'saveImageToPhotosAlbum:fail authorize no response' || res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            console.log("打开设置窗口");
            wx.openSetting({
              success(settingdata) {
                console.log(settingdata)
                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                  console.log("获取权限成功，再次点击图片保存到相册")
                } else {
                  console.log("获取权限失败")
                }
              }
            })
          }
        }
      })
    }
  })
}

13、组件component和模版template的用法

template主要是模版，对于重复的展示型模块进行展示，其中调用的方法或者数据data都是需要引用页面进行定义

component组件，相对于template更完整，接近于一个独立的模块，有自己的逻辑方法，数据，属性，可以提供外部引用页面使用方法进行交互；

所以 涉及到业务逻辑交互多的重复模块 使用组件component更合适一些，如果仅仅是展示性性 用template即可

14、小程序input的点击清除事件有bug，需要先把focus设置为false，然后回调清除

<input bindconfirm='onSearch' placeholder='请输入' value='{{searchText}}' bindinput='search' confirm-type="search" focus="{{focus}}"></input>
<span class='iconSpan text-center' bindtap='clearText'>
    <i class="icon-clear" wx:if="{{searchValue}}">
    <icon type="clear" size="14"></icon>
    </i>
</span>

clearText() {
    this.setData({
      focus: false,
      searchValue: false
    }, () => {
      this.setData({
        searchText: ''
      })
    })
  },

15、input的type为number时，不带小数点，为digit时有小数点。

16、设置 catchtouchmove='{{true}}'，textarea无效，设置textarea的 fixed="true"就可以了。

17、小程序从上个页面返回需要异步调用上个页面的值，可以使用data里值显示到页面上。