微信小程序开发微信小程序微信

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

2017-05-27  本文已影响141人  梁瀛SimpleBook

在写这篇教程前我有去看简书上的其他微信小程序相关教程,发现有很多关于小程序的基础教程,所以我这篇教程就不从基础开始了,这篇教程分享了我在开发过程中的一些开发经验,适合有一定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端,所以服务器端应该有四个相关接口:

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

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

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读