Neuxnet Mini App

https://miniapp.neuxnet.com
Admin
Neuxnet Mini App is a framework and runtime solution for building cross-platform mini applications...
Tokens:317,716
Snippets:1,990
Trust Score:5.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### uni.startAccelerometer example

Source: https://miniapp.neuxnet.com/api/system/accelerometer.html

Starts listening to acceleration data. The interval parameter can be 'game', 'ui', or 'normal' with approximate callback frequencies of 20ms, 60ms, and 200ms respectively.

```javascript
uni.startAccelerometer();
```

--------------------------------

### Record and play audio with uni.getRecorderManager()

Source: https://miniapp.neuxnet.com/api/media/record-manager.html

Complete example for recording and playing back audio using uni.getRecorderManager() and uni.createInnerAudioContext(). The template provides buttons to start, stop, and play the recording. The script initializes the recorder and audio context, sets autoplay, and defines methods to start/stop recording and play the recorded file. The onStop callback stores the temporary file path in voicePath.

```html
<template>
	<view>
		<button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button>
		<button @tap="playVoice">播放录音</button>
	</view>
</template>

```

```javascript
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.autoplay = true;

export default {
	data() {
		return {
			text: 'Mini App',
			voicePath: ''
		}
	},
	onLoad() {
		let self = this;
		recorderManager.onStop(function (res) {
			console.log('recorder stop' + JSON.stringify(res));
			self.voicePath = res.tempFilePath;
		});
	},
	methods: {
		startRecord() {
			console.log('start');

			recorderManager.start();
		},
		endRecord() {
			console.log('stop');
			recorderManager.stop();
		},
		playVoice() {
			console.log('play');

			if (this.voicePath) {
				innerAudioContext.src = this.voicePath;
				innerAudioContext.play();
			}
		}
	}
}

```

--------------------------------

### Start compass listening with uni.startCompass

Source: https://miniapp.neuxnet.com/api/system/compass.html

Starts listening to compass data. Accepts an OBJECT parameter with optional success, fail, and complete callbacks. The example shows a simple call without any parameters.

```javascript
uni.startCompass();
```

--------------------------------

### uni.openDocument sample code

Source: https://miniapp.neuxnet.com/api/file/file.html

This snippet demonstrates how to download a file and then open it using uni.openDocument. It uses uni.downloadFile to get the file path and then calls uni.openDocument with that path. The success callback of openDocument is empty in the example.

```javascript
uni.downloadFile({
  url: 'https://example.com/somefile.pdf',
  success: function (res) {
    var filePath = res.tempFilePath;
    uni.openDocument({
      filePath: filePath,
      success: function (res) {
      }
    });
  }
});
```

--------------------------------

### Basic uni.request Example

Source: https://miniapp.neuxnet.com/api/request/request.html

Initiates a network request with data and a success callback. The data is sent as a query string for GET requests or JSON for POST with application/json content-type.

```javascript
uni.request({
    data: {
        text: 'uni.request'
    },
    header: {
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});
```

--------------------------------

### Native subwindow configuration example

Source: https://miniapp.neuxnet.com/collocation/pages

Example configuration for a native subwindow in the pages.json file, showing the use of position, margin, width, height, and dock attributes.

```json
{
	"pages": [{
		"style": {
			"app-plus": {
						"width": "50%"
					}

					"id": "popup",
					"path": "pages/index/popup",
					"style": {
						"position": "popup",
						"margin":"auto",
						"width": "150px",
						"height": "150px"
					}

					"id": "nav",
					"path": "pages/index/nav",
					"style": {
						"position": "dock",
						"height": "44px"
					}

				}]
			}
		}
	}]
}
```

--------------------------------

### uni.$emit, uni.$on, uni.$off cross-page communication example

Source: https://miniapp.neuxnet.com/api/window/communication.html

Complete example showing uni.$emit, uni.$on, and uni.$off used together for cross-page and cross-component communication. Includes template, script, and style sections. The example emits an 'add' event every second and listens for it to update a value.

```html
	<template>
		<view class="content">
			<view class="data">
				<text>{{val}}</text>
			</view>
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					val: 0
				}
			},
			onLoad() {
				setInterval(()=>{
					uni.$emit('add', {
						data: 2
					})
				},1000)
				uni.$on('add', this.add)
			},
			methods: {
				comunicationOff() {
					uni.$off('add', this.add)
				},
				add(e) {
					this.val += e.data
				}
			}
		}
	</script>
	
	<style>
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.data {
			text-align: center;
			line-height: 40px;
			margin-top: 40px;
		}
	
		button {
			width: 200px;
			margin: 20px 0;
		}
	</style>
```

--------------------------------

### uni.showModal example

Source: https://miniapp.neuxnet.com/api/ui/prompt.html

Example of calling uni.showModal with a success callback that checks res.confirm and res.cancel.

```javascript
uni.showModal({
	success: function (res) {
		if (res.confirm) {
		} else if (res.cancel) {
		}
	}
});
```

--------------------------------

### uni.chooseVideo example template

Source: https://miniapp.neuxnet.com/api/media/video.html

Template for the uni.chooseVideo example. Contains a button that triggers the test method and a video element bound to the src data property.

```html
<template>
	<view>
		<text>hello</text>
		<button @tap="test">click me</button>
		<video :src="src"></video>
	</view>
</template>


```

--------------------------------

### uni.chooseVideo example script

Source: https://miniapp.neuxnet.com/api/media/video.html

Script for the uni.chooseVideo example. Calls uni.chooseVideo with sourceType ['camera'] and on success saves the video to the photo album using uni.saveVideoToPhotosAlbum.

```javascript
export default {
	data() {
		return {
			src: ''
		}
	},
	methods: {
		test: function () {
			var self = this;
			uni.chooseVideo({
				sourceType: ['camera'],
				success: function (res) {
					self.src = res.tempFilePath;
					
					uni.saveVideoToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							console.log('save success');
						}
					});
				}
			});
		}
	}
}


```

--------------------------------

### uni.chooseImage example

Source: https://miniapp.neuxnet.com/api/media/image.html

Calls uni.chooseImage with a success callback that logs the tempFilePaths as a JSON string. The example uses default parameters for count, sizeType, and sourceType.

```javascript
uni.chooseImage({
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

```

--------------------------------

### uni.getImageInfo Example

Source: https://miniapp.neuxnet.com/api/media/image.html

Example of using uni.getImageInfo to get image dimensions after choosing an image from the album. The success callback logs the image width and height.

```javascript
uni.chooseImage({
	count: 1,
	sourceType: ['album'],
	success: function (res) {
		uni.getImageInfo({
			src: res.tempFilePaths[0],
			success: function (image) {
				console.log(image.width);
				console.log(image.height);
			}
		});
	}
});
```

--------------------------------

### Component usage - setup() with useCounterStore

Source: https://miniapp.neuxnet.com/tutorial/vue3-pinia.html

Shows how to use the counter store in a component's setup() function. It demonstrates direct access, $patch, and calling the increment action.

```javascript
import { useCounterStore } from '@/stores/counter';

export default {
	setup() {
		const counter = useCounterStore();

		counter.count++;
		// can be triggered manually
		counter.$patch({ count: counter.count + 1 });
		// or use actions
		counter.increment();
	},
};

```

--------------------------------

### Run and build Mini App for different environments

Source: https://miniapp.neuxnet.com/quickstart

Use these commands to run or build the Mini App for different environments. The %ENVIRONMENT% placeholder can be app, h5, or app-preview. Running dev:h5 previews in the browser, while build:app and build:app-preview generate app packaging resources under /dist/build/app-plus and a ${appid}.wgt file in /release. For app-preview, a QR code is displayed in the terminal for previewing in Super App.

```bash
npm run dev:%ENVIRONMENT%
npm run build:%ENVIRONMENT%

```

--------------------------------

### uni.getScreenBrightness example

Source: https://miniapp.neuxnet.com/api/system/brightness.html

Gets the current screen brightness value (0 to 1) via the success callback's res.value.

```javascript
uni.getScreenBrightness({
	success: function (res) {
		console.log('屏幕亮度值：' + res.value);
	}
});
```

--------------------------------

### uni.openLocation example with uni.getLocation

Source: https://miniapp.neuxnet.com/api/location/open-location.html

Example showing how to get the current location using uni.getLocation and then open it in the built-in map with uni.openLocation. The success callback of uni.getLocation provides latitude and longitude, which are passed to uni.openLocation. The success callback of uni.openLocation logs 'success'.

```javascript
uni.getLocation({
	success: function (res) {
		const latitude = res.latitude;
		const longitude = res.longitude;
		uni.openLocation({
			latitude: latitude,
			longitude: longitude,
			success: function () {
				console.log('success');
			}
		});
	}
});
```

--------------------------------

### Basic component example: picker with date mode

Source: https://miniapp.neuxnet.com/component

Example of using the built-in picker component with date mode, bound to a date value, with start and end dates and a change event handler. The picker contains a view with class 'picker'.

```html
	<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
		<view class="picker">
		</view>
	</picker>

```

--------------------------------

### Example project directory structure

Source: https://miniapp.neuxnet.com/collocation/pages

Shows the expected development directory layout for a Mini App, including pages, static assets, and configuration files.

```text
┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
```

--------------------------------

### Using uni.createSelectorQuery() to get node info

Source: https://miniapp.neuxnet.com/api/ui/nodes-info.html

Example of using uni.createSelectorQuery() to query viewport scroll offset and node bounding client rect and fields.

```javascript
uni.createSelectorQuery().selectViewport().scrollOffset(res => {
}).exec();

let view = uni.createSelectorQuery().in(this).select(".test");

view.fields({
  size: true,
  scrollOffset: true
}, data => {
}).exec();

view.boundingClientRect(data => {
}).exec();
```

--------------------------------

### condition list configuration example

Source: https://miniapp.neuxnet.com/collocation/pages

Example of the condition list configuration with a test entry. The list is an array of startup modes, each with name and path. The query attribute is optional and available in the onLoad function.

```json
	"list": [{
		},
		{
			"name": "test",
			"path": "pages/component/switch/switch"
		}
	]
}
```

--------------------------------

### Implement pull-down refresh in index.vue

Source: https://miniapp.neuxnet.com/api/ui/pulldown.html

Example of using onPullDownRefresh and uni.startPullDownRefresh/uni.stopPullDownRefresh in a Vue component. The onLoad function starts the pull-down refresh, and onPullDownRefresh stops it after a delay.

```javascript
// Only for example, the delay is used as required in actual development.
export default {
	data() {
		return {
			text: 'Mini App'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}
```

--------------------------------

### uni.chooseFile example

Source: https://miniapp.neuxnet.com/api/media/file.html

Example demonstrates selecting files with an extension filter and selecting image files. The first call selects files with .zip or .doc extensions and logs the temporary file paths. The second call selects up to 10 image files and stores the tempFiles in a variable for display.

```javascript
uni.chooseFile({
  extension:['.zip','.doc'],
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

//Select image file
uni.chooseFile({
  count: 10,
  type: 'image',
  success (res) {
    // tempFilePath can display images as the src attribute of the img tags.
    const tempFilePaths = res.tempFiles
  }
})
```

--------------------------------

### Example project structure for a Vuex-based MiniApp

Source: https://miniapp.neuxnet.com/tutorial/vue3-vuex.html

Shows the recommended file layout for a MiniApp project using Vuex. The store directory can be split into separate files for actions, mutations, and getters if it becomes too large.

```text
├── pages
├── static
└── store
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

```

--------------------------------

### uni.getSelectedTextRange success callback example

Source: https://miniapp.neuxnet.com/api/key

Retrieves the cursor position (start and end) of a focused input or textarea. Only works when called while the element is focused and only on Vue pages.

```javascript
uni.getSelectedTextRange({
  success: res => {
    console.log('getSelectedTextRange res', res.start, res.end)
  }
})

```

--------------------------------

### Complete pages.json configuration example

Source: https://miniapp.neuxnet.com/collocation/pages

A full `pages.json` file with all configuration options: `pages`, `globalStyle`, `tabBar`, `easycom`, `topWindow`, `leftWindow`, and `rightWindow`. This serves as a reference for setting page paths, global window styles, tab bar appearance, auto-import rules, and responsive window layouts.

```json
{
	"pages": [{
		"path": "pages/component/index",
		"style": {
		}
	}, {
		"path": "pages/API/index",
		"style": {
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
		"list": [{
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
        "text": "\ue102",
        "selectedText": "\ue103",
        "fontSize": "17px",
        "color": "#000000",
        "selectedColor": "#0000ff"
      }
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}
```

--------------------------------

### Quick create a Mini App with a project name

Source: https://miniapp.neuxnet.com/quickstart

Use this command to quickly create a Mini App project with a specified project name.

```bash
npm create neu-miniapp <Project name>

```

--------------------------------

### uni.startBeaconDiscovery sample code

Source: https://miniapp.neuxnet.com/api/system/ibeacon.html

Starts searching for nearby iBeacon devices. The sample shows the success callback. Requires the uuids parameter (not shown in the sample).

```javascript
uni.startBeaconDiscovery({
  success(res) { }
})
```

--------------------------------

### uni.checkIsSoterEnrolledInDevice - Biometric Enrollment Check Example

Source: https://miniapp.neuxnet.com/api/system/authentication.html

This example demonstrates the usage of uni.checkIsSoterEnrolledInDevice to check if a fingerprint or facial biometric is enrolled. It includes methods for checking support, checking enrollment for fingerprint and FaceID, and starting authentication for both. The code shows the full Vue component structure with template, script, and style sections.

```Vue
<template>
	<view class="content">
		<button type="primary" @click="checkIsSupportSoterAuthentication">检查支持的认证方式</button>
		<button type="primary" @click="checkIsSoterEnrolledInDeviceFingerPrint">检查是否录入指纹</button>
		<button type="primary" @click="checkIsSoterEnrolledInDeviceFaceID">检查是否录入FaceID</button>
		<button type="primary" @click="startSoterAuthenticationFingerPrint">开始指纹认证</button>
		<button type="primary" @click="startSoterAuthenticationFaceID">开始FaceID认证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			checkIsSupportSoterAuthentication() {
				uni.checkIsSupportSoterAuthentication({
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			checkIsSoterEnrolledInDeviceFingerPrint() {
				uni.checkIsSoterEnrolledInDevice({
					checkAuthMode: 'fingerPrint',
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			checkIsSoterEnrolledInDeviceFaceID() {
				uni.checkIsSoterEnrolledInDevice({
					checkAuthMode: 'facial',
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			startSoterAuthenticationFingerPrint() {
				uni.startSoterAuthentication({
					requestAuthModes: ['fingerPrint'],
					challenge: '123456',
					authContent: '请用指纹解锁',
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			startSoterAuthenticationFaceID() {
				uni.startSoterAuthentication({
					requestAuthModes: ['facial'],
					challenge: '123456',
					authContent: '请用FaceID解锁',
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style>
	button {
		width: 200px;
		margin: 20px auto;
	}
</style>
```

--------------------------------

### Fill path with CanvasContext.fill (Example 1)

Source: https://miniapp.neuxnet.com/api/canvas/CanvasContext

Fills the current path. If the path is not closed, fill() connects the start and end points before filling. The sample draws a triangle and fills it.

```javascript
const ctx = uni.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

```

--------------------------------

### Input component template example

Source: https://miniapp.neuxnet.com/component/input.html

Template example for the input component showing various configurations: focus, confirm-type, maxlength, input events, v-model, ref, type, password, placeholder-style. Note: complete CSS is not included; refer to the hello Mini App project for external CSS.

```html
<!-- This example does not include the complete css, please refer to the above to obtain the external css. View it in the hello Mini App project -->
<template>
	<view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" focus placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" confirm-type="search" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" maxlength="10" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{inputValue}}</view>
				<input class="uni-input" @input="onKeyInput" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="test" />
			</view>
			<!-- #ifndef MP-BAIDU -->
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="test" />
			</view>
			<!-- #endif -->
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" type="number" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" password type="text" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" type="digit" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" type="idcard" placeholder="test" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">test</view>
				<input class="uni-input" placeholder-style="color:#F76260" placeholder="test" />
			</view>
		</view>
	</view>
</template>

```

--------------------------------

### Setting global data and methods with Vuex (store.js, main.js, test.vue)

Source: https://miniapp.neuxnet.com/tutorial/vue3-api.html

Three files showing how to set up a Vuex store, register it in the app, and use mapState/mapMutations in a component. The store.js creates the store, main.js registers it with createSSRApp, and test.vue imports Vuex helpers.

```javascript
	//store.js
	import {createStore} from 'vuex'
	const store = createStore({
		state: {...},
		mutations: {...},
		actions: {...}
	})
	export default store

```

```javascript
	//main.js
	import App from './App'
	import {createSSRApp} from 'vue'
	import store from './store'
	export function createApp() {
		const app = createSSRApp(App)
		app.use(store)
		return {
			app
		}
	}

```

```javascript
	//test.vue When using:
	import {mapState,mapMutations} from 'vuex'

```

--------------------------------

### uni.startBeaconDiscovery(OBJECT)

Source: https://miniapp.neuxnet.com/api/system/ibeacon.html

Starts searching for nearby iBeacon devices.

```APIDOC
## uni.startBeaconDiscovery(OBJECT)

### Description
Start searching for nearby iBeacon devices.

### Method
N/A (API Call)

### Endpoint
uni.startBeaconDiscovery(OBJECT)

### Parameters
#### Object Parameters
- **uuids** (Array<String>) - Required - uuid list broadcast by iBeacon device.
- **ignoreBluetoothAvailable** (boolean) - Optional - Default: false - Whether to check the Bluetooth on/off, valid only on iOS.
- **success** (function) - Optional - Callback function for successful interface calling.
- **fail** (function) - Optional - Callback function for failed interface calling.
- **complete** (function) - Optional - Callback function for closed interface calling (available both for successful and failed calling).

### Request Example
```js
uni.startBeaconDiscovery({
  uuids: ['FDA50693-A4E2-4FB1-AFCF-C6EB07647825'],
  success(res) { }
});
```

### Response
#### Success Response
No explicit success response; the success callback is invoked.

### Error Codes
| Error Code | Error Message | Instruction |
|---|---|---|
| 0 | ok | Normal |
| 11000 | unsupport | Not supported by the system or device |
| 11001 | bluetooth service unavailable | Bluetooth service is unavailable |
| 11002 | location service unavailable | Location service is unavailable |
| 11003 | already start | Search started |
```

--------------------------------

### Cancel compass listening with uni.offCompassChange

Source: https://miniapp.neuxnet.com/api/system/compass.html

Cancels listening to compass data. The CALLBACK parameter must be the same function that was passed to uni.onCompassChange. The example shows the full sequence: defining the callback, starting listening, and then canceling it.

```javascript
const callback = function (res) {
	console.log(res.direction);
}
uni.onCompassChange(callback);
// Pass in the same function as onCompassChange
uni.offCompassChange(callback);
```

--------------------------------

### Get transaction by transaction number - response

Source: https://miniapp.neuxnet.com/serverside

Example response for the tradedetail endpoint. Shows transaction details including tradeNo, appId, merchantId, amount, currency, transactionFlow, transactionStatus, and timestamps. Comments indicate field meanings.

```json
{
    "responseHeader": {
        "status": 200,
        "msg": "OK"
    },
    "response": {
        "tradeNo": "cf6c814f886242ffa741a809924a9f41", // transaction number
        "appId": "rha41wzp08ms3x9", // mini app id
        "merchantId": "4c39d791b37741108ff2b72684d2840b", // merchant number
        "merchantLogoUrl": "https://{domain}:30010/cdn/menu1669693827182", // merchant logo url
        "merchantName": "Menu", // merchant name
        "description": "", // Description
        "outTradeNo": "test003", // order number of merchant system
        "timeExpire": null, // expire time 
        "amount": 100, // amount  in cents
        "amountStrWithYuan": "1.00", // display amount with 'yuan' unit
        "currency": "USD", // currency (CNY; USD; SGD; SAR)
        "openId": "358a2136a94a67b236e67dfe386230", // user openid 
        "payer": 8658707941847254, // payer uid
        "notifySuccess": null, // notify success status
        "payType": null, // pay type (1-Checkout; 2-Stripe; 3-PayTabs) 
        "payNo": null, // pay number
        "payMethod": null, // pay method (1-Google Pay; 2-Apple Pay; 3-Card)
        "transactionFlow": 2, // transaction flow (1-Income; 2-Expense)
        "transactionStatus": 2, // transaction status (1-processing; 2-succeeded; 3-failed; 4-expired; 5-canceled; 6-closed)
        "failReasonType": 20, // fail reason type, default value -1 have no meaning ,see FailReasonTypeEnum
        "ctime": 1670937859115, // create time 
        "mtime": 1670938076064 // update time
    }
}

```

--------------------------------

### main.js - createApp with Pinia

Source: https://miniapp.neuxnet.com/tutorial/vue3-pinia.html

Sets up the Vue app with Pinia in main.js. The createApp function creates the app and installs Pinia using app.use(Pinia.createPinia()).

```javascript
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';

export function createApp() {
	const app = createSSRApp(App);
	app.use(Pinia.createPinia());
	return {
		app,
	};
}

```

--------------------------------

### uni.getBackgroundAudioManager() example

Source: https://miniapp.neuxnet.com/api/media/background-audio-manager.html

Retrieves the globally unique background audio manager and configures its title, singer, cover image, and audio source. Setting a new src automatically starts playback; supported formats are m4a, aac, mp3, and wav.

```javascript
const bgAudioManager = uni.getBackgroundAudioManager();
bgAudioManager.title = '致爱丽丝';
bgAudioManager.singer = '暂无';
bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-Mini App-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
bgAudioManager.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
```

--------------------------------

### CanvasContext.quadraticCurveTo sample

Source: https://miniapp.neuxnet.com/api/canvas/CanvasContext

Creates a quadratic Bezier curve path. The sample draws points, guides, and the curve. The three key coordinates are: red starting point (20,20), blue control point (20,100), green end point (200,20).

```javascript
const ctx = uni.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

```

--------------------------------

### Create Vue SSR App in main.js

Source: https://miniapp.neuxnet.com/collocation/main.html

Initializes the Vue instance in the Mini App entry file. Imports App.vue and createSSRApp, creates the app, and returns it for mounting. Note that vue-router cannot be used; routing must be configured in pages.json.

```javascript
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
    const app = createSSRApp(App)
    return {
        app
    }
}

```

--------------------------------

### pages.json configuration for topWindow, leftWindow, rightWindow

Source: https://miniapp.neuxnet.com/collocation/pages

Example pages.json configuration showing how to set up topWindow, leftWindow, and rightWindow with styles and matchMedia. The topWindow has a height of 44px, leftWindow a width of 300px, and rightWindow uses an empty matchMedia object.

```json
{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
      }
    }
  ],
  "topWindow": {
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "style": {
    },
    "matchMedia": {
    }
  }
}

```
Tokens:
Raw