微信小程序开发(第一天)-注册新建项目以及登录页面获取用户信息

介绍微信小程序注册开发及新项目首页开发的过程。

1. 小程序注册
   此处借鉴了一位博主的教程，链接微信小程序开发（超详细保姆式教程）。
   在微信公众平台注册用户，选择账号类型为“小程序”，接下来一步一步注册就行。
2. 下载微信web开发者工具，我下载的是稳定版。安装即可。
3. 新建项目
   在小程序开发管理-开发设置里获取小程序ID，新建项目时用到。
   

“后端服务”选择“不使用云服务”，“模板选择”选择“不使用模板”
4. 首页

• components 插件列表

• images 自己新建的，新建的项目没有此文件夹，我存放的是用到的图片文件

• app.js 全局业务逻辑

• app.json 全局配置

• pages 项目内页面文件，里面有index文件夹是新建后存在的
  

• index.js 页面业务逻辑 js代码

• index.json 页面配置

• index.wxml 页面内容模式 html代码

• index.wxss 页面样式 css代码

5. 登录页面（粗糙版）
   此处借鉴一位博主，微信小程序开发之获取用户信息
   
   index.wxml内代码

<navigation-bar title="医废平台" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <banner style="margin: 100rpx; text-align:center">
  <view><image mode="aspectFill" src="{{userinfo.avatarUrl}}" style="width: 150rpx; height: 150rpx;"></image></view>
  <text>\n{{userinfo.nickName}}\n</text>
</banner>
<button wx:if="{{!hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="getUserProfile">登录</button>
<button wx:if="{{hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="clearUserProfile">移除用户信息</button> 
  </view>
</scroll-view>

index.wxss内代码

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.container{
  background-color: rgb(113, 172, 240);
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

index.js 内代码

Page({
  data: {
    userinfo: {
      avatarUrl: '../../images/defaultUser.png',  
      nickName: '未授权'
    },
    
    hasUserInfo: false,
  },
  getUserProfile: function(e){
    wx.getUserProfile({
      desc: '获取您的微信个人信息',
      success:(res)=>{
          this.setData({
            userinfo: res.userInfo,
            hasUserInfo: true
          })
          wx.setStorageSync('userinfo', res.userInfo)
          wx.showToast({
            title: '已获取信息',
            success:function(){
              wx.switchTab({
                url: '../map/map',  //登录成功后首先进入地图页面，调用的是地图页面
              })
            }
          })
          
      },
      fail:function(e){
          wx.showToast({
            title: '已取消',
            icon: "none",
            duration: 1500,
            mask: true
          })
      }
    })
  },

6.遇到的bug
登录页面暂未遇到bug，当我引入地图页面时出现了bug（在此赘述bug信息），在此不做赘述。