[教程]教你如何快速开发与分析微信小程序项目

在写这篇教程前我有去看上的其他微信小程序相关教程，发现有很多关于小程序的基础教程，所以我这篇教程就不从基础开始了，这篇教程分享了我在开发过程中的一些开发经验，适合有一定javascript基础，最好了解后台开发的同学。

需求分析

开发项目前要把项目需求理顺、理清这是首当其冲要做的事情，在我开发的项目当中拿高人汇为例，高人汇项目的业务逻辑很多接口都需要 uid 和 token，所以第一步要从登录和存储全局信息开始，这里说一下高人汇项目是有 ios 和 android 两端app的，小程序端要利用微信开发平台 unionId 来实现同步信息，通过小程序API中的 wx.getUserInfo 方法获取到 unionId 来实现自动登录。登录后获取用户的部分数据作为全局变量存储，有了必要的数据，接下来请求其他接口和对业务逻辑就会相对清晰。

项目登录流程图（图1）

在图1 中我们看到当用户拒绝授权是获取不到 unionId 的，当用户拒绝微信授权时微信会返回错误状态码：-12006，利用这个状态码来判断用户是否授权，值得注意的是目前为止，微信开发者工具并不返回这个错误状态码，只有在真机上才有返回。

首先要配置一个全局请求接口的连接地址，这样便于生产环境与测试环境的切换。

（图2）

新建一个js文件用来配置全局的接口请求链接地址，baseUrl.js如下：

//baseUrl.js
module.exports = {
    apiUrl:'https://api.baidu.com/index.php?m=model&c=controller&a=',
    imgUrl:'http://img.baidu.com',
    payUrl:'https://api.baidu.com/index.php?m=model&c=controller&a=pay'
}

在app.js中引入一次即可，在app.js需要设置一个全局变量，因个人习惯全局变量名这里我设置为_G，代码如下

//app.js
var $url = require('/utils/baseUrl.js');
var $util = require('/utils/util.js');
App({
    _G:{
        apiUrl: $url.apiUrl,
        imgUrl: $url.imgUrl,
        payUrl: $url.payUrl,
        wxInfo: {},
        userInfo:{},
        shareTitle: '测姻缘桃花，算事业财运',
        shareDesc: '最靠谱的命理占卜师在线解答，10分钟快速响应！占卜问事、起名择吉看风水。'
    },
    ....

这样在其他页面通过 getApp() 函数得到小程序实例从而得到接口url。

在上面的代码中也引入 util.js，这个js是用来写一些常用的工具函数，提到 util.js 那现在就首先编写一个用来统一设置全局数据的方法函数，在图1 了解到有四处地方可以获取到的用户数据分别为：自动登录、主动登录、绑定账户和用户注册，这四处获取到的数据有部分数据是需要设置全局变量和全局存储的，为了方便有必要写这个方法函数，代码如下

//util.js
/**
 * 设置用户信息缓存
 */
function setDataStorage(d,g) {
    data = d.data;
    //设置全局变量
    g._G.userInfo = {
        avatar: data.avatar,
        nickname: data.nickname,
        mobile: data.mobile,
        balance: data.balance,
        credit: data.credit,
    }
    wx.setStorageSync('userInfo',{
        uid: data.uid,
        NickName: data.nickname,
        mobile: data.mobile,
        avatar: data.avatar
    });
   
    wx.setStorageSync('openid', data.openid);
    wx.setStorageSync('uid',data.uid);
    wx.setStorageSync('token',data.token);
}

module.exports = { 
  setDataStorage: setDataStorage
}

setDataStorage 方法函数 g 参数是通过 getApp() 函数得到小程序实例，这样同步更新全局_G变量，在之后会用来更新用户信息，例如：用户余额和用户积分的变化。

前期的准备工作先到这里，接下来要编写用户登录方法函数，之后会很多地方需要调用这个登录方法函数。

为了方便我是在app.js中创建的login方法函数，代码如下

  //全局登录函数
    login:function(fmurl,func){
        var that = this;
        
        //调用登录接口
        wx.login({
          success: function (res) {

            if(res.code){
              
                wx.getUserInfo({
                    withCredentials:true,
                    success: function (r) {
                        wx.showLoading({
                            title: '加载中',
                        })
                        wx.request({
                            url: $url.apiUrl + 'appletLogin', 
                            method:'POST',
                            data: {
                                code: res.code,
                                rawdata: r.rawData,
                                signature: r.signature,
                                cryptedata: r.encryptedData,
                                iv: r.iv,
                            },
                            header: {
                                'content-type': 'application/x-www-form-urlencoded'
                            },
                            success: function(result) {
                                var dt = result.data;
                                wx.setStorageSync('unionId',dt.data.unionId);
                               
                                //未绑定手机号
                                if(dt.result == 40040){
                                    wx.redirectTo ({
                                        url:'/pages/member/bound/bound?fmurl=' + fmurl,
                                    });
                                    return false;
                                }

                                if(dt.result != 1){
                                    wx.showModal({
                                        title: '系统提示',
                                        content: dt.msg,
                                        showCancel:false,
                                    })
                                    return false;
                                }

                                //设置缓存
                                $util.setDataStorage(dt,that);
                                
                                wx.showToast({
                                    title: '登录成功',
                                    icon: 'success',
                                    duration: 1500,
                                })

                               //执行回调
                                if(typeof func == 'function'){
                                    func(dt.data);
                                }
                                console.log(dt)
                                return dt;
                            },
                            fail: function(e){
                                wx.hideLoading();
                                wx.showModal({
                                    title: '系统提示',
                                    content: '请求超时，请稍后再试',
                                    showCancel: false,
                                })
                            }

                        })

                    },
                    complete: function(obj){//处理用户拒绝授权
                        if(obj.err_code == '-12006'){
                            wx.redirectTo({
                                url: '/pages/member/login/login'
                            })
                            return false;
                        }
                    }

                })


            }else{
              console.log('获取code失败')
            }

          }

        })


    },

大家要注意这个login方法函数，是由两个小程序函数和一个开发者服务器接口构成的， wx.login() 、 wx.getUserInfo()函数和 appletLogin接口。

通过两个小程序函数获得的 code 、rawdata、signature、encryptedData、iv，数据后调用开发者服务器 appletLogin接口，将encryptedData 进行解密得到 openId 和 unionId后，appletLogin接口内部调用开发者服务器登录接口，获取用户数据进行返回。

拿到返回的用户数据再调用教程上面刚刚写的 setDataStorage() 函数，进行设置全局变量和全局数据存储。

在这里简单的说一下开发者服务器端逻辑，因为高人汇项目还有APP端，所以服务器端应该有四个相关接口：

微信小程序登录接口（需要解密 encryptedData）
第三方登录\绑定账号（可通过unionId登录的接口）
登录接口
注册接口

来看一下 login 方法函数，函数调用开发者服务器 appletLogin接口时，服务器返回错误码40040（这个错误码要根据自己服务器返回值去处理）表示该微信用户未绑定账号（unionId不匹配）或未注册，这时程序会跳转到（图3）绑定已有账号或注册页面。

绑定账号（图3）

登录页面（图4）

再来看一下 wx.login() 函数中的 complete 回调函数判断了用户拒绝微信授权的处理，当用户拒绝微信授权时会返回 错误状态码：-12006（目前微信开发者工具是不返回这个错误码的，只能到真机测试），根据这个错误码判断，未授权直接跳转到（图4）登录页面。

这样整个小程序项目的登录逻辑就清晰了，那接下来应该编写：绑定账号、注册和用户主动登录等页面与代码逻辑了。

高人汇小程序，大家可以扫描体验

这篇教程先写到这里，之后会陆续更新我在高人汇项目中得到的开发经验与一些开发技巧。

在文章教程中也许会出现一些纰漏，大家也可以在下方留言给予指出，大家一同交流和学习。

[教程]教你如何快速开发与分析微信小程序项目

需求分析

你可能感兴趣的:([教程]教你如何快速开发与分析微信小程序项目)