小程序开发之基础内容（rich-text）

效果图

属性

参考：rich-text

代码

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/rich-text/rich-text"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. rich-text.js

Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }],
    nodes2: [{
      name: 'h2',
      attrs: {
        style: 'color: green'
      },
      children: [{
        type: 'text',
        text: '你好 小程序'
      }]
    }]
  },
  tap() {
    console.log('tap')
  },
  touchstart() {
    console.log('touchstart')
  },
  touchmove() {
    console.log('touchmove')
  },
  touchcancel() {
    console.log('touchcancel')
  },
  touchend() {
    console.log('touchend')
  },
  longtap() {
    console.log('longtap')
  }
})

4. rich-text.json

{
  "navigationBarTitleText": "rich-text 组件"
}

5. rich-text.wxml

<rich-text 
    nodes="{{nodes}}" 
    bindtap="tap"
    bindtouchstart="touchstart"
    bindtouchmove="touchmove"
    bindtouchcancel="touchcancel"
    bindtouchend="touchend"
    bindlongtap="longtap"   
>

</rich-text>