advance.vue 5.4 KB
Newer Older
杜庆泉's avatar
init  
杜庆泉 已提交
1
<template>
杜庆泉's avatar
杜庆泉 已提交
2 3
	<view>
		<page-head :title="title"></page-head>
杜庆泉's avatar
杜庆泉 已提交
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

		<uni-section title="任务" type="line">

			<uni-collapse>
				<uni-collapse-item title="延迟任务">
					<button type="primary" @tap="testTimer">延迟任务</button>
				</uni-collapse-item>

				<uni-collapse-item title="定时任务">
					<button type="primary" @tap="testInterval">定时任务</button>
					<button type="primary" @tap="testClearInterval">关闭定时任务</button>
				</uni-collapse-item>

			</uni-collapse>

		</uni-section>


		<uni-section title="语法" type="line">

			<uni-collapse>
				<uni-collapse-item title="进阶语法示例">
					<button type="primary" @tap="testSyntax">进阶语法示例</button>
				</uni-collapse-item>
			</uni-collapse>

		</uni-section>

杜庆泉's avatar
杜庆泉 已提交
32
		
杜庆泉's avatar
杜庆泉 已提交
33
		<uni-section title="资源" type="line">
杜庆泉's avatar
杜庆泉 已提交
34
		
杜庆泉's avatar
杜庆泉 已提交
35 36 37 38
			<uni-collapse>
				<uni-collapse-item title="资源加载">
					<button type="primary" @tap="gotoResourceDemo">资源加载示例</button>
				</uni-collapse-item>
杜庆泉's avatar
杜庆泉 已提交
39
		
杜庆泉's avatar
杜庆泉 已提交
40
			</uni-collapse>
杜庆泉's avatar
杜庆泉 已提交
41
		
杜庆泉's avatar
杜庆泉 已提交
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
		</uni-section>

		<uni-section title="内置函数" type="line">
		
			<uni-collapse>
				<uni-collapse-item title="生命周期">
					<button type="primary" @tap="testLifecyle">activity生命周期监听</button>
				</uni-collapse-item>
		
			</uni-collapse>
		
		</uni-section>

		<uni-section title="原生UI" type="line">
		
			<uni-collapse>
				<uni-collapse-item title="DecorView操作示例">
					<button type="primary" @tap="testAddToDecorView">添加TextView至视图顶层</button>
					<button type="primary" @tap="testRemoveToDecorView">移除视图顶层的TextView</button>
				</uni-collapse-item>
			</uni-collapse>
		
		</uni-section>

	


杜庆泉's avatar
杜庆泉 已提交
69
	</view>
杜庆泉's avatar
init  
杜庆泉 已提交
70
</template>
杜庆泉's avatar
杜庆泉 已提交
71 72
<script>
	import {
杜庆泉's avatar
杜庆泉 已提交
73 74 75 76 77
		doTimerTask,
		doIntervalTask,
		clearIntervalTask,
		addViewToDecorView,
		removeViewToDecorView
打打卡夫卡's avatar
打打卡夫卡 已提交
78
	} from "../../uni_modules/uts-advance";
杜庆泉's avatar
杜庆泉 已提交
79

杜庆泉's avatar
杜庆泉 已提交
80 81 82 83
	export default {
		data() {
			return {
				title: 'UTS进阶示例',
杜庆泉's avatar
杜庆泉 已提交
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183
				taskId: 0,
				hideList: [
					'ucharts',
					'nav-city-dropdown'
				],
				list: [
					// #ifdef APP-PLUS || H5 || MP-ALIPAY
					{
						id: 'navbar',
						name: '顶部原生导航标题栏',
						open: false,
						pages: [
							// #ifdef APP-PLUS || H5
							{
								name: '导航栏带自定义按钮',
								url: 'nav-button'
							},
							{
								name: '导航栏带红点和角标',
								url: 'nav-dot'
							},
							{
								name: '导航栏带城市选择',
								url: 'nav-city-dropdown'
							},
							{
								name: '导航栏带搜索框',
								url: 'nav-search-input'
							},
							// #endif
							// #ifdef APP-PLUS || H5 || MP-ALIPAY
							{
								name: '透明渐变样式',
								url: 'nav-transparent'
							},
							{
								name: '导航栏带图片',
								url: 'nav-image'
							}
							// #endif
						]
					},
					// #endif
					// #ifndef QUICKAPP-WEBVIEW || MP-KUAISHOU
					{
						name: '顶部选项卡',
						url: 'tabbar'
					},
					// #endif
					{
						name: '组件通讯',
						url: 'component-communication'
					},
					// #ifndef MP-QQ || QUICKAPP-WEBVIEW
					// {
					// 	name: 'uCharts 图表',
					// 	url: 'ucharts'
					// },
					// #endif
					// #ifndef QUICKAPP-WEBVIEW
					{
						name: '列表到详情示例',
						url: 'list2detail-list'
					},
					// #endif
					// #ifndef VUE3
					// #ifdef APP-PLUS
					// {
					// 	name: '上下滑动切换视频',
					// 	url: 'swiper-vertical'
					// },
					// #endif
					// #endif
					// #ifdef APP-NVUE
					{
						name: 'swiper-list',
						url: 'swiper-list-nvue'
					},
					// #endif
					{
						name: 'GlobalData和vuex',
						url: 'global'
					},
					// #ifdef APP-PLUS
					{
						name: '问题反馈',
						url: '/platforms/app-plus/feedback/feedback'
					},
					{
						name: '打开外部应用',
						url: 'scheme'
					},
					// #endif
					// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || H5
					// {
					// 	name: '微信自定义组件示例(vant ui)',
					// 	url: 'vant-button'
					// }
					// #endif
				]
杜庆泉's avatar
杜庆泉 已提交
184 185
			}
		},
杜庆泉's avatar
杜庆泉 已提交
186

杜庆泉's avatar
杜庆泉 已提交
187
		methods: {
188 189 190
			/**
			 * 测试延迟任务
			 */
杜庆泉's avatar
杜庆泉 已提交
191
			testTimer: function() {
杜庆泉's avatar
杜庆泉 已提交
192
				doTimerTask({
杜庆泉's avatar
杜庆泉 已提交
193
					start: function(response) {
杜庆泉's avatar
杜庆泉 已提交
194
						uni.showToast({
杜庆泉's avatar
杜庆泉 已提交
195 196
							title: response,
							icon: 'none'
杜庆泉's avatar
杜庆泉 已提交
197 198
						});
					},
杜庆泉's avatar
杜庆泉 已提交
199
					work: function(response) {
杜庆泉's avatar
杜庆泉 已提交
200
						uni.showToast({
杜庆泉's avatar
杜庆泉 已提交
201 202
							title: response,
							icon: 'none'
杜庆泉's avatar
杜庆泉 已提交
203 204 205 206
						});
					},
				});
			},
207 208 209
			/**
			 * 测试周期任务
			 */
杜庆泉's avatar
杜庆泉 已提交
210
			testInterval: function() {
杜庆泉's avatar
杜庆泉 已提交
211
				var ret = doIntervalTask({
杜庆泉's avatar
杜庆泉 已提交
212
					start: function(response) {
杜庆泉's avatar
杜庆泉 已提交
213
						uni.showToast({
杜庆泉's avatar
杜庆泉 已提交
214 215
							title: response,
							icon: 'none'
杜庆泉's avatar
杜庆泉 已提交
216 217
						});
					},
杜庆泉's avatar
杜庆泉 已提交
218
					work: function(response) {
杜庆泉's avatar
杜庆泉 已提交
219
						uni.showToast({
杜庆泉's avatar
杜庆泉 已提交
220 221
							title: response,
							icon: 'none'
杜庆泉's avatar
杜庆泉 已提交
222 223 224 225 226
						});
					},
				});
				this.taskId = ret.taskId;
			},
227 228 229
			/**
			 * 取消周期任务
			 */
杜庆泉's avatar
杜庆泉 已提交
230
			testClearInterval: function() {
杜庆泉's avatar
杜庆泉 已提交
231
				console.log(this.taskId);
杜庆泉's avatar
杜庆泉 已提交
232
				clearIntervalTask(this.taskId);
杜庆泉's avatar
杜庆泉 已提交
233
			},
杜庆泉's avatar
杜庆泉 已提交
234

235 236 237
			/**
			 * 测试添加View实例至顶层容器
			 */
杜庆泉's avatar
杜庆泉 已提交
238
			testAddToDecorView: function() {
杜庆泉's avatar
杜庆泉 已提交
239 240
				addViewToDecorView();
			},
241 242
			/**
			 * 测试移除顶层容器的View实例
杜庆泉's avatar
杜庆泉 已提交
243 244
			 */
			testRemoveToDecorView: function() {
杜庆泉's avatar
杜庆泉 已提交
245 246
				removeViewToDecorView();
			},
杜庆泉's avatar
杜庆泉 已提交
247

248 249 250
			/**
			 * 跳转至资源加载演示界面
			 */
杜庆泉's avatar
杜庆泉 已提交
251
			gotoResourceDemo: function() {
杜庆泉's avatar
杜庆泉 已提交
252
				uni.navigateTo({
杜庆泉's avatar
杜庆泉 已提交
253
					url: '/pages/resource/resource'
杜庆泉's avatar
杜庆泉 已提交
254 255
				})
			},
杜庆泉's avatar
杜庆泉 已提交
256 257

			testLifecyle: function() {
杜庆泉's avatar
杜庆泉 已提交
258
				uni.navigateTo({
杜庆泉's avatar
杜庆泉 已提交
259
					url: '/pages/lifecycle/lifecycle'
杜庆泉's avatar
杜庆泉 已提交
260 261
				})
			},
杜庆泉's avatar
杜庆泉 已提交
262
			testSyntax: function() {
杜庆泉's avatar
杜庆泉 已提交
263
				uni.navigateTo({
杜庆泉's avatar
杜庆泉 已提交
264
					url: '/pages/SyntaxCase/index'
杜庆泉's avatar
杜庆泉 已提交
265 266
				})
			},
杜庆泉's avatar
杜庆泉 已提交
267

杜庆泉's avatar
杜庆泉 已提交
268 269 270
		}
	}
</script>
杜庆泉's avatar
init  
杜庆泉 已提交
271

杜庆泉's avatar
杜庆泉 已提交
272
<style>
杜庆泉's avatar
init  
杜庆泉 已提交
273

杜庆泉's avatar
杜庆泉 已提交
274

杜庆泉's avatar
杜庆泉 已提交
275
</style>