新建微信小程序官方默认初始代码

admin

app.js

1. // app.js
   
2. App({
   
3.   onLaunch() {
   
4.     // 展示本地存储能力
   
5.     const logs = wx.getStorageSync('logs') || []
   
6.     logs.unshift(Date.now())
   
7.     wx.setStorageSync('logs', logs)
   
8. 
   
9.     // 登录
   
10.     wx.login({
    
11.       success: res => {
    
12.         // 发送 res.code 到后台换取 openId, sessionKey, unionId
    
13.       }
    
14.     })
    
15.   },
    
16.   globalData: {
    
17.     userInfo: null
    
18.   }
    
19. })
    

复制代码

index.wxml

1. <!--index.wxml-->
   
2. <view class="container">
   
3.   <view class="userinfo">
   
4.     <block wx:if="{{canIUseOpenData}}">
   
5.       <view class="userinfo-avatar" bindtap="bindViewTap">
   
6.         <open-data type="userAvatarUrl"></open-data>
   
7.       </view>
   
8.       <open-data type="userNickName"></open-data>
   
9.     </block>
   
10.     <block wx:elif="{{!hasUserInfo}}">
    
11.       <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
    
12.       <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    
13.       <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    
14.     </block>
    
15.     <block wx:else>
    
16.       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    
17.       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    
18.     </block>
    
19.   </view>
    
20.   <view class="usermotto">
    
21.     <text class="user-motto">{{motto}}</text>
    
22.   </view>
    
23. </view>
    

复制代码

index.js

1. // index.js
   
2. // 获取应用实例
   
3. const app = getApp()
   
4. 
   
5. Page({
   
6.   data: {
   
7.     motto: 'Hello World',
   
8.     userInfo: {},
   
9.     hasUserInfo: false,
   
10.     canIUse: wx.canIUse('button.open-type.getUserInfo'),
    
11.     canIUseGetUserProfile: false,
    
12.     canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
    
13.   },
    
14.   // 事件处理函数
    
15.   bindViewTap() {
    
16.     wx.navigateTo({
    
17.       url: '../logs/logs'
    
18.     })
    
19.   },
    
20.   onLoad() {
    
21.     if (wx.getUserProfile) {
    
22.       this.setData({
    
23.         canIUseGetUserProfile: true
    
24.       })
    
25.     }
    
26.   },
    
27.   getUserProfile(e) {
    
28.     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    
29.     wx.getUserProfile({
    
30.       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    
31.       success: (res) => {
    
32.         console.log(res)
    
33.         this.setData({
    
34.           userInfo: res.userInfo,
    
35.           hasUserInfo: true
    
36.         })
    
37.       }
    
38.     })
    
39.   },
    
40.   getUserInfo(e) {
    
41.     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    
42.     console.log(e)
    
43.     this.setData({
    
44.       userInfo: e.detail.userInfo,
    
45.       hasUserInfo: true
    
46.     })
    
47.   }
    
48. })
    

复制代码

index.wxss

1. /**index.wxss**/
   
2. .userinfo {
   
3.   display: flex;
   
4.   flex-direction: column;
   
5.   align-items: center;
   
6.   color: #aaa;
   
7. }
   
8. 
   
9. .userinfo-avatar {
   
10.   overflow: hidden;
    
11.   width: 128rpx;
    
12.   height: 128rpx;
    
13.   margin: 20rpx;
    
14.   border-radius: 50%;
    
15. }
    
16. 
    
17. .usermotto {
    
18.   margin-top: 200px;
    
19. }

复制代码