系统分析与设计:技术与工作报告

发表于

微信小程序用户登陆

  • 授权：使用wx.getUserInfo访问微信用户的信息,在返回的res中，可以获取到用户昵称、头像、性别、地区等信息。
1
2
3
4
5
6
wx.getUserInfo({
              success: res => {
                //get userInfo incluing nickname, avatar and gender
                console.log(res.userInfo);
              }
})
  • 身份识别与数据读取：对于曾经登陆过该小程序的用户，首先获取其wechatopenid，然后根据openid获取到该用户在后台数据库中的id，最后在根据id来进行数据查询
1
2
3
4
5
6
7
8
9
10
11
12
13
api.getOpenId()
    .then(res => {
    console.log(res);
    that.userInfo.wechatopenid = res.result;
    }

api
    .querySomeByModel("users", {
    wechatopenid: that.userInfo.wechatopenid
    })
    .then(result => {
    console.log(result);
    }

vue框架中全局数据的访问与修改

  • 由于前端框架中涉及了多个界面，而几个界面之间又有共同的数据访问关系，所以必须维护一些全局变量及其操作接口来实现数据访问与修改。实现方法为在component的store.js中定义store变量，保存需要的user变量等信息，然后实现一个改变函数changeUser作为操作接口。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var store = new Vuex.Store({
  state: {
    user: {},
    isAuthorized:true
  },
  mutations: {
    changeUser(state, curUser){
      state.user = curUser
    },
    changeAuthorized(state, au){
      state.isAuthorized = au
    }
  }
})
  • 访问和修改的具体方法如下：
1
2
3
4
5
import store from "@/components/store";

let user = store.state.user

store.commit("changeUser", user);