公眾號技術標籤 小程式 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
新建小程式專案的時候自動生成的目錄檔案，將原先的程式碼刪掉，使用這個複製進去即可執行。
-
如果推送的文章中，大家認可的，別忘了轉發分享;
-
為了大家更好的長久檢視原始碼及講解，閱讀後可以收藏
-
長按下圖二維碼，與小編攜手程式設計之美
