发版测试

css/question.css

@@ -92,6 +92,7 @@ body {
     height: .7rem;
 }
 .audio div {
+    width: 85%;
     font-size: .32rem;
 }
 .question-photo {
@@ -153,12 +154,12 @@ body {
     left: 15%;
     top: 10%;
     width: 70%;
-    height: 70%;
 }
 
 canvas {
     position: absolute;
     top: -9999px;
+    left: -9999px;
 }
 
 .baocun {

index.html

@@ -19,14 +19,14 @@
      var jionData = {
         "code": GetQueryString('code')
      } 
-     alert(GetQueryString('code'))
      $.ajax({
             url: "https://readertest.lingjiao.cn/activity/wx/ucenter/wxlogin",
             type: 'GEt',
             contentType:'application/json;charset=utf-8',
             data: jionData,
             success: function (userData) {
-                alert(JSON.stringify(userData))
+                alert(JSON.stringify(userData.data))
+                localStorage.setItem('userData', JSON.stringify(userData.data));
             },
             error: function () {
                 alert('失败')

utils/size.js

@@ -20,4 +20,4 @@ function GetQueryString(name){
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); 
     return null;
-}
+}

view/question.html

@@ -18,7 +18,8 @@
         <div class="subject">
             <img class="inset" src="../image/question/inset.png" alt="inset">
             <img class="bottom" src="../image/question/bottom.png" alt="bottom">
-            <audio id="audio" src="https://efunbox.lingjiao.cn/activity/resource/201901004.mp3" autoplay="autoplay" loop="loop" style=" position: absolute;top: .5rem;left: .5rem;">
+            <!--需要点击播放-->
+            <audio id="audio" src="">
                 您的浏览器不支持 audio 标签。
             </audio>
             <div class="question-box"></div>
@@ -49,7 +50,8 @@
             <canvas id="myCanvas" width="750px" height="1334px">
                 您的浏览器不支持canvas标签。
             </canvas>
-            <img class="bg" src="../image/question/2.jpg" alt="">
+            <img class="bg" src="" alt="">
+            <!--
             <div class="baocun">长按保存，并分享至朋友圈</div>
             <div class="code">
                 <img src="../image/question/2.jpg" alt="">
@@ -58,6 +60,7 @@
                     <span>即可获得小学课文朗读配音奖品</span>
                 </div>
             </div>
+            -->
             <!--
             <img class="head" src="../image/question/头像.jpg" alt="">
             -->
@@ -66,7 +69,11 @@
     </div>
 </body>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-<script>
+<script> 
+    var user = JSON.parse(localStorage.getItem('userData'));
+    var uid = user.uid ? user.id : '7';
+    var avatar = user.avatar ? user.avatar : '';
+    var name = user.wechatName ? user.wechatName : '小朋友';
     //获取Canvas对象(画布)
     var canvas = document.getElementById("myCanvas");
     var data = {
@@ -77,9 +84,9 @@
     }
     var ind = 0;
     function recursion() {
-        ajaxData("https://readertest.lingjiao.cn/activity/activity", '7', data, function(result){
+        ajaxData("https://readertest.lingjiao.cn/activity/activity/xq", 7, data, function(result){
             var length = result.data.questionNum;
-            if( ind >= length) {
+            if( ind >= length && result.data.isEnd === 0) {
                 $('#audio').attr('src', "")
                 $('.popup').show();
                 //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
@@ -87,20 +94,24 @@
                     //获取对应的CanvasRenderingContext2D对象(画笔)
                     var ctx = canvas.getContext("2d");
                     //回调地狱，可优化，暂时这样写
-                    canvasImg(ctx, '../image/question/2.jpg', 0, 0, '750', '1334', function() {
-                        canvasImg(ctx, '../image/question/2.jpg', 200, 400, '50', '50', function() {
-                            ctx.moveTo(125,20);
-                            ctx.lineTo(125,170);
+                    alert(result.data.poster)
+                    alert(result.data.qrCode)
+                    canvasImg(ctx, result.data.poster, 0, 0, '750', '1334', function() {
+                        canvasImg(ctx, result.data.qrCode, 580, 1180, '140', '140', function() {
+                            ctx.moveTo(365,20);
+                            ctx.lineTo(365,170);
                             ctx.fillStyle = '#fff';
-                            ctx.font="14px Arial";
+                            ctx.font="36px Arial";
                             ctx.textAlign="center";
-                            ctx.fillText("王丽丽王丽丽丽丽学前测评报告",125,120);
-                            circleImg(ctx, '../image/question/2.jpg', 110, 290, 15)
+                            alert(name)
+                            ctx.fillText(name + "学前测评报告",365,370);
+                            alert(avatar)
+                            circleImg(ctx, avatar, 328, 836, 41)
                         })
                     })
                     ctx.restore();
                 }
-                //0.5s后生成图片
+                // 0.5s后生成图片
                 setTimeout(function() {
                     var dataURL = canvas.toDataURL("image/png",1.0);
                     $('.bg').attr('src', dataURL)
@@ -163,7 +174,7 @@
                         '<li data-answer="C">'+ datas.optionC +'</li>' +
                     '</ul>'
         $('.question').eq(ind).prepend(renders);
-        // audioAutoPlay('audio');       
+        audioAutoPlay('audio');     
     }
     function canvasImg (ctx, url, x, y, w, h, success) {
         //创建新的图片对象
@@ -195,20 +206,14 @@
         };
     }
     // 解决苹果不能播放
-//     function audioAutoPlay(id){
-//     　　var audio = document.getElementById(id),
-// 　　　　play = function(){
-// 　　　　　　audio.play();
-// 　　　　　　document.removeEventListener("touchstart",play, false);
-// 　　　　};
-//     　　document.addEventListener("WeixinJSBridgeReady", function () {//微信
-//     　　　　play();
-//     　　}, false);
-//     　　document.addEventListener('YixinJSBridgeReady', function() {//易信
-//     　　　　play();
-//     　　}, false);
-//         console.log(audio)
-//     　　document.addEventListener("touchstart",play, false);
-//     }
+    function audioAutoPlay(id){
+    　　var audio = document.getElementById(id),
+　　　　play = function(){
+            audio.load();
+　　　　　　 audio.play();
+            window.removeEventListener("touchstart",play, false);
+　　　　};
+        window.addEventListener("touchstart",play, false);
+    }
 </script>
 </html>