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

微信小程序 项目搭建

项目创建

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

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