基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（3）微信用户登录

微信小程序里的商品也能通过微信支付购买 #生活知识# #生活小知识# #电子支付#

效果图

wxml代码

<form bindsubmit="formSubmit" bindreset="formReset"> <view class='denlgu'> <text class='shuoming'>请输入您的会员账号</text> <view class="form-wrap"> <view class="flex-wrap input-wrap"> <text class="label">账号</text> <input value="" id="username" class="account-info-input" name="uname" /> </view> <view class="flex-wrap input-wrap"> <text class="label">密码</text> <input password id="password" class="account-info-input" name="upwd" /> </view> </view> <text class='shuoming'>{{xinxi}}</text> <button class='mysubmit' type='primary' form-type="submit">登陆</button> <button class='mysubmit' type='primary' bindtap='toReg'>注册新用户</button> <button open-type='getUserInfo' bindgetuserinfo='getWxInfo' class='wx' lang="zh_CN" >微信登陆</button> </view> </form> <view>【登陆状态】：{{str_u_login}}</view> <view>【分类id】：{{str_u_flid}}</view> <view>【用户id】：{{str_u_id}} | 用户名：{{str_u_name}}</view> <navigator url='/pages/huiyuan/index2' wx:if="{{lianjie_xianshi}}"> 【跳转到会员中心，代码中开启自动跳转】 </navigator>

123456789101112131415161718192021222324252627282930313233

wxss代码

page { background-color: #f2f2f2; } .denlgu { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 4px 12px; } .shuoming { display: block; margin: 8px 0; color: gray; font-size: 14px; } .form-wrap { border-top: 1px solid #eee; margin: 10px 0; } .flex-wrap { display: flex; flex-direction: row; } .input-wrap { background: #fff; border-bottom: 1px solid #eee; margin: 0 -12px; padding: 0 12px; height: 46px; line-height: 46px; } .label { color: #999; width: 4.5em; } .account-info-input { font-size: 18px; line-height: 100%; height: 100%; width: 100%; } .mysubmit { width: 100%; margin-bottom: 5px; } .myerr { color: red; } .wx { width: 100%; background-color: red; color: white; }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

js代码

//获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { str_u_login:"", str_u_id:"", str_u_flid:"", str_u_name:"", lianjie_xianshi:false, //是否显示跳转到用户中心的链接 xinxi:"请准确填写账号信息，有问题联系客服" }, toReg:function(){ wx.navigateTo({ url: '/pages/huiyuan/zhanghao/reg', }) }, //普通登录 formSubmit:function(e){ var that = this if (e.detail.value.uname == "" || e.detail.value.upwd ==""){ that.setData({ xinxi:"☒请填写用户名和密码！" }) }else{ //发起登录请求 console.log("用户名：" + e.detail.value.uname + " | 密码：" + e.detail.value.upwd) wx.request({ //url: app.myapp.asp + '/wx_check_login_yonghu.asp', //asp版本 url: app.myapp.php + '/wx_check_login_yonghu.php', //php版本 //url: app.myapp.jsp + '/wx_check_login_yonghu.jsp', //jsp版本 data:{ yhm: e.detail.value.uname, mm: e.detail.value.upwd }, success:function(res){ console.log("登录返回值：" + res.data + "|zt=" + res.data.zt) if(res.data.zt=="yes"){ console.log("✔登录成功") that.setData({ xinxi: "✔登录成功" }) //返回信息写入缓存 wx.setStorage({ key: 'u_login', data: 'yes', success: function () { console.log("写入缓存成功") } }) wx.setStorage({ key: 'u_flid', data: res.data.fl_id }) wx.setStorage({ key: 'u_name', data: res.data.shouji }) wx.setStorage({ key: 'u_id', data: res.data.uid, success:function(){ wx.reLaunch({ url: '/pages/huiyuan/index', }) } }) }else{ console.log(res.data.xinxi) that.setData({ xinxi: "☒" + res.data.xinxi }) } } }) } }, //微信登陆 getWxInfo:function(){ var myid=""; var mynicheng=""; var mytouxiang="" wx.getUserInfo({ success:function(res){ //console.log(res.userInfo) //console.log("头像：" + res.userInfo.avatarUrl) //console.log("昵称：" + res.userInfo.nickName) //console.log("性别：" + res.userInfo.gender) mynicheng = res.userInfo.nickName; mytouxiang = res.userInfo.avatarUrl } }) wx.login({ success(res) { //console.log("res.code："+res.code) wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data: { appid: 'wxc5e0e9e50f9476d3', secret: '78f4e88fac60687856a08c18727c065a', js_code: res.code, grant_type: 'authorization_code' }, method:"GET", success:function(res){ //获取用户的openid //console.log(res.data) //console.log("用户的openid：" + res.data.openid) myid = res.data.openid wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_check_reg_yonghu-weixin.asp', //url: app.myapp.asp + '/wx_check_reg_yonghu-weixin.asp', //asp版 url: app.myapp.php + '/wx_check_reg_yonghu-weixin.php', //php版 //url: app.myapp.jsp + '/wx_check_reg_yonghu-weixin.jsp', //jsp版 data: { wx_openid: myid, wx_nicheng: mynicheng, wx_touxiang: mytouxiang }, success: function (res2) { console.log(res2.data) //返回信息写入缓存 wx.setStorage({ key: 'u_login', data: 'yes', success: function () { console.log("写入缓存成功") } }) wx.setStorage({ key: 'u_flid', data: res2.data.fl_id, }) wx.setStorage({ key: 'u_name', data: "微信用户", }) wx.setStorage({ key: 'u_id', data: res2.data.uid, success:function(){ wx.reLaunch({ url: '/pages/huiyuan/index', }) } }) } }) } }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; //判断如果用户已经注册了，直接跳转到用户中心 wx.getStorage({ key: 'u_login', success: function (res) { that.setData({ str_u_login: res.data, lianjie_xianshi:true }) wx.getStorage({ key: 'u_id', success: function (res) { that.setData({ str_u_id: res.data }) }, }) wx.getStorage({ key: 'u_flid', success: function (res) { that.setData({ str_u_flid: res.data }) }, }) wx.getStorage({ key: 'u_name', success: function (res) { that.setData({ str_u_name: res.data }) }, }) if(res.data=="yes" && 1>2){ //下面代码跳转到用户中心 wx.navigateTo({ url: '/pages/huiyuan/index2', }) } }, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var that=this wx.getStorage({ key: 'u_login', success: function (res) { wx.getStorage({ key: 'u_id', success: function (res) { that.setData({ str_u_id: res.data }) }, }) wx.getStorage({ key: 'u_flid', success: function (res) { that.setData({ str_u_flid: res.data }) }, }) wx.getStorage({ key: 'u_name', success: function (res) { that.setData({ str_u_name: res.data }) }, }) that.setData({ str_u_login: res.data, lianjie_xianshi: true }) if (res.data == "yes" && 1>2) { //下面代码跳转到用户中心 wx.navigateTo({ url: '/pages/huiyuan/index2', }) } }, }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295

网址：基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（3）微信用户登录 https://www.yuejiaxmz.com/news/view/351623

相关内容

基于微信小程序对商城购物系统设计与实现 毕业设计开题报告
基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（7）购物车下单、留言
微信小程序下的同城二手物品租赁平台 php Nodejs java python
【毕业设计】Java基于微信小程序的同城二手物品租赁系统
基于微信小程序的商城购物系统选题的意义和目的
基于微信小程序的购物商城的设计与实现(论文+源码)
【计算机毕业设计】基于微信小程序的校园生活服务平台
【毕业设计】基于微信小程序的校园二手书籍拍卖系统小程序
基于uniapp微信小程序的校园二手书交易系统
【计算机开题报告】基于微信小程序的校园二手交易平台

随便看看