├── README.md ├── app.js ├── app.json ├── app.wxss ├── image ├── arrowright.png ├── icon64_appwx_logo.png ├── pause.png ├── play.png ├── plus.png ├── record.png ├── stop.png ├── trash.png ├── up.png ├── wechat.png ├── wechatHL.png └── wechatHL_blue.png ├── pages ├── 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 ├── index │ ├── index.js │ ├── index.wxml │ ├── index.wxss │ ├── resources │ │ ├── arrow.png │ │ ├── kind │ │ │ ├── canvas.png │ │ │ ├── content.png │ │ │ ├── form.png │ │ │ ├── interact.png │ │ │ ├── map.png │ │ │ ├── media.png │ │ │ ├── nav.png │ │ │ └── view.png │ │ └── pic.jpg │ └── view │ │ ├── info-detail.js │ │ ├── info-detail.wxml │ │ ├── info-detail.wxss │ │ ├── info-list.js │ │ ├── info-list.wxml │ │ └── info-list.wxss ├── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss └── main │ ├── main.js │ ├── main.wxml │ └── main.wxss └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # WeApp-VR-Video 2 | 微信小程序——vr视频资源推荐 3 | 4 | ![DEMO效果图1](http://upload-images.jianshu.io/upload_images/999401-d63e3b06ec008364.gif?imageMogr2/auto-orient/strip) 5 | 6 | 这周，你被微信小程序刷屏了吗？ 反正本猿被刷屏了~~~~本猿最先看到微信小程序相关的文章，应该是冯大辉老师的[「微信公众号来了」](http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&mid=2650968689&idx=1&sn=c27c74226fe4d500ff552abc46b62812&chksm=bd38364a8a4fbf5ca2fd32caa15799a160e90295abc56a1b874d8ce14c85614b32a2cb846291&scene=0#wechat_redirect), 据MAC君透露，这篇文章寥寥几百字，一天内阅读量过百万。。。这是要全猿开发微信小程序的节奏撒！！ 7 | 本猿表示绝不能落伍，于是趁着周末，开始微信小程序开发之旅！各位猿们，上车咯~ 8 | 9 | 10 | ![效果图](http://upload-images.jianshu.io/upload_images/999401-20934066fe145565.gif?imageMogr2/auto-orient/strip) 11 | 12 | 一言不合就上效果图哈，辣这个demo是肿么做出来的咧？莫急莫急，且听本猿慢慢道来哈~ 13 | 14 | **环境搭建** 15 | ----------------- 16 | 开发微信小程序，首先肯定是搭建环境啦，你可以选择根据github上的这个[repo](https://github.com/gavinkwoe/weapp-ide-crack)进行下载安装，也可以下载这个[压缩包](https://pan.baidu.com/s/1o7KJkUm),快速完成安装哈，这个安装包里有如下文件： 17 | ![压缩包](http://upload-images.jianshu.io/upload_images/999401-4896d17dd4d28b3e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 18 | 19 | 接下来的步骤是： 20 | (**Update： 已经不用做下面这三个步骤啦，直接进repo链接下载最新的9.0版,直接安装哈**) 21 | 22 | * 安装wechat_web_devtools_0.7.0_x64，并用它跟手机微信实现登录 23 | * 覆盖安装wechat_web_devtools_0.9.092100_x64 24 | * 将weapp-ide-crack-master文件夹中的三个文件，放到安装程序目录对应的地方： 25 | * 微信web开发者工具\package.nw\app\dist\components\create\createstep.js 26 | 27 | * 微信web开发者工具\package.nw\app\dist\stroes\projectStores.js 28 | 29 | * 微信web开发者工具\package.nw\app\dist\weapp\appservice\asdebug.js 30 | 31 | ![](http://upload-images.jianshu.io/upload_images/999401-6f05cb2d496c2376.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 32 | 33 | 做完上述步骤，就可以愉快的打开微信的IDE啦~ 34 | 35 | ![](http://upload-images.jianshu.io/upload_images/999401-d9c946b9f3a04600.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 36 | 37 | 接下来，就是程序员的惯例：helloworld！ 38 | 39 | ![](http://upload-images.jianshu.io/upload_images/999401-ab2caeaaa8e91758.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 40 | 创建项目，填好相关input选项，点击添加项目，搞定！ 41 | 42 | ![](http://upload-images.jianshu.io/upload_images/999401-01cac4dafdc1e100.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 43 | 44 | 太简单？没错，就是这么简单，哈哈，如果要复杂点，用IDE打开本猿提供的压缩包中的webapp-demo。 45 | 46 | ![](http://upload-images.jianshu.io/upload_images/999401-ed63c4e8958d991d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 47 | 48 | 它提供了所有组件和API的使用范例，如下图： 49 | 50 | ![](http://upload-images.jianshu.io/upload_images/999401-2379a52300cc87b4.gif?imageMogr2/auto-orient/strip) 51 | 52 | 相信玩过react native的童鞋一定会觉得似曾相识，没错，这个DEMO就像react native官方提供的UIExplorer一样哈！通过这个demo，我们就可以照着做一个DEMO啦。 53 | 54 | **代码结构概览分析** 55 | ------------------- 56 | 57 | 搭完环境，就可以愉快的码代码了，我们先来看下刚新建项目的代码结构： 58 | ![代码结构](http://upload-images.jianshu.io/upload_images/999401-40a3fcbf56f399f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 59 | 60 | 我们先关注根目录下最主要的三个文件： 61 | ![](http://upload-images.jianshu.io/upload_images/999401-02d06983cd51ac34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 62 | 63 | app.js我们暂时不需要改，首先配置好app.json，要点如下： 64 | * 将你要建立的page路径加到pages配置项上 65 | * 配置window配置项上的标题栏颜色 / 风格 / 内容等 66 | * 配置tabbar配置项上的内容 / icon等 67 | * 设置debug配置项，方便打log 68 | 69 | ```js 70 | { 71 | "pages":[ 72 | "pages/index/index", 73 | "pages/index/view/info-list", 74 | "pages/index/view/info-detail", 75 | "pages/logs/logs", 76 | ], 77 | "window":{ 78 | "backgroundTextStyle":"light", 79 | "navigationBarBackgroundColor": "#4DBBFF", 80 | "navigationBarTitleText": "微信VR视频资源推荐", 81 | "navigationBarTextStyle":"white" 82 | }, 83 | "tabBar": { 84 | "color": "#dddddd", 85 | "selectedColor": "#4DBBFF", 86 | "borderStyle": "white", 87 | "backgroundColor": "#ffffff", 88 | "list": [{ 89 | "pagePath": "pages/index/index", 90 | "iconPath": "image/wechat.png", 91 | "selectedIconPath": "image/wechatHL_blue.png", 92 | "text": "首页" 93 | }, { 94 | "pagePath": "pages/index/view/info-list", 95 | "iconPath": "image/wechat.png", 96 | "selectedIconPath": "image/wechatHL_blue.png", 97 | "text": "VR列表" 98 | }] 99 | }, 100 | "networkTimeout": { 101 | "request": 10000, 102 | "connectSocket": 10000, 103 | "uploadFile": 10000, 104 | "downloadFile": 10000 105 | }, 106 | "debug": true 107 | } 108 | 109 | ``` 110 | 至于app.wxss, 如果多个页面中的样式有重复，需要复用，可以在app.wxss上写哈~~ 111 | 112 | 接下来就写页面啦，通过app.json,大家可以看出，我总共就三个page而已哈（另外一个自带的，log记录之类的，忽略） 113 | ![](http://upload-images.jianshu.io/upload_images/999401-14aafde8ad9bbb34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 114 | 115 | 我们先来了解下page的生命周期回调函数： 116 | 117 | | 命令 |描述 | 118 | | ------------- |:-------------: | 119 | |onLoad | 生命周期函数--监听页面加载 | 120 | |onReady | 生命周期函数--监听页面渲染完成 | 121 | |onShow | 生命周期函数--监听页面显示 | 122 | |onHide | 生命周期函数--监听页面隐藏 | 123 | |onUnload | 生命周期函数--监听页面卸载 | 124 | 125 | 在写这三个page时，主要用到了三个组件，第一个是swiper，也就是滑动面板，代码如下： 126 | ```js 127 | //index.wxml 128 | 129 | 130 | 132 | 133 | 134 | 135 | 136 | {{item.article.title}} 137 | 138 | 139 | 140 | 141 | 142 | 143 | i 144 | 145 | //index.js 146 | get_vr_swiper_info: function() { 147 | console.log('get_vr_info') 148 | var swiper_offset = parseInt( 800 * Math.random() ); 149 | var that = this 150 | 151 | wx.request({ 152 | url: API_URL + swiper_offset, 153 | 154 | success: function(response) { 155 | that.setData({ 156 | swiper_list: response.data.result 157 | }) 158 | } 159 | 160 | }); 161 | } 162 | ``` 163 | 第二个是可滚动视图scrollview,代码如下 164 | ```js 165 | //index.wxml 166 | 167 | 168 | 169 | 170 | 171 | 172 | {{item.article.title}} 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | //index.js 183 | upper: function(e) { 184 | console.log(e) 185 | }, 186 | lower: function(e) { 187 | console.log(e) 188 | }, 189 | scroll: function(e) { 190 | console.log(e) 191 | }, 192 | scrollToTop: function(e) { 193 | this.setAction({ 194 | scrollTop: 0 195 | }) 196 | }, 197 | tap: function(e) { 198 | for (var i = 0; i < order.length; ++i) { 199 | if (order[i] === this.data.toView) { 200 | this.setData({ 201 | toView: order[i + 1], 202 | scrollTop: (i + 1) * 200 203 | }) 204 | break 205 | } 206 | } 207 | }, 208 | tapMove: function(e) { 209 | this.setData({ 210 | scrollTop: this.data.scrollTop + 10 211 | }) 212 | }, 213 | 214 | ``` 215 | 第三个是navigator，负责页面间的跳转，代码上面其实也有了，主要就是声明好标签，并写上url路径就行啦。 216 | ```js 217 | 218 | 219 | ``` 220 | 221 | 另外还需要了解三个主要接口： 222 | 223 | * wx.request() 224 | * wx.setStorage() 225 | * wx.getStorage() 226 | 227 | ```js 228 | wx.request({ 229 | url: API_URL + vr_list_offset, 230 | success: function(response) { 231 | that.setData({ 232 | vr_list: response.data.result 233 | }) 234 | } 235 | }); 236 | 237 | wx.setStorage({ 238 | key:"vr_list", 239 | data:that.data.vr_list 240 | }); 241 | 242 | wx.getStorage({ 243 | key:'vr_list', 244 | success:function(res){ 245 | console.log(res.data); 246 | } 247 | }); 248 | ``` 249 | 了解完这几个点之后，就可以动手做一个基础的demo啦，祝各位好运撒！ 250 | 251 | **开发观感** 252 | ----------- 253 | 254 | 1. 本猿之前也玩过react native,据我粗浅的理解，微信小程序的DEMO搭建相对RN会容易些，开发效率更高，但当前的[API文档](http://wxopen.notedown.cn/)太过简陋了，相关的组件描述也太少。 255 | 256 | 2. IDE有待改进，还木有linux环境，不嗨森！！BTW,强烈建议支持VIM 257 | 258 | 3. navigator实现page间的跳转，但缺少能跳转并传递对象的方法啊，难道只能通过setStorage()? 还是我没找到？？ 259 | 260 | 4. 组件少了点啊，木有webview，木有iframe~~~ 261 | 262 | **相关参考** 263 | ---------- 264 | [微信公众平台 |小程序 API文档](http://wxopen.notedown.cn) 265 | 266 | [微信小应用资源汇总整理](https://github.com/Aufree/awesome-wechat-weapp); 267 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this; 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo; 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }); 25 | } 26 | }, 27 | globalData:{ 28 | userInfo:null 29 | } 30 | }) 31 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/index/view/info-list", 5 | "pages/index/view/info-detail", 6 | "pages/logs/logs", 7 | "pages/component/index", 8 | 9 | 10 | "pages/component/navigation-pages/controller/controller", 11 | "pages/component/navigation-pages/form/form", 12 | "pages/component/navigation-pages/media/media", 13 | "pages/component/navigation-pages/view/view", 14 | "pages/component/component-pages/wx-action-sheet/wx-action-sheet", 15 | "pages/component/component-pages/wx-audio/wx-audio", 16 | "pages/component/component-pages/wx-button/wx-button", 17 | "pages/component/component-pages/wx-checkbox/wx-checkbox", 18 | "pages/component/component-pages/wx-form/wx-form", 19 | "pages/component/component-pages/wx-icon/wx-icon", 20 | "pages/component/component-pages/wx-image/wx-image", 21 | "pages/component/component-pages/wx-input/wx-input", 22 | "pages/component/component-pages/wx-mask/wx-mask", 23 | "pages/component/component-pages/wx-modal/wx-modal", 24 | "pages/component/component-pages/wx-navigator/wx-navigator", 25 | "pages/component/component-pages/wx-progress/wx-progress", 26 | "pages/component/component-pages/wx-radio/wx-radio", 27 | "pages/component/component-pages/wx-scroll-view/wx-scroll-view", 28 | "pages/component/component-pages/wx-slider/wx-slider", 29 | "pages/component/component-pages/wx-switch/wx-switch", 30 | "pages/component/component-pages/wx-text/wx-text", 31 | "pages/component/component-pages/wx-toast/wx-toast", 32 | "pages/component/component-pages/wx-video/wx-video", 33 | "pages/component/component-pages/wx-view/wx-view", 34 | "pages/component/component-pages/wx-swiper/wx-swiper", 35 | "pages/component/component-pages/wx-slide-tab/wx-slide-tab", 36 | "pages/component/component-pages/wx-label/wx-label", 37 | "pages/component/component-pages/wx-navigator/navigate", 38 | "pages/component/component-pages/wx-navigator/redirect", 39 | "pages/component/component-pages/wx-picker/wx-picker", 40 | 41 | "pages/API/index/index", 42 | "pages/API/storage/storage", 43 | 44 | "pages/API/login/login", 45 | "pages/API/get-user-info/get-user-info", 46 | "pages/API/request-payment/request-payment", 47 | 48 | "pages/API/set-navigation-bar-title/set-navigation-bar-title", 49 | "pages/API/navigation-bar-loading/navigation-bar-loading", 50 | "pages/API/navigator/navigator", 51 | "pages/API/pull-down-refresh/pull-down-refresh", 52 | "pages/API/animation/animation", 53 | 54 | "pages/API/get-network-type/get-network-type", 55 | "pages/API/get-system-info/get-system-info", 56 | "pages/API/on-compass-change/on-compass-change", 57 | 58 | "pages/API/request/request", 59 | "pages/API/web-socket/web-socket", 60 | "pages/API/upload-file/upload-file", 61 | "pages/API/download-file/download-file", 62 | 63 | 64 | "pages/API/image/image", 65 | "pages/API/voice/voice", 66 | "pages/API/file/file", 67 | "pages/API/on-accelerometer-change/on-accelerometer-change", 68 | "pages/API/canvas/canvas", 69 | "pages/API/background-audio/background-audio", 70 | 71 | "pages/API/get-location/get-location", 72 | "pages/API/open-location/open-location" 73 | ], 74 | "window":{ 75 | "backgroundTextStyle":"light", 76 | "navigationBarBackgroundColor": "#4DBBFF", 77 | "navigationBarTitleText": "微信VR视频资源推荐", 78 | "navigationBarTextStyle":"white" 79 | }, 80 | "tabBar": { 81 | "color": "#dddddd", 82 | "selectedColor": "#4DBBFF", 83 | "borderStyle": "white", 84 | "backgroundColor": "#ffffff", 85 | "list": [{ 86 | "pagePath": "pages/index/index", 87 | "iconPath": "image/wechat.png", 88 | "selectedIconPath": "image/wechatHL_blue.png", 89 | "text": "首页" 90 | }, { 91 | "pagePath": "pages/index/view/info-list", 92 | "iconPath": "image/wechat.png", 93 | "selectedIconPath": "image/wechatHL_blue.png", 94 | "text": "VR列表" 95 | }] 96 | }, 97 | "networkTimeout": { 98 | "request": 10000, 99 | "connectSocket": 10000, 100 | "uploadFile": 10000, 101 | "downloadFile": 10000 102 | }, 103 | "debug": true 104 | } 105 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | /** 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 | **/ 13 | 14 | page { 15 | background-color: #fbf9fe; 16 | height: 100%; 17 | } 18 | .container { 19 | display: flex; 20 | flex-direction: column; 21 | min-height: 100%; 22 | justify-content: space-between; 23 | } 24 | .page-header { 25 | display: flex; 26 | font-size: 32rpx; 27 | color: #aaa; 28 | justify-content: center; 29 | margin-top: 50rpx; 30 | } 31 | .page-header-text { 32 | padding: 20rpx 40rpx; 33 | border-bottom: 1px solid #ccc; 34 | } 35 | 36 | .page-body { 37 | width: 100%; 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | flex-grow: 1; 42 | overflow-x: hidden; 43 | } 44 | .page-body-wrapper { 45 | margin-top: 100rpx; 46 | display: flex; 47 | flex-direction: column; 48 | align-items: center; 49 | width: 100%; 50 | } 51 | .page-body-wrapper form { 52 | width: 100%; 53 | } 54 | .page-body-wording { 55 | text-align: center; 56 | padding: 200rpx 100rpx; 57 | } 58 | .page-body-info { 59 | display: flex; 60 | flex-direction: column; 61 | align-items: center; 62 | background-color: #fff; 63 | margin-bottom: 50rpx; 64 | width: 100%; 65 | padding: 50rpx 0 150rpx 0; 66 | } 67 | .page-body-title { 68 | margin-bottom: 100rpx; 69 | font-size: 32rpx; 70 | } 71 | .page-body-text { 72 | font-size: 30rpx; 73 | line-height: 26px; 74 | color: #ccc; 75 | } 76 | .page-body-text-small { 77 | font-size: 24rpx; 78 | color: #000; 79 | margin-bottom: 100rpx; 80 | } 81 | .page-body-form { 82 | width: 100%; 83 | background-color: #fff; 84 | display: flex; 85 | flex-direction: column; 86 | width: 100%; 87 | border: 1px solid #eee; 88 | } 89 | .page-body-form-item { 90 | display: flex; 91 | align-items: center; 92 | margin-left: 10rpx; 93 | border-bottom: 1px solid #eee; 94 | height: 80rpx; 95 | } 96 | .page-body-form-key { 97 | width: 180rpx; 98 | } 99 | .page-body-form-value { 100 | flex-grow: 1; 101 | } 102 | 103 | .page-body-form-picker { 104 | display: flex; 105 | justify-content: space-between; 106 | height: 100rpx; 107 | align-items: center; 108 | font-size: 36rpx; 109 | margin-left: 20rpx; 110 | padding-right: 20rpx; 111 | border-bottom: 1px solid #eee; 112 | } 113 | .page-body-form-picker-value { 114 | color: #ccc; 115 | } 116 | 117 | .page-body-buttons { 118 | width: 100%; 119 | } 120 | .page-body-button { 121 | margin: 25rpx; 122 | } 123 | .page-body-button image { 124 | width: 150rpx; 125 | height: 150rpx; 126 | } 127 | .page-footer { 128 | text-align: center; 129 | color: #1aad19; 130 | font-size: 24rpx; 131 | margin: 20rpx 0; 132 | } 133 | 134 | .green{ 135 | color: #09BB07; 136 | } 137 | .red{ 138 | color: #F76260; 139 | } 140 | .blue{ 141 | color: #10AEFF; 142 | } 143 | .yellow{ 144 | color: #FFBE00; 145 | } 146 | .gray{ 147 | color: #C9C9C9; 148 | } 149 | 150 | .strong{ 151 | font-weight: bold; 152 | } 153 | 154 | .bc_green{ 155 | background-color: #09BB07; 156 | } 157 | .bc_red{ 158 | background-color: #F76260; 159 | } 160 | .bc_blue{ 161 | background-color: #10AEFF; 162 | } 163 | .bc_yellow{ 164 | background-color: #FFBE00; 165 | } 166 | .bc_gray{ 167 | background-color: #C9C9C9; 168 | } 169 | 170 | .tc{ 171 | text-align: center; 172 | } 173 | 174 | .page input{ 175 | padding: 10px 15px; 176 | background-color: #fff; 177 | } 178 | checkbox, radio{ 179 | margin-right: 5px; 180 | } 181 | 182 | .btn-area{ 183 | padding: 0 15px; 184 | } 185 | .btn-area button{ 186 | margin-top: 10px; 187 | margin-bottom: 10px; 188 | } 189 | 190 | .page { 191 | min-height: 100%; 192 | flex: 1; 193 | background-color: #FBF9FE; 194 | font-size: 16px; 195 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 196 | overflow: hidden; 197 | } 198 | .page__hd{ 199 | padding: 40px; 200 | } 201 | .page__title{ 202 | display: block; 203 | font-size: 20px; 204 | } 205 | .page__desc{ 206 | margin-top: 5px; 207 | font-size: 14px; 208 | color: #888888; 209 | } 210 | 211 | .section{ 212 | margin-bottom: 40px; 213 | } 214 | .section_gap{ 215 | padding: 0 15px; 216 | } 217 | .section__title{ 218 | margin-bottom: 8px; 219 | padding-left: 15px; 220 | padding-right: 15px; 221 | } 222 | .section_gap .section__title{ 223 | padding-left: 0; 224 | padding-right: 0; 225 | } 226 | .section__ctn{ 227 | 228 | } -------------------------------------------------------------------------------- /image/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/arrowright.png -------------------------------------------------------------------------------- /image/icon64_appwx_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/icon64_appwx_logo.png -------------------------------------------------------------------------------- /image/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/pause.png -------------------------------------------------------------------------------- /image/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/play.png -------------------------------------------------------------------------------- /image/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/plus.png -------------------------------------------------------------------------------- /image/record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/record.png -------------------------------------------------------------------------------- /image/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/stop.png -------------------------------------------------------------------------------- /image/trash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/trash.png -------------------------------------------------------------------------------- /image/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/up.png -------------------------------------------------------------------------------- /image/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/wechat.png -------------------------------------------------------------------------------- /image/wechatHL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/wechatHL.png -------------------------------------------------------------------------------- /image/wechatHL_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamesonHuang/WeApp-VR-Video/f47cc966c2f6bf517edc703c6a44237c380108b9/image/wechatHL_blue.png -------------------------------------------------------------------------------- /pages/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 | -------------------------------------------------------------------------------- /pages/API/animation/animation.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "动画" 3 | } 4 | -------------------------------------------------------------------------------- /pages/API/animation/animation.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |