数字生活小程序-文档中心

注册页面

小部件，需要在 index.js 文件中进行注册，指定小部件的初始数据、生命周期回调、事件处理函数等。

代码示例

index.html

// widget/index.html
<div class="widget-container">
  <div class="widget-title">{{ widgetData.title }}</div>
  <div class="content-container">
    <img class="banner" src="../assets/images/default.png" alt="" />
    <div class="description">{{ widgetData.description }}</div>
  </div>
</div>

index.css

.widget-title {
  position: absolute;
  left: 0;
  top: 0;
  height: 28px;
  line-height: 28px;
  padding: 0 17px;
  color: var(--primary-color, #d62a1e);
  background: var(--primary-background-color, #fbe9e8);
  border-radius: 0 0 18px 0;
  font-size: 14px;
  font-weight: bolder;
  text-align: center;
}
.widget-container {
  position: relative;
  box-sizing: border-box;
  padding-top: 36px;
  background-color: #fff;
}
.content-container {
  padding: 0 20px;
  color: #333;
  box-sizing: border-box;
}
.banner {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  overflow: hidden;
}
.title {
  margin-top: 2px;
  font-size: 16px;
  font-weight: bold;
}
.description {
  margin-top: 4px;
  font-size: 14px;
  word-break: break-all;
  text-align: justify;
  line-height: 1.5;
}

index.js

// widget/index.js
Widget({
  data() {
    return {
      widgetData: {
        title: '',
        description: ''
      }
    };
  },
  mounted () {
    this.getWidgetData()
  },
  methods: {
    getWidgetData() {
      this.widgetData = {
        title: '美丽乡村',
        description: '白墙青瓦，相映成趣；村前碧水、清澈见底。田野里，麦穗金黄丰硕；山路上，古树郁郁葱葱，构成了村庄诗意的轮廓。'
      }
    }
  }
});

Widget() 函数用来注册一个小部件。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

参数

Object object

属性	类型	说明
`data`	function	小部件的初始数据
`methods`	Object	小部件中需要使用的方法
`mounted`	function	dom 挂载完成回调

在小部件内，兼容 Vue 生命周期，可使用 Vue 生命周期方法做相应业务处理。

1. 小部件 Widget
1. 1.1. 注册页面
  1. 1.1.1. 代码示例
2. 1.2. Widget(Object)
  1. 1.2.1. 参数

小部件 Widget

注册页面

代码示例

Widget(Object)

参数