項目：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

新建小程序項目的時候自動生成的目錄文件，將原先的代碼刪掉，使用這個複製進去便可運行。

• 若是推送的文章中，你們承認的，別忘了轉發分享;

• 爲了你們更好的長久查看源碼及講解，閱讀後能夠收藏

• 長按下圖二維碼，與小編攜手編程之美