极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

519

主題

893

帖子

1萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
12067
2019-2-28 15:43:31 Rolan 管理員 樓主 22723
本應用是基于微信小程序的一款工具類應用,采用百度翻譯 api 接口,實現實時翻譯的功能
頁面展示
項目技術棧
  • 小程序框架中的頁面注冊、模塊化、響應的數據綁定
  • 小程序常用組件的使用,包括 view ,scroll-view, navigator 等其他一些 html 相似標簽
  • 小程序 api 中的路由 switchTab, reLaunch 以及界面的交互 showToast 等
  • 整體頁面布局采用 flex 布局
項目特點
  • 在線支持英、中、日、韓、法、西班牙、阿拉伯語言的翻譯
  • 在線自動識別輸入語言類型
  • 歷史記錄的保留和查看,點擊歷史記錄會自動跳轉至翻譯頁面顯示翻譯結果
  • 歷史記錄只顯示最近 10 條,免去翻找麻煩
  • 最新歷史記錄不會保留一樣的數據,一定程度上減少的誤翻譯操作
  • 支持多行輸入的歷史記錄顯示
  • 界面交互友好,不知道怎么操作也能簡單上手
項目架構
頁面的架構主要有如下三個
  • index 頁面
    index 頁面是交互的核心頁面,主要內置了輸入框以及輸出框。 對于輸入框: 通過綁定 input 事件來捕捉用戶輸入內容,通過綁定 confirm 事件來獲取用戶最終確認提交的內容 對于輸出框: 綁定響應的輸出結果,這個結果從輸入框發生確認提交,經百度 api 翻譯過后拿到,然后即時更新在頁面上的數據
  • change 頁面
    與 index 首頁的聯系是使用 navigator 標簽進行導航,然后在該頁面渲染出 app.js 里的全局語言數據,選中確認之后返回到 index 首頁
  • history 頁面
    歷史記錄頁面使用了 scroll-view 組件,能讓界面看的更自然。歷史記錄的保存方面使用了 wx.getStorageSync 和 wx.setStorageSync 這兩個 api,也就是使用了微信的一個本地緩存的方案。點擊歷史記錄的某一條返回到 index 首頁時,使用了 wx.reLaunch 這個 api并傳回一個查詢傳參的 url,這樣在 index 頁面 onLoad 時就可以拿到這個參數作為用戶的輸入內容,在 onShow 時直接開始翻譯,就實現了 點擊-> 跳轉 -> 翻譯 的需求

為什么寫了這個翻譯工具
本著實事求是的精神原則,個人認為,沒有什么比寫一個工具來進行對相關技術領域知識的學習更好的方式了,特別是在開發這個行業。如果是要寫一個工具,寫什么比較合適呢,在日常生活中,特別是在開發中,因為經常要瀏覽一些英文的文檔,所以避免不了要有查單詞的這種需求存在,若身邊有電腦還好,沒有電腦的話手機搜索也比較麻煩,不如直接做個輕應用自己用著會比較爽,思來想去小程序的條件還蠻符合的,小程序生態還是可以,文檔也齊全,所以就它了.
踩過的坑
  • 開發工具
由于本人尚屬于中度 Linux 用戶,所以看到小程序沒有基于 Linux 的開發工具時還是很郁悶的,經過一番尋找(各種 google 和 github),找到一個進千 start 的項目,有開源大佬將 nw.js 編譯成了 Linux 版本(即 wechat_web_devtools, 鏈接是在這兒Github),雖然偶爾有 bug,不過絕大部分功能還是可以用的, 于是 git clone 照著文檔來就 ok 了
  • 文檔
眾所周知,雖然說熟悉了 Vue 之后對小程序的上手很容易,但這里只是針對的是總體框架而言(同一個 mvvm, 同一個夢想),為了實現需求,還是得看文檔.好了,這里就涉及到一個問題,我拿到這份文檔,這么多內容,我該怎么去看?首先,看自己熟悉的部分,想要寫頁面?至少得知道標簽吧,就去看看它的 wxml 模板部分,看了下,哦,原來 view 就是 div 阿,原來 text 就是 span 阿,建立起這樣一個映射關系,其他的就好理解了; 然后寫頁面布局樣式要用到 css 吧,哦,原來在小程序里 css 可以直接寫嘛,好像沒有什么變化,需要做兼容嘛?不需要了,那么布局就用 flex 一鍵搞定; js 這個就很重要了,主要是搜索 api,用到什么就查什么,不過之前得先把目錄整體看一遍,然后根據需求來猜測,哪個比較像,就先試試.有問題查文檔!有問題查文檔!有問題查文檔!!!,重要的事情說三遍.
  • 頁面生命周期
小程序頁面的生命周期有幾個,在本項目中用的最多的有兩個,一個是 onLoad,另一個是 onShow onLoad 是用來監聽頁面的加載,這個是一次性的,其中傳的參時是指打開當前頁面路徑中的參數,可以用它來在頁面中傳遞信息 onShow 是用來監聽頁面的顯示,這個可以被調用多次,多數頁面的主要邏輯就在這里完成
  • 初始數據
雖然跟 Vue 一樣有個 data 屬性,但是在模塊的內部使用時,若需要直接得到這個屬性的值,不能用 this 來直接訪問,而應該用 this.data.xxx 這樣的形式,然后渲染層就可以直接用數據的屬性名,通過 wxml 對數據進行綁定
二維碼
可拓展的部分
像平常有的翻譯還有語音,根據單詞或句子在線發音,甚至還可以添加語音識別,直接說話直接翻譯;界面的話也可以做優化,除了顯示單詞的意思之外,還可以把一些例句顯示出來,甚至是一些用法什么的,當然這也可以設定成模式之一,我可以將這個 app 設定成兩種模式,一種簡單另一種復雜,分別對應兩套不同的界面,這樣就可以應對不同的需求...哈哈哈

項目下載: wx-translate-master.zip (16.46 KB, 下載次數: 121)

分享至 : QQ空間
2 人收藏
有問題請在本站內搜索相應關鍵詞,假如無法解決請在綜合交流區內發帖咨詢,發帖時請提供詳細的問題描述、相關圖片及代碼。
還可以加QQ交流群咨詢:536592077。
請問assets目錄下的iconfont.wxss是什么作用呀,跟其他目錄有什么聯系,是怎么聯系起來的
2019-3-8 16:59:17 w向陽76 來自手機 攻城獅
板凳

發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
极速快3精准计划 北京pk赛车投注网址是多少 二四六天天好彩每期文字賧料 11选五走势图陕 双色球和大乐透是不是骗局 河北11选五怎么投注赚钱 河北时时怎么玩 深圳风采中三个有奖吗 时时缩水软件手机 五分彩在哪里开奖 北京小赛车走势图