• 微信小程序全局水印组件


    • 在components文件夹下新建watermark页面

    watermark.wxml

    1. <view class="water_top" style="pointer-events: none;">
    2. <view class="water-text">{{watermarkText}}view>
    3. <view class="water-text">{{watermarkText}}view>
    4. <view class="water-text">{{watermarkText}}view>
    5. <view class="water-text">{{watermarkText}}view>
    6. <view class="water-text">{{watermarkText}}view>
    7. <view class="water-text">{{watermarkText}}view>
    8. <view class="water-text">{{watermarkText}}view>
    9. <view class="water-text">{{watermarkText}}view>
    10. <view class="water-text">{{watermarkText}}view>
    11. view>

    watermark.wxss

    1. .water_top{
    2. position: fixed;
    3. top:0;
    4. bottom: 0;
    5. left: 0;
    6. right: 0;
    7. transform:rotate(-12deg); /** 旋转 可自己调整 **/
    8. z-index: 9999;
    9. }
    10. .water-text{
    11. float: left;
    12. width:375rpx;
    13. color: rgba(169,169,169,.1); //文字颜色
    14. text-align: center;
    15. font-size: 95%;
    16. margin: 100rpx 0; /** 间距 可自调 **/
    17. }

    watermark.js

    1. // components/watermark/watermark.js
    2. import { getUserInfo } from "../../api/api"
    3. Component({
    4. /**
    5. * 组件的属性列表
    6. */
    7. properties: {
    8. name:String
    9. },
    10. /**
    11. * 组件的初始数据
    12. */
    13. data: {
    14. watermarkText:'测试'
    15. },
    16. /**
    17. * 组件生命周期声明对象,组件的生命周期
    18. * :created、attached、ready、moved、detached
    19. * 将收归到 lifetimes 字段内进行声明
    20. * 原有声明方式仍旧有效,如同时存在两种声明方式
    21. * 则 lifetimes 字段内声明方式优先级最高
    22. */
    23. lifetimes:{
    24. ready(){
    25. this.getUserInfo();
    26. }
    27. },
    28. /**
    29. * 组件的方法列表
    30. */
    31. methods: {
    32. getUserInfo(){
    33. getUserInfo().then(res=>{
    34. this.setData({
    35. watermarkText: res.data?.name
    36. })
    37. }).catch(err=>{
    38. wx.showToast({
    39. title: err.data,
    40. icon: 'none'
    41. })
    42. })
    43. }
    44. }
    45. })
    • app.json 全局引用
    1. {
    2. ...
    3. "usingComponents": {
    4. "watermark":"./components/watermark/watermark"
    5. }
    6. }
    • 单个页面使用,找到需要使用水印的页面添加如下代码即可
    1. <watermark name="班长">watermark>
    • 全局页面使用

    新建文件generator/index.js

     代码如下

    1. /**
    2. * @description: 将组件插入到小程序项目,包括app.json和page
    3. * @param {string} cpName 组件名
    4. * @param {string} cpPath 组件路径
    5. * @param {string} cpString 要插入的组件字符串内容
    6. * @param {Array} whiteList 不需要插入的组件
    7. * @return {*}
    8. */
    9. function insertComponent(
    10. cpName = 'watermark',
    11. cpPath = '/components/watermark/watermark',
    12. cpString = ``,
    13. whiteList = []
    14. ) {
    15. try {
    16. const path = require('path');
    17. const fs = require('fs');
    18. const entryFilePath = './app.json';
    19. if (fs.statSync(entryFilePath)) {
    20. const { EOL } = require('os');
    21. // app.json 内容
    22. const contentMain = fs.readFileSync(path.resolve(entryFilePath), {
    23. encoding: 'utf-8',
    24. });
    25. // 获取每行内容
    26. const contentMainLine = contentMain.split(/\r?\n/g);
    27. // 组件('new-user-dialog':)正则
    28. const compReg = eval(`/['"]?${cpName}['"]?:/`);
    29. // 组件正则
    30. const usingComponentReg = /['"]?usingComponents['"]?:/;
    31. // 检测组件配置项所在行
    32. const ucLineNum = contentMainLine.findIndex(line =>
    33. line.match(usingComponentReg)
    34. );
    35. // TODO: 插入组件部分
    36. // 检测tabbar
    37. const tabBarStartReg = /['"]?tabBar['"]?:/;
    38. // app.json没有配置自定义组件,自定义添加
    39. if (!compReg.test(contentMain)) {
    40. // 如果没有usingComponent配置项的话,就找tabbar,放在后面
    41. if (ucLineNum < 0) {
    42. const tabBarLineNum = contentMainLine.findIndex(line =>
    43. line.match(tabBarStartReg)
    44. );
    45. contentMainLine[
    46. tabBarLineNum - 1
    47. ] += `${EOL} "usingComponents": { "${cpName}": "${cpPath}" },`;
    48. } else {
    49. // 有配置项,放到配置项里面
    50. contentMainLine[ucLineNum] += `${EOL} "${cpName}": "${cpPath}",`;
    51. }
    52. fs.writeFileSync(
    53. path.resolve(entryFilePath),
    54. contentMainLine.join(EOL),
    55. { encoding: 'utf-8' }
    56. );
    57. }
    58. // TODO: 插入page部分
    59. // pages开始,逗号结尾的部分
    60. const pageConfigReg = /['"]?pages['"]?: \[([^\]]+)\],/;
    61. // 将pages按照逗号分隔为数组
    62. const pageList = pageConfigReg
    63. .exec(contentMain)[1]
    64. .replace(/\s+/g, '')
    65. .replace(/"/g, '')
    66. .replace(/\n\s+/g, '')
    67. .split(',')
    68. .filter(pn => {
    69. return !whiteList.includes(pn);
    70. });
    71. pageList.forEach(pagePath => {
    72. insertFileToPage(pagePath, cpString);
    73. });
    74. }
    75. } catch (error) {
    76. console.warn(error);
    77. }
    78. }
    79. /**
    80. * @description: 将组件插入到page
    81. * @param {string} pagePath 组件page路径
    82. * @param {string} cpString 要插入的组件字符串内容
    83. * @return {*}
    84. */
    85. function insertFileToPage(pagePath, cpString) {
    86. const path = require('path');
    87. const fs = require('fs');
    88. if (pagePath.indexOf('wxml' < 0)) {
    89. pagePath += '.wxml';
    90. }
    91. const pageContent = fs.readFileSync(path.resolve(pagePath), {
    92. encoding: 'utf-8',
    93. });
    94. // 组件('new-user-dialog':)正则
    95. const compReg = new RegExp(cpString);
    96. // 没有引用标签则添加标签引用
    97. if (!compReg.test(pageContent)) {
    98. const { EOL } = require('os');
    99. const pageLine = pageContent.split(/\r?\n/g);
    100. // 添加到最后一行
    101. pageLine[pageLine.length - 1] += `${EOL}${cpString}`;
    102. fs.writeFileSync(path.resolve(pagePath), pageLine.join(EOL), {
    103. encoding: 'utf-8',
    104. });
    105. }
    106. }
    107. /**
    108. * @description: 将组件插入到小程序项目,包括app.json和page
    109. * @param {string} cpName 组件名
    110. * @param {string} cpPath 组件路径
    111. * @param {string} cpString 要插入的组件字符串内容
    112. * @param {Array} whiteList 不需要插入的组件
    113. * @return {*}
    114. */
    115. function deleteComponent(
    116. cpName = 'new-user-dialog',
    117. cpPath = '/components/newUserDialog/newUserDialog',
    118. cpString = ``,
    119. whiteList = [
    120. 'pages/mine/login/logout/logut',
    121. 'pages/mine/login/method/method',
    122. 'pages/mine/login/scan/scan',
    123. 'pages/mine/login/people/people',
    124. 'pages/mine/collect/collect',
    125. ]
    126. ) {
    127. try {
    128. const path = require('path');
    129. const fs = require('fs');
    130. const entryFilePath = './app.json';
    131. if (fs.statSync(entryFilePath)) {
    132. // app.json 内容
    133. const contentMain = fs.readFileSync(path.resolve(entryFilePath), {
    134. encoding: 'utf-8',
    135. });
    136. // pages开始,逗号结尾的部分
    137. const pageConfigReg = /['"]?pages['"]?: \[([^\]]+)\],/;
    138. // 将pages按照逗号分隔为数组
    139. const pageList = pageConfigReg
    140. .exec(contentMain)[1]
    141. .replace(/\s+/g, '')
    142. .replace(/"/g, '')
    143. .replace(/\n\s+/g, '')
    144. .split(',')
    145. .filter(pn => {
    146. return !whiteList.includes(pn);
    147. });
    148. pageList.forEach(pagePath => {
    149. deleteFileToPage(pagePath, cpString);
    150. });
    151. }
    152. } catch (error) {
    153. console.warn(error);
    154. }
    155. }
    156. /**
    157. * @description: 将组件从page中删除
    158. * @param {string} pagePath 组件page路径
    159. * @param {string} cpString 要删除的组件字符串内容
    160. * @return {*}
    161. */
    162. function deleteFileToPage(pagePath, cpString) {
    163. const path = require('path');
    164. const fs = require('fs');
    165. if (pagePath.indexOf('wxml' < 0)) {
    166. pagePath += '.wxml';
    167. }
    168. let pageContent = fs.readFileSync(path.resolve(pagePath), {
    169. encoding: 'utf-8',
    170. });
    171. // 组件('new-user-dialog':)正则
    172. const compReg = new RegExp(cpString, 'g');
    173. // 有引用标签则删除标签引用
    174. if (compReg.test(pageContent)) {
    175. pageContent = pageContent.replace(compReg, '');
    176. fs.writeFileSync(path.resolve(pagePath), pageContent, {
    177. encoding: 'utf-8',
    178. });
    179. }
    180. }
    181. // deleteComponent()
    182. insertComponent();

    在使用命令工具内输入:
    node .\generator\index.js

    即可实现

    参考链接: https://blog.csdn.net/Depressiom/article/details/124707186?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-124707186-blog-121975714.pc_relevant_multi_platform_whitelistv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-124707186-blog-121975714.pc_relevant_multi_platform_whitelistv4&utm_relevant_index=4

    小程序全局组件使用(自动插入节点)_路不周以左转兮的博客-CSDN博客_小程序添加节点

  • 相关阅读:
    数据挖掘与分析课程笔记(Chapter 1)
    【自然语言处理】seq2seq模型—机器翻译
    Revit中创建基于线的砌体墙及【快速砌体排砖】
    【JS】JavaScript入门笔记第一弹~
    FineBI 的过滤类型及应用场景
    运行Spring Boot项目失败?显示java: 无法访问org.springframework.boot.SpringApplication,让我来看看~
    JavaWeb在线商城系统(java+jsp+servlet+MySQL+jdbc+css+js+jQuery)
    LVS集群
    310页(11万字)2021年数字医院信息化综合解决方案
    原生js 之 (DOM操作)
  • 原文地址:https://blog.csdn.net/qq_37815596/article/details/126307129