前言：

最近做的小程序活动规则内容比较多，且一直处于修改中。由于小程序并不支持类似Html5中的预排版，所以，活动规则内容修改较大的时候，仍需要对新的内容用小程序的<text>组件做下排版。如此反复几次，就感觉太浪费时间了，所以就写了这个工具页面。

适用范围：

1. 文案部分父层容器及内部相关样式已经写好，文案部分格式比较简单，可以直接用<text>组件来组织；

2. 活动规则内容保存在txt文件中，已在记事本文档中排好大致的版式（换行、隔行等）。

工具代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.      </head>
  7.      <body>
  8.          <div id="app">
  9.              <div class="fileBtn">
  10.                  <form id="uploadForm" action="" method="post" enctype="multipart/form-data">
  11.                      <input type="file" name="uploadFile" id="uploadFile" @change="readFile" style="visibility:hidden;position:absolute;top:0px;width:0px" />
  12.                      <!--隐藏默认标签样式-->
  13.                  </form>
  14.                  <input type="button" class="btn btn-info" value="导入文档" @click="clickUploadBtn" /> 支持.txt .cvs等文件格式
  15.              </div>
  16.              <article>
  17.                  <h4>生成代码预览</h4>
  18.                  <ul style="list-style: none;">
  19.                      <li v-for="i in fileData">{{i}}</li>
  20.                  </ul>
  21.              </article>
  22.          </div>
  23.      </body>
  24.      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  25.      <script>
  26.          Vue.config.silent = false;
  27.          Vue.config.devtools = true;
  28.          var app = new Vue({
  29.              el: '#app',
  30.              data: {
  31.                  fileData: []
  32.              },
  33.              methods: {
  34.                  /**
  35.                   * 上传按钮单击事件
  36.                   */
  37.                  clickUploadBtn: function() {
  38.                      //触发file的点击事件
  39.                      document.getElementById("uploadFile").click()
  40.                  },
  41.                  readFile: function() {
  42.                      var inputBox = document.getElementById("uploadFile");
  43.                      var fileName = inputBox.value;
  44.                      this.isSupportFileType(fileName)
  45.                      var fileType;
  46.                      var reader = new FileReader();
  47.                      var self = this;
  48.                      //其他文档 格式(utf-8编码格式)
  49.                      reader.readAsText(inputBox.files[0]);
  50.                      //reader.readAsBinaryString(inputBox.files[0]);
  51.                      reader.onload = function() {
  52.                          //读取完成后，数据保存在对象的result属性中
  53.                          self.fileData = this.result.split("\n")
  54.                          for(var i in self.fileData) {
  55.                              var str = self.fileData[i]
  56.                              if(!str || /^\s*$/.test(str)) {
  57.                                  //处理空行
  58.                                  str = "<text style='margin-top:20rpx;'></text>"
  59.                              } else {
  60.                                  str = "<text>" + str + "</text>"
  61.                              }
  62.                              self.fileData[i] = str
  63.                          }
  64.                      }
  65.                  },
  66.                  isSupportFileType(filepath) {
  67.                      //为了避免转义反斜杠出问题，这里将对其进行转换
  68.                      var re = /(\\+)/g;
  69.                      var filename = filepath.replace(re, "#");
  70.                      //对路径字符串进行剪切截取
  71.                      var one = filename.split("#");
  72.                      //获取数组中最后一个，即文件名
  73.                      var two = one[one.length - 1];
  74.                      //再对文件名进行截取，以取得后缀名
  75.                      var three = two.split(".");
  76.                      //获取截取的最后一个字符串，即为后缀名
  77.                      var last = three[three.length - 1];
  78.                      //添加需要判断的后缀名类型
  79.                      var tp = "txt,cvs";
  80.                      //返回符合条件的后缀名在字符串中的位置
  81.                      var rs = tp.indexOf(last);
  82.                      console.log(last)
  83.                  }
  84.              }
  85.          })
  86.      </script>
  87.  </html>

关于换行——读取文件之后，对读取到的内容通过 "\n" 进行分割：

  1. this.result.split("\n")

关于隔行——被分割后生成的数组中，原文档中的空行则呗分割成空字符，可以直接根据这个空字符进行处理，即如果是控制符，则给该空行设置样式：

  1.  self.fileData = this.result.split("\n")
  2.  console.log(self.fileData)
  3.  for(var i in self.fileData) {
  4.      var str = self.fileData[i]
  5.      if(!str || /^\s*$/.test(str)) {
  6.          //处理空行
  7.          str = "<text style='margin-top:20rpx;'></text>"
  8.      } else {
  9.          str = "<text>" + str + "</text>"
  10.      }
  11.      self.fileData[i] = str
  12.  }

之所以以正则表达式 !str || /^\s*$/.test(str) 进行判断，是因为这个空字符串在数组中看似‘’，但是经测试 str==''||str==' '||str.length==0  是不成立的，也就是说这个空字符并不是我们常见的空字符，虽然为空但是长度确是1，所以就简单粗暴的采用正则了。

后来也测试了下  str.trim()==0 这个竟然也是可行的，这个特殊的空格，后边有空再研究。

文件格式：

一般来说，产品给的活动规则类的内容都会提供word文档的（已排好大致版式），可以复制粘贴到记事本文档中，所有的换行，隔行都会保留的，这些后边转换的时候可以直接用。

工具预览：

后记：

本例中文案的样式比较简单，基本上是按照产品提供的文档排版的，没有做特别的处理，如果需要，也可以预先编写一些样式类，这样在组合代码的时候，可以加入一些预定义的类样式进去。

个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt/p/9725137.html

微信小程序开发——活动规则类文案文件读取及自动转换为小程序排版代码的更多相关文章

  1. Senparc.Weixin.MP SDK 微信公众平台开发教程（十六）：AccessToken自动管理机制

    在<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>中,我介绍了获取AccessToken(通用接口)的方法. 在实际的开发过程中,所有的高级接口都需 ...

  2. 读书笔记-详解C程序开发中 .c和.h文件的区别

    一个简单的问题:.c和.h文件的区别 学了几个月的C语言,反而觉得越来越不懂了.同样是子程序,可以定义在.c文件中,也可以定义在.h文件中,那这两个文件到底在用法上有什么区别呢? 2楼: 子程序不要定 ...

  3. 微信小程序开发入门教程（四）---自己动手做个小程序

    前面已将基础知识准备的差不多了,下面实际做一个小程序. 一.目标 用于上传照片和文字. 2个主要页面:我me,设置set 二.开始制作 1.打开微信开发者工具(我用的1.02.1907160 Wind ...

  4. Android开发之数组类的面试题目，android工程师java程序员必备

    1,定义一个长度为5的数组 int [] arr=new int[5]; 2,写出静态初始化一个数组的方法 int [] arr={1,2,3,4}; 3,写出可变参数的使用规则    1,只能做为方 ...

  5. 微信公众号开发——通过ffmpeg解决amr文件无法播放问题

    今天刚好碰到个需求,要在微信浏览器中实现录音,并在其他页面上播放.录音功能本身是JS SDK的功能,倒没啥问题,然而录音的文件保存下来是amr格式,而IOS的浏览器没法播放amr(据说微信浏览器的vi ...

  6. 在64位的ubuntu 14.04 上开展32位Qt 程序开发环境配置（pro文件中增加 QMAKE_CXXFLAGS += -m32 命令）

    为了能中一个系统上开发64或32位C++程序,费了些周折,现在终于能够开始干过了.在此记录此时针对Q5.4版本的32位开发环境配置过程. 1. 下载Qt 5.4 的32位版本,进行安装,安装过程中会发 ...

  7. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程（二十一）：在小程序中使用 WebSocket （.NET Core）

    本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料, ...

  9. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

随机推荐

  1. 如何创建一个django工程与和mysql打通

    1. 安装Django # 在指定解释器环境下安装django 1.11.x # 在真实python3环境下: pip3 install django==1.11.x # 查看django版本: dj ...

  2. 通过Sonar的代码质量报告学习【如何写安全高质量的代码】

    1.不要用.size(),改用isEmpty() Using Collection.size() to test for emptiness works, but using Collection.i ...

  3. Java快速开发平台——JEECG 3.7.8 版本发布！我们的目标是有鱼丸也有粗面

    JEECG 3.7.8 版本发布,多样化主题UI满足你不同的需求 导读                    ⊙平台性能优化,速度闪电般提升           ⊙提供5套新的主流UI代码生成器模板( ...

  4. JEECG 3.7.3 新春版本发布，企业级JAVA快速开发平台

    JEECG 3.7.3新春版本发布 -  微云快速开发平台 导读           ⊙精美Echart报表 ⊙二维码生成功能 ⊙Online接口改造采用JWT机制 ⊙智能菜单搜索 ⊙代码生成器模板优 ...

  5. Spring注解标签详解@Autowired @Qualifier等

    http://blog.csdn.net/wangsr4java/article/details/42777855 @Component.@Repository.@Service.@Controlle ...

  6. css：清楚浮动

    这个清楚浮动的方法最常用,给浮动字元素的父盒子,也就是不浮动元素,添加一个lhearfix的类,其类的css样式为: .clearfix:after{ /*必须要写这三句话*/ content:''; ...

  7. Eclipse开发Web常见异常

    1.java.lang.IllegalStateException: Web app root system property already set to different value 错误原因: ...

  8. plsql和tsql常用函数比对

    http://www.jb51.net/list/list_154_1.htm 数学函数 1.绝对值 S:select abs(-1) value O:select abs(-1) value fro ...

  9. Oracle数据库中的数据出错的解决办法

    http://www.jcwcn.com/article/database/oracle/ 今天上班犯了一个严重的错误:把我们系统所使用的Oracle数据库中的数据给改掉了!当发现自己改错时,顿时冒了 ...

  10. 整合mybaties 逆向生成 pojo mapper.xml

    第一步:配置properties 第二步:放入generatorConfig.xml文件  在总目录下  这个是生成工具 第三步:放入工具类,自动生成用的,  pom里面要加入6个依赖 第四步:运行u ...