├── day1 ├── pages │ ├── routerOne │ │ ├── one.wxss │ │ ├── one.json │ │ ├── one.wxml │ │ └── one.js │ ├── routerTwo │ │ ├── two.wxss │ │ ├── two.json │ │ ├── two.wxml │ │ └── two.js │ ├── routerThree │ │ ├── three.json │ │ ├── three.wxss │ │ ├── three.wxml │ │ └── three.js │ ├── logs │ │ ├── logs.json │ │ ├── img │ │ │ ├── s1.png │ │ │ ├── s2.png │ │ │ ├── s3.png │ │ │ ├── s4.png │ │ │ ├── bigimg.png │ │ │ ├── goods1.png │ │ │ ├── goods2.png │ │ │ ├── goods3.png │ │ │ ├── goods4.png │ │ │ ├── goods5.png │ │ │ └── bigimg1.png │ │ ├── logs.wxml │ │ ├── logs.wxss │ │ └── logs.js │ └── list │ │ ├── img │ │ ├── s1.png │ │ ├── s2.png │ │ ├── s3.png │ │ ├── s4.png │ │ ├── bigImg.png │ │ ├── goods1.png │ │ ├── goods2.png │ │ ├── goods3.png │ │ ├── goods4.png │ │ ├── goods5.png │ │ ├── goods6.png │ │ └── goods7.png │ │ ├── list.json │ │ ├── list.wxml │ │ ├── list.wxss │ │ └── list.js ├── README.md ├── font │ ├── iconfont.eot │ ├── iconfont.ttf │ ├── iconfont.woff │ ├── demo_fontclass.html │ ├── demo_unicode.html │ ├── iconfont.wxss │ ├── demo_symbol.html │ ├── demo.css │ ├── iconfont.svg │ └── iconfont.js ├── app.wxss ├── utils │ └── util.js ├── project.config.json ├── app.json └── app.js └── README.md /day1/pages/routerOne/one.wxss: -------------------------------------------------------------------------------- 1 | /* pages/routerOne/one.wxss */ -------------------------------------------------------------------------------- /day1/pages/routerTwo/two.wxss: -------------------------------------------------------------------------------- 1 | /* pages/routerTwo/two.wxss */ -------------------------------------------------------------------------------- /day1/README.md: -------------------------------------------------------------------------------- 1 | # 轮播 跳转页面 上拉加载 下拉刷新 2 | # 练习：分享 底部导航 跳转其他小程序 弹窗 3 | -------------------------------------------------------------------------------- /day1/pages/routerThree/three.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /day1/pages/routerThree/three.wxss: -------------------------------------------------------------------------------- 1 | /* pages/routerThree/three.wxss */ -------------------------------------------------------------------------------- /day1/pages/routerTwo/two.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /day1/pages/routerOne/one.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # myTeam 2 | myTeam 3 | # 轮播 跳转页面 上拉加载 下拉刷新 4 | # 练习：分享 底部导航 跳转其他小程序 弹窗 5 | -------------------------------------------------------------------------------- /day1/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/font/iconfont.eot -------------------------------------------------------------------------------- /day1/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/font/iconfont.ttf -------------------------------------------------------------------------------- /day1/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/font/iconfont.woff -------------------------------------------------------------------------------- /day1/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "微博动漫", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /day1/pages/list/img/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/s1.png -------------------------------------------------------------------------------- /day1/pages/list/img/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/s2.png -------------------------------------------------------------------------------- /day1/pages/list/img/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/s3.png -------------------------------------------------------------------------------- /day1/pages/list/img/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/s4.png -------------------------------------------------------------------------------- /day1/pages/logs/img/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/s1.png -------------------------------------------------------------------------------- /day1/pages/logs/img/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/s2.png -------------------------------------------------------------------------------- /day1/pages/logs/img/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/s3.png -------------------------------------------------------------------------------- /day1/pages/logs/img/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/s4.png -------------------------------------------------------------------------------- /day1/pages/list/img/bigImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/bigImg.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods1.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods2.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods3.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods4.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods5.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods6.png -------------------------------------------------------------------------------- /day1/pages/list/img/goods7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/list/img/goods7.png -------------------------------------------------------------------------------- /day1/pages/logs/img/bigimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/bigimg.png -------------------------------------------------------------------------------- /day1/pages/logs/img/goods1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/goods1.png -------------------------------------------------------------------------------- /day1/pages/logs/img/goods2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/goods2.png -------------------------------------------------------------------------------- /day1/pages/logs/img/goods3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/goods3.png -------------------------------------------------------------------------------- /day1/pages/logs/img/goods4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/goods4.png -------------------------------------------------------------------------------- /day1/pages/logs/img/goods5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/goods5.png -------------------------------------------------------------------------------- /day1/pages/logs/img/bigimg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/myTeam/HEAD/day1/pages/logs/img/bigimg1.png -------------------------------------------------------------------------------- /day1/pages/routerThree/three.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/routerThree/three.wxml 3 | -------------------------------------------------------------------------------- /day1/pages/list/list.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText": "精品佳作", 4 | "backgroundColor":"#f5f5f5", 5 | "backgroundTextStyle":"dark", 6 | "enablePullDownRefresh":true, 7 | "onReachBottomDistance":50 8 | } -------------------------------------------------------------------------------- /day1/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | @import './font/iconfont.wxss'; 3 | .container { 4 | height: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: space-between; 9 | padding: 200rpx 0; 10 | box-sizing: border-box; 11 | } 12 | -------------------------------------------------------------------------------- /day1/pages/routerTwo/two.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | to c 4 | 5 | 6 | to c 7 | 8 | -------------------------------------------------------------------------------- /day1/pages/routerOne/one.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | to b 4 | 5 | 6 | to b 7 | 8 | -------------------------------------------------------------------------------- /day1/pages/list/list.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.tit}} 8 | 作者：{{item.star}} 9 | {{item.con}} 10 | 11 | 12 | -------------------------------------------------------------------------------- /day1/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /day1/pages/list/list.wxss: -------------------------------------------------------------------------------- 1 | /* pages/list/list.wxss */ 2 | 3 | .list { 4 | margin-top: 35rpx; 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | 9 | .lists { 10 | margin: 30rpx; 11 | display: flex; 12 | } 13 | 14 | .lists>view { 15 | width: 400rpx; 16 | padding-left: 30rpx; 17 | } 18 | 19 | .lists image { 20 | height: 148rpx; 21 | width: 268rpx; 22 | } 23 | 24 | .block { 25 | margin-top: 8rpx; 26 | color: #333; 27 | display: block; 28 | font-weight: bold; 29 | } 30 | 31 | .color { 32 | font-weight: normal; 33 | color: #999; 34 | font-size: 28rpx; 35 | } 36 | -------------------------------------------------------------------------------- /day1/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false 13 | }, 14 | "compileType": "miniprogram", 15 | "libVersion": "2.6.2", 16 | "appid": "wx7aea2003580a94e2", 17 | "projectname": "miniprogram-test-2", 18 | "debugOptions": { 19 | "hidedInDevtools": [] 20 | }, 21 | "isGameTourist": false, 22 | "condition": { 23 | "search": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "conversation": { 28 | "current": -1, 29 | "list": [] 30 | }, 31 | "plugin": { 32 | "current": -1, 33 | "list": [] 34 | }, 35 | "game": { 36 | "currentL": -1, 37 | "list": [] 38 | }, 39 | "miniprogram": { 40 | "current": 0, 41 | "list": [ 42 | { 43 | "id": -1, 44 | "name": "one页面", 45 | "pathName": "pages/routerOne/one", 46 | "scene": null 47 | } 48 | ] 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /day1/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/logs/logs", 4 | "pages/routerOne/one", 5 | "pages/list/list", 6 | "pages/routerThree/three", 7 | "pages/routerTwo/two" 8 | ], 9 | "window": { 10 | "backgroundTextStyle": "light", 11 | "navigationBarBackgroundColor": "#FF4D6A", 12 | "navigationBarTitleText": "微博动漫", 13 | "navigationBarTextStyle": "white" 14 | }, 15 | "navigateToMiniProgramAppIdList": [ 16 | "wx7aea2003580a94e2" 17 | ], 18 | "tabBar": { 19 | "color": "#666", 20 | "selectedColor": "red", 21 | "backgroundColor": "#eee", 22 | "position": "bottom", 23 | "borderStyle": "black", 24 | "list": [ 25 | { 26 | "pagePath": "pages/routerOne/one", 27 | "text": "One", 28 | "iconPath": "", 29 | "selectedIconPath": "" 30 | }, { 31 | "pagePath": "pages/routerTwo/two", 32 | "text": "Two", 33 | "iconPath": "", 34 | "selectedIconPath": "" 35 | }, { 36 | "pagePath": "pages/routerThree/three", 37 | "text": "Three", 38 | "iconPath": "", 39 | "selectedIconPath": "" 40 | } 41 | ] 42 | } 43 | 44 | } -------------------------------------------------------------------------------- /day1/pages/routerTwo/two.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | console.log('onLoadB') 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | console.log('onReadyB') 23 | 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面显示 28 | */ 29 | onShow: function () { 30 | console.log('onShowB') 31 | 32 | }, 33 | 34 | /** 35 | * 生命周期函数--监听页面隐藏 36 | */ 37 | onHide: function () { 38 | console.log('onHideB') 39 | 40 | }, 41 | 42 | /** 43 | * 生命周期函数--监听页面卸载 44 | */ 45 | onUnload: function () { 46 | console.log('onUnloadB') 47 | 48 | }, 49 | 50 | /** 51 | * 页面相关事件处理函数--监听用户下拉动作 52 | */ 53 | onPullDownRefresh: function () { 54 | console.log('onPullDownRefreshB') 55 | 56 | }, 57 | 58 | /** 59 | * 页面上拉触底事件的处理函数 60 | */ 61 | onReachBottom: function () { 62 | console.log(' onReachBottomB') 63 | 64 | }, 65 | 66 | /** 67 | * 用户点击右上角分享 68 | */ 69 | onShareAppMessage: function () { 70 | console.log('onShareAppMessageB') 71 | 72 | } 73 | }) -------------------------------------------------------------------------------- /day1/pages/routerThree/three.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | console.log('onLoadC') 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | console.log('onReadyC') 23 | 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面显示 28 | */ 29 | onShow: function () { 30 | console.log('onShowC') 31 | 32 | }, 33 | 34 | /** 35 | * 生命周期函数--监听页面隐藏 36 | */ 37 | onHide: function () { 38 | console.log('onHideC') 39 | 40 | }, 41 | 42 | /** 43 | * 生命周期函数--监听页面卸载 44 | */ 45 | onUnload: function () { 46 | console.log('onUnloadC') 47 | 48 | }, 49 | 50 | /** 51 | * 页面相关事件处理函数--监听用户下拉动作 52 | */ 53 | onPullDownRefresh: function () { 54 | console.log('onPullDownRefreshC') 55 | 56 | }, 57 | 58 | /** 59 | * 页面上拉触底事件的处理函数 60 | */ 61 | onReachBottom: function () { 62 | console.log(' onReachBottomC') 63 | 64 | }, 65 | 66 | /** 67 | * 用户点击右上角分享 68 | */ 69 | onShareAppMessage: function () { 70 | console.log('onShareAppMessageC') 71 | 72 | } 73 | }) -------------------------------------------------------------------------------- /day1/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{item.tit}} 16 | 17 | 18 | 19 | 20 | | 21 | 精品佳作 22 | 23 | 查看更多 24 | 25 | 26 | 27 | 28 | {{item.tit}} 29 | {{item.con}} 30 | 31 | 32 | -------------------------------------------------------------------------------- /day1/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | //上拉v 下拉v 全局局部 跳转小程序v tab 分享v 弹窗v 轮播v 3 | App({ 4 | //捕获 目标 冒泡 5 | //dataset 获取data开头的属性 6 | //target 事件源 7 | //curenttarget 监听事件的元素 8 | onLaunch: function() { 9 | console.log('onLaunch') 10 | // 展示本地存储能力 11 | var logs = wx.getStorageSync('logs') || [] 12 | logs.unshift(Date.now()) 13 | wx.setStorageSync('logs', logs) 14 | 15 | // 登录 16 | wx.login({ 17 | success: res => { 18 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 19 | } 20 | }) 21 | // 获取用户信息 22 | wx.getSetting({ 23 | success: res => { 24 | if (res.authSetting['scope.userInfo']) { 25 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 26 | wx.getUserInfo({ 27 | success: res => { 28 | // 可以将 res 发送给后台解码出 unionId 29 | this.globalData.userInfo = res.userInfo 30 | 31 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 32 | // 所以此处加入 callback 以防止这种情况 33 | if (this.userInfoReadyCallback) { 34 | this.userInfoReadyCallback(res) 35 | } 36 | } 37 | }) 38 | } 39 | } 40 | }) 41 | }, 42 | globalData: { 43 | userInfo: null 44 | } 45 | }) -------------------------------------------------------------------------------- /day1/pages/routerOne/one.js: -------------------------------------------------------------------------------- 1 | // pages/routerOne/one.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | /** 11 | * 点击跳转到其他小程序 12 | */ 13 | jump(){ 14 | wx.navigateToMiniProgram({ 15 | appId:'wx7aea2003580a94e2', 16 | path:'pages/index/index', 17 | extraData:{ 18 | foo:'bar' 19 | }, 20 | envVersion:'develop', 21 | success: (result)=>{ 22 | 23 | }, 24 | fail: ()=>{}, 25 | complete: ()=>{} 26 | }); 27 | }, 28 | /** 29 | * 生命周期函数--监听页面加载 30 | */ 31 | onLoad: function (options) { 32 | console.log('onLoadA') 33 | }, 34 | 35 | /** 36 | * 生命周期函数--监听页面初次渲染完成 37 | */ 38 | onReady: function () { 39 | console.log('onReadyA') 40 | 41 | }, 42 | 43 | /** 44 | * 生命周期函数--监听页面显示 45 | */ 46 | onShow: function () { 47 | console.log('onShowA') 48 | 49 | }, 50 | 51 | /** 52 | * 生命周期函数--监听页面隐藏 53 | */ 54 | onHide: function () { 55 | console.log('onHideA') 56 | 57 | }, 58 | 59 | /** 60 | * 生命周期函数--监听页面卸载 61 | */ 62 | onUnload: function () { 63 | console.log('onUnloadA') 64 | 65 | }, 66 | 67 | /** 68 | * 页面相关事件处理函数--监听用户下拉动作 69 | */ 70 | onPullDownRefresh: function () { 71 | console.log('onPullDownRefreshA') 72 | 73 | }, 74 | 75 | /** 76 | * 页面上拉触底事件的处理函数 77 | */ 78 | onReachBottom: function () { 79 | console.log(' onReachBottomA') 80 | 81 | }, 82 | 83 | /** 84 | * 用户点击右上角分享 85 | */ 86 | onShareAppMessage: function () { 87 | console.log('onShareAppMessageA') 88 | return { 89 | withShareTicket: true 90 | 91 | } 92 | 93 | } 94 | }) -------------------------------------------------------------------------------- /day1/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 0rpx; 5 | } 6 | .swiper{ 7 | height: 480rpx; 8 | width: 100%; 9 | } 10 | .log-item { 11 | margin: 10rpx; 12 | } 13 | .slide-image{ 14 | 15 | } 16 | .container>input{ 17 | background: rgba(0, 0, 0, .2); 18 | position: fixed; 19 | padding-left: 20rpx; 20 | top:20rpx; 21 | left: 50rpx; 22 | border-radius: 30rpx; 23 | margin-left: 28rpx; 24 | height: 60rpx; 25 | width: 570rpx; 26 | } 27 | /* .container>image { 28 | width: 100%; 29 | height: 512rpx; 30 | } */ 31 | 32 | .big, .big2 { 33 | display: flex; 34 | width: 100%; 35 | } 36 | 37 | .big2 { 38 | overflow: auto; 39 | } 40 | 41 | .dl { 42 | display: flex; 43 | flex: 1; 44 | align-items: center; 45 | flex-direction: column; 46 | } 47 | 48 | .block { 49 | margin-left: 35rpx; 50 | display: block; 51 | font-size: 32rpx; 52 | } 53 | 54 | .right { 55 | padding-right: 38rpx; 56 | text-align: right; 57 | color: #999; 58 | font-size: 30rpx; 59 | } 60 | 61 | .img { 62 | width: 100rpx; 63 | height: 100rpx; 64 | font-size: 24rpx; 65 | padding-top: 20rpx; 66 | text-align: center; 67 | } 68 | 69 | .text { 70 | margin-bottom: 10rpx; 71 | font-size: 26rpx; 72 | color: #333; 73 | } 74 | 75 | .tit { 76 | margin-top: 45rpx; 77 | display: flex; 78 | width: 100%; 79 | margin-bottom: 20rpx; 80 | } 81 | 82 | .tit>text { 83 | flex: 1; 84 | } 85 | 86 | .line { 87 | widows: 8rpx; 88 | background: #ff4d6a; 89 | margin-left: 28rpx; 90 | border-radius: 30rpx; 91 | color: #ff4d6a; 92 | height: 30rpx; 93 | overflow: hidden; 94 | display: inline-block; 95 | } 96 | 97 | .tits { 98 | padding-left: 15rpx; 99 | } 100 | 101 | .dl2 { 102 | flex-direction: column; 103 | } 104 | 105 | .imgs { 106 | width: 488rpx; 107 | height: 280rpx; 108 | } 109 | 110 | .color { 111 | color: #888; 112 | font-size: 26rpx; 113 | margin-top: 14rpx; 114 | } 115 | -------------------------------------------------------------------------------- /day1/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [], 7 | array: [{ 8 | img: './img/s1.png', 9 | tit: "放送表" 10 | }, { 11 | img: './img/s2.png', 12 | tit: "分类" 13 | }, { 14 | img: './img/s3.png', 15 | tit: "榜单" 16 | }, { 17 | img: './img/s4.png', 18 | tit: "完结" 19 | }], 20 | arrays: [{ 21 | img: './img/goods1.png', 22 | tit: "狂想情人", 23 | con: '记住了，渣男必须死' 24 | }, { 25 | img: './img/goods2.png', 26 | tit: "魔法圣女", 27 | con: "变身魔法少女" 28 | }, { 29 | img: './img/goods3.png', 30 | tit: "攻略计", 31 | con: '比比谁有心计' 32 | }], 33 | imgUrls: [ 34 | './img/bigimg1.png', 35 | 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 36 | 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 37 | 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' 38 | ], 39 | indicatorDots: false, 40 | autoplay: false, 41 | interval: 5000, 42 | duration: 1000 43 | }, 44 | //事件处理函数 45 | bindViewTap: function () { 46 | wx.navigateTo({ 47 | url: '../list/list' 48 | }) 49 | }, 50 | onLoad: function () { 51 | this.setData({ 52 | logs: (wx.getStorageSync('logs') || []).map(log => { 53 | return util.formatTime(new Date(log)) 54 | }) 55 | }) 56 | }, 57 | onShareAppMessage: function () { 58 | console.log('onShareAppMessageA') 59 | return { 60 | withShareTicket: true 61 | 62 | } 63 | 64 | }, 65 | // changeIndicatorDots(e) { 66 | // this.setData({ 67 | // indicatorDots: !this.data.indicatorDots 68 | // }) 69 | // }, 70 | // changeAutoplay(e) { 71 | // this.setData({ 72 | // autoplay: !this.data.autoplay 73 | // }) 74 | // }, 75 | // intervalChange(e) { 76 | // this.setData({ 77 | // interval: e.detail.value 78 | // }) 79 | // }, 80 | // durationChange(e) { 81 | // this.setData({ 82 | // duration: e.detail.value 83 | // }) 84 | // } 85 | }) -------------------------------------------------------------------------------- /day1/pages/list/list.js: -------------------------------------------------------------------------------- 1 | // pages/list/list.js 2 | let idx = 0; 3 | let idx2 = 0; 4 | 5 | Page({ 6 | 7 | /** 8 | * 页面的初始数据 9 | */ 10 | data: { 11 | arrays: [] 12 | }, 13 | 14 | /** 15 | * 生命周期函数--监听页面加载 16 | */ 17 | onLoad: function (options) { 18 | 19 | }, 20 | 21 | /** 22 | * 生命周期函数--监听页面初次渲染完成 23 | */ 24 | onReady: function () { 25 | 26 | }, 27 | 28 | /** 29 | * 生命周期函数--监听页面显示 30 | */ 31 | onShow: function () { 32 | let arrays = [] 33 | arrays.push({ 34 | img: './img/goods1.png', 35 | star: "暗黑少女", 36 | tit: "狂想情人", 37 | con: '记住了，渣男必须死' 38 | }, { 39 | img: './img/goods2.png', 40 | star: "漫语动漫", 41 | tit: "魔法圣女", 42 | con: "变身魔法少女" 43 | }, { 44 | img: './img/goods3.png', 45 | star: "痴情叔叔", 46 | tit: "攻略计", 47 | con: '比比谁有心计' 48 | }, { 49 | img: './img/goods4.png', 50 | star: "暗黑少女", 51 | tit: "神说要有光", 52 | con: '我变成了女孩' 53 | }, { 54 | img: './img/goods5.png', 55 | star: "蜂群工作者", 56 | tit: "仙咒", 57 | con: '成仙之路' 58 | }, { 59 | img: './img/goods3.png', 60 | star: "暗黑少女", 61 | tit: "真理面具", 62 | con: '一起来揭开真相' 63 | }) 64 | this.setData({ 65 | arrays 66 | }) 67 | }, 68 | 69 | /** 70 | * 生命周期函数--监听页面隐藏 71 | */ 72 | onHide: function () { 73 | 74 | }, 75 | 76 | /** 77 | * 生命周期函数--监听页面卸载 78 | */ 79 | onUnload: function () { 80 | 81 | }, 82 | /** 83 | * 点击触发小弹框 84 | */ 85 | showtit(e) { 86 | let tit = e.target.dataset.tit; 87 | wx.showToast({ 88 | title: tit, 89 | icon: 'success', 90 | duration: 1500, 91 | mask: true, 92 | // success: (result) => { 93 | 94 | // }, 95 | // fail: () => {}, 96 | // complete: () => {} 97 | }); 98 | }, 99 | /** 100 | * 页面相关事件处理函数--监听用户下拉动作 101 | */ 102 | onPullDownRefresh: function () { 103 | let arrays = []; 104 | for (var i = 0, len = 7; i < len; i++) { 105 | idx++; 106 | arrays.push({ 107 | img: `./img/goods${i+1}.png`, 108 | star: "暗黑少女", 109 | tit: "狂想情人" + idx, 110 | con: '记住了，渣男必须死' 111 | }) 112 | } 113 | this.setData({ 114 | arrays 115 | }) 116 | }, 117 | 118 | /** 119 | * 页面上拉触底事件的处理函数 120 | */ 121 | onReachBottom: function () { 122 | let arrays = this.data.arrays; 123 | let length = this.data.arrays.length; 124 | for (var i = 0, len = 7; i < len; i++) { 125 | idx2++; 126 | arrays.push({ 127 | img: `./img/goods${i+1}.png`, 128 | star: "暗黑少女", 129 | tit: "狂想情人" + idx2, 130 | con: '记住了，渣男必须死' 131 | }) 132 | } 133 | this.setData({ 134 | arrays 135 | }) 136 | }, 137 | 138 | /** 139 | * 用户点击右上角分享 140 | */ 141 | onShareAppMessage: function () { 142 | 143 | } 144 | }) -------------------------------------------------------------------------------- /day1/font/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 | 82 | 83 |

font-class引用

84 |
85 | 86 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

87 |

与unicode使用方式相比，具有如下特点：

88 | 94 |

使用步骤如下：

95 |

第一步：引入项目下面生成的fontclass代码：

96 | 97 | 98 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
99 |

第二步：挑选相应图标并获取类名，应用于页面：

100 | 
<i class="iconfont icon-xxx"></i>
101 |
102 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

103 |
104 |
105 | 106 | 107 | -------------------------------------------------------------------------------- /day1/font/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 | 102 |

unicode引用

103 |
104 | 105 |

unicode是字体在网页端最原始的应用方式，特点是：

106 | 111 |
112 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

113 |
114 |

unicode使用步骤如下：

115 |

第一步：拷贝项目下面生成的font-face

116 | 
@font-face {
117 |   font-family: 'iconfont';
118 |   src: url('iconfont.eot');
119 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
120 |   url('iconfont.woff') format('woff'),
121 |   url('iconfont.ttf') format('truetype'),
122 |   url('iconfont.svg#iconfont') format('svg');
123 | }
124 |
125 |

第二步：定义使用iconfont的样式

126 | 
.iconfont{
127 |   font-family:"iconfont" !important;
128 |   font-size:16px;font-style:normal;
129 |   -webkit-font-smoothing: antialiased;
130 |   -webkit-text-stroke-width: 0.2px;
131 |   -moz-osx-font-smoothing: grayscale;
132 | }
133 |
134 |

第三步：挑选相应图标并获取字体编码，应用于页面

135 | 
<i class="iconfont">&#x33;</i>
136 | 137 |
138 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

139 |
140 |
141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /day1/font/iconfont.wxss: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1533949304831'); /* IE9*/ 4 | src: url('iconfont.eot?t=1533949304831#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1533949304831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1533949304831#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-shop:before { content: "\e62b"; } 19 | 20 | .icon-iconset0132:before { content: "\e61f"; } 21 | 22 | .icon-iconset0454:before { content: "\e74d"; } 23 | 24 | .icon-shafa:before { content: "\e621"; } 25 | 26 | .icon-xie:before { content: "\e66d"; } 27 | 28 | .icon-shafa1:before { content: "\e652"; } 29 | 30 | .icon-icon-test:before { content: "\e619"; } 31 | 32 | .icon-taideng:before { content: "\e608"; } 33 | 34 | .icon-kafei:before { content: "\e78c"; } 35 | 36 | .icon-diannao:before { content: "\e622"; } 37 | 38 | .icon-bingjiling:before { content: "\e609"; } 39 | 40 | -------------------------------------------------------------------------------- /day1/font/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 | 119 | 120 | 121 |

symbol引用

122 |
123 | 124 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 125 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

126 | 132 |

使用步骤如下：

133 |

第一步：引入项目下面生成的symbol代码：

134 | 
<script src="./iconfont.js"></script>
135 |

第二步：加入通用css代码（引入一次就行）：

136 | 
<style type="text/css">
137 | .icon {
138 |    width: 1em; height: 1em;
139 |    vertical-align: -0.15em;
140 |    fill: currentColor;
141 |    overflow: hidden;
142 | }
143 | </style>
144 |

第三步：挑选相应图标并获取类名，应用于页面：

145 | 
<svg class="icon" aria-hidden="true">
146 |   <use xlink:href="#icon-xxx"></use>
147 | </svg>
148 |
149 |
150 | 151 | 152 | -------------------------------------------------------------------------------- /day1/font/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /day1/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /day1/font/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) --------------------------------------------------------------------------------