作者 吴孟雨

首页开头,暂存

  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<project version="4">
  3 + <component name="JavaScriptSettings">
  4 + <option name="languageLevel" value="ES6" />
  5 + </component>
  6 +</project>
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<project version="4">
  3 + <component name="ProjectModuleManager">
  4 + <modules>
  5 + <module fileurl="file://$PROJECT_DIR$/.idea/火柴西路.iml" filepath="$PROJECT_DIR$/.idea/火柴西路.iml" />
  6 + </modules>
  7 + </component>
  8 +</project>
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<project version="4">
  3 + <component name="VcsDirectoryMappings">
  4 + <mapping directory="$PROJECT_DIR$" vcs="Git" />
  5 + </component>
  6 +</project>
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<module type="WEB_MODULE" version="4">
  3 + <component name="NewModuleRootManager">
  4 + <content url="file://$MODULE_DIR$">
  5 + <excludeFolder url="file://$MODULE_DIR$/.tmp" />
  6 + <excludeFolder url="file://$MODULE_DIR$/temp" />
  7 + <excludeFolder url="file://$MODULE_DIR$/tmp" />
  8 + </content>
  9 + <orderEntry type="inheritedJdk" />
  10 + <orderEntry type="sourceFolder" forTests="false" />
  11 + </component>
  12 +</module>
1 /**app.wxss**/ 1 /**app.wxss**/
2 -.container {  
3 - height: 100%;  
4 - display: flex;  
5 - flex-direction: column;  
6 - align-items: center;  
7 - justify-content: space-between;  
8 - padding: 200rpx 0;  
9 - box-sizing: border-box;  
10 -} 2 +
  3 +
  4 +@font-face {font-family: "iconfont";
  5 + src: url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.eot?t=1544523215072'); /* IE9*/
  6 + src: url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.eot?t=1544523215072#iefix') format('embedded-opentype'), /* IE6-IE8 */
  7 + url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAASkAAsAAAAABvgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8dkgvY21hcAAAAYAAAABUAAABhmU+0M1nbHlmAAAB1AAAANgAAADYbiAdb2hlYWQAAAKsAAAALwAAADYTiqGcaGhlYQAAAtwAAAAcAAAAJAfeA4RobXR4AAAC+AAAAAwAAAAMDAAAAGxvY2EAAAMEAAAACAAAAAgAFABsbWF4cAAAAwwAAAAfAAAAIAERAD5uYW1lAAADLAAAAUUAAAJtPlT+fXBvc3QAAAR0AAAALgAAAD+v3CrleJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMTyzZW7438AQw9zA0AAUZgTJAQDhrAwgeJztkMERgCAMBPdAeTgW4sMW6MOX5dMGHkG78GY2l1zgE2AFsjnNAroRQ5dTRZ7ZIl/iTbGL1Gi1d/jcknfFnsY/FX7tUY93SuNak+jrBD0XYw46AAEAAAAAA1gCPAAFAAAlAScJAQcCAAFYIP7I/sggxQFXIP7IATggAAAEAAD/oAOFA2EACwAXACQAMQAAAR4CDgEuATY3PgE3DgIeAT4BJicuATcuASIGBwYQFwkBNhADBycmEDc+ATIWFxYQAgAkNg4hQ0IoBhkPJBQ6Vhc0bWpBCykWO/M3jZ2ON3FxARMBE3Kc6elhYS55hXguYQI0ASxHPRwUPEUaDw88AUdzYi0hYW8qFxh7OTw8OXv+xXz+5wEZfAE7/nHw8GgBDGkvMzMvaf70AAAAeJxjYGRgYADi9XI7V8bz23xl4GZhAIEbpuvOI+j/C1gYmBOBXA4GJpAoAD6OCwUAeJxjYGRgYG7438AQw8IAAkCSkQEVMAMARwkCbAQAAAAEAAAABAAAAAAAAAAAFABseJxjYGRgYGBmMGJgYQABJiDmAkIGhv9gPgMADdkBUAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICZkYmRmZGFgSuxqCi/XDclvzyPIyc/ObEkMz+PgQEAXj4HlwAA') format('woff'),
  8 + url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.ttf?t=1544523215072') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  9 + url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.svg?t=1544523215072#iconfont') format('svg'); /* iOS 4.1- */
  10 +}
  11 +
  12 +.iconfont {
  13 + font-family:"iconfont" !important;
  14 + font-size:16px;
  15 + font-style:normal;
  16 + -webkit-font-smoothing: antialiased;
  17 + -moz-osx-font-smoothing: grayscale;
  18 +}
  19 +
  20 +.icon-arrow-down:before { content: "\e63d"; }
  21 +
  22 +.icon-location:before { content: "\e600"; }
  23 +
  24 +
@@ -3,52 +3,53 @@ @@ -3,52 +3,53 @@
3 const app = getApp() 3 const app = getApp()
4 4
5 Page({ 5 Page({
6 - data: {  
7 - motto: 'Hello World',  
8 - userInfo: {},  
9 - hasUserInfo: false,  
10 - canIUse: wx.canIUse('button.open-type.getUserInfo')  
11 - },  
12 - //事件处理函数  
13 - bindViewTap: function() {  
14 - wx.navigateTo({  
15 - url: '../logs/logs'  
16 - })  
17 - },  
18 - onLoad: function () {  
19 - if (app.globalData.userInfo) {  
20 - this.setData({  
21 - userInfo: app.globalData.userInfo,  
22 - hasUserInfo: true  
23 - })  
24 - } else if (this.data.canIUse){  
25 - // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回  
26 - // 所以此处加入 callback 以防止这种情况  
27 - app.userInfoReadyCallback = res => {  
28 - this.setData({  
29 - userInfo: res.userInfo,  
30 - hasUserInfo: true 6 + data: {
  7 + slide: [{image: '../../images/banner.png'}, {image: '../../images/banner.png'}],
  8 + motto: 'Hello World',
  9 + userInfo: {},
  10 + hasUserInfo: false,
  11 + canIUse: wx.canIUse('button.open-type.getUserInfo')
  12 + },
  13 + //事件处理函数
  14 + bindViewTap: function () {
  15 + wx.navigateTo({
  16 + url: '../logs/logs'
31 }) 17 })
32 - }  
33 - } else {  
34 - // 在没有 open-type=getUserInfo 版本的兼容处理  
35 - wx.getUserInfo({  
36 - success: res => {  
37 - app.globalData.userInfo = res.userInfo  
38 - this.setData({  
39 - userInfo: res.userInfo,  
40 - hasUserInfo: true  
41 - }) 18 + },
  19 + onLoad: function () {
  20 + if (app.globalData.userInfo) {
  21 + this.setData({
  22 + userInfo: app.globalData.userInfo,
  23 + hasUserInfo: true
  24 + })
  25 + } else if (this.data.canIUse) {
  26 + // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  27 + // 所以此处加入 callback 以防止这种情况
  28 + app.userInfoReadyCallback = res => {
  29 + this.setData({
  30 + userInfo: res.userInfo,
  31 + hasUserInfo: true
  32 + })
  33 + }
  34 + } else {
  35 + // 在没有 open-type=getUserInfo 版本的兼容处理
  36 + wx.getUserInfo({
  37 + success: res => {
  38 + app.globalData.userInfo = res.userInfo
  39 + this.setData({
  40 + userInfo: res.userInfo,
  41 + hasUserInfo: true
  42 + })
  43 + }
  44 + })
42 } 45 }
43 - }) 46 + },
  47 + getUserInfo: function (e) {
  48 + console.log(e)
  49 + app.globalData.userInfo = e.detail.userInfo
  50 + this.setData({
  51 + userInfo: e.detail.userInfo,
  52 + hasUserInfo: true
  53 + })
44 } 54 }
45 - },  
46 - getUserInfo: function(e) {  
47 - console.log(e)  
48 - app.globalData.userInfo = e.detail.userInfo  
49 - this.setData({  
50 - userInfo: e.detail.userInfo,  
51 - hasUserInfo: true  
52 - })  
53 - }  
54 }) 55 })
  1 +{
  2 + "navigationBarTitleText": "火柴西路"
  3 +}
1 <!--index.wxml--> 1 <!--index.wxml-->
2 <view class="container"> 2 <view class="container">
3 - <view class="userinfo">  
4 - <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>  
5 - <block wx:else>  
6 - <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>  
7 - <text class="userinfo-nickname">{{userInfo.nickName}}</text>  
8 - </block>  
9 - </view>  
10 - <view class="usermotto">  
11 - <text class="user-motto">{{motto}}</text> 3 + <view class="head">
  4 + <view class="position">
  5 + <view class="left">
  6 + <view class="iconfont icon-location"></view>
  7 + <text>北京</text>
  8 + <view class="iconfont icon-arrow-down"></view>
  9 + </view>
  10 + <input type="text"/>
  11 + </view>
  12 + <swiper indicator-dots="{{true}}"
  13 + autoplay="{{true}}" interval="3000" duration="1000">
  14 + <block wx:for="{{slide}}" wx:key="index">
  15 + <navigator url="{{item.url}}" hover-class="navigator-hover">
  16 + <swiper-item>
  17 + <image src="{{item.image}}" class="slide-image"/>
  18 + </swiper-item>
  19 + </navigator>
  20 + </block>
  21 + </swiper>
12 </view> 22 </view>
13 </view> 23 </view>
1 /**index.wxss**/ 1 /**index.wxss**/
2 -.userinfo { 2 +.position {
  3 + width: 100%;
3 display: flex; 4 display: flex;
4 - flex-direction: column;  
5 align-items: center; 5 align-items: center;
  6 + justify-content: space-between;
  7 + position: fixed;
  8 + top: 0;
  9 + left: 0;
  10 + z-index: 10;
  11 + padding: 14rpx 20rpx;
  12 + -webkit-box-sizing: border-box;
  13 + -moz-box-sizing: border-box;
  14 + box-sizing: border-box;
6 } 15 }
7 -  
8 -.userinfo-avatar {  
9 - width: 128rpx;  
10 - height: 128rpx;  
11 - margin: 20rpx;  
12 - border-radius: 50%; 16 +.position .left {
  17 + display: flex;
  18 + align-items: center;
  19 +}
  20 +.position .left .icon-location {
  21 + font-size: 44rpx;
  22 + color: #ffffff;
  23 + margin-right: 14rpx;
  24 +}
  25 +.position .left .icon-arrow-down {
  26 + font-size: 36rpx;
  27 + color: #ffffff;
  28 + margin-left: 18rpx;
  29 +}
  30 +.position text {
  31 + color: #ffffff;
  32 + font-size: 28rpx;
  33 +}
  34 +.position input {
  35 + width: 478rpx;
  36 + height: 52rpx;
  37 + border-radius: 10rpx;
  38 + color: #ffffff;
  39 + padding-left: 20rpx;
  40 + font-size: 28rpx;
  41 + background-color: rgba(255,255,255,0.3);
13 } 42 }
14 -  
15 -.userinfo-nickname {  
16 - color: #aaa; 43 +swiper {
  44 + width: 100%;
  45 + height: 360rpx;
  46 + /*margin-top: 20rpx;*/
17 } 47 }
18 -  
19 -.usermotto {  
20 - margin-top: 200px; 48 +.slide-image {
  49 + width: 100%;
  50 + height: 100%;
21 } 51 }