微信小程序wepy的使用

  1. wepy框架编写的小程序demo,看看也无妨,github地址请点击,欢迎star—>传送门
  2. 安装使用见README,本次主要讲使用过程中遇到的问题,会持续更新下去:
  3. 路由跳转: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.效果 
列表页 
列表页video 
详情页 
详情页video

.

引用块内容

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()方法来触发一下脏检查,正常流程下,数据改变后,组件会在流程结束后触发脏检查,但是异步事件后,需要手动来触发脏检查。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页