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

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就住在这个小圆里，我们把这个小圆叫做视图层，大圆叫做逻辑层

<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;

<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>

.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;}
}

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

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);
					}
				}				
				
			},