微信小程序开发随记

button 无法设置宽高

当前版本的微信小程序，在.wxss文件里设置Button宽度无效,调整不会被应用到元素上

.btn {
    width: 80%;
    height: 80rpx;
}

第一种方式是把 app.json里的 style: v2语句删掉。
这样虽然也可以解决问题，但会导致全局的样式变化。
第二种方式可以很便捷的解决问题，就是直接在 button标签的行内添加样式

<button style="width: 80%; height: 80rpx">提交</button>

按钮宽高生效

微信小程序跳转操作

<!-- 1. 跳转到页面后左上角不会有返回角标及操作，但是不可以跳转到根级别的tab页面 -->
wx.redirectTo({
    url: '/pages/oa_login/index',
})

<!-- 2. 这个方法之能跳转到 app.json 里面定义的 主 tab页面，如首页，我的这种 -->
wx.switchTab({
    url: '/pages/index/index',
})

<!-- 3. 页面跳转且会有返回操作，但是不可以跳转到根级别的tab页面 -->
wx.navigataTo({
    url: '/pages/oa_login/index',
})

<!-- 绝对路径跳转，一般用于页面token失效需要重新跳转到登陆页面使用 -->
wx.reLaunch({  //绝对路径跳转
      url: "/pages/health_page/health_list/index",
    });

微信小程序轻提示

wx.showToast({
    title: info.message,
    icon: 'none',
    duration: 1500
})

微信小程序返回上一页面数据不刷新解决

当你在某活动详情页调用方法后数据发生改变，然后返回上一个页面，活动列表中的数据没有发生更新，此时可以使用以下两种方式

简单粗暴的 onShow:function() {}方法中调用获取列表数据的方法，但是会重新加载整个页面，增加开销且比较慢。

onShow: function() {
    this.onLoad();
}

在子页面中进行某些操作的时候，后台刷新父页面，此时返回父页面数据已更新且不会重新加载，比较推荐的用法，快速且不会有多余消耗

<!-- 父页面定义更新方法 -->
changeData: function() {
    this.onLoad();
 },

<!-- 子页面某处触发方法 -->
changeParentData: function() {
    var pages = getCurrentPages();  //当前页面栈
    if(pages.length > 1) {
      var beforePage = pages[pages.length - 2] //获取上一个页面的实例对象
      beforePage.changeData() // 触发父页面中的更新方法
      console.log('更新成功了吗？？？')
    }
  },

微信小程序获取当前经纬度定位信息

在微信小程序开发者工具中测试获取到的经纬度信息有较大的偏差，不够准确，手机上测试相对较为精准，后续会持续优化精准度。

{
    "pages":[
        "pages/index/index",
    ],
    <!-- 是否允许获取定位信息 -->
    "permission": {
        "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    },
}
<!-- 在需要获取定位信息的 js 里面调用微信获取经纬度位置的API    wx.getLocation({})   -->
onLoad: function(options) {
    // 获取当前经纬度定位信息API 
      wx.getLocation({
        altitude: 'altitude',
        isHighAccuracy: true, 
        success(res) {
            <!-- 返回定位信息    longitude字段为经度     latitude为纬度-->
            console.log(res)
          this.setData({
            // 经度
            longitude: res.longitude,
            // 纬度
            latitude: res.latitude
          })
        }
      })
}

微信小程序时间戳转换成微信时间规范

getUnionList() {
    <!-- 参数加密请求 -->
    var data = '{"url": "/data/infoList", "userId": "'+ wx.getStorageSync('userId') +'"}';
    var encrypt = CryptoJS.Encrypt(data)
    request({ 
      url: '',
      data: encrypt,
      method: "POST", })
    .then(result => {
      var res = CryptoJS.Decrypt(result.data);
      var unionInfo = JSON.parse(res)
      unionInfo.data.forEach(element => {
        let daySec, dayMin, dayHour, dayS
        let timeNow = new Date().getTime()
        let ts = (timeNow - element.mienTime) / 1000
        dayS = Math.round(ts / (24 * 60 * 60))
        dayHour = Math.round(ts / (60 * 60))
        dayMin = Math.round(ts / 60)
        daySec = Math.round(ts)
        if (dayS > 7 && dayS < 365) {
          var date=new Date(parseInt(element.infoDate));
          var mon = date.getMonth()+1;
          var day = date.getDate();
          element.infoDate = mon+'/'+day;
          return mon+'/'+day;
        } else if (dayS > 2 && dayS < 7) {
          element.infoDate = `${dayS} 天以前`
          return `${dayS} 天以前`
        } else if(dayS > 0 && dayS < 2) {
          element.infoDate = `${dayS} 天以前`
          return `${dayS} 天以前`
        } else if (dayS <= 0 && dayHour > 0) {
          element.infoDate = `${dayHour} 小时以前`
          return `${dayHour} 小时以前`
        } else if (dayHour <= 0 && dayMin > 0) {
          element.infoDate = `${dayMin} 分钟以前`
          return `${dayMin} 分钟以前`
        } else if (dayMin <= 0 && daySec >= 0) {
          element.infoDate = '刚刚'
          return '刚刚'
        } else {
          var date=new Date(parseInt(element.infoDate));
          var year=date.getFullYear();
          var mon = date.getMonth()+1;
          var day = date.getDate();
          element.infoDate = year+'/'+mon+'/'+day;
          return year+'/'+mon+'/'+day;
        }
      });
      console.log(unionInfo)
      this.setData({
        unionList: unionInfo.data,
      })
    }) 
  },