一、登录页面的编写

1、效果图

2、直接上代码

app.json

 {
   "pages":[
     "pages/index/index",
     "pages/logs/logs",
     "pages/home/home",
     "pages/home/advise/advise",
     "pages/home/admin/admin",
     "pages/home/cooperation/cooperation"
   ],
   "window":{
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "Weixin",
     "navigationBarTextStyle":"black",
     "enablePullDownRefresh": true,
     "backgroundColor": "#e3e3e3"
   },
   "sitemapLocation": "sitemap.json",
   "usingComponents": {
     "van-button": "@vant/weapp/button/index",
     "van-grid": "@vant/weapp/grid/index",
     "van-grid-item": "@vant/weapp/grid-item/index",
     "van-tab": "@vant/weapp/tab/index",
     "van-tabs": "@vant/weapp/tabs/index",
     "van-row": "@vant/weapp/row/index",
     "van-col": "@vant/weapp/col/index",
     "van-notice-bar": "@vant/weapp/notice-bar/index",
     "van-card": "@vant/weapp/card/index",
     "van-icon": "@vant/weapp/icon/index",
     "van-cell": "@vant/weapp/cell/index",
     "van-cell-group": "@vant/weapp/cell-group/index",
     "van-image": "@vant/weapp/image/index",
     "van-panel": "@vant/weapp/panel/index",
     "van-uploader": "@vant/weapp/uploader/index",
     "van-field": "@vant/weapp/field/index",
     "van-goods-action": "@vant/weapp/goods-action/index",
     "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
     "van-goods-action-button": "@vant/weapp/goods-action-button/index",
     "van-divider": "@vant/weapp/divider/index",
     "van-checkbox": "@vant/weapp/checkbox/index",
     "van-checkbox-group": "@vant/weapp/checkbox-group/index",
     "van-popup": "@vant/weapp/popup/index",
     "van-count-down": "@vant/weapp/count-down/index",
     "van-radio": "@vant/weapp/radio/index",
     "van-radio-group": "@vant/weapp/radio-group/index",
     "van-toast": "@vant/weapp/toast/index",
     "van-action-sheet": "@vant/weapp/action-sheet/index",
     "van-swipe-cell": "@vant/weapp/swipe-cell/index",
     "van-dialog": "@vant/weapp/dialog/index"
   },
   "tabBar": {
     "color": "#a9b7b7",
     "selectedColor": "#11cd6e",
     "borderStyle": "black",
     "list":[
       {
         "pagePath": "pages/index/index",
         "text": "首页",
         "iconPath": "/image/jf.png",
         "selectedIconPath": "/image/jf1.png"
       },
       {
         "pagePath": "pages/logs/logs",
         "text": "任务",
         "iconPath": "/image/ly.png",
         "selectedIconPath": "/image/ly1.png"
       },
       {
         "pagePath": "pages/home/home",
         "text": "我的",
         "iconPath": "/image/wd.png",
         "selectedIconPath": "/image/wd1.png"
       }
     ]
   }
 }

代码100分

app.js

代码100分 // app.js
 App({
   onLaunch() {
     // 云开发环境初始化
     wx.cloud.init({
       env: '' // 这里写自己的云开发环境id
     })
     
     // 展示本地存储能力
     const logs = wx.getStorageSync('logs') || []
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)
 
     // 登录
     wx.login({
       success: res => {
         // 发送 res.code 到后台换取 openId, sessionKey, unionId
       }
     })
   },
   globalData: {
     userInfo: null
   }
 })
 

怎么拿到自己的云开发id呢 ？？

home.wxml

 <view class="mainContent">
   <!-- 头部 -->
   <view class="headerMain">
     <image src='https://img2.baidu.com/it/u=3672050238,1505954096&fm=26&fmt=auto'  mode='aspectFill' style="width:100%;"></image>
     <view class="nameOpc">
       <view class="" wx:if="{{isLogin}}">
         <van-image
           class="userImg"
           round
           width="60px"
           height="60px"
           src="{{userInfo.avatarUrl}}"
         />
         <!-- <text class="usernameGL">{{ userInfo.nickName }}</text>    -->
         <text class="usernameGL">中阅工作室</text>
       </view>
       <view  class="login" bindtap="login" wx:else>登录</view>
     </view>
     <view class="autograph">
       <van-notice-bar
         color="#1989fa"
         background="rgba(0,0,0,.2)"
         left-icon="volume-o"
         text="技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂。"
       />
     </view>
   </view>
   
   <!-- 系统通知 -->
   <view class="system">
     <van-cell-group>
       <van-cell title="系统" title-style="padding:0 7px;font-size:14px;" />
       <van-cell icon="envelop-o" 
       title-style="font-size:16px;padding:5px 20px;" 
       title="系统通知" 
       bindtap="systemClick"
       border="{{ false }}" />
     </van-cell-group>
   </view>
   <!-- 主体 -->
   <view class="bodyMain">
     <van-cell title="操作" title-style="padding:0 7px;font-size:14px;" />
       <!-- wx:if="{{adminBd}}" -->
     <van-cell
       title-style="font-size:16px;padding:5px 20px;" 
       icon="comment-o"
       title="管理"
       bindtap="messageClick"
     />
     <van-cell
       title-style="font-size:16px;padding:5px 20px;" 
       icon="newspaper-o"
       title="复制openid"
       bindtap="copyOpenid"
     />
     <van-cell
       title-style="font-size:16px;padding:5px 20px;" 
       icon="user-o"
       title="商务合作"
       bindtap="cooperationClick"
       border="{{ false }}"
     />
   </view>
   <!-- 退出 -->
   <button style="margin-top:20px" bindtap="loginOut"> 退出登录</button>
   <!-- 版权 -->
   <view class="copyright">©东山 版权所有</view>
 </view>

home.wxss

代码100分 /* 头部 */
 .mainContent{
   background-color:#ebebeb;
 }
 .headerMain {
   position: relative;
 }
 .nameOpc {
   min-width: 41%;
   max-width: 100%;
   position: absolute;
   top: 49%;
   left: 50%;
   transform: translate(-50%,-50%);
   height: 69px;
   line-height: 70px;
   border-radius: 8px;
   background-color: rgba(0,0,0,.2);
   padding-left: 2rpx;
   padding-right: 28rpx;
   padding-top: 28rpx;
 }
 .userImg {
   position: absolute;
 }
 .usernameGL {
   color: #fff;
   font-size: 22px;
   white-space: nowrap;
   margin-left: 180rpx;
   position: relative;
   top: -9rpx;
 }
 .login {
   text-align: center;
   color: #fff;
   font-size: 25px;
   line-height: 57px;
   margin-left: 19rpx;
 }
 .van-image.van-image--round {
   text-align: center;
   margin-left: 8px;
 }
 .autograph {
   width: 100%;
   height: 45px;
   line-height: 45px;
   position: absolute;
   z-index: 13;
   bottom: 5px;
   background-color: rgba(0,0,0,.5);
   color: #fff;
   text-align: center;
   box-sizing: border-box;
 }
 .van-notice-bar {
   height: 100% !important;
 }
 /* 系统 */
 .system {
   margin-top: -7rpx;
   margin-bottom: 8px;
 }
 /* 主体 */
 
 /* 版权 */
 .copyright {
   text-align: center;
   margin-top: 20px;
   padding-bottom: 20px;
   color: #ccc;
   font-size: 14px;
 }
 .van-cell__left-icon-wrap {
   font-size: 16px;
   margin-top: 5px;
   margin-left: 8px;
 }
 

home.js

 Page({
   data: {
     userInfo: '',
     isLogin: false, // 判断是否登录的标的
     openid: '',
     whetherEstablish: true,
     jifen: 0,             // 我的积分
     id: '', 
     haveOrNoStoreBd: false,  // 用户是否有店标的
     adminBd: false,  // 管理 是否显示标的
   },
   login(){ // 授权登录
     wx.getUserProfile({
       desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
       success: (res) => {
         this.getOpenid();
         wx.setStorageSync('user', res.userInfo) // 缓存 持久化用户信息
         this.setData({
           userInfo: res.userInfo,
           isLogin: true
         })
       },
       fail:(err) => {
         console.log('授权失败');
       }
     })
   }, 
   systemClick(){ // 点击系统通知
     if(this.data.isLogin) {
       wx.navigateTo({
         url:'./advise/advise',
       })
     } else {
       this.login()
     }
   },
   messageClick(){ // 点击管理
     if(this.data.isLogin) {
       wx.navigateTo({
         url:'./admin/admin',
       })
     } else {
       this.login()
     }
   },
   copyOpenid(){  // 复制_openid
     wx.setClipboardData({
       data: this.data.openid,  
       success: res =>  {}
     })    
   },
   cooperationClick(){ // 点击商务合作
     if(this.data.isLogin) {
       wx.navigateTo({
         url:'./cooperation/cooperation',
       })
     } else {
       this.login()
     }
   },
   loginOut(){ // 退出登录
     this.setData({
       userInfo: '',
       openid: ''
     })
     wx.setStorageSync('user', null) 
     wx.setStorageSync('openid', null) 
     this.setData({
       isLogin: false,
       adminBd: false
     })
   },
   onLoad: function (options) {
     this.unit()
   },
   unit(){ // 每次进入小程序触发
     var user = wx.getStorageSync('user')
     var openid = wx.getStorageSync('openid')
     if (user !== null) {
       // 登录时的刷新
       this.setData({
         userInfo: user,
         isLogin: true,
         openid: openid
       })
     } else {
       // 退出后的刷新
       this.setData({
         userInfo: user,
         isLogin: false,
         openid: openid
       })
     }
   },
   onPullDownRefresh: function () {// 下拉刷新
     var page = getCurrentPages().pop();  // 得到这个页面对象
     page.onLoad();                       // 调用页面的onLoad()方法进行刷新页面
     wx.stopPullDownRefresh()             // 刷新成功后停止下拉刷新
   },  
   getOpenid() { // 获取用户openid
     wx.cloud.callFunction({
       name: 'login',
       complete: res => {
         wx.setStorageSync('openid', res.result.openid) // 缓存用户openid
         this.setData({
           openid: res.result.openid
         })
       }
     })
   },
 })

本节课视频：04复制粘贴写小程序之登录页面编写