├── README.md ├── app.js ├── app.json ├── app.wxss ├── demo.png ├── fix.md ├── image ├── arrowright.png ├── fix │ ├── bgm01.png │ ├── bgm02.png │ ├── bgm03.png │ ├── bgm11.png │ ├── bgm12.png │ ├── bgm13.png │ ├── bgm14.png │ ├── bgm15.png │ └── scroll-view.png ├── icon64_appwx_logo.png ├── pause.png ├── play.png ├── plus.png ├── record.png ├── stop.png ├── trash.png ├── wechat.png └── wechatHL.png ├── page ├── API │ ├── animation │ │ ├── animation.js │ │ ├── animation.json │ │ ├── animation.wxml │ │ └── animation.wxss │ ├── background-audio │ │ ├── background-audio.js │ │ ├── background-audio.json │ │ ├── background-audio.wxml │ │ └── background-audio.wxss │ ├── canvas │ │ ├── canvas.js │ │ ├── canvas.json │ │ ├── canvas.wxml │ │ └── canvas.wxss │ ├── common │ │ ├── footer.wxml │ │ └── header.wxml │ ├── download-file │ │ ├── download-file.js │ │ ├── download-file.json │ │ ├── download-file.wxml │ │ └── download-file.wxss │ ├── file │ │ ├── file.js │ │ ├── file.json │ │ ├── file.wxml │ │ └── file.wxss │ ├── generate.sh │ ├── get-location │ │ ├── format-location.js │ │ ├── get-location.js │ │ ├── get-location.json │ │ ├── get-location.wxml │ │ └── get-location.wxss │ ├── get-network-type │ │ ├── get-network-type.js │ │ ├── get-network-type.json │ │ ├── get-network-type.wxml │ │ └── get-network-type.wxss │ ├── get-system-info │ │ ├── get-system-info.js │ │ ├── get-system-info.json │ │ ├── get-system-info.wxml │ │ └── get-system-info.wxss │ ├── get-user-info │ │ ├── get-user-info.js │ │ ├── get-user-info.json │ │ ├── get-user-info.wxml │ │ └── get-user-info.wxss │ ├── image │ │ ├── image.js │ │ ├── image.json │ │ ├── image.wxml │ │ └── image.wxss │ ├── index │ │ ├── index.js │ │ ├── index.wxml │ │ └── index.wxss │ ├── login │ │ ├── login.js │ │ ├── login.json │ │ ├── login.wxml │ │ └── login.wxss │ ├── navigation-bar-loading │ │ ├── navigation-bar-loading.js │ │ ├── navigation-bar-loading.json │ │ ├── navigation-bar-loading.wxml │ │ └── navigation-bar-loading.wxss │ ├── navigator │ │ ├── navigator.js │ │ ├── navigator.json │ │ ├── navigator.wxml │ │ └── navigator.wxss │ ├── on-accelerometer-change │ │ ├── on-accelerometer-change.js │ │ ├── on-accelerometer-change.json │ │ ├── on-accelerometer-change.wxml │ │ └── on-accelerometer-change.wxss │ ├── on-compass-change │ │ ├── on-compass-change.js │ │ ├── on-compass-change.json │ │ ├── on-compass-change.wxml │ │ └── on-compass-change.wxss │ ├── open-location │ │ ├── open-location.js │ │ ├── open-location.json │ │ ├── open-location.wxml │ │ └── open-location.wxss │ ├── pull-down-refresh │ │ ├── pull-down-refresh.js │ │ ├── pull-down-refresh.json │ │ ├── pull-down-refresh.wxml │ │ └── pull-down-refresh.wxss │ ├── request-payment │ │ ├── request-payment.js │ │ ├── request-payment.json │ │ ├── request-payment.wxml │ │ └── request-payment.wxss │ ├── request │ │ ├── request.js │ │ ├── request.json │ │ ├── request.wxml │ │ └── request.wxss │ ├── set-navigation-bar-title │ │ ├── set-navigation-bar-title.js │ │ ├── set-navigation-bar-title.json │ │ ├── set-navigation-bar-title.wxml │ │ └── set-navigation-bar-title.wxss │ ├── storage │ │ ├── storage.js │ │ ├── storage.json │ │ ├── storage.wxml │ │ └── storage.wxss │ ├── upload-file │ │ ├── upload-file.js │ │ ├── upload-file.json │ │ ├── upload-file.wxml │ │ └── upload-file.wxss │ ├── voice │ │ ├── voice.js │ │ ├── voice.json │ │ ├── voice.wxml │ │ └── voice.wxss │ └── web-socket │ │ ├── web-socket.js │ │ ├── web-socket.json │ │ ├── web-socket.wxml │ │ └── web-socket.wxss └── component │ ├── component-pages │ ├── wx-action-sheet │ │ ├── wx-action-sheet.js │ │ ├── wx-action-sheet.wxml │ │ └── wx-action-sheet.wxss │ ├── wx-audio │ │ ├── wx-audio.js │ │ └── wx-audio.wxml │ ├── wx-button │ │ ├── wx-button.js │ │ ├── wx-button.wxml │ │ └── wx-button.wxss │ ├── wx-checkbox │ │ ├── wx-checkbox.js │ │ ├── wx-checkbox.wxml │ │ └── wx-checkbox.wxss │ ├── wx-form │ │ ├── wx-form.js │ │ ├── wx-form.wxml │ │ └── wx-form.wxss │ ├── wx-icon │ │ ├── wx-icon.js │ │ ├── wx-icon.wxml │ │ └── wx-icon.wxss │ ├── wx-image │ │ ├── wx-image.js │ │ ├── wx-image.wxml │ │ └── wx-image.wxss │ ├── wx-input │ │ ├── wx-input.js │ │ ├── wx-input.wxml │ │ └── wx-input.wxss │ ├── wx-label │ │ ├── wx-label.js │ │ ├── wx-label.wxml │ │ └── wx-label.wxss │ ├── wx-mask │ │ ├── wx-mask.js │ │ └── wx-mask.wxml │ ├── wx-modal │ │ ├── wx-modal.js │ │ └── wx-modal.wxml │ ├── wx-navigator │ │ ├── navigate.js │ │ ├── navigate.wxml │ │ ├── redirect.js │ │ ├── redirect.wxml │ │ ├── wx-navigator.js │ │ ├── wx-navigator.wxml │ │ └── wx-navigator.wxss │ ├── wx-picker │ │ ├── wx-picker.js │ │ ├── wx-picker.wxml │ │ └── wx-picker.wxss │ ├── wx-progress │ │ ├── wx-progress.js │ │ ├── wx-progress.wxml │ │ └── wx-progress.wxss │ ├── wx-radio │ │ ├── wx-radio.js │ │ ├── wx-radio.wxml │ │ └── wx-radio.wxss │ ├── wx-scroll-view │ │ ├── wx-scroll-view.js │ │ ├── wx-scroll-view.wxml │ │ └── wx-scroll-view.wxss │ ├── wx-slide-tab │ │ ├── wx-slide-tab.js │ │ ├── wx-slide-tab.wxml │ │ └── wx-slide-tab.wxss │ ├── wx-slider │ │ ├── wx-slider.js │ │ └── wx-slider.wxml │ ├── wx-swiper │ │ ├── wx-swiper.js │ │ ├── wx-swiper.wxml │ │ └── wx-swiper.wxss │ ├── wx-switch │ │ ├── wx-switch.js │ │ └── wx-switch.wxml │ ├── wx-text │ │ ├── wx-text.js │ │ └── wx-text.wxml │ ├── wx-toast │ │ ├── wx-toast.js │ │ └── wx-toast.wxml │ ├── wx-video │ │ ├── wx-video.js │ │ └── wx-video.wxml │ └── wx-view │ │ ├── wx-view.js │ │ ├── wx-view.wxml │ │ └── wx-view.wxss │ ├── index.js │ ├── index.wxml │ ├── index.wxss │ ├── navigation-pages │ ├── controller │ │ ├── controller.js │ │ └── controller.wxml │ ├── form │ │ ├── form.js │ │ └── form.wxml │ ├── media │ │ ├── media.js │ │ └── media.wxml │ └── view │ │ ├── view.js │ │ └── view.wxml │ └── resources │ ├── arrow.png │ ├── kind │ ├── canvas.png │ ├── content.png │ ├── form.png │ ├── interact.png │ ├── map.png │ ├── media.png │ ├── nav.png │ └── view.png │ └── pic.jpg └── util └── util.js /README.md: -------------------------------------------------------------------------------- 1 | ## webApp-demo 2 | 3 | ![](./demo.png) 4 | 5 | 微信小程序 demo / 开发工具 / 文档资源 6 | 7 | 为了方便更新, 后续资源全部更新到 [wiki](https://github.com/xwartz/wechatApp-demo/wiki) 8 | 9 | 10 | ### 资源 11 | 12 | *官方已经提供了，无需破解了，具体看以下链接。* 13 | 14 | 官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474643026176 15 | 16 | 开发工具: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359 17 | 18 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | console.log('App Launch') 4 | }, 5 | onShow: function () { 6 | console.log('App Show') 7 | }, 8 | onHide: function () { 9 | console.log('App Hide') 10 | }, 11 | globalData: { 12 | hasLogin: false 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "page/component/index", 4 | "page/component/navigation-pages/controller/controller", 5 | "page/component/navigation-pages/form/form", 6 | "page/component/navigation-pages/media/media", 7 | "page/component/navigation-pages/view/view", 8 | "page/component/component-pages/wx-action-sheet/wx-action-sheet", 9 | "page/component/component-pages/wx-audio/wx-audio", 10 | "page/component/component-pages/wx-button/wx-button", 11 | "page/component/component-pages/wx-checkbox/wx-checkbox", 12 | "page/component/component-pages/wx-form/wx-form", 13 | "page/component/component-pages/wx-icon/wx-icon", 14 | "page/component/component-pages/wx-image/wx-image", 15 | "page/component/component-pages/wx-input/wx-input", 16 | "page/component/component-pages/wx-mask/wx-mask", 17 | "page/component/component-pages/wx-modal/wx-modal", 18 | "page/component/component-pages/wx-navigator/wx-navigator", 19 | "page/component/component-pages/wx-progress/wx-progress", 20 | "page/component/component-pages/wx-radio/wx-radio", 21 | "page/component/component-pages/wx-scroll-view/wx-scroll-view", 22 | "page/component/component-pages/wx-slider/wx-slider", 23 | "page/component/component-pages/wx-switch/wx-switch", 24 | "page/component/component-pages/wx-text/wx-text", 25 | "page/component/component-pages/wx-toast/wx-toast", 26 | "page/component/component-pages/wx-video/wx-video", 27 | "page/component/component-pages/wx-view/wx-view", 28 | "page/component/component-pages/wx-swiper/wx-swiper", 29 | "page/component/component-pages/wx-slide-tab/wx-slide-tab", 30 | "page/component/component-pages/wx-label/wx-label", 31 | "page/component/component-pages/wx-navigator/navigate", 32 | "page/component/component-pages/wx-navigator/redirect", 33 | "page/component/component-pages/wx-picker/wx-picker", 34 | 35 | "page/API/index/index", 36 | "page/API/storage/storage", 37 | 38 | "page/API/login/login", 39 | "page/API/get-user-info/get-user-info", 40 | "page/API/request-payment/request-payment", 41 | 42 | "page/API/set-navigation-bar-title/set-navigation-bar-title", 43 | "page/API/navigation-bar-loading/navigation-bar-loading", 44 | "page/API/navigator/navigator", 45 | "page/API/pull-down-refresh/pull-down-refresh", 46 | "page/API/animation/animation", 47 | 48 | "page/API/get-network-type/get-network-type", 49 | "page/API/get-system-info/get-system-info", 50 | "page/API/on-compass-change/on-compass-change", 51 | 52 | "page/API/request/request", 53 | "page/API/web-socket/web-socket", 54 | "page/API/upload-file/upload-file", 55 | "page/API/download-file/download-file", 56 | 57 | 58 | "page/API/image/image", 59 | "page/API/voice/voice", 60 | "page/API/file/file", 61 | "page/API/on-accelerometer-change/on-accelerometer-change", 62 | "page/API/canvas/canvas", 63 | "page/API/background-audio/background-audio", 64 | 65 | "page/API/get-location/get-location", 66 | "page/API/open-location/open-location" 67 | 68 | ], 69 | "window": { 70 | "navigationBarTextStyle": "black", 71 | "navigationBarTitleText": "小程序演示", 72 | "navigationBarBackgroundColor": "#fbf9fe", 73 | "backgroundColor": "#fbf9fe" 74 | }, 75 | "tabBar": { 76 | "color": "#dddddd", 77 | "selectedColor": "#3cc51f", 78 | "borderStyle": "black", 79 | "backgroundColor": "#ffffff", 80 | "list": [{ 81 | "pagePath": "page/component/index", 82 | "iconPath": "image/wechat.png", 83 | "selectedIconPath": "image/wechatHL.png", 84 | "text": "组件" 85 | }, { 86 | "pagePath": "page/API/index/index", 87 | "iconPath": "image/wechat.png", 88 | "selectedIconPath": "image/wechatHL.png", 89 | "text": "接口" 90 | }] 91 | }, 92 | "networkTimeout": { 93 | "request": 10000, 94 | "connectSocket": 10000, 95 | "uploadFile": 10000, 96 | "downloadFile": 10000 97 | }, 98 | "debug": true 99 | } 100 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #fbf9fe; 3 | height: 100%; 4 | } 5 | .container { 6 | display: flex; 7 | flex-direction: column; 8 | min-height: 100%; 9 | justify-content: space-between; 10 | } 11 | .page-header { 12 | display: flex; 13 | font-size: 32rpx; 14 | color: #aaa; 15 | justify-content: center; 16 | margin-top: 50rpx; 17 | } 18 | .page-header-text { 19 | padding: 20rpx 40rpx; 20 | border-bottom: 1px solid #ccc; 21 | } 22 | 23 | .page-body { 24 | width: 100%; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | flex-grow: 1; 29 | overflow-x: hidden; 30 | } 31 | .page-body-wrapper { 32 | margin-top: 100rpx; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | width: 100%; 37 | } 38 | .page-body-wrapper form { 39 | width: 100%; 40 | } 41 | .page-body-wording { 42 | text-align: center; 43 | padding: 200rpx 100rpx; 44 | } 45 | .page-body-info { 46 | display: flex; 47 | flex-direction: column; 48 | align-items: center; 49 | background-color: #fff; 50 | margin-bottom: 50rpx; 51 | width: 100%; 52 | padding: 50rpx 0 150rpx 0; 53 | } 54 | .page-body-title { 55 | margin-bottom: 100rpx; 56 | font-size: 32rpx; 57 | } 58 | .page-body-text { 59 | font-size: 30rpx; 60 | line-height: 26px; 61 | color: #ccc; 62 | } 63 | .page-body-text-small { 64 | font-size: 24rpx; 65 | color: #000; 66 | margin-bottom: 100rpx; 67 | } 68 | .page-body-form { 69 | width: 100%; 70 | background-color: #fff; 71 | display: flex; 72 | flex-direction: column; 73 | width: 100%; 74 | border: 1px solid #eee; 75 | } 76 | .page-body-form-item { 77 | display: flex; 78 | align-items: center; 79 | margin-left: 10rpx; 80 | border-bottom: 1px solid #eee; 81 | height: 80rpx; 82 | } 83 | .page-body-form-key { 84 | width: 180rpx; 85 | } 86 | .page-body-form-value { 87 | flex-grow: 1; 88 | } 89 | 90 | .page-body-form-picker { 91 | display: flex; 92 | justify-content: space-between; 93 | height: 100rpx; 94 | align-items: center; 95 | font-size: 36rpx; 96 | margin-left: 20rpx; 97 | padding-right: 20rpx; 98 | border-bottom: 1px solid #eee; 99 | } 100 | .page-body-form-picker-value { 101 | color: #ccc; 102 | } 103 | 104 | .page-body-buttons { 105 | width: 100%; 106 | } 107 | .page-body-button { 108 | margin: 25rpx; 109 | } 110 | .page-body-button image { 111 | width: 150rpx; 112 | height: 150rpx; 113 | } 114 | .page-footer { 115 | text-align: center; 116 | color: #1aad19; 117 | font-size: 24rpx; 118 | margin: 20rpx 0; 119 | } 120 | 121 | .green{ 122 | color: #09BB07; 123 | } 124 | .red{ 125 | color: #F76260; 126 | } 127 | .blue{ 128 | color: #10AEFF; 129 | } 130 | .yellow{ 131 | color: #FFBE00; 132 | } 133 | .gray{ 134 | color: #C9C9C9; 135 | } 136 | 137 | .strong{ 138 | font-weight: bold; 139 | } 140 | 141 | .bc_green{ 142 | background-color: #09BB07; 143 | } 144 | .bc_red{ 145 | background-color: #F76260; 146 | } 147 | .bc_blue{ 148 | background-color: #10AEFF; 149 | } 150 | .bc_yellow{ 151 | background-color: #FFBE00; 152 | } 153 | .bc_gray{ 154 | background-color: #C9C9C9; 155 | } 156 | 157 | .tc{ 158 | text-align: center; 159 | } 160 | 161 | .page input{ 162 | padding: 10px 15px; 163 | background-color: #fff; 164 | } 165 | checkbox, radio{ 166 | margin-right: 5px; 167 | } 168 | 169 | .btn-area{ 170 | padding: 0 15px; 171 | } 172 | .btn-area button{ 173 | margin-top: 10px; 174 | margin-bottom: 10px; 175 | } 176 | 177 | .page { 178 | min-height: 100%; 179 | flex: 1; 180 | background-color: #FBF9FE; 181 | font-size: 16px; 182 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 183 | overflow: hidden; 184 | } 185 | .page__hd{ 186 | padding: 40px; 187 | } 188 | .page__title{ 189 | display: block; 190 | font-size: 20px; 191 | } 192 | .page__desc{ 193 | margin-top: 5px; 194 | font-size: 14px; 195 | color: #888888; 196 | } 197 | 198 | .section{ 199 | margin-bottom: 40px; 200 | } 201 | .section_gap{ 202 | padding: 0 15px; 203 | } 204 | .section__title{ 205 | margin-bottom: 8px; 206 | padding-left: 15px; 207 | padding-right: 15px; 208 | } 209 | .section_gap .section__title{ 210 | padding-left: 0; 211 | padding-right: 0; 212 | } 213 | .section__ctn{ 214 | 215 | } 216 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/demo.png -------------------------------------------------------------------------------- /fix.md: -------------------------------------------------------------------------------- 1 | ### updated 2016-09-24 20:51 2 | #### bug： 3 | 组件中： 4 | - 内容分区/scroll-view中，click me to top按钮无效（done） 5 | 6 | 接口中： 7 | - 录音功能展示中，无法停止录音。（可能问题只存在电脑调试器中）（done） 8 | - 录音功能展示中，若直接返回上一级页面，原页面的定时器未被回收（done） 9 | - 背景音乐功能展示中，首先播放音乐并返回上级，然后再进入播放音乐页面，音乐播放进度会丢失 10 | 11 | #### 不算bug但是美中不足的地方 12 | 组件中： 13 | - 内容分区/swipe 中，swipe最后一张图片后会反方向到第一张图片（to be improved） 14 | - 内容/Text 中，text默认的line删不掉，一开始体验‘remove’方法的话会产生“程序是不是有问题的错觉” 15 | - 内容/picker 中，时间和日期选择器无效（开始以为是bug，后来发现是demo源码中没有实现这里的选择器）(to be improved) 16 | 17 | 接口中： 18 | 19 | 注:这些在接口栏目中，能在PC上测试的所有的接口都是在PC上测试的，所以可能参考意义并不是那么大 20 | 21 | #### 修复： 22 | 1. 内容分区/scroll-view 23 | ![scroll-view](image/fix/scroll-view.png) 24 | 方法： 25 | /page/component/component-pages/wx-scroll-view/wx-scroll-view.js 16L 将setAction 改为 setData 26 | ```javascript 27 | scrollToTop: function(e) { 28 | this.setData({ 29 | scrollTop: 0 30 | }) 31 | } 32 | ``` 33 | 2. 录音功能 34 | 方法： 35 | /page/API/voice/voice.js 36 | 1) 将录音定时器放在全局。 37 | 2) 在stop record中清除定时器 38 | 3) onUnload触发时也要清除定时器并还原初始数据 39 | ```javascript 40 | var util = require('../../../util/util.js') 41 | var playTimeInterval,interval 42 | 43 | Page({ 44 | data: { 45 | ... 46 | }, 47 | startRecord: function () { 48 | ... 49 | }, 50 | stopRecord: function () { 51 | wx.stopRecord() 52 | this.setData({recording:false,recordTime:0,formatedRecordTime: '00:00:00'}) 53 | clearInterval(interval) 54 | }, 55 | ... 56 | onUnload:function(){ 57 | this.stopRecord() 58 | console.log("voice page has been unloaded!") 59 | } 60 | }) 61 | ``` 62 | 63 | 3. 播放背景音乐进度丢失问题 64 | ![bgm01](image/fix/bgm01.png)![bgm02](image/fix/bgm02.png)![bgm03](image/fix/bgm03.png) 65 | 方法： 66 | /page/API/background-audio/background-audio.js 重写了一些方法 67 | 1) 该page生命周期中的onLoad过程中，先通过api获取是否有背景音乐正在播放，获取其进度，然后将data里的数据更新,在onLoad中增加checkPlaying方法 68 | ```javascript 69 | Page({ 70 | onLoad: function () { 71 | var that = this 72 | ... 73 | // 进入的时候应该检测后台是否有音乐正在播放 74 | checkPlaying() 75 | function checkPlaying() { 76 | wx.getBackgroundAudioPlayerState({ 77 | success: function (res) { 78 | console.log("播放器状态：",res) 79 | console.log("初始化时的webview",that.data.__webviewId__) 80 | var _isPlaying,_playTime 81 | res.status === 1? 82 | _isPlaying = true:_isPlaying = false 83 | res.currentPosition/res.duration > 0.95? 84 | _playTime = 0:_playTime = res.currentPosition 85 | that.setData({ 86 | playing:_isPlaying, 87 | playTime: _playTime, 88 | formatedPlayTime: util.formatTime(_playTime) 89 | }) 90 | if(_isPlaying) 91 | that._enableInterval() 92 | } 93 | }) 94 | } 95 | }, 96 | ... 97 | }) 98 | ``` 99 | 2) 增加了resume方法，用于继续播放（play方法是从头开始播放） 100 | ```javascript 101 | Pager({ 102 | ... 103 | resume:function(){ 104 | var that = this 105 | if(this.updateInterval != '') 106 | clearInterval(this.updateInterval) 107 | wx.playBackgroundAudio({ 108 | dataUrl: dataUrl, 109 | title: 'Lost Stars', 110 | coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R150x150M000000Jhxf24CFL06.jpg?max_age=2592000', 111 | complete: function () { 112 | that.setData({ 113 | playing:true 114 | }) 115 | wx.seekBackgroundAudio({ 116 | position: that.data.playTime, 117 | complete:function(){ 118 | console.log("resume ok") 119 | } 120 | }) 121 | } 122 | }) 123 | }, 124 | ... 125 | }) 126 | ``` 127 | 3) 在onLoad中增加了背景音乐的两个状态的监听器，用于同步背景音乐状态的变化和UI的变化 128 | ```javascript 129 | Page({ 130 | onLoad: function () { 131 | ... 132 | 133 | // 设置播放停止监听事件 134 | wx.onBackgroundAudioStop(function () { 135 | console.log("音乐停止了，当前webview: ",that.data.__webviewId__) 136 | that.setData({ 137 | playing: false, 138 | playTime: 0, 139 | formatedPlayTime: '00:00:00' 140 | }) 141 | }) 142 | // 设置播放开始监听事件 143 | wx.onBackgroundAudioPlay(function(){ 144 | console.log("音乐开始了，当前webview: ",that.data.__webviewId__) 145 | // 开始后需要更新当前歌曲的秒数 146 | if(that.data.playing === false) 147 | that.setData({ 148 | playing:true 149 | }) 150 | if(that.updateInterval >= 0) 151 | return 152 | that._enableInterval() 153 | }) 154 | // 设置播放暂停监听事件 155 | wx.onBackgroundAudioPause(function(){ 156 | console.log("音乐暂停了，当前webview: ",that.data.__webviewId__) 157 | // 暂停后，不需要继续更新歌曲秒数 158 | if(that.data.playing === true) 159 | that.setData({ 160 | playing:false 161 | }) 162 | if(that.updateInterval >= 0) 163 | clearInterval(that.updateInterval) 164 | }) 165 | ... 166 | }, 167 | ``` 168 | 4） 同时在wxml中增加了重播的按键（文字的形式），简单的在两个block中加入 169 | ```xml 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 重播 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 重播 188 | 189 | 190 | ``` 191 | 5) 再加一个样式在wxss 192 | ```css 193 | .page-body-button .restart{ 194 | line-height: 80px; 195 | } 196 | ``` 197 | #### 仍然存在的问题 198 | 在修复背景音乐一些小bug的过程中，我发现，首先进入播放音乐界面播放歌曲，再返回上一个界面，这时候如果再进入播放音乐界面，那么播放器的功能没有问题，但是在该页面中用于更新UI的定时器会按进出次数递增。 199 | ![1](image/fix/bgm11.png)![2](image/fix/bgm12.png)![3](image/fix/bgm13.png)![4](image/fix/bgm14.png)![5](image/fix/bgm15.png) 200 | 201 | ####一些想法： 202 | 为了解决上面的问题，我有下面几个想法： 203 | - 在这个pager的onUnload阶段，对背景音乐的监听器进行手动的清除（问题是目前的文档中并没有合适的api） 204 | - 不使用背景音乐变化的监听器（包括"wx.onBackgroundAudioPause|wx.onBackgroundAudioStop|wx.onBackgroundAudioPlay"）,直接手动管理定时器。（我尝试过这样做，但是没有效果，定时器个数还是会随着进出次数的增加而增加，希望是我的实现错了） -------------------------------------------------------------------------------- /image/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/arrowright.png -------------------------------------------------------------------------------- /image/fix/bgm01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm01.png -------------------------------------------------------------------------------- /image/fix/bgm02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm02.png -------------------------------------------------------------------------------- /image/fix/bgm03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm03.png -------------------------------------------------------------------------------- /image/fix/bgm11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm11.png -------------------------------------------------------------------------------- /image/fix/bgm12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm12.png -------------------------------------------------------------------------------- /image/fix/bgm13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm13.png -------------------------------------------------------------------------------- /image/fix/bgm14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm14.png -------------------------------------------------------------------------------- /image/fix/bgm15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/bgm15.png -------------------------------------------------------------------------------- /image/fix/scroll-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/fix/scroll-view.png -------------------------------------------------------------------------------- /image/icon64_appwx_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/icon64_appwx_logo.png -------------------------------------------------------------------------------- /image/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/pause.png -------------------------------------------------------------------------------- /image/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/play.png -------------------------------------------------------------------------------- /image/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/plus.png -------------------------------------------------------------------------------- /image/record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/record.png -------------------------------------------------------------------------------- /image/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/stop.png -------------------------------------------------------------------------------- /image/trash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/trash.png -------------------------------------------------------------------------------- /image/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/wechat.png -------------------------------------------------------------------------------- /image/wechatHL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xwartz/wechat-app-demo/e23c943405fc10a3a76aec7eca3e2bf5f90810b7/image/wechatHL.png -------------------------------------------------------------------------------- /page/API/animation/animation.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | onReady: function () { 3 | this.animation = wx.createAnimation() 4 | 5 | }, 6 | rotate: function () { 7 | this.animation.rotate(Math.random() * 720 - 360).step() 8 | this.setData({ animation: this.animation.export() }) 9 | }, 10 | scale: function () { 11 | this.animation.scale(Math.random() * 2).step() 12 | this.setData({ animation: this.animation.export() }) 13 | }, 14 | translate: function () { 15 | this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step() 16 | this.setData({ animation: this.animation.export() }) 17 | }, 18 | skew: function () { 19 | this.animation.skew(Math.random() * 90, Math.random() * 90).step() 20 | this.setData({ animation: this.animation.export() }) 21 | }, 22 | rotateAndScale: function () { 23 | this.animation.rotate(Math.random() * 720 - 360) 24 | .scale(Math.random() * 2) 25 | .step() 26 | this.setData({ animation: this.animation.export() }) 27 | }, 28 | rotateThenScale: function () { 29 | this.animation.rotate(Math.random() * 720 - 360).step() 30 | .scale(Math.random() * 2).step() 31 | this.setData({ animation: this.animation.export() }) 32 | }, 33 | all: function () { 34 | this.animation.rotate(Math.random() * 720 - 360) 35 | .scale(Math.random() * 2) 36 | .translate(Math.random() * 100 - 50, Math.random() * 100 - 50) 37 | .skew(Math.random() * 90, Math.random() * 90) 38 | .step() 39 | this.setData({ animation: this.animation.export() }) 40 | }, 41 | allInQueue: function () { 42 | this.animation.rotate(Math.random() * 720 - 360).step() 43 | .scale(Math.random() * 2).step() 44 | .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step() 45 | .skew(Math.random() * 90, Math.random() * 90).step() 46 | this.setData({ animation: this.animation.export() }) 47 | }, 48 | reset: function () { 49 | this.animation.rotate(0, 0) 50 | .scale(1) 51 | .translate(0, 0) 52 | .skew(0, 0) 53 | .step({ duration: 0 }) 54 | this.setData({ animation: this.animation.export() }) 55 | } 56 | }) 57 | -------------------------------------------------------------------------------- /page/API/animation/animation.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "动画" 3 | } 4 | -------------------------------------------------------------------------------- /page/API/animation/animation.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |