微信小程序 -- 英語詞典 (小程序插件)

1.插件引入

插件地址:英語詞典 wx-Plugin

全局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.技術交流

歡迎願意維護該項目的同學或小程序開發者加入交流羣

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章