微信小程序中如何实现view标签中的图片居中显示，或者view居中？

1、首先打开微信开发者工具，新建一个小程序。

2、page目录下新建一个test目录和相关页面文件。打开app.json文件，将test页面路径放置到index前面。

3、单个view居中：点击打开test.wxml页面代码，肆族输入图中的代码内容。给view设置一个class。

4、点穗困击打开test.wxss文件，这里设猜雹念置元素样式。输入下面图中的样式代码，可以实现view中文字内容居中。

5、最后打开test.wxss文件，设置viewin的样式代码，如图中所示。实现内部的view相对于外层的view居中显示。

首先每个emoji 表情有保存到服务器，可以通过 URL 访问，如

http://....../em001

1.将带 emoji 标签复合文本字符串（如：你好，em001），分割成纯文本和 emoji 标签文本，并装进数组。方法如下

/**

  根据说说内容，将文本、表情切分为数组

  @param {string} content 说说源内容

*/

function messageContentArray  (content) {

  const reg = /\[em[2-4]+\d{3}\]/g

  const emRegArr = content.match(reg)

  // 没有表情，直接返回罩野世文本内容

  if (!emRegArr) return [{type: 'text', content}]

  const indexArr = []

  const contentArr = []

  // 递增取得所有表情index

  let pos = content.indexOf(emRegArr[0])

  for (let i = 1i <emRegArr.lengthi++) {

    indexArr.push(pos)

    pos = content.indexOf(emRegArr[i], pos + 1)

  }

  indexArr.push(pos)

  indexArr.map((emIndex, i) =>{

    // 首个为表情

    if (emIndex === 0) {

      contentArr.push({type: 'emotion', source: emRegArr[i]})

    } else {

      if (i === 0) {

        // TODO：临时的处理方式，待观察内存占用情况

        for (let index = 0index <emIndexindex++) {

 物肢         contentArr.push({type: 'text', content: content[index]})

        }

        // contentArr.push({type: 'text', content: content.substr(0, emIndex)})

      } else {

        // 两个表情之间夹杂了文本

        const preEmoLocation = indexArr[i - 1] + emRegArr[i - 1].length

        const locationDiff = emIndex - preEmoLocation

        if (locationDiff >0) {

          for (let index = preEmoLocationindex <locationDiffindex++) {

            contentArr.push({type: 'text', content: content[index]})

          }

          // contentArr.push({type: 'text', content: content.substr(preEmoLocation, locationDiff)})

        }

      }

      contentArr.push({type: 'emotion', source: emRegArr[i]})

    }

  })

  const lastLocation = indexArr[indexArr.length - 1] + emRegArr[emRegArr.length - 1].length

 脊纯 if (content.length >lastLocation) {

    // contentArr.push({type: 'text', content: content.substr(lastLocation, content.length - lastLocation)})

    for (let index = lastLocationindex <content.lengthindex++) {

      contentArr.push({type: 'text', content: content[index]})

    }

  }

  return contentArr

}

2.然后在 view 标签，遍历数组

    <View className="talk-content">

            {contentArr.map((Citem, index) =>{

              if (Citem.type === 'emotion') {

              const str = Citem.source.substr(1, Citem.source.length-2)

              return <Image key={`Emotion_${index}`} className="emoji" src={'http://'+str+'.jpg'} />

              }

              const isEnter = Citem.content === '\n'

              if (isEnter) {

              // hack Text 显示单个 \n 时，会有样式问题

              return <View key={`Text_${index}`}  />

              }

              return <Text key={`Text_${index}`} className="txt" >{Citem.content}</Text>

          })}

        </View>

需求：为了引导用户去支付我们的产品，新增需求：1、文本多于一行的时候，只显示一行。2、文本等于1行的时候，全部虚手隐藏显示阴影。

实现思路：1、css里设置view的line-height，我这里设置了25px。

2、然后动态算出这个view在填充完数据后的高度，我这里填充完数据是200px。3、所以行数=view的高度/line-height，也就是200px/25px = 8行。

注意：这里的view一定要是填蚂誉旁充完数据后的高度，也闷橡就是this.setData后的高度。

顺便提下，我这里给文字设置阴影的方法是：

---