2018-07-20  1,796 views 评论

小程序自定义Js调用App.js中自定义结构化数据和方法的getApp() undefined两种解决方案

原因:为了程序结构更清晰,我们经常会封装很多自定义的js,比如把实现登录的Js独立定义成loginHandler.js 把微信自定义请求的相关api封装在一个文件定义成为wxRequest.js等等。

在实际开发过程中,一个小程序中会有很多request请求,对应的也会有很多需要请求api的地址,为了统一管理,首先想到的是把这一类结构化数据写在app.js中,比如:

App({
   globalData: {
       apiList: {
          "getToken": "http://*****/Token",
          "login":"http://*****/Account/Login"
       }
   }
})

在需要使用到的地方调用:

var app = getApp()
wx.request({
   url:app.globalData.apiList.getToken
})

然后如果你是这样写的那会有两种情况:

1、程序已经加载完,异步或同步请求API的时候

这样我们是可以获取到

如:

app.js

App({
  onLaunch: function () {
    var app = getApp();
  },
  globalData: {
    userInfo: "hello",
    isLogin: false,
    demo:"demo"
  },
})

test.js(这个是我们自定义的js) 定义了一个方法用于获取app.js中的 globalData

const app = getApp();

function getUrl(){
  console.log(app.globalData.demo)
}
module.exports ={
  getUrl: getUrl
}

并且写了一个按钮及一个按钮事件:

<button type='primary' bindtap='testConsole'>测试</button>
testConsole:function(){
  test.getUrl()
}

此时单击按钮:

可以获取到app.js中globalData的值,如下图所示:

2、第二种情况即在页面加载时我们就希望调用,比如小程序加载就需要用户授权,并且登录

那这时候我们就无法通过以上的方式获取到app.js中的值了,这样请求的结果就是getApp() undefined

由于小程序没有加载完成,app.js没有完全初始化

 

替代方案:

我们可以把这类固定的数据结构存储在一个自定义的js中,如在utils文件夹新建一个staticUrls,用于存储api地址列表,如下:

/**
 * Api 请求地址类
 */
var requestUrls = {
  apiUrl: "http://*****:21670/",
  apiList: {
    "getToken": "http://*****/Token",
    "login":"http://*****/Account/Login"
  }
};

module.exports = {
  requestUrls: requestUrls
}

那在其他文件中我们就可以通过require的方式引用外部js中暴露出的变量和方法。

PS:

App() 必须在 app.js 中注册,且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。
通过 getApp() 获取实例之后,不要私自调用生命周期函数。

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: