When using the WeChat MiniProgram Generator, you will be able to generate a native WeChat Mini Program project for each main Mobile object; located under the mobile folder. The expected structure is as follows:
c:\models\<KBName>\<TargetEnvironmentFolder>\mobile\WeChatMiniProgram\<MainObject>
miniprogram (folder)
node_modules (folder)
package-lock.json
package.json
project.config.json
scss (folder)
tsconfig.json
There are two options for prototyping:
- Simulator
- Phone
The simulator is available from the WeChat Developer Tools IDE (check the requirements). After using GeneXus to generate, you can open the project.
The first time, you will need to import the project on the IDE; assign a name and the correct location as detailed above (use the previous folder location as reference).
In the Settings / Project Settings / Local Settings options (needed to do once per project), you have to turn on the Enable Custom Processing commands option as detailed:
Execute IDE > Tools > Build npm (needed to do once per project or when a new GeneXus Upgrade/Build is installed):
Finally, compile the project with the compile option:
When finished, the main object will be launched on the simulation section. If you have any trouble, check the console section.
You can prototype with GeneXus and the WeChat Mini Programs IDE at the same time. After building the opened main from GeneXus (or doing any change on the call chain), just compile on WeChat Mini Programs IDE to get the latest changes.
If the WeChat devtools path property (from the Front-end property section) is correctly configured (pointing to the root installation folder); you could use npm run ide to directly open the project.
cd c:\models\<KBName>\<TargetEnvironmentFolder>\mobile\WeChatMiniProgram\<MainObject>
npm run ide
From the previous section, if you use the Preview option, a QR code will be generated to scan from the WeChat app and prototype directly from your phone.
An alternative option is not to use the WeChat Developer Tools IDE to access the simulator and go directly to the phone and do everything by command-line. For that, it is mandatory to register a MiniApp application on the WeChat platform and configure the WeChat Front-End configuration properties.
- Mini Program AppId: assign the ID from the provider, for example: wx123.
- Mini Program Private Key Path: download the private key and set the full path to locate it, for example c:\temp\wx123.key.
Change the generator Run command property from npm run build to npm start and rebuild the main object (only once). You can use the GeneXus Run option to trigger this flow and get the QR code as an archive on the file system.
Note: A New QR code needs to be generated every time you build a main object as it needs to be uploaded to the platform with the package changes.
If you want to manually execute the commands, go to the target folder generation directory for example, if the main object is m01 the expected folder is:
c:\models\kbname\CSharpModel\mobile\WeChatMiniProgram\mainobject>
and execute
#Build from GX any change you want to test on WeChat MiniProgram
# only once to install the infrastructure
npm install
# After generation
npm start
The first command will install dependencies and the second one, will compile and create a QR code to test from the device.
# Compile the Typescript files generated by GeneXus
npm run tsc
# Generate a QR code for testing
npm run preview
# Launch the IDE from the current location
npm run ide
# Upload the project to get started with the approval process
npm run upload