微信小程序快速入门教程 | VR视频推荐DEMO - 简书
微信小程序快速入门教程 | VR视频推荐DEMO
DEMO效果图1
这周，你被微信小程序刷屏了吗？ 反正本猿被刷屏了~~~~本猿最先看到微信小程序相关的文章，应该是冯大辉老师的, 据MAC君透露，这篇文章寥寥几百字，一天内阅读量过百万。。。这是要全猿开发微信小程序的节奏撒！！本猿表示绝不能落伍，于是趁着周末，开始微信小程序开发之旅！各位猿们，上车咯~
一言不合就上效果图哈，辣这个demo是肿么做出来的咧？莫急莫急，且听本猿慢慢道来哈~
开发微信小程序，首先肯定是搭建环境啦，你可以选择根据github上的这个进行下载安装，也可以下载这个,快速完成安装哈，这个安装包里有如下文件：
接下来的步骤是：(Update： 已经不用做下面这三个步骤啦，直接进repo链接下载最新的9.0版,直接安装哈)
安装wechat_web_devtools_0.7.0_x64，并用它跟手机微信实现登录
覆盖安装wechat_web_devtools_0.9.
将weapp-ide-crack-master文件夹中的三个文件，放到安装程序目录对应的地方：
微信web开发者工具\package.nw\app\dist\components\create\reatestep.js
微信web开发者工具\package.nw\app\dist\stroes\projectStores.js
微信web开发者工具\package.nw\app\dist\weapp\appservice\asdebug.js
做完上述步骤，就可以愉快的打开微信的IDE啦~
接下来，就是程序员的惯例：helloworld！
创建项目，填好相关input选项，点击添加项目，搞定！
太简单？没错，就是这么简单，哈哈，如果要复杂点，用IDE打开本猿提供的压缩包中的webapp-demo。
它提供了所有组件和API的使用范例，如下图：
相信玩过react native的童鞋一定会觉得似曾相识，没错，这个DEMO就像react native官方提供的UIExplorer一样哈！通过这个demo，我们就可以照着做一个DEMO啦。
代码结构概览分析
搭完环境，就可以愉快的码代码了，我们先来看下刚新建项目的代码结构：
我们先关注根目录下最主要的三个文件：
app.js我们暂时不需要改，首先配置好app.json，要点如下：
将你要建立的page路径加到pages配置项上
配置window配置项上的标题栏颜色 / 风格 / 内容等
配置tabbar配置项上的内容 / icon等
设置debug配置项，方便打log
"pages/index/index",
"pages/index/view/info-list",
"pages/index/view/info-detail",
"pages/logs/logs",
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#4DBBFF",
"navigationBarTitleText": "微信VR视频资源推荐",
"navigationBarTextStyle":"white"
"tabBar": {
"color": "#dddddd",
"selectedColor": "#4DBBFF",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL_blue.png",
"text": "首页"
"pagePath": "pages/index/view/info-list",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL_blue.png",
"text": "VR列表"
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
"debug": true
至于app.wxss, 如果多个页面中的样式有重复，需要复用，可以在app.wxss上写哈~~
接下来就写页面啦，通过app.json,大家可以看出，我总共就三个page而已哈（另外一个自带的，log记录之类的，忽略）
我们先来了解下page的生命周期回调函数：
生命周期函数--监听页面加载
生命周期函数--监听页面渲染完成
生命周期函数--监听页面显示
生命周期函数--监听页面隐藏
生命周期函数--监听页面卸载
在写这三个page时，主要用到了三个组件，第一个是swiper，也就是滑动面板，代码如下：
//index.wxml
&!--Swiper--&
class="section section_gap swiper"&
&swiper style="height: 200" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"&
&block wx:for-items="{{swiper_list.data}}"&
&swiper-item&
&navigator class="swiper_nav" url="view/info-detail?title={{item.article.title}}&id={{item.article._id}}&req_type=swiper" hover-class="navigator-hover"&
&text class="swiper_txt"&{{item.article.title}}&/text&
&image class="swiper_img" src="{{item.article.cover}}"&&/image&
&/navigator&
&/swiper-item&
//index.js
get_vr_swiper_info: function() {
console.log('get_vr_info')
var swiper_offset =
parseInt( 800 * Math.random() );
var that = this
wx.request({
url: API_URL + swiper_offset,
success: function(response) {
that.setData({
swiper_list: response.data.result
第二个是可滚动视图scrollview,代码如下
//index.wxml
&scroll-view class="widgets" scroll-y="true" style="height: 400" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"&
&block wx:for-items="{{vr_list.data}}"&
&navigator url="view/info-detail?title={{item.article.title}}&id={{item.article._id}}&req_type=vr_list" hover-class="navigator-hover"&
&view class="widgets__item scroll-view-item"&
&view id="form" class="widgets__info" bindtap="widgetsToggle"&
&text class="widgets__info-name"&{{item.article.title}}&/text&
&image class="widgets__info-icon" src="resources/kind/form.png" background-size="cover" /&
&image class="widgets__info-img" src="{{item.article.cover}}" /&
&/navigator&
&/scroll-view&
//index.js
upper: function(e) {
console.log(e)
lower: function(e) {
console.log(e)
scroll: function(e) {
console.log(e)
scrollToTop: function(e) {
this.setAction({
scrollTop: 0
tap: function(e) {
for (var i = 0; i & order. ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1],
scrollTop: (i + 1) * 200
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
第三个是navigator，负责页面间的跳转，代码上面其实也有了，主要就是声明好标签，并写上url路径就行啦。
&navigator url="view/info-detail?id={{item.article._id}}"&
&/navigator&
另外还需要了解三个主要接口：
wx.request()
wx.setStorage()
wx.getStorage()
wx.request({
url: API_URL + vr_list_offset,
success: function(response) {
that.setData({
vr_list: response.data.result
wx.setStorage({
key:"vr_list",
data:that.data.vr_list
wx.getStorage({
key:'vr_list',
success:function(res){
console.log(res.data);
了解完这几个点之后，就可以动手做一个基础的demo啦，祝各位好运撒！
本猿之前也玩过react native,据我粗浅的理解，微信小程序的DEMO搭建相对RN会容易些，开发效率更高，但当前的太过简陋了，相关的组件描述也太少。
IDE有待改进，还木有linux环境，不嗨森！！BTW,强烈建议支持VIM
navigator实现page间的跳转，但缺少能跳转并传递对象的方法啊，难道只能通过setStorage()? 还是我没找到？？
组件少了点啊，木有webview，木有iframe~~~更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
&正在加载...
请选择打赏金额：
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
30秒后自动关闭
VR美术开发教程大学宣讲-讲座">VR美术开发教程大学宣讲-讲座
播放量数据：快去看看谁在和你一起看视频吧~
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制Hi，欢迎来到华清远见移动互联网学院官网！国内王牌Android培训、JAVAEE培训、HTML5培训、UI培训、JAVA培训、VR培训机构！
400-611-6270
您当前的位置： >