├── .gitignore ├── pages ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js ├── my │ ├── index.wxml │ ├── index.wxss │ └── index.js ├── cinema │ ├── index.wxml │ ├── index.js │ └── index.wxss └── home │ ├── index.wxml │ ├── index.js │ └── index.wxss ├── screenshots ├── 01.png ├── 02.png └── 03.png ├── image ├── icon_normal.png └── icon_pressed.png ├── style └── layout.wxss ├── app.wxss ├── utils └── util.js ├── README.md ├── app.js └── app.json /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /screenshots/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangmingjob/weapp-weipiao/HEAD/screenshots/01.png -------------------------------------------------------------------------------- /screenshots/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangmingjob/weapp-weipiao/HEAD/screenshots/02.png -------------------------------------------------------------------------------- /screenshots/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangmingjob/weapp-weipiao/HEAD/screenshots/03.png -------------------------------------------------------------------------------- /image/icon_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangmingjob/weapp-weipiao/HEAD/image/icon_normal.png -------------------------------------------------------------------------------- /image/icon_pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangmingjob/weapp-weipiao/HEAD/image/icon_pressed.png -------------------------------------------------------------------------------- /style/layout.wxss: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: flex; 3 | } 4 | 5 | /*l_auto:占用剩下的*/ 6 | .flex_auto { 7 | flex: 1; 8 | } 9 | -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | @import "./style/layout.wxss"; 3 | 4 | .container { 5 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: space-between; 9 | box-sizing: border-box; 10 | } 11 | 12 | page { 13 | background-color: #F2f2f2; 14 | } 15 | -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /pages/my/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{userInfo.nickName}} 6 | 7 | 8 | {{source}} 9 | 10 | 11 | -------------------------------------------------------------------------------- /pages/my/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .container { 3 | padding: 10px 0px; 4 | background-color: #F2f2f2; 5 | } 6 | .userinfo { 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | } 11 | .userinfo-avatar { 12 | width: 128rpx; 13 | height: 128rpx; 14 | margin: 20rpx; 15 | border-radius: 50%; 16 | } 17 | .userinfo-nickname { 18 | color: #aaa; 19 | } 20 | .info { 21 | margin-top: 50px; 22 | text-align: center; 23 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /pages/cinema/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.title}} 7 | {{item.subTitle}} 8 | {{item.tag}} 9 | 10 | 11 | {{item.price}} 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /pages/my/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page( { 5 | data: { 6 | userInfo: {}, 7 | source: 'github.com/wangmingjob/weapp-weipiao' 8 | }, 9 | //事件处理函数 10 | bindViewTap: function() { 11 | wx.navigateTo( { 12 | url: '../logs/logs' 13 | }) 14 | }, 15 | 16 | onLoad: function() { 17 | var that = this 18 | //调用应用实例的方法获取全局数据 19 | app.getUserInfo( function( userInfo ) { 20 | //更新数据 21 | that.setData( { 22 | userInfo: userInfo 23 | }) 24 | }) 25 | }, 26 | 27 | onReady: function () { 28 | wx.setNavigationBarTitle({ 29 | title: '我的' 30 | }) 31 | } 32 | }) 33 | -------------------------------------------------------------------------------- /pages/cinema/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | title: '' 4 | }, 5 | //事件处理函数 6 | onLoad: function (options) { 7 | var that = this 8 | 9 | //playingList 10 | wx.request({ 11 | url: 'http://json.bmbstack.com/cinemaList', 12 | method: 'GET', 13 | data: {}, 14 | header: { 15 | 'Accept': 'application/json' 16 | }, 17 | success: function(res) { 18 | console.log(res.data) 19 | that.data.items = res.data 20 | } 21 | }) 22 | }, 23 | onReady: function () { 24 | wx.setNavigationBarTitle({ 25 | title: '电影院' 26 | }) 27 | }, 28 | }) 29 | -------------------------------------------------------------------------------- /pages/cinema/index.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: #F2f2f2; 3 | } 4 | 5 | .item { 6 | padding: 10px; 7 | background-color: #fff; 8 | color: #787878; 9 | border-top: 1px solid #eaeaea; 10 | border-bottom: 1px solid #eaeaea; 11 | } 12 | 13 | .item_left { 14 | flex: 1; 15 | margin-left: 10px; 16 | padding-top: 5px; 17 | overflow: hidden; 18 | } 19 | 20 | .item_left .title { 21 | font-size: 16px; 22 | color: #333; 23 | } 24 | .item_left .sub_title { 25 | font-size: 14px; 26 | color: #666; 27 | margin: 2px 0px; 28 | } 29 | 30 | .item_right .tag { 31 | margin-top: 30px; 32 | border: 1px solid #29cc6d; 33 | border-radius: 2px; 34 | color: #29cc6d; 35 | display: inline-block; 36 | padding: 2px 4px; 37 | font-size: 12px; 38 | line-height: 16px; 39 | text-align: center; 40 | } 41 | 42 | .item_right .price { 43 | font-size: 12px; 44 | color: #cf616a; 45 | } 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 说明： 2 | 微信推出小程序，操作原理类似React Native,ionic framework 3 | 现实现一个小程序版微票 4 | 5 | 使用的数据接口: 6 | 7 | - http://json.bmbstack.com/bannerList 8 | - http://json.bmbstack.com/playingList 9 | - http://json.bmbstack.com/cinemaList 10 | 11 | ### 目录结构： 12 | - style — 存放独立wxcss文件，可import引入 13 | - image — 存放项目图片 14 | - pages — 存放项目页面相关文件 15 | - service —存放service文件，可require引入 16 | - utils — 存放utils文件，可require引入 17 | 18 | ### 项目截图: 19 | 20 | 21 | 22 | 23 | 24 | ### 开发环境： 25 | 微信web开发者工具 v0.9.092300 26 | 27 | ### 项目地址： 28 | https://github.com/wangmingjob/weapp-weipiao 29 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | console.log('App Launch') 5 | //调用API从本地缓存中获取数据 6 | var logs = wx.getStorageSync('logs') || [] 7 | logs.unshift(Date.now()) 8 | wx.setStorageSync('logs', logs) 9 | }, 10 | getUserInfo:function(cb){ 11 | var that = this 12 | if(this.globalData.userInfo){ 13 | typeof cb == "function" && cb(this.globalData.userInfo) 14 | }else{ 15 | //调用登录接口 16 | wx.login({ 17 | success: function () { 18 | wx.getUserInfo({ 19 | success: function (res) { 20 | that.globalData.userInfo = res.userInfo 21 | typeof cb == "function" && cb(that.globalData.userInfo) 22 | } 23 | }) 24 | } 25 | }) 26 | } 27 | }, 28 | onShow: function () { 29 | console.log('App Show') 30 | }, 31 | onHide: function () { 32 | console.log('App Hide') 33 | }, 34 | globalData:{ 35 | userInfo:null 36 | } 37 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/home/index", 4 | "pages/cinema/index", 5 | "pages/my/index", 6 | "pages/logs/logs" 7 | ], 8 | "window":{ 9 | "backgroundTextStyle":"white", 10 | "navigationBarTextStyle": "black", 11 | "navigationBarTitleText": "微票", 12 | "navigationBarBackgroundColor": "#FFFFFF", 13 | "backgroundColor": "#F2f2f2", 14 | "enablePullDownRefresh": true 15 | }, 16 | "tabBar": { 17 | "color": "#dddddd", 18 | "selectedColor": "#3cc51f", 19 | "borderStyle": "white", 20 | "backgroundColor": "#ffffff", 21 | "list": [{ 22 | "pagePath": "pages/home/index", 23 | "iconPath": "image/icon_normal.png", 24 | "selectedIconPath": "image/icon_pressed.png", 25 | "text": "上映" 26 | }, { 27 | "pagePath": "pages/cinema/index", 28 | "iconPath": "image/icon_normal.png", 29 | "selectedIconPath": "image/icon_pressed.png", 30 | "text": "影院" 31 | }, { 32 | "pagePath": "pages/my/index", 33 | "iconPath": "image/icon_normal.png", 34 | "selectedIconPath": "image/icon_pressed.png", 35 | "text": "我的" 36 | }] 37 | }, 38 | "debug": true 39 | } 40 | -------------------------------------------------------------------------------- /pages/home/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 正在上映 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | {{item.title}} 26 | {{item.subTitle}} 27 | {{item.actor}} 28 | 29 | 30 | {{item.score}} 31 | {{item.action}} 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /pages/home/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page( { 5 | data: { 6 | indicatorDots: true, 7 | vertical: false, 8 | autoplay: true, 9 | interval: 3000, 10 | duration: 1200, 11 | }, 12 | 13 | //事件处理函数 14 | bindViewTap: function() { 15 | wx.navigateTo( { 16 | url: '../logs/logs' 17 | }) 18 | }, 19 | swiperchange: function(e) { 20 | //FIXME: 当前页码 21 | //console.log(e.detail.current) 22 | }, 23 | 24 | onLoad: function() { 25 | console.log( 'onLoad' ) 26 | var that = this 27 | //调用应用实例的方法获取全局数据 28 | app.getUserInfo( function( userInfo ) { 29 | //更新数据 30 | that.setData( { 31 | userInfo: userInfo 32 | }) 33 | }) 34 | 35 | //playingList 36 | wx.request({ 37 | url: 'http://json.bmbstack.com/playingList', 38 | method: 'GET', 39 | data: {}, 40 | header: { 41 | 'Accept': 'application/json' 42 | }, 43 | success: function(res) { 44 | console.log(res.data) 45 | that.data.items = res.data 46 | } 47 | }) 48 | 49 | //bannerList 50 | wx.request({ 51 | url: 'http://json.bmbstack.com/bannerList', 52 | method: 'GET', 53 | data: {}, 54 | header: { 55 | 'Accept': 'application/json' 56 | }, 57 | success: function(res) { 58 | console.log(res.data) 59 | that.data.images = res.data 60 | } 61 | }) 62 | 63 | }, 64 | go: function(event) { 65 | wx.navigateTo({ 66 | url: '../list/index?type=' + event.currentTarget.dataset.type 67 | }) 68 | } 69 | }) 70 | -------------------------------------------------------------------------------- /pages/home/index.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: #F2f2f2; 3 | } 4 | 5 | .swiper_box { 6 | width: 100%; 7 | height: 100px; 8 | } 9 | 10 | swiper-item image { 11 | width: 100%; 12 | height: 100px; 13 | display: inline-block; 14 | overflow: hidden; 15 | } 16 | 17 | view.text { 18 | display: flex; 19 | align-items: center; 20 | position: relative; 21 | padding: 10px 10px 10px 12px; 22 | font-size: 15px; 23 | color: #656565; 24 | } 25 | 26 | view.text:before { 27 | position: absolute; 28 | display: block; 29 | content: ' '; 30 | left: -5px; 31 | width: 2px; 32 | height: 100%; 33 | background-color: #09bb07; 34 | } 35 | 36 | .line_flag { 37 | width: 3px; 38 | height: 100%; 39 | height: 18px; 40 | display: inline-block; 41 | background-color: #09bb07; 42 | } 43 | 44 | view.text text { 45 | margin-left: 10px; 46 | line-height: 18px; 47 | } 48 | 49 | .item { 50 | padding: 10px; 51 | background-color: #fff; 52 | color: #787878; 53 | border-top: 1px solid #eaeaea; 54 | border-bottom: 1px solid #eaeaea; 55 | } 56 | 57 | .item image { 58 | display: block; 59 | width: 65px; 60 | height: 95px; 61 | } 62 | 63 | .item_middle { 64 | flex: 1; 65 | margin-left: 10px; 66 | padding-top: 5px; 67 | overflow: hidden; 68 | } 69 | 70 | .item_middle .title { 71 | font-size: 16px; 72 | color: #333; 73 | } 74 | .item_middle .sub_title { 75 | font-size: 14px; 76 | color: #666; 77 | margin: 2px 0px; 78 | } 79 | 80 | .item_middle .actor { 81 | font-size: 14px; 82 | color: #666; 83 | margin: 2px 0px; 84 | } 85 | 86 | .item_right .score { 87 | font-size: 12px; 88 | color: #cf616a; 89 | } 90 | 91 | .item_right .action { 92 | margin-top: 30px; 93 | border: 1px solid #29cc6d; 94 | border-radius: 2px; 95 | color: #29cc6d; 96 | display: inline-block; 97 | padding: 2px 4px; 98 | font-size: 12px; 99 | line-height: 16px; 100 | text-align: center; 101 | } --------------------------------------------------------------------------------