项目：IT资源共享资源（登录前端）<1>

公众号技术标签 小程序 PHP 源码 项目

IT资源共享项目 这是前年自己收集了一些网络开发资源，上传到百度网盘，提供积分兑换。上线后用户在两个月内达到3427人，其中用java，PHP，前端，Python，小程序等等资源。现在用这个项目的开发过程和大家分享。但图文更新根据我工作时间安排，不忙的话尽量更新快一点，希望大家留言指点。

• 小程序界面设计用原生组件进行开发（WXML+WXSS）

• 因为是项目分享，所以服务用本地的服务器进行搭建，用WAMP，集成环境使用phpstudy，后台框架使用thinkphp5.0

本章节实现内容 设计授权登录界面，登录前后端的更能。

index.wxml

<!-- 授权页面 --><view wx:if="{{isHide}}" class='auth'>    <view wx:if="{{canIUse}}" ><view class='nuan'>资</view><view class='xiang'>料</view><form bindsubmit="asd" report-submit='true' ><button class='bottom' form-type="submit" type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">            授权登录</button></form></view><view wx:else>请升级微信版本</view></view><!-- 首页 --><view wx:else class='index'><!-- 底部 --><view class='foot'>Copyright by ©Lite Code</view></view>

index.wxss

page{background: #F2F2F2;}/* 授权登录 */.auth{position: absolute;width: 100%;height: 100%;background:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552979547051&di=c75cad88dce899735da75f173de43094&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F11%2F29%2F84599159c0a3765.jpg%2521%2Ffwfh%2F804x1429%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue');background-size: 100% 100%;}.nuan{width: 200rpx;height: 200rpx;line-height: 200rpx;margin-top: 200rpx;margin-left: 60%;font-size: 2.8em;text-align: center;color: #E4F6FF;background: rgba(232, 232, 232, 0.3);border-radius: 50%;}.xiang{width: 200rpx;height: 200rpx;line-height: 200rpx;margin-top: 150rpx;margin-left: 10%;color: #E4F6FF;font-size: 2.8em;text-align: center;background: rgba(232, 232, 232, 0.3);border-radius: 50%;}.bottom{top: 200rpx;border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;}/* 首页 *//* 底部 */.foot{width: 100%;height: 120rpx;float: left;font-size: 26rpx;color: #fa8582;text-align: center;line-height: 120rpx;}

index.js

//index.js//获取应用实例const app = getApp()Page({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。canIUse: wx.canIUse('button.open-type.getUserInfo'),isHide: false,},/**   * 生命周期函数--监听页面加载   */onLoad: function (options) {var that = this;wx.getSetting({success: function (res) {if (res.authSetting['scope.userInfo']) {wx.showTabBar();} else {wx.hideTabBar();that.setData({isHide: true});}}});},// 授权登录bindGetUserInfo: function (e) {if (e.detail.userInfo) {//用户按了允许授权按钮var that = this;// 获取到用户的信息了，打印到控制台上看下console.log("用户的信息如下：");let nickname = e.detail.userInfo.nickName;let image = e.detail.userInfo.avatarUrl;let sex = e.detail.userInfo.gender;wx.login({success: res => {console.log("用户的code:" + res.code);wx.request({url: app.globalData.app_url + 'Common/getOpenid?code=' + res.code,success: res => {console.log(res);wx.showLoading({title: '登录中...',})wx.showTabBar({})//设置全局变量openidapp.globalData.openid = JSON.parse(res.data.data).openid;wx.request({url: app.globalData.app_url + 'user/insert_user',data: {openid: JSON.parse(res.data.data).openid,nickname: nickname,image: image,sex: sex},method: 'POST',dataType: 'json',responseType: 'text',success: function (res) {console.log(res.data);if (res.data.code == 200) {that.setData({isHide: false});wx.hideLoading();} else {wx.showToast({title: '登录失败',icon: 'none'})that.setData({isHide: true});}}})}});}});//授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来} else {//用户按了拒绝按钮wx.showModal({title: '警告',content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',showCancel: false,confirmText: '返回授权',success: function (res) {// 用户没有授权成功，不需要改变 isHide 的值if (res.confirm) {console.log('用户点击了“返回授权”');}}});}},})

app.json

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "资料共享工具","navigationBarTextStyle": "black","navigationStyle": "custom"},"sitemapLocation": "sitemap.json"}

app.js

//app.jsApp({onLaunch: function () {var that = this;that.globalData.app_url = 'http://localhost/ziliao/public/index.php/api/';wx.login({success: res => {wx.request({url: that.globalData.app_url + 'Common/getOpenid?code=' + res.code,success: res => {//设置全局变量openidthat.globalData.openid = JSON.parse(res.data.data).openid;wx.setStorageSync('openid', JSON.parse(res.data.data).openid)}})}})},globalData: {userInfo: null,openid: '',api_url: ''},})

image

新建小程序项目的时候自动生成的目录文件，将原先的代码删掉，使用这个复制进去即可运行。

• 如果推送的文章中，大家认可的，别忘了转发分享;

• 为了大家更好的长久查看源码及讲解，阅读后可以收藏

• 长按下图二维码，与小编携手编程之美

image