WxEmojiView 微信小程序 Emoji 展示输入组件使用教程

最新推荐文章于 2024-09-27 19:18:09 发布

萧书泓

最新推荐文章于 2024-09-27 19:18:09 发布

阅读量607

点赞数 21

本文链接：https://blog.csdn.net/gitblog_01065/article/details/142238298

版权

WxEmojiView 微信小程序 Emoji 展示输入组件使用教程

WxEmojiView WxEmojiView 项目地址: https://gitcode.com/gh_mirrors/wx/WxEmojiView

1. 项目目录结构及介绍

WxEmojiView 是一个用于微信小程序的 Emoji 展示和输入组件。以下是项目的目录结构及其介绍：

WxEmojiView/
├── WxEmojiView/
│   ├── WxEmojiView.js
│   ├── WxEmojiView.wxml
│   ├── WxEmojiView.wxss
│   └── emojis/
│       ├── 00.gif
│       ├── 01.gif
│       └── ...
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── ...
├── utils/
│   └── util.js
├── app.js
├── app.json
├── app.wxss
└── README.md

目录结构说明：

WxEmojiView/: 包含 Emoji 组件的核心文件，包括 JavaScript、WXML 和 WXSS 文件，以及表情图片文件夹 emojis/。
pages/: 包含小程序的页面文件，每个页面包含 .js、.wxml 和 .wxss 文件。
utils/: 包含一些工具函数或辅助文件。
app.js: 小程序的入口文件，负责全局逻辑。
app.json: 小程序的全局配置文件。
app.wxss: 小程序的全局样式文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

`app.js`

app.js 是微信小程序的入口文件，负责小程序的全局逻辑。以下是 app.js 的基本结构：

App({
  onLaunch: function () {
    // 初始化 Emoji 组件
    var WxEmoji = require('WxEmojiView/WxEmojiView.js');
    WxEmoji.init(":_/", {
      "00": "00.gif",
      "01": "01.gif",
      "02": "02.gif",
      "03": "03.gif",
      "04": "04.gif",
      "05": "05.gif"
    });
  },
  globalData: {
    // 全局数据
  }
});

功能说明：

onLaunch: 小程序启动时调用的函数，通常用于初始化全局数据或组件。
globalData: 定义全局数据，可以在其他页面中通过 getApp() 访问。

3. 项目的配置文件介绍

`app.json`

app.json 是微信小程序的全局配置文件，用于配置小程序的页面路径、窗口表现、网络超时时间等。以下是 app.json 的基本结构：

{
  "pages": [
    "pages/index/index",
    "pages/otherPage/otherPage"
  ],
  "window": {
    "navigationBarTitleText": "WxEmojiView 示例",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}