1.插件引入

全局app.json配置

"plugins": {
"edict-plugin": {
"version": "1.6.0",
"provider": "wx2facb7b57eedf7e6"
}
}

全局app.js初始化(使用wordcate必须先初始化,其余功能不需要)

var plugin = requirePlugin("edict-plugin");
App({
pluginconfig: {
appid: 'wx2facb7b57eedf7e6',
appname: '英语词典',
platfrom: 'wx'
},
onLaunch: function () {
plugin.InitEdict(this.pluginconfig).then(stas => {
if (stas) {
console.log('初始化成功') }
})
}
})

TIPS:引入初始化是为了之后根据不同的应用需求,配置不同的单词册形式,如只有六级词汇的单词册等

2.插件功能介绍

插件提供的功能分为两种形式,一种是组件形式,可自由引入,一种是页面形式,只可以通过跳转使用。

2.1 悬浮查词组件 NavSearch

NavSearch使用

在页面json文件中配置引入

{
"usingComponents": {
"nav-search":"plugin://edict-plugin/nav-search"
}
}

使用方法如下,将该段代码放在wxml的顶部

<view>
<nav-search navshow="{{navshow}}" bind:wordselect="wordselect"></nav-search>
</view>

navshow参数为控制组件是否显示的,与wx:if效果相同,wordselct为点击单词触发事件

wordselect(e){
let word = e.detail.word;
wx.navigateTo({
url: 'plugin://edict-plugin/word?word='+word,
})
}

2.2 单词检索页面 DictSearch

DictSearch使用

直接进行页面跳转即可

wx.navigateTo({
url: 'plugin://edict-plugin/search'
})

2.3 单词册 WordCate

WordCate使用

直接跳转即可,后续功能需要userid,请使用者自行获取用户openid并携带

wx.navigateTo({
url: 'plugin://edict-plugin/index?userid=[openid]'
})

获取方式 Java 获取小程序openid(基于SpringBoot)

2.4 单词详细 WordDetail

WordDetail使用

携带参数跳转,如下所示

wx.navigateTo({
url: 'plugin://edict-plugin/word?word='+word,
})

该功能正在完善中,对应的翻译语句等现在比较少,后续会持续增加,欢迎愿意维护该项目的同学加入

2.5 En-Zh 英汉互译

En-Zh 使用

页面跳转即可

  wx.navigateTo({
url: 'plugin://edict-plugin/en-zh'
})

4. 参考

1.小鸡单词:https://github.com/flymysql/WeChat-applets

2.ColorUI:https://www.color-ui.com/

5.技术交流

欢迎愿意维护该项目的同学或小程序开发者加入交流群

英语单词小程序插件 - EdictPlugin-LTS的更多相关文章

  1. 微信小程序 -- 英语词典 (小程序插件)

    英语词典小程序 基于英语词典小程序插件 - 提供开源地址 项目地址 英语词典小程序插件: 微信小程序 词典 真题基础服务插件(gitee.com) 功能特色 [x] 全面详实的经典词库,详细释义覆盖约 ...

  2. 微信小程序插件 - 开发教程

    昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现. 这篇文章,我将会带大家,从0开始,学习如何开发和使用插件. ...

  3. 小程序插件使用wx.createSelectorQuery()获取不到节点信息

    发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSel ...

  4. uni-app——小程序插件使用wx.createSelectorQuery()获取不到节点信息

    发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSel ...

  5. 「腾讯视频」微信小程序插件介绍

    上期,我们在<从原理到应用,一文带你了解小程序插件能力>一文中介绍了小程序插件的意义.作用以及应用.今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的 ...

  6. 微信小程序插件内页面跳转和参数传递(转)

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  7. 微信小程序插件使用

    使用插件 小程序开发者可便捷地把插件添加到自己的小程序内,丰富小程序的服务.当用户在使用小程序时,将可以在小程序内使用插件提供的服务. 开放范围 所有小程序 接入流程 在小程序管理后台添加插件 小程序 ...

  8. 微信小程序插件内页面跳转和参数传递

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  9. vsCode 开发微信小程序插件

    用 vsCode 开发微信小程序可以配置以下插件,让开发更美好: 1. vscode weapp api 2. vscode wxml 3. vscode-wechat 4. Easy WXLESS ...

随机推荐

  1. AtCoder Beginner Contest 177 D - Friends (并查集)

    题意:有\(n\)个人,给你\(m\)对朋友关系,朋友的朋友也是朋友,现在你想要将他们拆散放到不同的集合中,且每个集合中的人没有任何一对朋友关系,问最少需要多少集合. 题解:首先用并查集将朋友关系维护 ...

  2. 第三方库:logger,自定义日志封装模块

    为了使用方便,二次封装logger. import os import datetime from loguru import logger class Logings: __instance = N ...

  3. 【Java】位操作符

    位运算符 java支持的位运算符有7个,分为两类:位逻辑运算和移位运算.位逻辑运算符包括按位取反(~).按位与(&).按位或(|)和按位异或(^)4种,.移位运算符包括左移(<<) ...

  4. 数理统计9:完备统计量,指数族,充分完备统计量法,CR不等式

    昨天我们给出了统计量是UMVUE的一个必要条件:它是充分统计量的函数,且是无偏估计,但这并非充分条件.如果说一个统计量的无偏估计函数一定是UMVUE,那么它还应当具有完备性的条件,这就是我们今天将探讨 ...

  5. Leetcode(144)-二叉树的前序遍历

    给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 二叉树的前序遍历有递归 ...

  6. Go string 一清二楚

    前言 字符串(string) 作为 go 语言的基本数据类型,在开发中必不可少,我们务必深入学习一下,做到一清二楚. 本文假设读者已经知道切片(slice)的使用,如不了解,可阅读 Go 切片 基本知 ...

  7. free open music API all in one

    free open music API all in one music API SoundCloud xgqfrms · free https://w.soundcloud.com/player/? ...

  8. .pyc & Python

    .pyc & Python Python bytecode / 字节码 Python compiles the .py files and saves it as .pyc files , s ...

  9. html5 useful skills blogs

    html5 useful skills blogs preload & prefetch https://www.30secondsofcode.org/snippet/ary blogs h ...

  10. ng mock服务器数据

    angualr文档 in-memory-web-api 文档 安装 yarn add angular-in-memory-web-api -S src/app/app.module.ts import ...