微信小程序wepy的使用

wepy框架编写的小程序demo，看看也无妨，github地址请点击，欢迎star—>传送门
安装使用见README,本次主要讲使用过程中遇到的问题，会持续更新下去：
路由跳转：demo中从列表页面跳转到详情页面，没有使用页面标签navigator进行跳转，原因是在首页的导航栏中已经使用过这种方法，想换其他的方法进行尝试:

3.1.原本使用wepy.component的几个属性来实现，例如$redirect，最后没有成功，也没有去查找原因，最后使用wepy.navigateTo方法实现，url后面拼接的参数在详情页面的onLoad方法的第一个参数中可以拿到，但是最后感觉这个更页面使用navigator标签性质一样

 //列表页面
 wepy.navigateTo({ url: '../pages/detail?id=' + id });
 //详情页面
 onLoad(options) {
    let me = this;
    me.getInfo(options.id);
    // http://baobab.kaiyanapp.com/api/v2/video/17631
  }

3.2. 列表内容

关于视频标签video的使用，小程序api上对video的属性列出的很详细，但是用起来就很操蛋，例如show-center-play-btn,官方是
“是否显示视频中间的播放按钮”,设置为false,但是还是显示，相信有去除此按钮的需求很多，用户体验不好，全列表都是很呼呼的一片；第二个就是获取视频中的一张图片作为视频展示页

//模板
<video class="video" controls objectFit="fill" autoplay="{{!item.showCoverImg}}" show-center-play-btn="{{false}}" custom-cache="{{false}}" src="{{item.data.content.data.playUrl?item.data.content.data.playUrl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=849275536,3449568478&fm=27&gp=0.jpg'}}">
     <cover-view class="controls" @tap="jumpDetail({{item.data.header.id}})">
         <cover-image class="imgcover" src="{{item.data.content.data.cover.homepage||item.data.content.data.cover.feed}}" mode="aspectFill"></cover-image>
     </cover-view>
</video>

//css 样式
.controls {
  z-index: 1000;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

3.3.效果
列表页

详情页

引用块内容

3.4申明
本来是想在列表页点击图片进行播放，感觉它不仅仅只是一个播放功能，还有详情介绍，以及同款推荐，所以就做得详情页面播放了，跟第三点如何让视频上的btn按钮隐藏只搭边一点，但是也可以实现，点击图片再播放

3.5如何获取视频中的随机一张图片作为视频的封面展示，可参考https://help.aliyun.com/document_detail/64555.html?spm=5176.11065259.1996646101.searchclickresult.1d4f60ccTn4M07

4.异步请求
这里使用async await来实现

//组件内的异步请求
async info() {
    let me = this;
    const json = await allCatetory({ query: {} });
    me.userInfo = json.data.itemList[6].data.itemList;
    console.log(this.userInfo);
    me.$apply();
  }

//allCatetory(在单独的js文件中集中声明)
//获取全部分类
const allCatetory = paramse =>
  wxRequest(
    paramse,
    'https://baobab.kaiyanapp.com/api/v4/tabs/selected?date=1522026000000&num=2&page=2'
  );

//wxRequest(公共请求处理)
import wepy from 'wepy';
import util from './util';
import md5 from './md5';

const TIMESTAMP = util.getCurrentTime();
const API_SECRET_KEY = 'www.mall.cycle.com';
const SIGN = md5.hex_md5((TIMESTAMP + API_SECRET_KEY).toLowerCase());
const wxRequest = async (params = {}, url) => {
  let data = params.query || {};
  data.sign = SIGN;
  data.time = TIMESTAMP;
  let res = await wepy.request({
    url: url,
    method: params.method || 'GET',
    data: data,
    header: { 'Content-Type': 'application/json' }
  });
  return res;
};
module.exports = {
  wxRequest
};

4.1关于异步请求到的数据，还需要使用当前组件的$apply()方法来触发一下脏检查，正常流程下，数据改变后，组件会在流程结束后触发脏检查，但是异步事件后，需要手动来触发脏检查。

微信小程序wepy的使用

猜你喜欢