前言：
最近做的小程序活動規則內容比較多，且一直處於修改中。由於小程序並不支持類似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