1.0.5

pages/behaviors/commonBehavior.js

@@ -0,0 +1,27 @@
+/**
+ * 引导容器相关行为
+ * 用于共享引导容器相关的方法和属性
+ */
+module.exports = Behavior({
+  methods: {
+    /**
+     * 关闭引导容器
+     * 设置IsShowGuideContainer为false并保存到本地存储
+     */
+    closeGuideContainer: function() {
+      this.setData({
+        IsShowGuideContainer: false,
+      });
+      wx.setStorageSync('IsShowGuideContainer', false);
+    },
+    setDataBoolean:function(e){
+      let name=e.currentTarget.dataset.name;
+      let saveData=e.currentTarget.dataset.savedata;
+      this.data[name] = !this.data[name];
+      this.setData(this.data);
+
+      if (saveData)
+        wx.setStorageSync(name, saveData);
+    },
+  }
+})

pages/main/article.js

@@ -1,6 +1,7 @@
 import common from '../../utils/util';
 import main from '../../utils/main';
 import animation from '../../utils/animation';
+import commonBehavior from '../behaviors/commonBehavior';
 
 const Theme=[{
     "Name":"DarkColor",
@@ -17,6 +18,7 @@ const Theme=[{
 const app = getApp();
 
 Page({
+  behaviors: [commonBehavior],
   data: {
     Words:"",
     IsShowFirstOpen:true,
@@ -521,12 +523,6 @@ Page({
       showAnimation: 'remind-slide-down'
     });
   },
-  closeGuideContainer:function(){
-    this.setData({
-      IsShowGuideContainer:false,
-    });
-    wx.setStorageSync('IsShowGuideContainer', false);
-  },
   goto: function (e) {
     let that=this;
     var url=e.currentTarget.dataset.url;
@@ -534,11 +530,7 @@ Page({
       url: url,
     });
   },
-  // 阻止示例面板的触摸事件传递到底层
-  catchTouchMove: function(e) {
-    // 这个函数不需要做任何事情，只需要捕获事件防止冒泡
-    return false;
-  },
+  catchTouchMove: main.catchTouchMove,
   onShareAppMessage: function () {
     return {
       title: app.globalData.ShareTitle,

pages/main/article.wxml

@@ -134,16 +134,10 @@
 </view>
 </block>
 
+<!-- 引入引导模板 -->
+<import src="../templates/guide-container.wxml"/>
 <!-- 显示引导 -->
-<view  wx:if="{{IsShowGuideContainer}}" class="panelGuideContainer container FlexColumn">
-  <view class="panelGuideContainerTop panelGuideContainer0" style='height:{{panelGuideContainerTop}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerLeft panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;width:{{panelGuideContainerWidth1}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerRight panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;left:{{panelGuideContainerLeft2}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerBottom panelGuideContainer0" style='top:{{panelGuideContainerTop+panelGuideContainerHeight1-1}}rpx;height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <image class="panelGuideContainerImage {{panelGuideContainerImage}}" style="left:{{panelGuideContainerImageLeft}}rpx;top:{{panelGuideContainerImageTop}}rpx;" src="../images/{{panelGuideContainerImage}}.png" catchtouchmove="catchTouchMove">
-    <view class="panelGuideContainerClose FlexColumn" style="left:{{panelGuideContainerCloseLeft}}rpx;top:{{panelGuideContainerCloseTop}}rpx;" catchtap="closeGuideContainer"></view>
-  </image>
-</view>
+<template is="guide-container" data="{{IsShowGuideContainer, panelGuideContainerTop, panelGuideContainerWidth1, panelGuideContainerHeight1, panelGuideContainerLeft2, Containnerheight, panelGuideContainerImage, panelGuideContainerImageLeft, panelGuideContainerImageTop, panelGuideContainerCloseLeft, panelGuideContainerCloseTop}}"/>
 
 <!-- 显示生成出错 -->
 <view wx:if="{{IsBuildError}}" class="container {{ThemeCSS}} FlexColumn" style='min-height:{{Containnerheight}}rpx;'>

pages/main/index.js

@@ -1,10 +1,12 @@
 import common from '../../utils/util';
 import main from '../../utils/main';
 import animation from '../../utils/animation';
+import commonBehavior from '../behaviors/commonBehavior';
 
 const app = getApp();
 
 Page({
+  behaviors: [commonBehavior],
   data: {
     IsShowRemind:false,
     remindAnimation: "",
@@ -71,17 +73,7 @@ Page({
     main.showGuideContainer(that,"#txtWordsInput",0,110,"pic_ha01",396,248,-5);
     wx.setStorageSync('IsShowGuideContainer', true);
   },
-  closeGuideContainer:function(){
-    this.setData({
-      IsShowGuideContainer:false,
-    });
-    wx.setStorageSync('IsShowGuideContainer', false);
-  },
-  // 阻止示例面板的触摸事件传递到底层
-  catchTouchMove: function(e) {
-    // 这个函数不需要做任何事情，只需要捕获事件防止冒泡
-    return false;
-  },
+  catchTouchMove: main.catchTouchMove,
   onShareAppMessage: function () {
     return {
       title: app.globalData.ShareTitle,

pages/main/index.wxml

@@ -56,13 +56,7 @@
   </view>
 </view>
 
+<!-- 引入引导模板 -->
+<import src="../templates/guide-container.wxml"/>
 <!-- 显示引导 -->
-<view  wx:if="{{IsShowGuideContainer}}" class="panelGuideContainer container FlexColumn">
-  <view class="panelGuideContainerTop panelGuideContainer0" style='height:{{panelGuideContainerTop}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerLeft panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;width:{{panelGuideContainerWidth1}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerRight panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;left:{{panelGuideContainerLeft2}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerBottom panelGuideContainer0" style='top:{{panelGuideContainerTop+panelGuideContainerHeight1-1}}rpx;height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <image class="panelGuideContainerImage {{panelGuideContainerImage}}" style="left:{{panelGuideContainerImageLeft}}rpx;top:{{panelGuideContainerImageTop}}rpx;" src="../images/{{panelGuideContainerImage}}.png" catchtouchmove="catchTouchMove">
-    <view class="panelGuideContainerClose FlexColumn" style="left:{{panelGuideContainerCloseLeft}}rpx;top:{{panelGuideContainerCloseTop}}rpx;" catchtap="closeGuideContainer"></view>
-  </image>
-</view>
+<template is="guide-container" data="{{IsShowGuideContainer, panelGuideContainerTop, panelGuideContainerWidth1, panelGuideContainerHeight1, panelGuideContainerLeft2, Containnerheight, panelGuideContainerImage, panelGuideContainerImageLeft, panelGuideContainerImageTop, panelGuideContainerCloseLeft, panelGuideContainerCloseTop}}"/>

pages/main/paste.js

@@ -1,5 +1,6 @@
 import common from '../../utils/util';
 import main from '../../utils/main';
+import commonBehavior from '../behaviors/commonBehavior';
 
 const COUNT_MAX=10;
 const app = getApp();
@@ -8,6 +9,7 @@ let EntryWords="";//进来的单词，用于返回恢复
 let IsEdit=false;  //是否编辑过，编辑过不恢复
 
 Page({
+  behaviors: [commonBehavior],
   data: {
     Words:"",
     importWordStr:"",//输入过的单词
@@ -76,12 +78,6 @@ Page({
       app.globalData.SelectedWords=EntryWords;
     }
   },
-  
-  showExample:function(){
-    this.setData({
-      IsShowExample:!this.data.IsShowExample,
-    });
-  },
   setWordsArr:function(data){
     let that=this;
     let words=[];
@@ -119,11 +115,7 @@ Page({
     });
     IsEdit=false;
   },
-  // 阻止示例面板的触摸事件传递到底层
-  catchTouchMove: function(e) {
-    // 这个函数不需要做任何事情，只需要捕获事件防止冒泡
-    return false;
-  },
+  catchTouchMove: main.catchTouchMove,
   onShareAppMessage: function () {
     return {
       title: app.globalData.ShareTitle,

pages/main/paste.wxml

@@ -2,7 +2,7 @@
   <view class="panel1 FlexColumn">
     <view class="text01">格式1行1个</view>
     <view class="panel11 FlexRow" >
-      <view class="panel111 FlexRow" bind:tap="showExample">
+      <view class="panel111 FlexRow" bind:tap="setDataBoolean" data-name="IsShowExample">
         <image src="../images/sysIcon_a01.png" class="sysIcon_a01"></image>
         <view>示范</view>
       </view>
@@ -27,12 +27,7 @@
 </view>
 
 
-<view wx:if="{{IsShowExample}}" class="panelExample container FlexColumn" style='min-height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove">
-  <scroll-view scroll-y="true" class="exampleScrollView" style='height:{{Containnerheight}}rpx;'>
-    <image src="../images/pic_h02.png" class="pic_h01"></image>
-  </scroll-view>
-  <image src="../images/pic_04.png" class="pic_04"></image>
-  <view class="panelExampleBtn FlexColumn" catch:tap="showExample">
-    <view class="panelExampleBtn1">关闭</view>
-  </view>
-</view>
+<!-- 引入示例面板模板 -->
+<import src="../templates/example-panel.wxml"/>
+<!-- 显示示例面板 -->
+<template is="example-panel" data="{{IsShowExample, Containnerheight, exampleImagePath: '../images/pic_h02.png'}}"/>

pages/main/selectword.js

@@ -1,10 +1,12 @@
 import common from '../../utils/util';
 import main from '../../utils/main';
+import commonBehavior from '../behaviors/commonBehavior';
 
 const COUNT_MAX=10;
 const app = getApp();
 
 Page({
+  behaviors: [commonBehavior],
   data: {
     IsShowAlert:false,
     Count:0,
@@ -122,16 +124,7 @@ Page({
       });
     }
   },
-  showExample:function(){
-    this.setData({
-      IsShowExample:!this.data.IsShowExample,
-    });
-  },
-  // 阻止示例面板的触摸事件传递到底层
-  catchTouchMove: function(e) {
-    // 这个函数不需要做任何事情，只需要捕获事件防止冒泡
-    return false;
-  },
+  catchTouchMove: main.catchTouchMove,
   onShareAppMessage: function () {
     return {
       title: app.globalData.ShareTitle,

pages/main/selectword.wxml

@@ -3,7 +3,7 @@
     <view class="panel1 FlexColumn">
       <view class="text01">至少选1个</view>
       <view class="panel11 FlexRow" >
-        <view class="panel111 FlexRow" bind:tap="showExample">
+        <view class="panel111 FlexRow" catch:tap="setDataBoolean" data-name="IsShowExample">
           <image src="../images/sysIcon_a01.png" class="sysIcon_a01"></image>
           <view>示范</view>
         </view>
@@ -31,7 +31,7 @@
       <image src="../images/pic_05.png" class="pic_05"></image>
       <view class="text05">未识别到单词</view>
       <view class="text06">请拍摄含有英语单词、句子的画面</view>
-      <view class="panelNull1 FlexRow" catch:tap="showExample">
+      <view class="panelNull1 FlexRow" catch:tap="setDataBoolean" data-name="IsShowExample">
         <image src="../images/sysIcon_a01.png" class="sysIcon_a01"></image>
         <view>提升识别质量</view>
       </view>
@@ -56,12 +56,7 @@
 </view>
 
 
-<view wx:if="{{IsShowExample}}" class="panelExample container FlexColumn" style='min-height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove">
-  <scroll-view scroll-y="true" class="exampleScrollView" style='height:{{Containnerheight}}rpx;'>
-    <image src="../images/pic_h03.png" class="pic_h01"></image>
-  </scroll-view>
-  <image src="../images/pic_04.png" class="pic_04"></image>
-  <view class="panelExampleBtn FlexColumn" catch:tap="showExample">
-    <view class="panelExampleBtn1">关闭</view>
-  </view>
-</view>
+<!-- 引入示例面板模板 -->
+<import src="../templates/example-panel.wxml"/>
+<!-- 显示示例面板 -->
+<template is="example-panel" data="{{IsShowExample, Containnerheight, exampleImagePath: '../images/pic_h03.png'}}"/>

pages/main/wordsinput.js

@@ -1,11 +1,13 @@
 import common from '../../utils/util';
 import main from '../../utils/main';
 import animation from '../../utils/animation';
+import commonBehavior from '../behaviors/commonBehavior';
 
 const app = getApp();
 let isFocus=true;
 
 Page({
+  behaviors: [commonBehavior],
   data: {
     Words:[],
     IsShowAlert:false,
@@ -245,28 +247,6 @@ Page({
       }
     });
   },
-  setMenu:function(){
-    this.setData({
-      IsShowSetPanel:!this.data.IsShowSetPanel,
-    });
-  },
-  showExample:function(){
-    this.setData({
-      IsShowExample:!this.data.IsShowExample,
-    });
-  },
-  showGuideRemind:function(){
-    this.setData({
-      IsShowGuideRemind:!this.data.IsShowGuideRemind,
-    });
-    wx.setStorageSync('IsShowGuideRemind', 2);
-  },
-  closeGuideContainer:function(){
-    this.setData({
-      IsShowGuideContainer:false,
-    });
-    wx.setStorageSync('IsShowGuideContainer', false);
-  },
   keyboardOK:function(e){
     if (wx.getStorageSync('IsShowGuideContainer')){
       return ;
@@ -441,11 +421,7 @@ Page({
   showRemind:function(e){
     animation.toggleRemindWithAnimation(this);
   },
-  // 阻止示例面板的触摸事件传递到底层
-  catchTouchMove: function(e) {
-    // 这个函数不需要做任何事情，只需要捕获事件防止冒泡
-    return false;
-  },
+  catchTouchMove: main.catchTouchMove,
   onShareAppMessage: function () {
     return {
       title: app.globalData.ShareTitle,

pages/main/wordsinput.wxml

@@ -2,7 +2,7 @@
   <view class="panel1 FlexColumn">
     <view class="text01">输入单词 5-10个</view>
     <view class="panel11 FlexRow" >
-      <view class="panel111 FlexRow" bind:tap="showExample">
+      <view class="panel111 FlexRow" bind:tap="setDataBoolean" data-name="IsShowExample">
         <image src="../images/sysIcon_a01.png" class="sysIcon_a01"></image>
         <view>示范</view>
       </view>
@@ -36,7 +36,7 @@
       <text class="panelGuideText1">新手引导</text>
       <text>带您体验</text>
     </text>
-    <view class="panelGuide2 FlexRow" bind:tap="showGuideRemind">
+    <view class="panelGuide2 FlexRow" bind:tap="setDataBoolean" data-name="IsShowGuideRemind" data-savedata="2">
       <image src="../images/sysIcon_a03.png" class="sysIcon_a03"></image>
     </view>
   </view>
@@ -100,33 +100,22 @@
       <view>生成短文</view>
     </view>
 
-    <view class="panelClose FlexRow" capture-bind:tap="setMenu">
+    <view class="panelClose FlexRow" capture-bind:tap="setDataBoolean" data-name="IsShowSetPanel">
       <view class="panelClose1 FlexRow">
         <image src="../images/sysIcon_a03.png" class="sysIcon_a03"></image>
       </view>
     </view>
   </view>
 </view>
+<!-- 引入引导模板 -->
+<import src="../templates/guide-container.wxml"/>
 <!-- 显示引导 -->
-<view  wx:if="{{IsShowGuideContainer}}" class="panelGuideContainer container FlexColumn">
-  <view class="panelGuideContainerTop panelGuideContainer0" style='height:{{panelGuideContainerTop}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerLeft panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;width:{{panelGuideContainerWidth1}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerRight panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;left:{{panelGuideContainerLeft2}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <view class="panelGuideContainerBottom panelGuideContainer0" style='top:{{panelGuideContainerTop+panelGuideContainerHeight1-1}}rpx;height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove"></view>
-  <image class="panelGuideContainerImage {{panelGuideContainerImage}}" style="left:{{panelGuideContainerImageLeft}}rpx;top:{{panelGuideContainerImageTop}}rpx;" src="../images/{{panelGuideContainerImage}}.png" catchtouchmove="catchTouchMove">
-    <view class="panelGuideContainerClose FlexColumn" style="left:{{panelGuideContainerCloseLeft}}rpx;top:{{panelGuideContainerCloseTop}}rpx;" catchtap="closeGuideContainer"></view>
-  </image>
-</view>
+<template is="guide-container" data="{{IsShowGuideContainer, panelGuideContainerTop, panelGuideContainerWidth1, panelGuideContainerHeight1, panelGuideContainerLeft2, Containnerheight, panelGuideContainerImage, panelGuideContainerImageLeft, panelGuideContainerImageTop, panelGuideContainerCloseLeft, panelGuideContainerCloseTop}}"/>
 
-<view wx:if="{{IsShowExample}}" class="panelExample container FlexColumn" style='min-height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove">
-  <scroll-view scroll-y="true" class="exampleScrollView" style='height:{{Containnerheight}}rpx;'>
-    <image src="../images/pic_h01.png" class="pic_h01"></image>
-  </scroll-view>
-  <image src="../images/pic_04.png" class="pic_04"></image>
-  <view class="panelExampleBtn FlexColumn" catch:tap="showExample">
-    <view class="panelExampleBtn1">关闭</view>
-  </view>
-</view>
+<!-- 引入示例面板模板 -->
+<import src="../templates/example-panel.wxml"/>
+<!-- 显示示例面板 -->
+<template is="example-panel" data="{{IsShowExample, Containnerheight, exampleImagePath: '../images/pic_h01.png'}}"/>
 
 <view wx:if="{{IsShowRemind}}" class="panelRemindParent {{remindAnimation}} container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
   <view class="panelRemind FlexColumn">

pages/templates/example-panel.wxml

@@ -0,0 +1,12 @@
+<!-- 示例面板模板 -->
+<template name="example-panel">
+  <view wx:if="{{IsShowExample}}" class="panelExample container FlexColumn" style='min-height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove">
+    <scroll-view scroll-y="true" class="exampleScrollView" style='height:{{Containnerheight}}rpx;'>
+      <image src="{{exampleImagePath}}" class="pic_h01"></image>
+    </scroll-view>
+    <image src="../images/pic_04.png" class="pic_04"></image>
+    <view class="panelExampleBtn FlexColumn" catch:tap="setDataBoolean" data-name="IsShowExample">
+      <view class="panelExampleBtn1">关闭</view>
+    </view>
+  </view>
+</template>

pages/templates/guide-container.wxml

@@ -0,0 +1,13 @@
+
+<!-- 显示引导模板 -->
+<template name="guide-container">
+  <view wx:if="{{IsShowGuideContainer}}" class="panelGuideContainer container FlexColumn">
+    <view class="panelGuideContainerTop panelGuideContainer0" style='height:{{panelGuideContainerTop}}rpx;' catchtouchmove="catchTouchMove"></view>
+    <view class="panelGuideContainerLeft panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;width:{{panelGuideContainerWidth1}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
+    <view class="panelGuideContainerRight panelGuideContainer0" style='top:{{panelGuideContainerTop}}rpx;left:{{panelGuideContainerLeft2}}rpx;height:{{panelGuideContainerHeight1}}rpx;' catchtouchmove="catchTouchMove"></view>
+    <view class="panelGuideContainerBottom panelGuideContainer0" style='top:{{panelGuideContainerTop+panelGuideContainerHeight1-1}}rpx;height:{{Containnerheight}}rpx;' catchtouchmove="catchTouchMove"></view>
+    <image class="panelGuideContainerImage {{panelGuideContainerImage}}" style="left:{{panelGuideContainerImageLeft}}rpx;top:{{panelGuideContainerImageTop}}rpx;" src="../images/{{panelGuideContainerImage}}.png" catchtouchmove="catchTouchMove">
+      <view class="panelGuideContainerClose FlexColumn" style="left:{{panelGuideContainerCloseLeft}}rpx;top:{{panelGuideContainerCloseTop}}rpx;" catchtap="closeGuideContainer"></view>
+    </image>
+  </view>
+</template>

utils/main.js

@@ -230,6 +230,12 @@ function showGuideContainer(obj,myClass,imageLeft,imageTop,imageName,closeLeft,c
 }
 
 
+// 阻止示例面板的触摸事件传递到底层
+function catchTouchMove(e) {
+  // 这个函数不需要做任何事情，只需要捕获事件防止冒泡
+  return false;
+}
+
 module.exports = {
   getData: getData,
   postData: postData,
@@ -239,4 +245,5 @@ module.exports = {
   checkGenerating:checkGenerating,
   getPageInfo:getPageInfo,
   showGuideContainer:showGuideContainer,
+  catchTouchMove: catchTouchMove,
 }