wxapp

For Chinese README file, please refer to README_CN.md | 中文README文档请见README_CN.md

wxapp is an internal project for the purpose of WeChat mini-program capability building. The original idea was to build a mini-program which enables quick access to some of the company resources (policies, newsletters etc.) and notifications from Admin/HR to other staffs.

This project aims to build a mini-program interface. All backend logics are mocked.

Getting started

Prerequistes

WeChat devtools
npm
node

Code structure

wxapp
├── babel.config.js
├── dist
├── env
├── jest.config.js
├── node_modules
├── package-lock.json
├── package.json
├── project.config.json
├── src
├── tsconfig.json
├── webpack
└── webpack.config.ts

env: Environment configuration
src: source code

src
├── app.json
├── app.scss
├── app.ts
├── assets
├── components
├── core
├── custom-tab-bar
├── functional_test
├── mock
├── pages
├── protocol
└── styles

assets: static resources
components: reusable customised components
core: tool component
custom-tab-bar: navigation bar at bottom
functional_test: functional test
mock: mock data
pages: mini-program pages
protocol: classes generated by protocal buffers of Gogole which are mainly used for remote communications
styles: stylesheets
app.*: mini-program configurations

Create mock class

Use protocal buffers of Google to define the contract documents for frontend and backend

Please refer to wxapp/docs/proto

Starting the project

Build the project

In your terminal, run:

cd wxapp/
npm i
npm start

Run the project

You may need a WeChat account which is a member of "TW工作坊" to collaborate.

Launch WeChat Devtools and log in as prompted
Import the project from wxapp/wxapp. The AppID will automatically be filled once you choose the correct directory
In the simulator pane, you can preview and debug the mini-program on your laptop
To preview and debug on your mobile phone, click the "preview" button on the navigation bar, and operate as prompted

Run the functional test

First of all, In the settings of your WeChat Devtools, turn on the "Service Port" option in "Security" tab.

Make sure the project window in WeChat Devtools is closed (otherwise the test will fail in launching the project). Then go back to your terminal and run:

npm test

Your WeChat Devtools should launch automatically and run all tests. When all tests are finished, a HTML test report can be found in src/functional_test/test_reportts/.

If you need to run these functional test on your mobile device, open src/functional_test/tests.spec.js and set the variable value of remote to true. Then when you run the test, you will have to manually confirm in a dialogue box of Devtools so the test can proceed.

awesome-devops-hub/wxapp