專案:IT資源共享資源(登入前端)<1>

雞鳴星發表於2019-05-08

公眾號技術標籤 小程式 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

新建小程式專案的時候自動生成的目錄檔案,將原先的程式碼刪掉,使用這個複製進去即可執行。

  • 如果推送的文章中,大家認可的,別忘了轉發分享;

  • 為了大家更好的長久檢視原始碼及講解,閱讀後可以收藏

  • 長按下圖二維碼,與小編攜手程式設計之美

image
 

相關文章