1. In one sentence, briefly describe the similarities and differences between uniapp, vue and WeChat applets.
To put it simply, Uni-app uses vue instructions and small program components and APIs.
2. How to configure tabbar in Uniapp
See previous separate article -
3. Common components in Uniapp
text
| selectable | boolean | false | no | Is the text optional? |
| space | string | . | no | Display continuous spaces, optional parameters: ensp, emsp,nbsp |
| decode | boolean | false | no | Whether to decode |
view
View view container, similar to div in HTML
button
| size | String | default | button size |
| type | String | default | Button style type |
| plain | Boolean | false | Whether the button is hollow and the background color is transparent |
| disabled | Boolean | false | Whether button |
| loading | Boolean | false | Whether the name has a loading t icon |
image
| attribute name | type | default value | illustrate | Platform differences explained |
|---|---|---|---|---|
| src | String | Picture resource address | ||
| mode | String | ‘scaleToFill’ | Image cropping and zooming modes |
4. Commonly used command statements in Uniapp
v-for: loop rendering (note: key)
v-if: Control the deletion and addition of elements
v-show: Control the display and hiding of elements
v-model: two-way data binding
v-on: event binding (abbreviated @)
v-bind: attribute binding (abbreviation:)
5. Uniapp application life cycle, page life cycle, and component life cycle
See my separate article for details -
6. Pay attention to the use of pull-down refresh and bottom loading
1. Monitor pull-down refresh
You can monitor the pull-down refresh action through onPullDownRefresh
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
console.log('触发下拉刷新了')
}
}
2. Turn off pull-down refresh
uni.stopPullDownRefresh()
Stop the pull-down refresh of the current page.
Case presentation
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
this.arr = []
setTimeout(()=> {
this.arr = ['前端','java','ui','大数据']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>3. Pull-up loading
By configuring onReachBottomDistance in the style under the pages node of the current page in the pages.json file, you can set the distance from the bottom to start loading. The default is 50px.
Monitor the bottoming behavior through onReachBottom
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
console.log('触底了')
}
}
</script>
<style>
view{
height: 100px;
line-height: 100px;
}
</style>
7. Conditional comments in Uniapp (different platforms)
See my separate article for details -
8. Use and encapsulation of uni.request
In uni, you can call the uni.request method to request network requests.
It should be noted that the network-related APIs in the mini program need to be configured with a domain name whitelist before use.
Example:
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>OBJECT parameter description
| parameter name | type | Required | default value | illustrate | Platform differences explained |
|---|---|---|---|---|---|
| url | String | yes | Developer server interface address | ||
| data | Object/String/ArrayBuffer | no | Request parameters | App 3.3.7 and below do not support the ArrayBuffer type | |
| header | Object | no | Set the header of the request. Referer cannot be set in the header. | The app and H5 side will automatically bring cookies, and the H5 side cannot be modified manually. | |
| method | String | no | GET | Please see the description below for valid values. | |
| timeout | Number | no | 60000 | Timeout time, unit ms | H5(HBuilderX 2.9.9+), APP(HBuilderX 2.9.9+), WeChat applet (2.10.0), Alipay applet |
| dataType | String | no | json | If set to json, it will try to do JSON.parse on the returned data. | |
| responseType | String | no | text | Set the data type of the response. Legal values: text, arraybuffer | Alipay mini program does not support |
| sslVerify | Boolean | no | true | Verify ssl certificate | Only supported by the Android version of the App (HBuilderX 2.3.3+), offline packaging is not supported |
| withCredentials | Boolean | no | false | Whether to carry credentials (cookies) when making cross-domain requests | Only supported by H5 (HBuilderX 2.6.15+) |
| firstIpv4 | Boolean | no | false | Prioritize ipv4 during DNS resolution | Only supported by App-Android (HBuilderX 2.8.0+) |
| success | Function | no | Receive the callback function returned successfully from the developer server | ||
| fail | Function | no | Callback function for interface call failure | ||
| complete | Function | no | The callback function at the end of the interface call (executed whether the call is successful or failed) |
For more details, please check the official website——
uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)
https://uniapp.dcloud.net.cn/api/request/request.html
9. Local cache in Uniapp
(1) Synchronization
1. Storage: uni.setStorageSync
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>
<style>
</style>
2. Get: uni.getStorageSync
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>
(2) Asynchronous
1. Storage: uni.setStorage
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
}
}
}
</script>
<style>
</style>
2. Get: uni.getStorage
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success: res=>{
this.id = res.data
}
})
}
}
}
</script>
(3) Delete
uni.removeStorageSync
Synchronously remove the specified key from the local cache.
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>
10. Jump methods (navigator tag, uni.navigateTo method) and parameter passing in Uniapp
1. Use the navigator tag to jump
Navigator detailed documentation: Document address
Jump to normal page
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
Jump to tabbar page
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
2. Use navigateTo for navigation jump
Keep the current page, jump to a page in the application, and use it uni.navigateBackto return to the original page.
<button type="primary" @click="goAbout">跳转到关于页面</button>
Jump to a normal page through the navigateTo method
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
3. Jump to the tabbar page through switchTab
Jump to tabbar page
<button type="primary" @click="goMessage">跳转到message页面</button>
Jump through switchTab method
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
4. redirectTo to jump
Close the current page and jump to a page within the app.
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
Parameter transfer method
While navigating to the next page, you can pass corresponding parameters to the next page. The page that receives the parameters can receive it through the onLoad life cycle.
Pass parameter page
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
The page that receives the parameters
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
11. Creation, use and parameter passing methods of components in Uniapp
(1) Creation of components
In uni-app, you can create a file with the suffix name vue, that is, create a component successfully. Other components can import the component through import and register it through components.
1. Create the login component, create the login directory in the component, and then create a new login.vue file
<template>
<view>
这是一个自定义组件
</view>
</template>
<script>
</script>
<style>
</style>
2. Import the component in other components and register it
import login from "@/components/test/test.vue"
3. Register components
components: {test}
4. Use components
<test></test>
(2) Communication between components
1. From father to son
In subcomponents: accept values passed from the outside to the interior of the component through props
<template>
<view>
这是一个自定义组件 {
{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
In the parent component: pass the value when using the login component
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
2. Child Father
(1) The parent component defines custom events and receives parameters
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
(2) Pass parameters through $emit trigger event
<template>
<view>
这是一个自定义组件 {
{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
12. Event bus in Uniapp
See my separate article for details -