Skip to content

M
mini-program-wepy
Commit d15cdf1d authored by ziyu's avatar ziyu
Browse files
Options

improvement: 移动原有代码到当前项目

parent c591a6d4
Expand all Show whitespace changes
Inline Side-by-side
Showing with 499 additions and 547 deletions
src/app.wpy
View file @ d15cdf1d
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
import wepy from '@wepy/core'; import wepy from '@wepy/core';
import eventHub from './common/eventHub'; import eventHub from './common/eventHub';
import vuex from '@wepy/x'; import vuex from '@wepy/x';
wepy.use(vuex); wepy.use(vuex);
//import store from './store';
wepy.app({ wepy.app({
hooks: { hooks: {
// App 级别 hook，对整个 App 生效 // App 级别 hook，对整个 App 生效
// 同时存在 Page hook 和 App hook 时，优先执行 Page hook，返回值再交由 App hook 处 // 同时存在 Page hook 和 App hook 时，优先执行 Page hook，返回值再交由 App hook 处
}, },
globalData: { data: {
userInfo: null userInfo: null
}, },
...@@ -23,19 +23,26 @@ wepy.app({ ...@@ -23,19 +23,26 @@ wepy.app({
wx.getUserInfo({ wx.getUserInfo({
success: res => { success: res => {
// 可以将 res 发送给后台解码出 unionId // 可以将 res 发送给后台解码出 unionId
that.globalData.userInfo = res.userInfo // store.dispatch('setUserInfo',res.userInfo);
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况 // 所以此处加入 callback 以防止这种情况
if (that.userInfoReadyCallback) { if (that.userInfoReadyCallback) {
that.userInfoReadyCallback(res) that.userInfoReadyCallback(res => {
// store.dispatch('setUserInfo',res.userInfo);
})
} }
},
fail: ()=> {
wx.reLaunch({
url: '/pages/auth',
})
} }
}) })
}else{ }else{
// 未授权，跳转到授权页面 // 未授权，跳转到授权页面
wx.reLaunch({ wx.reLaunch({
url: '/pages/auth/auth', url: '/pages/auth',
}) })
} }
} }
...@@ -47,7 +54,8 @@ wepy.app({ ...@@ -47,7 +54,8 @@ wepy.app({
<config> <config>
{ {
pages: [ pages: [
'pages/index' 'pages/index',
'pages/auth'
], ],
window: { window: {
navigationStyle: "custom", navigationStyle: "custom",
......
src/components/custom/videolist.wpy 0 → 100644
View file @ d15cdf1d
<style lang="less">
page {
width: 100%;
height: 100%;
}
.container{
width:100%;
height:100%
}
.video-swiper{
width:100%;
height:100%
}
.video_item{
height:100%;
width:100%;
position: absolute;
z-index: 1;
}
</style>
<template>
<view class="container">
<swiper
class="video-swiper"
:duration= "800"
circular="{{circular}}"
vertical
current="1"
bindanimationfinish="animationfinish"
>
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
<swiper-item wx:for="{{currentVideo}}" wx:key="index">
<view class="video-wrapper">
<video
id="video_{{index}}"
class="video_item"
loop
enable-play-gesture
enable-progress-gesture
autoplay
show-center-play-btn="{{false}}"
controls="{{false}}"
src="{{item.url}}"
data-id="{{item.id}}"
object-fit="{{item.objectFit || 'contain'}}"
data-index="{{index}}"
binderror="onError"
bindwaiting="onWaiting"
bindloadedmetadata="onLoadedMetaData"
>
</video>
<slot></slot>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
props:{
videoList: {
type: Array,
value: []
},
duration: {
type: Number,
value: 800
},
},
data: {
circular: false,
currentVideo: [],
_videoContexts: [],
},
watch: {
videoList () {
var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this._videoListChanged(newVal);
}
},
methods: {
_videoListChanged (newVal) {
var _this = this;
let currentVideo = this.currentVideo;
let _videoContexts = this._videoContexts;
let first = currentVideo.length === 0;
let length = this.currentVideo.length;
newVal.forEach(function (item,index) {
currentVideo.push(item);
_videoContexts.push(wx.createVideoContext('video_'+length+index, _this))
});
this.currentVideo = currentVideo;
this._videoContexts = _videoContexts;
first && this.playCurrent(1);
/*this.setData({
currentVideo: data.currentVideo,
_videoContexts: data._videoContexts,
}, function () {
_this.playCurrent(1);
});*/
},
animationfinish(e) {
console.log(e.$wx.detail)
var current = e.$wx.detail.current;
this.playCurrent(current);
let curQueue = this.currentVideo;
this.$emit('change', { activeId: curQueue[current].id });
},
onWaiting (e) {
this.trigger(e, 'wait');
},
onLoadedMetaData (e) {
this.trigger(e, 'loadedmetadata');
},
onError(e) {
this.trigger(e, 'error');
},
playCurrent(current) {
this._videoContexts.forEach(function (ctx, index) {
index !== current ? ctx.pause() : ctx.play();
});
},
trigger(e, type) {
var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var detail = e.$wx.detail;
var activeId = e.target.dataset.id;
this.$emit(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext));
}
},
});
</script>
src/pages/auth.wpy
View file @ d15cdf1d
<style lang="less"> <style lang="less">
input { .contain {
border: 1rpx solid #ccc; padding:200rpx 0;
display: inline-block;
width: 200rpx;
border-radius: 5rpx;
}
.info {
padding-right: 10rpx;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.slide {
width: 640rpx;
display: flex;
border: 1rpx solid #ccc;
font-size: 28rpx;
align-items: center;
box-sizing: border-box;
.left {
width: 750rpx;
padding: 20rpx;
}
.right {
display: flex;
.right-item {
padding: 20rpx 30rpx;
background-color: red;
color: #fff;
}
}
}
</style>
<wxs module="m1" lang="babel">
const getTime = (time) => {
let date = getDate(time);
let hour = date.getHours();
let mins = date.getMinutes();
let sec = date.getSeconds();
let milli = date.getMilliseconds();
return `${hour}:${mins}:${sec}.${milli}`;
} }
module.exports.getTime = getTime; </style>
</wxs>
<template> <template>
<div class="container"> <div class="contain">
<div class="userinfo" @tap="handleViewTap"> <p>需要进行微信授权</p>
<image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"/> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权登录</button>
<div class="userinfo-nickname">{{ userInfo.nickName }}</div>
</div>
<div>
<div class="title" slot="title">测试数据绑定</div>
<text class="info" @tap="currentTime = +new Date()">{{m1.getTime(currentTime)}}</text>
<text class="info">{{setTimeoutTitle}}</text>
<text class="info" @tap="mixintap">{{mixin}}</text>
<text class="info">{{testcomputed}}</text>
<text class="info">{{counter}}</text>
</div>
<div>
<div class="title" slot="title">其它测试</div>
<!--button @tap="toast" size="mini">第三方组件</button-->
<button @tap="communicate" size="mini">组件通信</button>
<button @tap="tap" size="mini">混合TAP事件</button>
</div>
<div>
<div class="title" slot="title">测试并发网络请求</div>
<div>返回结果: <text>{{netrst}}</text></div>
<button @tap="request" size="mini"> 点我发起10个请求 </button>
</div>
<div>
<div class="title" slot="title">测试 v-model</div>
<div style="display: flex; align-items: center;">
<input v-model="inputmodel" />
<text style="margin-left: 30rpx;">Value: {{inputmodel}}</text>
</div>
</div>
<div>
<div class="title" slot="title">测试组件</div>
<text class="testcounter">全局计数器：</text>
<div class="counterview">
<button @tap="mynum++" size="mini">全局计数器: {{mynum}}</button>
</div>
<text class="testcounter">计数组件1 - num: </text>
<div class="counterview">
// <counter @index-emit.user="counterEmit" />
</div>
<text class="testcounter">计数组件2 - num.sync: </text>
<div class="counterview">
// <counter :num.sync="mynum"></counter>
</div>
</div>
<div>
<div class="title" slot="title">测试组件Repeat</div>
<div v-for="(item, index) in groupList">
<text>{{item.name}}</text>
//<group :grouplist="item" :index="index"></group>
</div>
</div>
<div>
<div class="title" slot="title">测试列表</div>
// <list></list>
</div>
<div>
<div class="title" slot="title">测试引用vant组件</div>
<van-button type="danger">默认按钮</van-button>
</div>
<!--toast /-->
</div> </div>
</template> </template>
<script> <script>
import wepy from '@wepy/core'; import wepy from '@wepy/core';
import eventHub from '../common/eventHub';
import { mapState } from '@wepy/x';
import store from '../store'; import store from '../store';
import testMixin from '../mixins/test';
wepy.page({ wepy.page({
store,
config: {
navigationBarTitleText: 'test'
},
hooks: { hooks: {
// Page 级别 hook, 只对当前 Page 的 setData 生效。
'before-setData': function (dirty) { 'before-setData': function (dirty) {
if (Math.random() < 0.2) {
console.log('setData canceled');
return false; // Cancel setData
}
dirty.time = +new Date();
return dirty;
}
},
mixins: [testMixin],
data: {
inputmodel: 'v-model',
mynum: 20,
userInfo: {
nickName: '加载中...'
},
currentTime: +new Date(),
setTimeoutTitle: '标题三秒后会被修改',
count: 0,
netrst: '',
groupList: [
{
id: 1,
name: '点击改变',
list: [
{
childid: '1.1',
childname: '子项，点我改变'
}, {
childid: '1.2',
childname: '子项，点我改变'
}, {
childid: '1.3',
childname: '子项，点我改变'
} }
]
}, },
{ data: {
id: 2, canIUse: wx.canIUse('button.open-type.getUserInfo')
name: '点击改变',
list: [
{
childid: '2.1',
childname: '子项，点我改变'
}, {
childid: '2.2',
childname: '子项，点我改变'
}, {
childid: '2.3',
childname: '子项，点我改变'
}
]
},
{
id: 3,
name: '点击改变',
list: [
{
childid: '3.1',
childname: '子项，点我改变'
}
]
}
]
}, },
computed: { computed: {
...mapState([ 'counter' ]),
testcomputed () {
return 'computed - ' + this.mynum;
}
},
methods: {
handleViewTap () {
console.log('handleVieTap clicked');
},
tap () {
throw new Error('can not go here');
},
plus () {
this.mynum++;
},
toast () {
let promise = this.$invoke('toast', 'show', {
title: '自定义标题',
img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png'
});
promise.then((d) => {
console.log('toast done');
});
},
mixintap () {
console.log('do noting from ' + this.$is);
}, },
communicate () {
let counters = this.$children.filter((com) => com.$is === 'components/counter');
// Get children counter methods: {
counters[0].num++; getUserInfo (e) {
counters[1].num--; store.dispatch('setUserInfo',e.$wx.detail.userInfo);
wx.reLaunch({
eventHub.$emit('app-launch', {a: 1}, {b: 2}); url: '/pages/index',
}, })
request () {
let self = this;
let i = 10;
let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ=='];
while (i--) {
wx.request({
url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i,
success: function (d) {
if (d.statusCode !== 200) {
self.netrst += d.statusCode + '.';
} else {
self.netrst += d.data + '.';
}
}
});
}
},
counterEmit (num) {
console.log(`${this.$is} receive event, the number is: ${num}`);
} }
}, },
created () { created () {
let self = this;
self.currentTime = +new Date();
self.setTimeoutTitle = '标题三秒后会被修改';
setTimeout(() => {
self.setTimeoutTitle = '到三秒了';
}, 3000);
wx.getUserInfo({
success (res) {
self.userInfo = res.userInfo;
}
});
} }
}); });
</script> </script>
<config> <config>
{ {
navigationBarTitleText: 'WePY 2.0 Feature Demo', navigationBarTitleText: '微信授权',
usingComponents: { usingComponents: {
'van-button': '../components/vant/button/index' 'van-button': '../components/vant/button/index'
} }
......
src/pages/index.wpy
View file @ d15cdf1d
This diff is collapsed.
src/store/index.js
View file @ d15cdf1d
...@@ -2,27 +2,16 @@ import Vuex from '@wepy/x'; ...@@ -2,27 +2,16 @@ import Vuex from '@wepy/x';
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
counter: 0 userInfo: null,
}, },
mutations: { mutations: {
increment (state) { setInfo (state,info) {
state.counter++; state.userInfo = info;
},
decrement (state) {
state.counter--;
} }
}, },
actions: { actions: {
increment ({ commit }) { setUserInfo ({ commit }, info) {
commit('increment'); commit('setInfo', info);
},
decrement ({ commit }) {
commit('decrement');
}, },
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
} }
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment