### 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';
    }
});
```

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

### 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();
	},
};

```

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

### 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"
		}
	]
}
```

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

### 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');
						}
					});
				}
			});
		}
	}
}


```

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

### match-media component usage example

Source: https://miniapp.neuxnet.com/component/match-media

Example of using the match-media component with min-width, max-width, min-height, and orientation attributes to conditionally display content based on screen size and orientation.

```html
<template>
    <view>
        <match-media :min-width="375" :max-width="800" >
        </match-media>

        <match-media :min-height="400" :orientation="landscape">
        </match-media>
    </view>
</template>
```

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

### 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));
	}
});

```

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

### pages.json with style and maxWidth example

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

Example of a pages array entry with an empty style object, showing the structure for a single page.

```json
{
  "pages": [{
      "path": "pages/index/index",
      "style": {
      }
    },
    ...
  ]
}
```

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

### v-for with key example

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

Demonstrates using v-for with key on both an array of objects and an array of strings. The example shows how to use item.id or item itself as the key.

```html
	<template>
		<view>
			<!-- Some property of item in Array -->
			<view v-for="(item,index) in objectArray" :key="item.id">
				{{index +':'+ item.name}}
			</view>
			<!-- When item itself is a unique string or number, we can use item itself -->
			<view v-for="(item,index) in stringArray" :key="item">
				{{index +':'+ item}}
			</view>
		</view>
	</template>
	<script>
	export default {
		data () {
			return {
				objectArray:[{
					id:0,
					name:'li ming'
				},{
					id:1,
					name:'wang peng'
				}],
				stringArray:['a','b','c']
			}
		}
	}
	</script>

```

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

### uni.reLaunch example with onLoad

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

Closes all pages and opens a new page. The example shows calling uni.reLaunch and then handling the passed parameter in the target page's onLoad. On H5, the previous page stack is destroyed but browser history cannot be cleared.

```javascript
uni.reLaunch({
	url: 'test?id=1'
});
```

```javascript
export default {
	onLoad: function (option) {
		console.log(option.id);
	}
}
```

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

### Advanced store definition with setup function

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

Defines a store using a function similar to component setup(). It uses ref for state and a function for actions, returning them for use.

```javascript
export const useCounterStore = defineStore('counter', () => {
	const count = ref(0);
	function increment() {
		count.value++;
	}

	return { count, increment };
});

```

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

### uni.showLoading and uni.hideLoading example

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

Shows a loading prompt box and then hides it after 2 seconds. The example demonstrates that uni.showLoading must be paired with uni.hideLoading to close the prompt. The setTimeout function is used to delay the hide call.

```javascript
uni.showLoading({
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

```

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

### uni.showToast example

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

Displays a message prompt box. The example shows a call with only the duration parameter set to 2000 milliseconds. The title and icon parameters are optional; if omitted, the toast uses default values.

```javascript
uni.showToast({
	duration: 2000
});

```

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

### uni.showActionSheet example

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

Example of calling uni.showActionSheet with an itemList of three options. The success callback receives the tapIndex of the selected item, and the fail callback logs the error message.

```javascript
uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});
```

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

### box-shadow example

Source: https://miniapp.neuxnet.com/tutorial/nvue-css

Example of setting a box-shadow with inset, offsets, blur, and color. The shadow is inset 3px 5px 20px with rgb(255, 69, 0).

```css
	.box4 {
	    box-shadow: inset 3px 5px 20px rgb(255, 69, 0);
	}

```

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

### uni.requestPayment example

Source: https://miniapp.neuxnet.com/api/plugins/payment.html

Example of calling uni.requestPayment with required parameters (name, country, currency, amount, transactionNo) and success/fail callbacks. The success callback logs the response, and the fail callback logs the error.

```javascript
uni.requestPayment({
   name: "shop",
   country:"SA",
   currency:"SAR",
   amount:"0.01",
   transactionNo:"E9E82C63B62C409C8934A0AD2B47DCA2"
    success: function (res) {
        console.log('success:' + JSON.stringify(res));
    },
    fail: function (err) {
        console.log('fail:' + JSON.stringify(err));
    }
});
```

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

### 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);
			}
		});
	}
});
```

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

### 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();
```

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

### 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
  }
})
```

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

### 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);
	}
}
```

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

### 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>
```

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

### 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>

```

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

### 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()

```

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

### 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": {
    }
  }
}

```

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

### Get current page webview with $getAppWebview()

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

Use this snippet to obtain the current page's webview object instance within the onLoad lifecycle hook. It is wrapped in an APP-PLUS conditional compilation block, as this method is only supported on App-Vue. The example sets a bounce effect on the webview.

```javascript
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    const currentWebview = this.$scope.$getAppWebview(); 
    currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); 
    // #endif
  }
}
```

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

### uni.startCompass(OBJECT)

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

Starts listening to compass data. Accepts an OBJECT with optional success, fail, and complete callbacks.

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

### Description
Start listening to compass data.

### Method
uni.startCompass

### Parameters
#### OBJECT Parameters
- **success** (Function) - Optional - Callback 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)

### Example
```js
uni.startCompass();
```
```

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

### uni.setNavigationBarTitle example

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

Sets the title of the current page dynamically. The example shows the basic call with an empty object; the title parameter is required but not shown in the example.

```javascript
uni.setNavigationBarTitle({
});
```

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

### uni.addPhoneContact example

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

Example usage of uni.addPhoneContact with several parameters and success/fail callbacks. The example sets nickName, lastName, firstName, remark, mobilePhoneNumber, and weChatNumber, and logs 'success' or 'fail' accordingly.

```javascript
uni.addPhoneContact({
	nickName: 'nickName',
	lastName: 'lastName',
	firstName: 'firstName',
	remark: 'remark',
	mobilePhoneNumber: '114',
	weChatNumber: 'wx123',
	success: function () {
		console.log('success');
	},
	fail: function () {
		console.log('fail');
	}
});
```

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

### uni.removeInterceptor example

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

Removes an interceptor for the specified API. The example removes the interceptor for 'request'.

```javascript
uni.removeInterceptor('request')
```

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

### pages.json pages array example

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

Example of configuring the pages array in pages.json with page paths and style objects.

```json
{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}
```

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

### uni.getSavedFileInfo(OBJECT)

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

Gets the file information of a local file. This interface can only be used to get files that have been saved locally.

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

### Description
Gets the file information of a local file. This interface can only be used to get files that have been saved locally.

### Method
uni.getSavedFileInfo(OBJECT)

### Parameters
#### OBJECT Parameters
- **filePath** (String) - Required - File path.
- **success** (Function) - Optional - Callback function for successful interface calling. See success return parameters for the result.
- **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).

### Success Return Parameters
- **errMsg** (String) - Interface call result.
- **size** (Number) - File size, in bytes.
- **createTime** (Number) - Timestamp when the file is saved: the number of seconds from `1970/01/01 08:00:00` to this moment.

### Request Example
```javascript
uni.getSavedFileInfo({
  success: function (res) {
    console.log(res.size);
    console.log(res.createTime);
  }
});
```
```

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

### uni.launchApp examples for opening third-party apps

Source: https://miniapp.neuxnet.com/api/other/launchApp.html

These examples show how to use uni.launchApp to open third-party apps on Android and iOS. The first opens Facebook from Google Play using a market URL and identity. The second opens Chrome via URL scheme with a fallback. The third uses an app link, and the fourth opens a URL in the default browser.

```javascript
// Android opens the URL with the specified App. Open facebook from google play
uni.launchApp({
    url: "market://details?id=com.facebook.katana", // facebook Url
    identity: "com.android.vending" // google play
})

// Open the Chrome browser by URL Scheme 
uni.launchApp({
    url: "googlechrome://",
    fail: function () {
        // The startup failed, possibly because Chrome was not installed
        // Open the browser
        uni.launchApp({
            url: "https://www.google.com/chrome/"
        })
    }
})

// Open the App by applink/neuversal Link,If startup fails, the URL is opened using the browser
uni.launchApp({
    url: "https://apps.apple.com/us/app/facebook/id284882215"
})

// Open the URL using your phone's default browser
uni.launchApp({
    url: 'https://www.facebook.com/'
});
```

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

### uni.hideToast example

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

Hides the currently displayed message prompt box. This example shows a simple call to uni.hideToast() with no parameters.

```javascript
uni.hideToast();

```

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

### subNVue.setStyle example

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

Sets the style of a native subwindow using the subNVue.setStyle method. The example sets width, height, left, and top attributes.

```javascript
subNVue.setStyle({
	"width": "50%",
	"height": "50%",
	"left":"20px",
	"top":"100px"
})
```

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

### uni.saveImageToPhotosAlbum Example

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

Example of using uni.saveImageToPhotosAlbum to save an image taken from the camera to the system album. The success callback logs 'save success'.

```javascript
uni.chooseImage({
	count: 1,
	sourceType: ['camera'],
	success: function (res) {
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePaths[0],
			success: function () {
				console.log('save success');
			}
		});
	}
});
```