/Mini-program-bf

早餐吃好小程序

Primary LanguageTypeScript

WeChat Mini Program

DietLens WeChat MiniProgram 2nd version is built for gathering user food intaken information by TextSearch/Image Recognition to generate food recommendation. main feature/module following:

  • foodDiary (image upload, recognition process)
  • user profiling (onBoarding, userInfo)
  • recommendation report (daily report, weekly report)
  • home (Intaken Chart)

API folder

  • loginService: handle miniProgram login/registration, Provide Networking WebAPI for valid client JS code thus get the token for AppService.

  • AppService: handle miniProgram all the business service, Provide Networking API based on token.

  • ProtoAPI: these api code is generated by protoAPI - https://github.com/yoozoo/protoapi, change the baseURL and configure Domain in 微信公众平台 to make Http Request work.

  • ENV change: when switching between test env and product env, we supposed to change the baseUrl in AppService.ts and LoginService.ts, change the cosSignUrl in uploader.js

Images

  • Put all the local used icon here. Notice: only images(icons) below 20KB allows to be put here. For large size image,need to upload image to tencent cloud and miniprogram load it from Internet.

Tabs

  • Home: First Tab page, Including the weekly calorie intake chart.
  • FoodDiary: Second Tab Page, The entrance of food record.
  • Report: Third Tab Page, The Tab for Daily/Weekly report.
  • More: Forth Tab Page, The Tab that display user portrait, it's also the entrance of the user profile.

Module

  • Login: User WeChat authentication page, invoke the wx.authorize to user info.
  • WebView: WebView that able to load web page from self host domain or the article that published from public account.
  • ImageTagging: The page that load image in, get the image recognition result, return in tags. User should finish food tagging within this page.
  • TextSearch: The page that user can search recipe/ingredients and add to food record accordingly.
  • FoodDetail: The page that require user to adjust portion of the recipe/ingredients that match their meal intake then record these information into foodDiary.

Tech

MiniProgram-npm library used:

source-code library used:

  • under folder /components/ - calendar, modal-input, xing-scroll-view is the lib that open for modification.

Tips

  1. Try to avoid using native components: textArea, canvas , camera, map due to layout and compatible issue.
  2. 工具 -> 项目详情 -> 启用自定义处理命令 to enable pre-tsc auto compiling ,编译前预处理 npm run compile.
  3. enable 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 when develop, disable this option when release for testing.

Installation

For set up npm dependency

npm install

then "构建npm" to load library at dependency lib folder.