欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序 项目搭建 全局变量 公用方法

程序员文章站 2022-03-04 18:25:28
...

微信小程序 项目搭建

项目创建

1、安装WeChatdev工具

微信小程序 项目搭建 全局变量 公用方法

1.首先开发微信小程序需要微信开发者账号,用邮箱注册即可 注意此邮箱不能时qq号或者已注册微信其他平台的邮箱
2.当我们点击➕好就可创建微信小程序了,如下图

2、创建项目微信小程序 项目搭建 全局变量 公用方法

1.没有appid可以先点击测试号获取一个临时的,你的微信小程度appid需要你在你的开发者账号上去注册
微信小程序 项目搭建 全局变量 公用方法

3、点击创建

微信小程序 项目搭建 全局变量 公用方法

文件详情

app.js是入口文件 当中包含 小程序启动时 执行的 生命周期方法(函数)onLaunch 你要在微信中获取用户标志 可以通过 微信的

// 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

app.js中有很多可以提高开发效率,以及维护效率的方法,比如全局变量的设置公用方法的设置

全局变量

globalData: {
    userInfo: null //可在里面定义你需要存储的全局变量
  }
  //在其他页面如何调用呢 通过 getApp().globalData.userInfo来调用

公用方法

比如我们程序都需要使用的请求 就可以写在 全局公用方法里面
这下面我们封装了一个微信的请求Promise 需要传入参数 这些参数原封不动的设置到 wx.request当中(…params)的含义
调用的时候使用 getApp().request
**这样使用的好错是什么呢? 你可以统一管理后台返回 比如授权过期,失败,然后重新获取授权 **
然后你注意到代码中的 const tempParams = params了吗 它的作用 就是 当用户授权失败 之后 执行重新授权 授权成功之后 我们可以调用 getApp().request(tempParams) 接上 用户的请求 (**好处是当用户直接进入我们小程序某个页面时 不需要进到 首页 直接在当前页 **)
另一个好处是 代码的可读性高一些
…params.header这个的作用是当我们有些请求header不同 可以替换 且公用的不会影响我们设置的值 次数的顺序很重要

App({
...
authLogin(){...}
,
request: function(params) {
        // console.log(params)
        return new Promise(function(resolve, reject) {
            // var temp = {};
            // console.log(getApp().globalData.cookie)
            const tempParams = params;
            wx.request({
                ...params,
                header: {
                    cookie: (getApp().globalData.cookie ? getApp().globalData.cookie : wx.getStorageSync('token')),
                    ...params.header
                },
                success: res => {
                    // console.log(params.url + '请求返回', res, res.data.result);
                    wx.hideLoading();
                    if (res.data.result === 1) {
                        resolve(res);
                    } else {
                        if (res.data.code === "10002") {
                            //权限认证失败,请重新登陆
                            if (!getApp().globalData.isLoginAgain) {
                                wx.showToast({
                                    icon: "none",
                                    title: "验证失效重新登录"
                                });
                                getApp().globalData.userInfo = {};
                                getApp().globalData.isLoginAgain = true;
                                // TODO 授权失败重新登录
                                getApp().authLogin().then(temp => {
                                        getApp().request(tempParams).then(temp => {
                                            resolve(temp)
                                        })
                                    })
                                    // wx.reLaunch({
                                    //   url: "/pages/index/index"
                                    // });
                            }
                        }
                },
                fail: error => {
                    wx.hideLoading();
                    wx.showToast({
                        icon: "none",
                        title: "请求网络失败"
                    });
                }
            });
        });
    }
    getApp().request({url: getApp().globalData.baseIP + teamInfo,
      method: "GET",
      data: {
        group_id: group_id
      }}).then(response =>{
		console.log(response)
})
...
})

以及 微信小程序 的文件 图片 公用处理方法都可以使用此种方式

相关标签: 微信小程序