├── README.md ├── app.js ├── app.json ├── app.wxss ├── pages ├── Satin │ ├── satin.js │ ├── satin.json │ ├── satin.wxml │ └── satin.wxss ├── images │ ├── NetflixN.png │ ├── NetflixS.png │ ├── cm2_icn_musician_night.png │ ├── imageN.png │ ├── imageS.png │ ├── voiceN.png │ ├── voiceS.png │ ├── youtubeN.png │ └── youtubeS.png ├── picture │ ├── picture.js │ ├── picture.json │ ├── picture.wxml │ ├── picture.wxss │ ├── previewImage.js │ ├── previewImage.json │ └── previewImage.wxml ├── voice │ ├── voice.js │ ├── voice.json │ ├── voice.wxml │ └── voice.wxss └── voide │ ├── voide.js │ ├── voide.json │ ├── voide.wxml │ └── voide.wxss └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # bdj-wechat 2 | 个精简版的百思不得姐微信小程序，包括段子，图片，音频，视频，四个模块，带来完美娱乐体验。scroll-view实现下拉刷新上拉加载；响应式数据绑定系统，数据从逻辑层流入到视图层。 3 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | console.log('App Launch') 4 | 5 | wx.getSystemInfo({ 6 | success: function(res) { 7 | 8 | console.log(res.windowHeight) 9 | 10 | } 11 | }) 12 | }, 13 | onShow: function () { 14 | console.log('App Show') 15 | }, 16 | onHide: function () { 17 | console.log('App Hide') 18 | }, 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/Satin/satin", 4 | "pages/picture/picture", 5 | "pages/voide/voide", 6 | "pages/voice/voice", 7 | "pages/picture/previewImage" 8 | ], 9 | "tabBar": { 10 | "color": "#666", 11 | "selectedColor": "red", 12 | "borderStyle": "white", 13 | "backgroundColor": "#fafafa", 14 | "list": [{ 15 | "pagePath": "pages/Satin/satin", 16 | "iconPath": "pages/images/NetflixN.png", 17 | "selectedIconPath": "pages/images/NetflixS.png", 18 | "text": "段子" 19 | }, 20 | { 21 | "pagePath": "pages/picture/picture", 22 | "iconPath": "pages/images/imageN.png", 23 | "selectedIconPath": "pages/images/imageS.png", 24 | "text": "图片" 25 | }, 26 | { 27 | "pagePath": "pages/voide/voide", 28 | "iconPath": "pages/images/youtubeN.png", 29 | "selectedIconPath": "pages/images/youtubeS.png", 30 | "text": "视频" 31 | }, 32 | { 33 | "pagePath": "pages/voice/voice", 34 | "iconPath": "pages/images/voiceN.png", 35 | "selectedIconPath": "pages/images/voiceS.png", 36 | "text": "声音" 37 | }] 38 | }, 39 | "window":{ 40 | "backgroundTextStyle":"light", 41 | "navigationBarBackgroundColor": "#000", 42 | "navigationBarTextStyle":"#fff", 43 | "navigationBarTitleText": "WeChat" 44 | }, 45 | "networkTimeout": { 46 | "request": 10000, 47 | "downloadFile": 10000 48 | }, 49 | "debug": false 50 | 51 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/app.wxss -------------------------------------------------------------------------------- /pages/Satin/satin.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | satins:[], 5 | toast2Hidden:true, 6 | 7 | 8 | hidden1:false, 9 | page: 1, 10 | size: 20, 11 | hasMore:true, 12 | hasRefesh:false 13 | 14 | 15 | }, 16 | toast2Change:function(){ 17 | 18 | this.setData({ 19 | toast2Hidden:true 20 | 21 | }) 22 | }, 23 | //刷新处理 24 | refesh: function(e) { 25 | console.log('dddd'); 26 | 27 | 28 | 29 | var that = this; 30 | wx.request({ 31 | url: 'https://route.showapi.com/255-1', 32 | data: { 33 | page: '1' , 34 | showapi_appid: '19791', 35 | type:'29', 36 | showapi_sign:'1685dd5bd4c0a3c6af5b9da508985964' 37 | }, 38 | method: 'GET', 39 | header: { 40 | 'Content-Type': 'application/json' 41 | }, 42 | success: function(res) { 43 | // var data=res.data 44 | if(res.data.showapi_res_code == 0){ 45 | that.setData({ 46 | satins:res.data.showapi_res_body.pagebean.contentlist, 47 | hidden1: true, 48 | page:1, 49 | hasRefesh:false, 50 | }) 51 | }else{ 52 | that.setData({ 53 | toast2Hidden:false, 54 | msg:res.data.showapi_res_error, 55 | 56 | }) 57 | } 58 | } 59 | }) 60 | 61 | 62 | 63 | 64 | }, 65 | loadMore: function(e) { 66 | console.log('ccc'); 67 | }, 68 | onLoad:function(options){ 69 | // 页面初始化 options为页面跳转所带来的参数 70 | var that = this; 71 | 72 | wx.request({ 73 | url: 'https://route.showapi.com/255-1', 74 | data: { 75 | page: '1' , 76 | showapi_appid: '19791', 77 | type:'29', 78 | showapi_sign:'B58856BFE61637D01C9EBDE5B80E1279' 79 | }, 80 | method: 'GET', 81 | header: { 82 | 'Content-Type': 'application/json' 83 | }, 84 | success: function(res) { 85 | console.log(res.data) 86 | if(res.data.showapi_res_code == 0){ 87 | that.setData({ 88 | hidden1: true, 89 | satins:res.data.showapi_res_body.pagebean.contentlist 90 | }) 91 | }else{ 92 | that.setData({ 93 | toast2Hidden:false, 94 | msg:res.data.showapi_res_error, 95 | }) 96 | } 97 | } 98 | }) 99 | }, 100 | onReady:function(){ 101 | // 页面渲染完成 102 | }, 103 | onShow:function(){ 104 | // 页面显示 105 | }, 106 | onHide:function(){ 107 | // 页面隐藏 108 | }, 109 | onUnload:function(){ 110 | // 页面关闭 111 | } 112 | }) 113 | 114 | -------------------------------------------------------------------------------- /pages/Satin/satin.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "navigationBarTitleText": "段子" 4 | } -------------------------------------------------------------------------------- /pages/Satin/satin.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {{satin.name}} 25 | 26 | 27 | {{satin.create_time}} 28 | 29 | 30 | 31 | 32 | 33 | {{satin.text}} 34 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /pages/Satin/satin.wxss: -------------------------------------------------------------------------------- 1 | 2 | /*.satin-item{ 3 | 4 | }*/ 5 | 6 | .container{ 7 | font-family: "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif; 8 | font-size: 14px; 9 | } 10 | .satin-userinfo{ 11 | padding-top: 10px; 12 | padding-left: 10px; 13 | padding-right: 10px; 14 | display: flex; 15 | } 16 | .satin-image{ 17 | width: 40px; 18 | } 19 | .satin-image image{ 20 | width: 40px; 21 | height: 40px; 22 | border-radius:20px; 23 | } 24 | 25 | .satin-info { 26 | padding-left: 10px; 27 | } 28 | .satin-content { 29 | padding: 10px; 30 | } 31 | 32 | .satin-clearance{ 33 | width: 100%; 34 | height: 10px; 35 | background-color: #f2f2f2; 36 | 37 | 38 | } 39 | 40 | .satin-year{ 41 | font-size: 10px; 42 | color: rgb(232, 232, 232); 43 | 44 | } 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /pages/images/NetflixN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/NetflixN.png -------------------------------------------------------------------------------- /pages/images/NetflixS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/NetflixS.png -------------------------------------------------------------------------------- /pages/images/cm2_icn_musician_night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/cm2_icn_musician_night.png -------------------------------------------------------------------------------- /pages/images/imageN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/imageN.png -------------------------------------------------------------------------------- /pages/images/imageS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/imageS.png -------------------------------------------------------------------------------- /pages/images/voiceN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/voiceN.png -------------------------------------------------------------------------------- /pages/images/voiceS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/voiceS.png -------------------------------------------------------------------------------- /pages/images/youtubeN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/youtubeN.png -------------------------------------------------------------------------------- /pages/images/youtubeS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crane168/bdj-wechat/4d5d837ee5a376f1735686176c24be3cf4308a1d/pages/images/youtubeS.png -------------------------------------------------------------------------------- /pages/picture/picture.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | 8 | 9 | var that = this; 10 | 11 | wx.request({ 12 | url: 'https://route.showapi.com/255-1', 13 | data: { 14 | page: '1' , 15 | showapi_appid: '19791', 16 | type:'10', 17 | showapi_sign:'C7F91413C3738C7A9BA72DD3322FB1B1' 18 | }, 19 | method: 'GET', 20 | header: { 21 | 'Content-Type': 'application/json' 22 | }, 23 | success: function(res) { 24 | console.log(res.data) 25 | if(res.data.showapi_res_code == 0){ 26 | that.setData({ 27 | hidden1: true, 28 | satins:res.data.showapi_res_body.pagebean.contentlist 29 | }) 30 | }else{ 31 | that.setData({ 32 | toast2Hidden:false, 33 | msg:res.data.showapi_res_error, 34 | }) 35 | } 36 | } 37 | }) 38 | }, 39 | onReady:function(){ 40 | // 页面渲染完成 41 | }, 42 | onShow:function(){ 43 | // 页面显示 44 | }, 45 | onHide:function(){ 46 | // 页面隐藏 47 | }, 48 | onUnload:function(){ 49 | // 页面关闭 50 | }, 51 | 52 | loadMore:function(){ 53 | console.log('aaa'); 54 | }, 55 | refesh:function(){ 56 | console.log('bbb'); 57 | }, 58 | 59 | viewDetail:function(e ){ 60 | 61 | var ds = e.currentTarget.dataset; 62 | wx.navigateTo({ 63 | url: '../picture/previewImage?title='+ ds.title 64 | }) 65 | }, 66 | }) -------------------------------------------------------------------------------- /pages/picture/picture.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "navigationBarTitleText": "图片" 4 | 5 | } -------------------------------------------------------------------------------- /pages/picture/picture.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {{satin.name}} 21 | 22 | 23 | {{satin.create_time}} 24 | 25 | 26 | 27 | 28 | 29 | {{satin.text}} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /pages/picture/picture.wxss: -------------------------------------------------------------------------------- 1 | 2 | .container{ 3 | font-family: "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif; 4 | font-size: 14px; 5 | } 6 | .satin-userinfo{ 7 | padding-top: 10px; 8 | padding-left: 10px; 9 | padding-right: 10px; 10 | display: flex; 11 | } 12 | .satin-image{ 13 | width: 40px; 14 | } 15 | .satin-image image{ 16 | width: 40px; 17 | height: 40px; 18 | border-radius:20px; 19 | } 20 | 21 | .satin-info { 22 | padding-left: 10px; 23 | } 24 | .satin-content { 25 | padding: 10px; 26 | } 27 | 28 | .satin-clearance{ 29 | width: 100%; 30 | height: 10px; 31 | background-color: #f2f2f2; 32 | 33 | 34 | } 35 | 36 | .satin-year{ 37 | font-size: 10px; 38 | color: rgb(232, 232, 232); 39 | 40 | } 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /pages/picture/previewImage.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | text:"Page detail", 4 | url: '', 5 | height: 0, 6 | width: 0, 7 | loadingHidden: false 8 | }, 9 | onLoad:function(options){ 10 | // 页面初始化 options为页面跳转所带来的参数 11 | 12 | 13 | 14 | var img=new Image(); 15 | img.src=options.title; 16 | 17 | 18 | console.log(img.height) 19 | 20 | this.setData({ 21 | imageStr: options.title, 22 | height: img.height, 23 | loadingHidden: true 24 | 25 | }) 26 | }, 27 | onReady:function(){ 28 | // 页面渲染完成 29 | }, 30 | onShow:function(){ 31 | // 页面显示 32 | }, 33 | onHide:function(){ 34 | // 页面隐藏 35 | }, 36 | onUnload:function(){ 37 | // 页面关闭 38 | } 39 | }) 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /pages/picture/previewImage.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/picture/previewImage.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /pages/voice/voice.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | 8 | 9 | var that = this; 10 | 11 | wx.request({ 12 | url: 'https://route.showapi.com/255-1', 13 | data: { 14 | page: '1' , 15 | showapi_appid: '19791', 16 | type:'31', 17 | showapi_sign:'BAFEDEB29FC86D76D329B00415AC50D8' 18 | }, 19 | method: 'GET', 20 | header: { 21 | 'Content-Type': 'application/json' 22 | }, 23 | success: function(res) { 24 | console.log(res.data) 25 | if(res.data.showapi_res_code == 0){ 26 | that.setData({ 27 | hidden1: true, 28 | satins:res.data.showapi_res_body.pagebean.contentlist 29 | }) 30 | }else{ 31 | that.setData({ 32 | toast2Hidden:false, 33 | msg:res.data.showapi_res_error, 34 | }) 35 | } 36 | } 37 | }) 38 | }, 39 | onReady:function(){ 40 | // 页面渲染完成 41 | }, 42 | onShow:function(){ 43 | // 页面显示 44 | }, 45 | onHide:function(){ 46 | // 页面隐藏 47 | }, 48 | onUnload:function(){ 49 | // 页面关闭 50 | }, 51 | 52 | loadMore:function(){ 53 | console.log('aaa'); 54 | }, 55 | refesh:function(){ 56 | console.log('bbb'); 57 | }, 58 | 59 | 60 | playVoice:function(e){ 61 | wx.playBackgroundAudio({ 62 | dataUrl: e.currentTarget.dataset.voiceuri 63 | }) 64 | } 65 | }) -------------------------------------------------------------------------------- /pages/voice/voice.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText" : "声音" 3 | } -------------------------------------------------------------------------------- /pages/voice/voice.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {{satin.name}} 25 | 26 | 27 | {{satin.create_time}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {{satin.text}} 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /pages/voice/voice.wxss: -------------------------------------------------------------------------------- 1 | 2 | /*.satin-item{ 3 | 4 | }*/ 5 | 6 | 7 | .container{ 8 | display: flex; 9 | font-family: "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif; 10 | font-size: 14px; 11 | } 12 | .satin-userinfo{ 13 | padding-top: 10px; 14 | padding-left: 10px; 15 | padding-right: 10px; 16 | display: flex; 17 | } 18 | .satin-image{ 19 | width: 40px; 20 | } 21 | .satin-image image{ 22 | width: 40px; 23 | height: 40px; 24 | border-radius:20px; 25 | } 26 | 27 | .satin-info { 28 | display: flex; 29 | padding-left: 10px; 30 | } 31 | .satin-content { 32 | display: flex; 33 | padding: 10px; 34 | } 35 | 36 | .satin-clearance{ 37 | display: flex; 38 | width: 100%; 39 | height: 10px; 40 | 41 | background-color: #f2f2f2; 42 | 43 | 44 | } 45 | 46 | .satin-year{ 47 | font-size: 10px; 48 | color: rgb(232, 232, 232); 49 | 50 | } 51 | 52 | /*浮动在图片上的view样式*/ 53 | 54 | 55 | .flexView{ 56 | display: flex; 57 | justify-content: center; 58 | align-items: center; 59 | width: 100%; 60 | height: 80rpx; 61 | /*position: absolute;*/ 62 | z-index: 2; 63 | bottom: 80px; 64 | } 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /pages/voide/voide.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | 8 | 9 | var that = this; 10 | 11 | wx.request({ 12 | url: 'https://route.showapi.com/255-1', 13 | data: { 14 | page: '1' , 15 | showapi_appid: '19791', 16 | type:'41', 17 | showapi_sign:'E052FB1176589FB2BF64F86B2AEE0A16' 18 | }, 19 | method: 'GET', 20 | header: { 21 | 'Content-Type': 'application/json' 22 | }, 23 | success: function(res) { 24 | console.log(res.data) 25 | if(res.data.showapi_res_code == 0){ 26 | that.setData({ 27 | hidden1: true, 28 | satins:res.data.showapi_res_body.pagebean.contentlist 29 | }) 30 | }else{ 31 | that.setData({ 32 | toast2Hidden:false, 33 | msg:res.data.showapi_res_error, 34 | }) 35 | } 36 | } 37 | }) 38 | }, 39 | onReady:function(){ 40 | // 页面渲染完成 41 | }, 42 | onShow:function(){ 43 | // 页面显示 44 | }, 45 | onHide:function(){ 46 | // 页面隐藏 47 | }, 48 | onUnload:function(){ 49 | // 页面关闭 50 | }, 51 | 52 | loadMore:function(){ 53 | console.log('aaa'); 54 | }, 55 | refesh:function(){ 56 | console.log('bbb'); 57 | }, 58 | 59 | viewDetail:function(e ){ 60 | 61 | var ds = e.currentTarget.dataset; 62 | wx.navigateTo({ 63 | url: '../picture/previewImage?title='+ ds.title 64 | }) 65 | }, 66 | }) -------------------------------------------------------------------------------- /pages/voide/voide.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "视频" 3 | } -------------------------------------------------------------------------------- /pages/voide/voide.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {{satin.name}} 21 | 22 | 23 | {{satin.create_time}} 24 | 25 | 26 | 27 | 28 | 29 | {{satin.text}} 30 | 31 | 32 | 33 | 34 | 35 | 37 | 38 | 39 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /pages/voide/voide.wxss: -------------------------------------------------------------------------------- 1 | 2 | .container{ 3 | font-family: "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif; 4 | font-size: 14px; 5 | } 6 | .satin-userinfo{ 7 | padding-top: 10px; 8 | padding-left: 10px; 9 | padding-right: 10px; 10 | display: flex; 11 | } 12 | .satin-image{ 13 | width: 40px; 14 | } 15 | .satin-image image{ 16 | width: 40px; 17 | height: 40px; 18 | border-radius:20px; 19 | } 20 | 21 | .satin-info { 22 | padding-left: 10px; 23 | } 24 | .satin-content { 25 | padding: 10px; 26 | } 27 | 28 | .satin-clearance{ 29 | width: 100%; 30 | height: 10px; 31 | background-color: #f2f2f2; 32 | 33 | 34 | } 35 | 36 | .satin-year{ 37 | font-size: 10px; 38 | color: rgb(232, 232, 232); 39 | 40 | } 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | --------------------------------------------------------------------------------