微信小程序开发笔记-白红宇

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

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

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

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

wx.setStorageSync('userinfo', this.userInfo)let userinfo = wx.getStorageSync('userinfo')wx.removeStorageSync('userinfo') //删除存储复制代码

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


        
     
              {
   {region[0]}}{
   {region[1]}}{
   {region[2]}}    
     
    复制代码

4、事件打印

//wxml：
    
      Click me! 
    //JStapName: 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。


    
      DataSet Test 
    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、页面跳转

//保留当前页面，跳转到应用内某个页面，但不能tabbarconst { SALE_ORDER_DELIVER } = require('../../const/route.js')wx.navigateTo({    url: `${SALE_ORDER_DELIVER}`,})//返回上一页,与navigateTo结合使用wx.navigateBack()//关闭当前页面，跳转到应用内的某个页面，但不能tabbarwx.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": [    "wxe5f52902cf4de896"    //appID ]复制代码

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