微信小程序学习笔记（一）

目前正在学习微信小程序的开发，学习的过程中，记录一些笔记，以备日后翻阅查询。

我的学习资源

微信小程序官方教程：developers.weixin.qq.com/miniprogram…

入门微信小程序开发（慕课网）：www.imooc.com/learn/974

【微信小程序】从入门到入土（B站）：www.bilibili.com/video/av119…

（PS：这只是我现阶段入门学习的途径，如果有更好的资源和学习方式，我只想说，请联系我！）

微信开发者工具

下载地址

详细功能不加赘述，自己又忘了的话可以复习一下这个视频。

www.imooc.com/video/16911

代码结构详解

• pages     

    这个就不过多赘述了，贴上代码先大概了解其代码结构吧。

1. index.js

  //index.js  
//获取应用实例  
const app = getApp()
  Page({
    data: {
      motto: 'Hello World',
      userInfo: {},
      hasUserInfo: false,
      canIUse: wx.canIUse('button.open-type.getUserInfo')    
},    //事件处理函数
    bindViewTap: function() {
      wx.navigateTo({
        url: '../logs/logs'      
})
    },
    onLoad: function () {
      if (app.globalData.userInfo) {
        this.setData({          userInfo: app.globalData.userInfo,          hasUserInfo: true        })      } else if (this.data.canIUse){        // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回        // 所以此处加入 callback 以防止这种情况        app.userInfoReadyCallback = res => {          this.setData({            userInfo: res.userInfo,            hasUserInfo: true          })        }      } else {        // 在没有 open-type=getUserInfo 版本的兼容处理        wx.getUserInfo({          success: res => {            app.globalData.userInfo = res.userInfo            this.setData({              userInfo: res.userInfo,              hasUserInfo: true            })          }        })      }    },    getUserInfo: function(e) {      console.log(e)      app.globalData.userInfo = e.detail.userInfo      this.setData({        userInfo: e.detail.userInfo,        hasUserInfo: true      })    }  })
复制代码

  2.index.wxml

<!--index.wxml--><view class="container">  <view class="userinfo">    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>    <block wx:else>      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>      <text class="userinfo-nickname">{{userInfo.nickName}}</text>    </block>  </view>  <view class="usermotto">    <text class="user-motto">{{motto}}</text>  </view></view>
复制代码

  3.index.wxss

/**index.wxss**/
.userinfo {  
display: flex;  
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}复制代码

• app.js

//app.jsApp({  onLaunch: function () {    // 展示本地存储能力    var logs = wx.getStorageSync('logs') || []    logs.unshift(Date.now())    wx.setStorageSync('logs', logs)
    // 登录    wx.login({      success: res => {        // 发送 res.code 到后台换取 openId, sessionKey, unionId      }    })    // 获取用户信息    wx.getSetting({      success: res => {        if (res.authSetting['scope.userInfo']) {          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框          wx.getUserInfo({            success: res => {              // 可以将 res 发送给后台解码出 unionId              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回              // 所以此处加入 callback 以防止这种情况              if (this.userInfoReadyCallback) {                this.userInfoReadyCallback(res)              }            }          })        }      }    })  },  globalData: {    userInfo: null  }})复制代码

• app.json

{
  //也就是常说的路由  "pages":[    "pages/index/index",    "pages/join/join",    "pages/logs/logs"  ],  "window":{
    //小程序头部的一些样式    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#000",    "navigationBarTitleText": "这是第一个微信小程序Demo",    "navigationBarTextStyle":"white"  }}
复制代码

学到这儿就先写到这儿吧。

转载于:https://juejin.im/post/5acd781af265da23793c81a1