Skip to content

Files

Latest commit

5806f51 · Nov 26, 2016

History

History

WeApp-VR-Video

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Nov 26, 2016
Nov 26, 2016
Nov 26, 2016
Nov 26, 2016
Nov 26, 2016
Nov 26, 2016
Nov 26, 2016

WeApp-VR-Video

微信小程序——vr视频资源推荐

DEMO效果图1

这周,你被微信小程序刷屏了吗? 反正本猿被刷屏了~~~~本猿最先看到微信小程序相关的文章,应该是冯大辉老师的「微信公众号来了」, 据MAC君透露,这篇文章寥寥几百字,一天内阅读量过百万。。。这是要全猿开发微信小程序的节奏撒!! 本猿表示绝不能落伍,于是趁着周末,开始微信小程序开发之旅!各位猿们,上车咯~

效果图

一言不合就上效果图哈,辣这个demo是肿么做出来的咧?莫急莫急,且听本猿慢慢道来哈~

环境搭建

开发微信小程序,首先肯定是搭建环境啦,你可以选择根据github上的这个repo进行下载安装,也可以下载这个压缩包,快速完成安装哈,这个安装包里有如下文件: 压缩包

接下来的步骤是: (Update: 已经不用做下面这三个步骤啦,直接进repo链接下载最新的9.0版,直接安装哈)

  • 安装wechat_web_devtools_0.7.0_x64,并用它跟手机微信实现登录

  • 覆盖安装wechat_web_devtools_0.9.092100_x64

  • 将weapp-ide-crack-master文件夹中的三个文件,放到安装程序目录对应的地方:

  • 微信web开发者工具\package.nw\app\dist\components\create\createstep.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":[
    "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的生命周期回调函数:

命令 描述
onLoad 生命周期函数--监听页面加载
onReady 生命周期函数--监听页面渲染完成
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载

在写这三个page时,主要用到了三个组件,第一个是swiper,也就是滑动面板,代码如下:

//index.wxml
<!--Swiper-->
<view  class="section section_gap swiper">
  <swiper style="height: 200px;" 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>
      </block>

  </swiper>
</view>i

//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: 400px;" 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" />
                </view>
                <image class="widgets__info-img" src="{{item.article.cover}}" />
            </view>
        </navigator>
    </block>

</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.length; ++i) {
    if (order[i] === this.data.toView) {
      this.setData({
        toView: order[i + 1],
        scrollTop: (i + 1) * 200
      })
      break
    }
  }
},
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啦,祝各位好运撒!

开发观感

  1. 本猿之前也玩过react native,据我粗浅的理解,微信小程序的DEMO搭建相对RN会容易些,开发效率更高,但当前的API文档太过简陋了,相关的组件描述也太少。

  2. IDE有待改进,还木有linux环境,不嗨森!!BTW,强烈建议支持VIM

  3. navigator实现page间的跳转,但缺少能跳转并传递对象的方法啊,难道只能通过setStorage()? 还是我没找到??

  4. 组件少了点啊,木有webview,木有iframe~~~

相关参考

微信公众平台 |小程序 API文档

微信小应用资源汇总整理;