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

前言:

最近做的小程序活动规则内容比较多,且一直处于修改中。由于小程序并不支持类似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" 进行分割:

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

原文地址:https://www.cnblogs.com/xyyt/p/9725137.html

时间: 2024-11-02 21:13:08

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

Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制

Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制 在<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>中,我介绍了获取AccessToken(通用接口)的方法. 在实际的开发过程中,所有的高级接口都需要提供AccessToken,因此我们每次在调用高级接口之前,都需要执行一次获取AccessToken的方法,例如: 1 var accessToken = AccessTokenContainer.

微信小程序开发问题踩坑整理,web-view、openID、小程序支付等汇总

微信小程序开发过程中遇到的问题踩坑整理,内容包括web-view.openID.小程序支付.网络请求等等一系列问题汇总,希望对大家能有一定帮助和启发. 内容如下: 关于小程序web-view bindmessage 真机不触发的问题 小程序iOS访问服务器访问不上,但android没有问题 关于ssl证书加密后小程序访问出错问题 微信拨打电话数据调用问题,如何一键拨号 后台php调用微信小程序接口获取openid,返回的是null 小程序图片显示问题,开发者工具显示,手机预览不显示 微信小程序支

基于VS2013的应用程序开发--Combo Box类

1.判断是否为空 m_CheckPoint.GetCurSel()==-1; 2.清空 m_CheckPoint.ResetContent(); 3.添加 m_CheckPoint.AddString(str); 4.获取某一索引的值 m_CheckPoint.GetLBText(j,str1);//j为索引,str1为存储变量 5.删除某一索引的值 m_CheckPoint.DeleteString(j);//j为索引 6.获得combox选中的值 m_CheckPoint.GetLBText

Eclipse+Android开发环境搭建失败--R文件出错,自动新建Android application project 出错。

Eclipse : Mars.2 Release (4.5.2)  + Android6.0(api23)以上的tools,SDK,以及相关的Extras   +  ADT 23.0.6,我都装了.   由于是初学者,一开始去官网准备各种资源. 上面是现在的android官网 和  google推荐使用的 android studio ,基本上已经看不到sdk完整包的下载了. 我是从网上下的旧版本的sdk包,然后一开始用的最新的ADT(23.0.7),然后我再通过android manager

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com

Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)

本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料,例如参考 SignalR 的官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-2.1 我们先看一下完成本教程内容后,在小程序内实现的 WebSocket 效果: 私有及群发消息

微信小程序开发基础(一)「配置」与「逻辑层」

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单

微信小程序开发提升效率

http://www.ifanr.com/minapp/790017 微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法. 众所周知,Callback-Hell(回调地狱)是传统 JS 语法上的历史问题.但毕竟称手的工具是开发效率的源泉,因此笔者对当前版本的微信小程序 API 做了简单的封装--weapp. 同时,微信小程序框架本身专注于交互和 UI 的实现,并未提供内置的状态管理.如果众多的异步操作都直接在 App 或 Page 中一一实现,相信开发起来会很困难,

微信小程序开发(1) 天气预报

本文介绍如何使用微信小程序开发天气预报功能. 一.项目文件列表 二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgrou