微信小程序笔记 01
1 了解官方文档
DOC
2 下载软件
download
3 工具尝试 (1.03.2006090)
- 可创建项目 javascript 版
- 可创建项目 typescript 版
4 文件阅读 (javascript版)
- index.js 逻辑代码
- index.json => 配置文件 声明 usingComponents 使用的组件
- index.wxml => 页面xml标签
- view标签
- button标签
- block标签
- image标签
- text标签
- index.wxss => 样式代码
wx.canIUse('button.open-type.getUserInfo')
app.userInfoReadyCallback = () => {} / open-type=getUserInfo 指令 / bindgetuserinfo=getUserInfo
wx.getUserInfo()
app.globalData
Page实例.setData({})
结构指令 wx:if / wx:else
wx.getStorageSync('logs')
userInfo.avatarUrl 头像
userInfo.nickName 昵称
e.detail.userInfo 获取方式
res.userInfo 获取方式
wx.navigateTo({ // 页面跳转
url: '../logs/logs'
})
bindtap="bindViewTap" 事件绑定
5 阅读代码后的体会
- 注释贴心有境界
- log的日期格式化代码简练达到目的
//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
})
}
})
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n // 此处判断如果length不是 > 1 的字符串, 就自动补零
}