微信小程序登录问题？ - 知乎2被浏览87分享邀请回答0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起写回答您还可以使用以下方式登录
当前位置：&>&&>&&>& > 微信小程序 登录的简单实现
微信小程序 登录的简单实现
微信小程序 实现登录
最近一段时间，微信小程序在张小龙的8小时演讲下瞬间火了起来，但是呢没火多久，就迅速沉静下去了，我也是不知道张小龙什么想法，但是我想法挺多的，好了，废话说多了，聊一下正题吧，我呢是刚入行的小程序员，一路上采坑不断，别人遇不到的坑基本上踩了一遍，话说我的运气有时候也确实挺爆炸的，小程序一个小登录送给大家，
一、小程序开发前准备
目前在网上的教程已经不计其数了，给大家推荐一个网址： &这里面介绍比较详细，
二、小程序登录
我先开始的时候在登录就出问题了，因为当时官方给的文档就让人很纠结，因为官方给的文档让人感觉就凌乱了，在这里我解释一下，
官方给的流程：
第一步：获取用户授权信息（每次的授权信息都不一样）
第二部： 上代码
wx.request({
url : API_URL,//自己的服务接口地址
method : 'POST',
// 在这里需要格外注意了，所有的post请求header必须是下面的格式不然你又入坑了
header : {'content-type':'application/x-www-form-urlencoded'},
iv: res2.iv,
code: code,
encryptedData: res2.encryptedData
success: function (data)
// 4.解密成功后 获取自己服务器返回的结果
// 解密的sdk在开发文档上搜索-签名加密-然后你阅读后就知道了-下载属于自己语言的解码包
if(data.data.status == 1)
var userInfo_ = data.data.userI
console.log('解密失败')
fail:function()
console.log('系统错误')
他的意思是所有的操作在后台进行，这样相对安全一点，还有一点就是公众号需要的unionId可以通过解密获取到，那样的话就可以在公众号的页面看到你的小程序了，unionId是公众号和小程序的共用ID，如果你们的项目是需要关联的话那我还是建议你按照官方的走，如果不是的话，下面的方式可以迅速解决你的登录问题
自定义流程：
function Login(code,username,img)
var that = this
wx.request({
url:HTTP_URL,
appid : '你后台获取的appdi',
secret : '你后台获取的secret',
js_code : code,
grant_type : 'authorization_code'
method:'GET',
header:{'content-type': 'application/json'},
success: function (a)
var openid = a.data.openid
// 请求自己的服务器
wx.request({
url:API_URL,
openid : openid,
username : username,
success: function(b)
// 成功返回用户的唯一ID(这是数据库ID)
console.log(b.data.uid)
// 我这里是把用户返回的ID存到了缓存里因为，我在使用全局变
// 量时候发现有时候引入了js但是还会有丢失找不到的现象
wx.setStorageSync('uid', b.data.uid)
fail: function ()
// 在这里你要考虑到用户登录失败的情况
wx.showToast({
title: '网站正在维护中...',
icon: 'loading',
duration: 10000
// 自己服务器的地址
// 注意：开发时可以是http协议，但是如果上线必须申请https协议（也就是SSL协议）协议可以在阿里和腾讯的控制
// 台都可以购买，例子：阿里-管理控制台-安全（云盾）-证书服务，一般用dv免费的就可以了协议申请完后需要补全，
// 补全完毕后下载文件是个压缩包，里面有两个文件，把他们放到你服务器上，然后再配置文件中指明这是ssl协议并
// 且指明路径，这样 你就算配置成功了，至于如何配置，网上开源的教程挺多的，nginx有Apache也有如果你
var API_URL = "自己服务器的地址";
// 微信提供的接口地址：这里必须要把https://api.weixin.qq.com这个网址在微信后台安全域名中添加进去否则你会
// 感觉生活是如此的黑暗完全看不到希望
var HTTP_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=app_sectet&grant_type=authorization_code&js_code=code";
onLaunch: function ()
// 调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
getUserInfo: function (cb)
var that = this
if(this.globalData.userInfo)
typeof cb == "function" && cb(this.globalData.userInfo)
// 调用登录接口
wx.login({
// login流程
success: function (res)
//登录成功
if (res.code)
// 这里是用户的授权信息每次都不一样
var code = res.
wx.getUserInfo({
// getUserInfo流程
success: function (res2)
// console.log(res2)
that.globalData.userInfo = res2.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
var username = res2.userInfo.nickName
var img = res2.userInfo.avatarUrl
// 请求自己的服务器
Login(code,username,img);
wx.showModal({
title: '提示',
content: '获取用户登录态失败！'+res.errMsg
globalData:
userInfo:null
下面附两张图片是申请SSL协议的大概流程图
有些乱，大家将就一下。
还有就是注意一点，那就是代码的重用，毕竟小程序代码上传是有限制的不得大于1MB，有些代码其实可以节省的有些css代码或是js代码有些都是可以封装一下的开发工具提供了app.js和app.css有些你感觉每个页面都会用到的都可以放到里面，这样也就减少了一些麻烦，还有就是有些人查看手机时，发现只能查看静态的，这里提醒一定要打开调试模式，不然你就干着急吧。以上就是个人的一些经验分享，感谢观看。如果说对各位有帮助的话，希望点个赞。第一次写博客，感谢支持。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
欢迎转载：
推荐： 　　　你的位置： >
> 小程序丨调用登录接口成功后怎么存储用户信息到本地（注：是自己的登录接口非微信登录接口） . …
success: function(res) {
& & & & if (res.data.success == 'true') {
& & & & & & //进行一些用户状态的存储
& & & & & & that.setData( {&
& & & & & & & & userInfo:res.data.obj
& & & & & & })
& & & & }&
上面是我在请求成功的回调函数里写的代码（success=='true'在后台返回的数据表示接口调用成功，obj为后台返回数据中的用户信息的一个对象），我这样写估计没有存储成功，怎么查看存储用户信息到本地是否成功呢
网友回复：
wx.setStorage({
&key:&key&,
&data:&value&})
https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxsetstorageobject
学着看开发文档
wx.setStorage({
&key:&key&,
&data:&value&})
我这样试过了 好像也没用 是要存储用户登录的用户名和密码到本地还是接口返回的用户信息到本地了？谢谢
林***：系统记录
爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。
转载请注明： &
与本文相关的文章
你的反馈已经收到您还可以使用以下方式登录
当前位置：&>&&>&&>& > 微信小程序 后台登录（非微信账号）实例详解
微信小程序 后台登录（非微信账号）实例详解
微信小程序 后台登录
实现效果图：
最近写了一个工具类的小程序，按需求要求不要微信提供的微信账号登录，需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录，很少有调用自己后台来登录的，所以写的时候各种坑，现在把趟好坑的代码共享给大家吧！（PS：如有不妥之处，共勉之。）
废话不说，直接上代码
找到app.js在里面写如下代码
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
globalData: {
adminUserViewId: "",
token: "",
userInfo: null,
BaseURL:"http://airb.cakeboss.com.cn"
// BaseURL:"http://192.168.0.107:8080"
敲黑板划重点：上图中的代码片段重要的地方就是：“globalData中的 adminUserViewId: "",token: "" ”
这两个参数是前端需要存储的后台参数，用来标记用户的登录状态的。
然后建一个login文件夹，在login.wxml中写如下代码
&import src="../../components/toast.wxml" /&
&!-- is="toast" 匹配组件中的toast提示 如果用dialog的话这就是dialog --&
&template is="toast" data="{{ ...$wux.toast }}" /&
&view class="login_container"&
&view class="login_view"&
&text class="login_lable"&账号：&/text&
&input class="login_text" placeholder="请输入登录账号" bindinput="listenerUsernameInput"/&
&view class="login_view"&
&text class="login_lable"&密码：&/text&
&input class="login_text" placeholder="请输入密码" password="true" bindinput="listenerPasswordInput"/&
&button class="login_button" bindtap="loginAction"&登录&/button&
然后建一个login文件夹，在login.wxss中写如下代码
.login_container {
margin-top: 30
.login_view {
width: calc(100% - 40px);
padding: 0 20
line-height: 45
height: 45
margin-bottom: 20
.login_text {
height: 45
line-height: 45
font-size: 12
border: 1px solid rgb(241, 242, 243);
padding: 0 12
width: calc(100% - 70px);
border-radius: 4
.login_lable {
font-size: 12
.login_button {
width: 150
background:
在login.js中写如下代码
//login.js
//获取应用实例
var app = getApp()
var util = require('../../utils/util.js');
motto: 'Hello World',
username: "",
password: ""
onLoad(options) {
// 初始化提示框
this.$wuxToast = app.wux(this).$wuxToast
/** 监听帐号输入 */
listenerUsernameInput: function (e) {
this.data.username = e.detail.
/** 监听密码输入 */
listenerPasswordInput: function (e) {
this.data.password = e.detail.
// 登录按钮点击事件
loginAction: function () {
var userName = this.data.
var passwords = this.data.
var that =
if (userName === "") {
that.$wuxToast.show({
type: 'text',
timer: 1000,
color: '#fff',
text: "用户名不能为空！",
success: () =& console.log('用户名不能为空！')
} if (passwords === "") {
that.$wuxToast.show({
type: 'text',
timer: 1000,
color: '#fff',
text: "密码不能为空！",
success: () =& console.log('密码不能为空！')
//加载提示框
util.showLoading("登录中...");
var urlStr = app.globalData.BaseURL + '/api/adminUser/login';
wx.request({
method: "POST",
url: urlStr, //仅为示例，并非真实的接口地址
data: util.json2Form({
username: userName,
password: passwords
"Content-Type": "application/x-www-form-urlencoded"
success: function (res) {
util.hideToast();
console.log(res.data);
var code = res.data.
if (code === 200) {
// 后台传递过来的值
var adminUserViewId = res.data.data.adminUserViewId;
var token = res.data.data.
// 设置全局变量的值
app.globalData.adminUserViewId = res.data.data.adminUserViewId;
app.globalData.token = res.data.data.
// 将token存储到本地
wx.setStorageSync('adminUserViewId', adminUserViewId);
wx.setStorageSync('token', token);
console.log("登录成功的adminUserViewId：" + adminUserViewId);
console.log("登录成功的token：" + token);
// 切换到首页
wx.switchTab({
url: '/pages/index/index'
that.$wuxToast.show({
type: 'text',
timer: 1000,
color: '#fff',
text: res.data.msg,
success: () =& console.log('登录失败，请稍后重试。' + res.data.msg)
fail: function () {
util.hideToast();
console.log("登录失败");
that.$wuxToast.show({
type: 'text',
timer: 1000,
color: '#fff',
text: '服务器君好累😫，请稍后重试',
success: () =& console.log('登录失败，请稍后重试。')
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
欢迎转载：
相关推荐：今天做好了一个小程序，很开心，与大家分享我的快乐
[问题点数：50分，结帖人yeqingguo]
今天做好了一个小程序，很开心，与大家分享我的快乐
[问题点数：50分，结帖人yeqingguo]
只显示楼主
取消只显示楼主
匿名用户不能发表回复！|