小程序添加水印背景图

先说明，小程序添加全局背景图我也不是很会，还没想出来怎么全局添加，想起来后期再补

想要给小程序添加背景图

代码：

首先现在components组件里建一个watermark文件，对应watermark.js - watermark.json - watermark.wxss - watermark.wxml 这四个文件

watermark.wxml

<view class="water_top" style="pointer-events: none;">
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
</view>

watermark.wxss

 /* watermark.wxss 只需要这个 */
 .water_top{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999999;
  transform:rotate(-15deg);
}
.water-text{
  float: left;
  width:350rpx;
  color: rgba(169,169,169,.4);
  text-align: center;
  font-size: 18px;
  margin: 150rpx 0;
}

watermark.js

// watermark.js
Component({
  data: {
    // 这里是一些组件内部数据
    watermarkText: '仅供员工内测使用'
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    // this.drowsyUserinfo()
    this.setData({
      watermarkText: '仅供员工内测使用'
    })
  }
})

watermark.json

{
  "component": true
}

以上是实现背景的，不过引入组件的话可以全局引入，不用一个一个引
引到 - - -：app.json

  "pages":[
  	 "pages/index/index",
  ],
  // 这个是用来项目分包的，如果项目超限了，使用分包去写
  "subpackages":[
	   {
      "root": "member",
      "pages": [
        "pages/user_info/user_info",
        "pages/member_evaluation/member_evaluation",
      ]
    },
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "首页",
    "backgroundTextStyle": "dark",
    "onReachBottomDistance": 30
  },
  "tabBar": {
    "color": "#666",
    "backgroundColor": "#fff",
    "selectedColor": "#00C8BE",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "image/home_a.png",
        "iconPath": "image/home_.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  },
  "usingComponents": {
    "canvas-watermark":"./component/watermark/watermark"
  },

那么实现页面中有水印背景的话，就要引到你要用的页面中了
例如：
pages/index/index.wxml

<!-- 水印 -->
<canvas-watermark></canvas-watermark>

效果：