微信小程序开发笔记

记录日常工作中开发微信小程序用到的知识点。

1、修改数据，很容易就误调用this.data了

this.setData({ [type]: !this.data[type] })
this.setData(...,()= >{}) //还可以使用回调函数

2、本地存储数据，非常实用

wx.setStorageSync('data', this.userInfo)
let data = wx.getStorageSync('data')
wx.removeStorageSync('data') //删除存储

3、picker没有文字的时候容易塌陷，触发不了弹出框，通常套个vew给个padding

<picker>
    <view class="picker">
        {{array[0]}}{{array[1]}}{{array[2]}}
    </view>
</picker>

4、事件打印

//wxml：
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

//JS
tapName: function (e) {
    console.log(e)
    let { hi } = e.currentTarget.dataset;
    this.setData({ [hi]: !this.data[hi] })
}

//事件打印信息
{
  "type":"tap", //事件类型
  "timeStamp":895, //页面打开到触发事件的毫秒数
  
  "target": { //触发事件的源组件
    "id": "tapTest", //事件源组件的id
    "dataset":  { //事件源组件上由data-开头的自定义属性组成的[集合]
      "hi":"WeChat"
    }
  },
  "currentTarget":  { //事件绑定的当前组件
    "id": "tapTest", //当前组件的类型
    "dataset": { //当前组件上由data-开头的自定义属性组成的集合
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

5、dataset：在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

6、onLoad(Object query)：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onTap: function(){  
    wx.navigateTo({  
      url: "second?id=" + secondId  
})  

Page({  
    onLoad: function(options){  
        var secondId = options.id;  
         console.log(postId);  
    }  
})

7、页面跳转

//保留当前页面，跳转到应用内某个页面，但不能tabbar
const { ROUTE } = require('../../route.js')
wx.navigateTo({
    url: `${ROUTE}`,
})
//返回上一页,与navigateTo结合使用
wx.navigateBack()

//关闭当前页面，跳转到应用内的某个页面，但不能tabbar
wx.redirectTo({
  url: 'test?id=1'
})

//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
  url: 'test?id=1'
})

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/index'
})

8、打开另一个小程序

wx.navigateToMiniProgram({
    appId: '对方的appid',
    path: '路径'
})
//还需在代码配置中声明将要跳转的小程序名单，限定不超过 10 个
"navigateToMiniProgramAppIdList": [
    "对应的appid"    //appID
 ]

实际上大部分时间都花在理解需求和想业务逻辑上了