微信小程式wepy的使用
阿新 • • 發佈：2019-01-30
- 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按鈕隱藏只搭邊一點，但是也可以實現，點選圖片再播放
.
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()方法來觸發一下髒檢查，正常流程下，資料改變後，元件會在流程結束後觸發髒檢查，但是非同步事件後，需要手動來觸發髒檢查。