3、微信小程序其他随手记

年底了，今天是年假的前一天，搞了将近3个月的小程序，还是就自己觉得容易遗漏和忘却的东西整理一下，那些被遗忘的知识并不属于自己，所以就用笔记代替容易褪色的记忆里吧。

-------------------------------------------

还是就目前的项目进行一些整理。

----------------------------------------------------

一、app.json 具体参考官方文档 关于“全局配置”

 重点看一下preloadRule（分包预下载规则）

 

usingComponents引入的是全局用到的组件

permission 配置的是权限的操作提醒文字

 

 

 

二、app.js

 

 

 

1、glbalData 

配置的是全局的变量，如：登录用户的token信息 用户id、用户名、域名、以及一些公共的全局静态变量等

2、https（名字自定义方法名）

 是全局的请求方法，配置好了请求地址和返回数据的处理，便于用户直接调用

 （其实也可以将请求方法放到util文件夹下，再引入到项目中，这里为了省去引入文件的麻烦而将方法写到了app.js文件中）

3、local （自定义变量名）

   下面放着三个方法get、set、del 分别是对storage的操作方法，取、存、删除

   具体代码如下：

get: name => {
      let data = wx.getStorageSync(name);
      if (data) {
        if (data.expire && parseInt(new Date().getTime() / 1000) - data.time > data.expire) {
          wx.removeStorageSync(name);
          return "";
        } else return data.data;
      }
      return "";
    },
    set: (name, value, expire = 0) => {
      wx.setStorage({
        key: name,
        data: {
          expire: expire,
          time: parseInt(new Date().getTime() / 1000),
          data: value
        }
      });
    },
    del: name => {
      wx.removeStorageSync(name);
    }

　　4、onLaunch（小程序初始化执行时触发的方法，即小程序启动时执行的第一个方法）

本项目代码如下： 是一段小程序更新时的提醒

 if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        // console.log('onCheckForUpdate====', res)
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          console.log('res.hasUpdate====')
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已经准备好，是否重启应用？',
              success: function (res) {
                // console.log('success====', res)
                // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
                if (res.confirm) {
                  // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            // 新的版本下载失败
            wx.showModal({
              title: '已经有新版本了哟~',
              content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
            })
          })
        }
      })
    }

　　5、isAllowJump（自定义方法）

       用于处理页面点击事件跳转页面，防止多次点击，开启多个相同页面的方法

     代码如下：

isAllowJump() {
    if (getApp().globalData.allowJump) {
      getApp().globalData.allowJump = false;
      return true;
    } else {
      return false
    }
  },

  allowJump 是存放在globalData里的一个变量，默认false。

页面使用该方法时，需要在onShow方法里，加上app.globalData.allowJump = true;
然后在点击跳转事件的方法里，加上判断方法 if(isAllowJump){}

6、clearGlobalData（自定义方法）
 用于恢复globalData下变量的默认值，调用情况如：退出登录、清除本地缓存、等
大致代码如下：

 clearGlobalData() {
    var app = getApp();
    app.globalData.name= "";
    app.globalData.userid= "";
    app.globalData.mobile= "";
    app.globalData.allowJump = true;
  },

　　三、就这些吧 

补充：关于radio组件的样式控制问题。

默认微信开发者工具不支持选元素中radio选择框，所以是通过百度找到了相关的方法。

 

radio .wx-radio-input{
  width: 45rpx;
  height: 45rpx;
  display: block;
  position: absolute;
  top: 150rpx;
}

 

　　没错可以进行定位，因为我添加的text内容有点多，即使文字限制宽度或者换行也无法控制radio不变形，很诡异，它扁了，捣鼓了半天才弄明白。

其他的关于radio样式的设置方法，百度很多参考资料。