公众号技术标签 小程序 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

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

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

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

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

转载于:https://www.cnblogs.com/fengyongxian/p/10834872.html

项目:IT资源共享资源(登录前端)1相关推荐

  1. win10 nginx部署前端项目(静态资源服务器和HTML)

    win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...

  2. 将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题

    将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题 需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目 第一步:将Vue项目打包,然后将生成的dist文 ...

  3. 基于Vue的校园资源管理系统(前端代码)

    基于Vue的校园资源管理系统(前端代码) 作者:Jackshijin 项目背景 这是本人在毕业的时候选择的毕业设计方向,指导老师团队的课题有小程序.安卓开发.机器学习和嵌入式,而我选择了Web...因 ...

  4. 探花交友_第1章_项目介绍以及实现登录功能_第2节_项目介绍

    探花交友_第1章_项目介绍以及实现登录功能_第2节_项目介绍 文章目录 探花交友_第1章_项目介绍以及实现登录功能_第2节_项目介绍 2.项目介绍 2.1.项目背景 2.2.市场分析 2.3.目标用户 ...

  5. 前端项目结构构建_如何通过构建项目成为更好的前端开发人员(包括想法)

    前端项目结构构建 If you want to fast-track your growth as a front-end developer, nothing beats doing real de ...

  6. SpringBoot项目中静态资源加载失败,那可能是自定义配置类继承了WebMvcConfigurationSupport这个类

    1.跟着视频课学SpringBoot,自己的一个html登录页面就是在浏览器中渲染不出来效果,很郁闷.我的项目结构如下: 2.想要打开login.html页面,该页面用到了静态资源中的css文件及sv ...

  7. idea 启动界面导入项目_如何为您的项目启动有效的登录页面

    idea 启动界面导入项目 by Christian-Peter Heimbach 通过克里斯蒂安·彼得·海姆巴赫 如何为您的项目启动有效的登录页面 (How to launch an effecti ...

  8. html资源文件放在哪里,09 Spring Boot开发web项目之静态资源放哪里?

    Spring Boot开发web项目之静态资源放哪里? 先了解自动装配autoconfiguration 这些内容是spring boot天然集成好的框架 找到WebMvcAutoConfigrati ...

  9. 创业项目转化落地资源帮助,“汇新杯”大赛助你圆梦

    创业项目转化落地资源帮助,"汇新杯"大赛助你圆梦 一个解决户外充电问题的创业项目,团队成员来自知名高校,有着专业的技术背景,研发新材料用以太阳能充电,目前是对公司和对个人业务同时展 ...

最新文章

  1. alertdialog.builder 自定义弹窗
  2. js innerHTML 改变div内容的方法
  3. SAP最佳业务实践:重复制造(149)-4发料
  4. VIM配置ActionScript
  5. 5.深度学习练习:Deep Neural Network for Image Classification: Application
  6. JAVA——附加作业1——统计员工数
  7. 【tfcoreml】tensorflow向CoreML模型的转换工具封装
  8. 词形变换和词干提取工具(英文)
  9. Java类与类,类与接口,接口与接口关系
  10. ajax简单做html查询删除(鲜花)
  11. html网页设计需求分析,网页设计需求分析方法
  12. 【翻译】PHP中 文字编码变换时 使用SJIS-win而非SJIS,使用eucJP-win而非EUC-JP
  13. Windows域控统一设置客户端桌面壁纸【全域策略生效】
  14. NSSM - 将任何exe应用封装成windows服务的神器
  15. 动态规划之矩阵连乘问题详细解读(思路解读+填表+代码)
  16. 华为hicar支持车型列表_汽车大观| 华为的“汽车梦”
  17. 最新借条模板,如何写
  18. 前端和后端哪个工资高?
  19. java输出华氏摄氏温度转换表_输出华氏-摄氏温度转换表
  20. 背下这148句话,你可以提高一个档次了,不止在文学方面

热门文章

  1. 基于上下文的访问控制——CBAC的配置
  2. Java RESTful Web Service实战
  3. 【Python】《大话设计模式》Python版代码实现
  4. C++回顾day01---C++对C的增强
  5. 使用Python开发的POC多线程批量执行小框架
  6. Myeclipse使用过程配置汇总
  7. Python基础-模块
  8. 【启发式搜索】[ZOJ1217]Eight
  9. 20年来最不靠谱的五大互联网预言
  10. [Codeforces Round #162 (Div. 2)]A. Colorful Stones (Simplified Edition)