快速掌握微信小程序项目开发与分析的实用教程

很多朋友对于快速掌握微信小程序项目开发与分析的实用教程和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

项目登录流程图（图1）在图1中我们看到，当用户拒绝授权时，无法获取unionId。当用户拒绝微信授权时，微信会返回错误状态码：-12006。值得使用此状态代码来确定用户是否获得授权。请注意，到目前为止，微信开发者工具不会返回此错误状态代码，仅在真实设备上返回。

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

（图2）新建js文件，配置全局接口请求链接地址。 baseUrl.js如下：

//baseUrl.js

模块. 导出={

apiUrl:"https://api.baidu.com/index.php?m=modelc=controllera=",

imgUrl:"http://img.baidu.com",

payUrl:"https://api.baidu.com/index.php?m=modelc=controllera=pay"

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

//应用程序.js

var $url=require("/utils/baseUrl.js");

var $util=require("/utils/util.js");

应用程序（{

_G:{

apiUrl: $url.apiUrl,

imgUrl: $url.imgUrl,

payUrl: $url.payUrl,

wxInfo: {},

用户信息：{},

shareTitle: "测试婚姻运，计算事业财运",

shareDesc: "最靠谱的命理算命师在线解答，10分钟快速回复！占卜问问题、择吉名、看风水。 "

.这样就可以在其他页面通过getApp()函数获取小程序实例来获取接口url了。

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

//util.js

/**

* 设置用户信息缓存

函数设置数据存储（d，g）{

数据=d.数据；

//设置全局变量

g._G.userInfo={

avatar: 数据.头像，

昵称：数据.昵称，

mobile: 数据.mobile,

余额：数据.余额，

信用：数据.信用，

}

wx.setStorageSync("userInfo",{

uid: 数据.uid,

NickName: 数据.昵称，

mobile: 数据.mobile,

avatar: 数据.avatar

});

wx.setStorageSync("openid", data.openid);

wx.setStorageSync("uid",data.uid);

wx.setStorageSync("token",data.token);

}

模块. 导出={

setDataStorage: setDataStorage

}setDataStorage方法功能的g参数是通过getApp()函数获取小程序实例，从而同步更新全局_G变量，用于后续更新用户信息，如：用户余额变化等用户积分。

前期的准备工作就从这里开始。接下来，我们需要编写用户登录方法函数。后面很多地方都需要调用这个登录方法函数。

为了方便起见，我在app.js中创建了登录方法函数。代码如下

//全局登录函数

var that=this;

//调用登录接口

wx.登录({

success: 函数（res）{

if(res.code){

wx.getUserInfo({

withCredentials:true,

success: 函数(r) {

wx.showLoading({

title: "正在加载",

})

wx.请求({

url: $url.apiUrl + "appletLogin",

method:"POST",

数据： {

code: res.code,

rawdata: r.rawData，

签名： r.签名，

crypteddata: r.cryptedData，

iv: r.iv，

标头： {

"内容类型": "application/x-www-form-urlencoded"

success: 函数（结果）{

var dt=结果.数据；

wx.setStorageSync("unionId",dt.data.unionId);

//解绑手机号码

if(dt.结果==40040){

wx.redirectTo({

url:"/pages/member/bound/bound?fmurl=" + fmurl,

});

返回假；

}

if(dt.结果！=1){

wx.showModal({

title: "系统提示",

内容： dt.msg，

显示取消：假，

})

返回假；

}

//设置缓存

$util.setDataStorage(dt,that);

wx.showToast({

title: "登录成功",

icon: "成功",

持续时间： 1500，

})

//执行回调

if(typeof func=="函数"){

func(dt.data);

}

控制台.log(dt)

返回dt；

失败：函数（e）{

wx.hideLoading();

wx.showModal({

title: "系统提示",

content: "请求超时，请稍后再试",

showCancel: 假，

})

}

})

Complete: function(obj){//处理用户拒绝授权

if(obj.err_code=="-12006"){

wx.redirectTo({

url: "/pages/member/login/login"

})

返回假；

}

})

}别的{

console.log("获取代码失败")

}

})

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

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

获取返回的用户数据，调用教程中刚刚编写的setDataStorage()函数来设置全局变量和全局数据存储。

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

微信小程序登录接口（需要解密加密数据）第三方登录绑定账号（可以通过unionId登录的接口）登录接口注册接口我们看一下登录方法功能。当函数调用开发者服务器的appletLogin接口时，服务器返回错误码40040（此错误码要根据自己服务器的返回值处理），说明微信用户没有绑定账号（unionId没有）匹配）或未注册。此时程序会跳转到（图3）绑定已有账户或注册页面。

绑定账号（图3）

登录页面（图4）

我们看一下wx.login()函数中完整的回调函数，来确定用户拒绝微信授权的处理。当用户拒绝微信授权时，会返回错误状态码：-12006（目前微信开发者工具不会返回这个错误码，只能（到真机测试）根据这个错误码，直接跳转到登录这样整个小程序项目的登录逻辑就清晰了，接下来就该编写账号绑定、注册、用户主动登录等页面和代码逻辑了。

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！