├── README.md ├── app.js ├── app.json ├── app.wxss ├── image ├── ic_about_blue.png ├── ic_about_gray.png ├── ic_gif_blue.png ├── ic_gif_gray.png ├── ic_joke_blue.png ├── ic_joke_gray.png └── loading.gif ├── pages ├── about │ ├── about.js │ ├── about.json │ ├── about.wxml │ └── about.wxss ├── common │ └── common.wxml ├── joke │ ├── joke.js │ ├── joke.json │ ├── joke.wxml │ └── joke.wxss └── picture │ ├── picture.js │ ├── picture.json │ ├── picture.wxml │ └── picture.wxss ├── project.config.json ├── screenshot ├── joke.png └── picture.png └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序开发项目——笑话大全 2 | 3 | ###此项目是学习完微信小程序后实现的一个demo，采用[聚合数据](https://www.juhe.cn/)的免费api获取最新的文本笑话和趣图（图片和gif图） 4 | 5 | 6 | 7 | 8 | ![](https://github.com/zhijieeeeee/wechat-app-joke/blob/master/screenshot/joke.png) 9 | ![](https://github.com/zhijieeeeee/wechat-app-joke/blob/master/screenshot/picture.png) -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | globalData:{ 4 | appkey:'c39621ea5b825547001f9858a643f182', 5 | pagesize:10, 6 | } 7 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/joke/joke", 4 | "pages/picture/picture", 5 | "pages/about/about" 6 | ], 7 | "window":{ 8 | "backgroundTextStyle":"light", 9 | "navigationBarBackgroundColor": "#268dcd", 10 | "navigationBarTitleText": "开心一刻", 11 | "navigationBarTextStyle":"white", 12 | "enablePullDownRefresh":true 13 | }, 14 | "tabBar": { 15 | "color": "#000000", 16 | "selectedColor": "#268dcd", 17 | "borderStyle": "white", 18 | "backgroundColor": "#ffffff", 19 | "list": [ 20 | { 21 | "pagePath": "pages/joke/joke", 22 | "text": "笑话", 23 | "iconPath": "image/ic_joke_gray.png", 24 | "selectedIconPath": "image/ic_joke_blue.png" 25 | }, 26 | { 27 | "pagePath": "pages/picture/picture", 28 | "text": "趣图", 29 | "iconPath": "image/ic_gif_gray.png", 30 | "selectedIconPath": "image/ic_gif_blue.png" 31 | }, 32 | { 33 | "pagePath": "pages/about/about", 34 | "text": "关于", 35 | "iconPath": "image/ic_about_gray.png", 36 | "selectedIconPath": "image/ic_about_blue.png" 37 | } 38 | 39 | ] 40 | }, 41 | "netWorkTimeout": { 42 | "request": 10000, 43 | "connectSocket": 10000, 44 | "uploadFile": 10000, 45 | "downloadFile": 10000 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | flex: 1; 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | page{ 9 | height: 100%; 10 | } 11 | 12 | .page-body { 13 | display: flex; 14 | flex: 1; 15 | flex-direction: column; 16 | height: 100%; 17 | } 18 | 19 | 20 | .loading-view{ 21 | display: flex; 22 | flex-direction: row; 23 | justify-content: center; 24 | align-items: center; 25 | padding: 10px; 26 | } 27 | 28 | .item-view{ 29 | padding: 10px; 30 | display: flex; 31 | flex-direction: column; 32 | border-top: 1px solid #DEDEDE; 33 | border-left: 1px solid #DEDEDE; 34 | box-shadow: 2px 2px 2px #C7C7C7; 35 | margin: 10px; 36 | border-radius: 5px; 37 | } 38 | 39 | .item-view .content{ 40 | color: black; 41 | } 42 | 43 | .item-view .date{ 44 | color: grey; 45 | margin-top: 10px; 46 | } 47 | 48 | .item-view image{ 49 | width: 100%; 50 | height: 400rpx; 51 | margin-top: 10px; 52 | } 53 | -------------------------------------------------------------------------------- /image/ic_about_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/ic_about_blue.png -------------------------------------------------------------------------------- /image/ic_about_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/ic_about_gray.png -------------------------------------------------------------------------------- /image/ic_gif_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/ic_gif_blue.png -------------------------------------------------------------------------------- /image/ic_gif_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/ic_gif_gray.png -------------------------------------------------------------------------------- /image/ic_joke_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/ic_joke_blue.png -------------------------------------------------------------------------------- /image/ic_joke_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/ic_joke_gray.png -------------------------------------------------------------------------------- /image/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhijieeeeee/wechat-app-joke/8e3a3da40a9f9c7a02daec1f2a5aa9ebd2819f2b/image/loading.gif -------------------------------------------------------------------------------- /pages/about/about.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/about/about.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "关于我" 3 | } -------------------------------------------------------------------------------- /pages/about/about.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GitHub: 8 | https://github.com/zhijieeeeee 9 | 10 | 11 | CSDN: 12 | http://blog.csdn.net/u013155862 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /pages/about/about.wxss: -------------------------------------------------------------------------------- 1 | .container{ 2 | padding:10px; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | .container image{ 9 | margin-top: 40px; 10 | width: 150px; 11 | height: 150px; 12 | } 13 | 14 | .container .about{ 15 | margin: 10px; 16 | word-break:break-all; 17 | } 18 | 19 | .container .website{ 20 | margin-top: 40px; 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | 25 | .container .website .item{ 26 | display: flex; 27 | flex-direction: row; 28 | margin-bottom: 10px; 29 | } 30 | 31 | .github{ 32 | color: #268dcd; 33 | font-size: 20px; 34 | } -------------------------------------------------------------------------------- /pages/common/common.wxml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /pages/joke/joke.js: -------------------------------------------------------------------------------- 1 | var http = require( '../../utils/util' ) 2 | var app = getApp() 3 | var url = 'http://japi.juhe.cn/joke/content/text.from' 4 | 5 | Page( { 6 | data: { 7 | page: 1, 8 | loadingHide: false, 9 | hideFooter: true, 10 | jokeList: [], 11 | }, 12 | onLoad: function( options ) { 13 | // 页面初始化 options为页面跳转所带来的参数 14 | var that = this 15 | //请求笑话列表 16 | http.request( url, this.data.page, function( dataJson ) { 17 | that.setData( { 18 | jokeList: that.data.jokeList.concat( dataJson.result.data ), 19 | loadingHide: true 20 | }) 21 | }, function( reason ) { 22 | console.log( reason ) 23 | that.setData( { 24 | loadingHide: true 25 | }) 26 | }) 27 | 28 | }, 29 | 30 | /** 31 | * 下拉刷新 32 | */ 33 | onPullDownRefresh() { 34 | // var that = this 35 | // this.setData( { 36 | // page: 1, 37 | // jokeList:[] 38 | // }) 39 | // http.request( url, this.data.page, function( dataJson ) { 40 | // that.setData( { 41 | // jokeList: that.data.jokeList.concat( dataJson.result.data ) 42 | // }) 43 | // wx.stopPullDownRefresh() 44 | // }, function( reason ) { 45 | // console.log( reason ) 46 | // wx.stopPullDownRefresh() 47 | // }) 48 | }, 49 | 50 | /** 51 | * 滑动到底部加载更多 52 | */ 53 | loadMore() { 54 | //请求笑话列表 55 | var that = this 56 | //显示footer 57 | this.setData( { 58 | hideFooter: !this.data.hideFooter 59 | }) 60 | //请求笑话列表 61 | http.request( url, ++this.data.page, function( dataJson ) { 62 | that.setData( { 63 | jokeList: that.data.jokeList.concat( dataJson.result.data ), 64 | hideFooter: !that.data.hideFooter 65 | }) 66 | 67 | }, function( reason ) { 68 | console.log( reason ) 69 | that.setData( { 70 | hideFooter: !that.data.hideFooter 71 | }) 72 | }) 73 | 74 | 75 | }, 76 | 77 | }) -------------------------------------------------------------------------------- /pages/joke/joke.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "笑话大全" 3 | } -------------------------------------------------------------------------------- /pages/joke/joke.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |