button 无法设置宽高

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

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

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

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

按钮宽高生效

微信小程序跳转操作

wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。

wx.redirectTo 当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 5 层页面栈。这时,我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面。这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间。

wx.reLaunch wx.reLaunch()与 wx.redirectTo()的用途基本相同, 只是 wx.reLaunch()先关闭了内存中所有保留的页面,再跳转到目标页面。

wx.switchTab 对于跳转到 tab bar 的页面,最好选择 wx.switchTab(),它会先关闭所有非 tab bar 的页面。其次,也可以选择 wx.reLaunch(),它也能实现从非 tab bar 跳转到 tab bar,或在 tab bar 间跳转,效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar,则会跳转失败。

wx.navigateBack 用于关闭当前页面,并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。这个 API 需要填写的参数只有 delta,表示要返回的页面数。若 delta 的取值大于现有可返回页面数时,则返回到用户进入小程序的第一个页面。当不填写 delta 的值时,就默认其为 1(注意,默认并非取 0),即返回上一页面。

<!-- 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
})

微信小程序弹窗

wx.showModal({
    title: '提示',
    showCancel: false,
    content: '请求超时,请稍后重试!',
})

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

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

  1. 简单粗暴的 onShow:function() {}方法中调用 获取列表数据的方法 ,但是会重新加载整个页面,增加开销且比较慢。
onShow: function() {
    this.onLoad();
}
  1. 在子页面中进行某些操作的时候,后台刷新父页面,此时返回父页面数据已更新且不会重新加载,比较推荐的用法,快速且不会有多余消耗
<!-- 父页面定义更新方法 -->
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,
      })
    }) 
  },

微信小程序中可以在 app.json 中设置接口请求超时时间

"networkTimeout": {
    "request": 6000,
    "connectSocket": 6000,
    "uploadFile": 6000,
    "downloadFile": 6000
  },

微信小程序打开 pdf 之类的文件方法

openPdf() {
    <!--此处为文件命名可以修改打开后的页面title名称 -->
    const name2 = '廉洁从业规范.pdf'
    const newPath2 = `${wx.env.USER_DATA_PATH}/${name2}`
    console.log(newPath2)
		wx.downloadFile({
            <!-- pdf线上地址 -->
			url: this.data.publicPdf + 'CleanPracticesCode.pdf',
			filePath: newPath2,
			complete: (res) => {
				console.log(res)
				if (res.errMsg == 'downloadFile:ok') {
					// let data = res.tempFilePath
					// let data = res.filePath
					setTimeout(() => {
						wx.openDocument({
							filePath: newPath2,
							// showMenu: true,
							// fileType: 'pdf',
							success: (res) => {
								console.log('打开文档成功')
								this.setData({
									loadingVis: false,
								})
							},
							fail(err) {
								console.log(err)
								this.setData({
									loadingVis: false,
								})
							},
						})
					}, 1000)
				} else {
					this.setData({
						loadingVis: false,
					})
				}
			},
		})
  },

微信小程序全局方法和变量

<!-- 在入口文件 app.js中定义全局变量 -->
globalData: {
    // 生产环境资源地址
    publicImg: '全局变量',
}    

<!-- 在入口文件 app.js中定义全局方法 -->
getToken() {
    wx.login({
      success: res => {
        var code = res.code
        const CryptoJS = require('./utils/public.js');
        var data = '{"url": "login/validate", "token": "'+ code +'"}';
        var encrypt = CryptoJS.Encrypt(data)
        request({ 
          url: '',
          data: encrypt,
          method: "POST", })
        .then(result => {
          var res = CryptoJS.Decrypt(result.data);
          var info = JSON.parse(res)
          console.log('获取用户信息===----=-=-=-=>', info)
          if(info.code === 0) {
            wx.setStorageSync('openid', info.data.openid);
          } else {
            //token失效,界面重定向到登录页,绝对路径
            wx.setStorageSync('openid', info.data);
          }
        })
      }
    })
  } 
<!-- 其他文件中使用 -->
app.globalData.publicImg

<!-- 其他文件中调用全局方法-->
app.getToken() 

常用三元表达式

三个条件及普通css控制

<view>{{status == 1? '删除':'去结算'}}</view>
<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}"</text>
<view class="{{thmDialog?'class1':(haslogistics?'class1':'class2')}}"></view>
<view  style="display: {{ 条件? 'block' :  'none' }}"/> 

点击事件的三元

<view class="bhz_item" catchtap="{{canClick?'enterOrderInfomation':''}}"></view>

微信小程序跳转到其他微信小程序操作

第一种方式

  1. 首先,需要在 app.json 中配置需要跳转的微信小程序appId
"navigateToMiniProgramAppIdList": [
    "wx932689484100bf6b"
  ],
  1. 在页面上定义点击方法
<view bindtap="toNewApp">去哪</view>
  1. 在js文件中定义跳转方法
toNewApp() {
    wx.navigateToMiniProgram({
      appId: 'wx932689484100bf6b',
      // path: 'page/index/',
      extraData: {
        foo: 'bar'
      },
      envVersion: 'release',
      success(res) {
        // 打开成功
        alert('success')
      },
      fail(res){
        // 打开失败
        alert('error')
      },
      complete(res){
        // 调用结束  不管成功还是失败都执行
      }
      /**
       * appId:跳转到的小程序app-id
       * path:打开的页面路径,如果为空则打开首页,path 中 ? 后面的部分会成为 query,在小程序的 App.onLaunch、App.onShow 和 Page.onLoad的回调函数中获取query数据
       * extraData:需要传递给目标小程序的数据,目标小程序可在 App.onLaunch、App.onShow 中获取到这份数据
       * envVersion:要打开的小程序版本,有效值: develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效,如果当前小程序是正式版,则打开的小程序必定是正式版
       */ 
    })
  },

第二种方式

<navigator class="btn" target="miniProgram" open-type="navigate" app-id="wx213c5ba6740c814d" version="trial">点击跳转另一个小程序</navigator>
/**
   * target:在哪个目标上发生跳转,默认当前小程序,有效值: self(当前小程序),miniProgram(其它小程序)
   * open-type:跳转方式 “avigate    对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能”
   * app-id:跳转到的小程序app-id
   * version:要打开的小程序版本,有效值: develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效,如果当前小程序是正式版,则打开的小程序必定是正式版
   */ 

动态修改当前小程序页面title

在 index.json 文件中设置

"navigationBarTitleText": "晒幸福",
``

<!-- 动态标题 -->

changeTitle (){
wx.setNavigationBarTitle({
title: this.data.mienType === '1' ? '团队晒幸福' : '个人晒幸福'
})
}


## 微信中image图片资源是否正常加载

imgError: function(e) {
console.log(e)

},
imgSuccess: function(e) {
console.log(e)
}