github 名片微信小程序版本

.gitignore

@@ -0,0 +1 @@
+.DS_Store

app.js

@@ -0,0 +1,7 @@
+App({
+	onLaunch: function() {
+		console.log('onLaunch');
+	},
+
+	storageName: '__github_info__'
+})

app.json

@@ -0,0 +1,12 @@
+{
+	"pages":[
+		"pages/index/index",
+		"pages/detail/detail"
+	],
+	"window":{
+		"backgroundTextStyle":"light",
+		"navigationBarBackgroundColor": "#eee",
+		"navigationBarTitleText": "github",
+		"navigationBarTextStyle":"black"
+	}
+}

pages/detail/detail.js

@@ -0,0 +1,13 @@
+var app = getApp();
+
+Page({
+	data: {
+		detail: {}
+	},
+
+	onLoad: function() {
+		this.setData({
+			detail: wx.getStorageSync(app.storageName) || {}
+		})
+	}
+})

pages/detail/detail.wxml

@@ -0,0 +1,15 @@
+<view class="detail-view">
+	<view class="avatar-view">
+		<image class="avatar" mode="widthFix" src="{{ detail.avatar_url }}"/>
+	</view>
+	<view class="basic">
+		<text class="name">{{ detail.name }}</text> -
+		<text>{{ detail.email }}</text>
+	</view>
+	<view class="profile">
+		<text class="title">Profile</text>
+		<text class="profile-detail">
+			On Github since {{ detail.created_at }}, {{ detail.name }} is a developer based in {{ detail.location }} with {{ detail.public_repos }} public repositories and {{ detail.followers }} followers.
+		</text>
+	</view>
+</view>

pages/detail/detail.wxss

@@ -0,0 +1,48 @@
+/**
+ * 颜色 #4fc08d
+ */
+
+/* common */
+.title {
+	font-size: 20px;
+	display: block;
+	border-left: 2px solid #ccc;
+	padding: 5rpx;
+	text-indent: 10rpx;
+}
+
+.detail-view {
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx;
+} 
+
+.avatar-view {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	display: flex;
+	justify-content: center;
+}
+
+.avatar {
+	border: 1rpx solid #ccc;
+	height: 200rpx;
+	width: 200rpx;
+	border-radius: 200rpx;
+}
+
+.basic {
+	margin-bottom: 20rpx;
+	text-align: center;
+}
+
+.basic .name {
+	color: #ccc
+}
+
+.profile-detail {
+	font-size: 13px;
+	display: block;
+	padding: 0;
+	line-height: 1.2;
+}

pages/index/index.js

@@ -0,0 +1,36 @@
+var app = getApp();
+
+Page({
+	data: {
+		name: '',
+		detail: {}
+	},
+
+	bindInputName: function(e) {
+		this.setData({
+			name: e.detail.value
+		})
+	},
+
+	bindSearch: function() {
+		var prefixUrl = 'https://api.github.com/users/';
+		var me = this;
+		wx.showToast({
+			title: '加载中',
+			icon: 'loading',
+			duration: 10000
+		});
+
+		fetch(prefixUrl + this.data.name).then(function(res) {
+			if(res.ok) {
+				return res.json();
+			}
+		}).then(function(res) {
+			wx.hideToast();
+			wx.setStorageSync(app.storageName, res);
+			wx.navigateTo({
+				url: '../detail/detail'
+			})
+		})
+	}
+})

pages/index/index.wxml

@@ -0,0 +1,4 @@
+<view>
+	<input class="input-name" bindinput="bindInputName" value="{{ name }}" placeholder="请输入Github ID" />
+	<button bindtap="bindSearch" type="primary">确定</button>
+</view>

pages/index/index.wxss

@@ -0,0 +1,14 @@
+page {
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+view {
+	width: 80%;
+}
+
+.input-name {
+	margin-bottom: 20rpx;
+}