uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果

本文介绍: uniapp app端引入 turn js

1、首先：

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持 app–vue和web。

turn.js 官网在这里： Turn.js: The page flip effect in HTML5

如果只是单纯的H5端引入 turnjs，是不需要用renderjs的，但是我的项目因为是在app端，就得用到 renderjs

我们可以这样理解，uniapp是一个大圆，renderjs 就是大圆中的小圆，那么turnjs就住在这个小圆里，我们把这个小圆叫做视图层，大圆叫做逻辑层

2、基本实现思路：

2.1、第一步先确定 renderjs和uniapp的数据通信方式，完成了数据通信，才可以针对turnjs的配置项，做些uniapp 自己的逻辑层的操作。

renderjs 使用方式可以查阅官网，直接介绍如何通信，

2.1.1、逻辑层向视图层传递数据：

<view class="flipbook-viewport" 
			:rect="rect" 
			:change:rect="updateRenderData"	
&gt;
<view class="container"  &gt;
					<view class="flipbook" id="flipbook" &gt;
						------------
					</view&gt;
				</view&gt;
			</view&gt;

rect是逻辑层对应的属性或者方法，当值改变时，就会触发视图层对应的逻辑操作。rect 可以改成自己任意名字，逻辑操作的名字也可以改成自己任意的，可成对添加多个。

2.1.2视图层向逻辑层的通信：

这部分操作必须在dom上绑定相应的主动触发事件，比如，touchend、click才可以触发，例如：

<view class="flipbook-viewport" 
			:rect="rect" 
			:change:rect="updateRenderData"	
            @touchend="turnjs.onClick"
>
<view class="container"  >
					<view class="flipbook" id="flipbook" >
						<div class='hard'></div>
					</view>
				</view>
			</view>

<script>    // 逻辑层的js
	import '@/utils/jquery.min.1.7.js';
	import turn from '@/utils/turn.js';
	export default {
		computed: {			
			rect() {
				return {					
					width: this.width,
					height: this.height
				}

			}
			
		},
methods:{
    // 接收renderjs发回的数据
			onViewClick(options) {
			     console.log('renderjsCall回调');
			     console.log(options);
				 
			    },
}			
			
	}
</script>

<script lang="renderjs" module="turnjs">
// 视图层的js
	import '@/utils/jquery.min.1.7.js';
	import turn from '@/utils/turn.js';
	export default {
		data() {
			return {
				width: '',
				height: ''				
			}
		},		
		mounted() {	
			this.onTurn();			
		},
		methods: {			
								
			onClick(event, ownerInstance) {
				// 操作内容
                ownerInstance.callMethod('onViewClick', {
							curpage: 0							
						})
				
				},				
			onTurn() {
				$("#flipbook").turn({
					autoCenter: true,
					display: 'single',
					height: this.height,
					width: this.width,
					elevation: 50,
					duration:500,
					gradients: true,
					when: {
							turning: function(event, page, pageObject) {
								// 翻页时							
						},	}
				});				
			}
			
		}		
	}
</script>

通过@touchend=”turnjs.onCli ck 来主动发起视图层的逻辑，然后逻辑内部通过 ownerInstance.callMeth od 传递数据到逻辑层，“onViewClic k”，就是逻辑层内接收数据的函数，然后进行一系列的操作就好了。

3、说一下turnjs的注意事项，官方的css 样式贴出来，我的项目中，引入情况不生效，所以就写到文件里了。

.flipbook-viewport{overflow:hidden;width:100%;height:100%;.container{display: flex;justify-content: center;align-items: center;margin: 0 auto;}.flipbook ::v-deep .page{background-color: white;background-repeat: no-repeat;background-size: 100% 100%;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);img {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;}}.shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;}
}

同时我发现了一个现象，如果的page 内容可以写死，那就简单太多，直接在常规的data 里面定义数组，在dom中去渲染就好。page中的内容如果是动态的，会因为初始化的问题无法启动turn，所以我在最开始就添加了第一页的内容，保证能启动turnjs，应该是还有更好的办法，我没有想到。

<view class="flipbook" id="flipbook" >
						<div class='hard'></div>
					</view>

然后通过renderjs 里面添加内容的监听，如果内容有改变，就添加页面

updateSimulationText(newVal, oldVal) {  //renderjs里面的操作
				$("#flipbook").turn('pages',1)     // 内容变化时，保留1页
				$("#flipbook").turn('pages',newVal.arr.length) // 添加数组长度的页数				
				for (var i=0; i<newVal.arr.length;i++) {
					var tagHtml = "";							
					tagHtml = "<div></div>";     // 一个page的内容					
					if (!$("#flipbook").turn('hasPage', i+2)) {
					        // Create an element for this page
					        var element = $('<div />').html('');
					        // Add the page
					        $("#flipbook").turn('addPage', element, i+2);
					        element.html(tagHtml);
					}
				}				
				
			},