Table of contents
Parent-child component passing value
Basic configuration of the page
The life cycle function of the applet is compatible with uni-app at the same time
Customize the applet navigation bar
The routing of uni-app WeChat applets are the same except for the prefix
access to personal information
two-way data binding
1 Ordinary data binding is not responsive
<input value="{
{value}}" />
make data responsive
// 使用setData赋值，使其拥有响应式，达到双向数据绑定的效果
this.setData({
dataAll: this.data.dataAll,
})2 Use the model: prefix to make data binding reactive
<input model:value="{
{value}}" />
Parent-child component passing value
Define subcomponents
Create a components folder and create a new corresponding subcomponent
Import subcomponents
json file
"usingComponents": {
"header":"../../components/header"
},father to son
The properties in the subcomponents are props, which are used to accept parent-child data
Format one text: String
Format 2 text: { type: String , value : '' ,} // value is the default value
child's father
custom event in parent component
bind: custom event name = " "
call in child component
//作用与emit相似，建议用对象传值
this.triggerEvent('aaa', {k:v}) local storage
asynchronous
save wx.setStorage({ key: "name", data: JSON.stringify(data) })
Take wx.getStorage({ key: "name", success:(res)=>{ when successful, res is the corresponding data} })
Synchronize
save wx.setStorageSync('name', JSON.stringify(data))
Take wx.getStorageSync('name')
Component lifecycle functions
-
created() : Triggered when the component instance has just been created.
-
attached() : Triggered after entering the page node tree
-
Triggered after the detached() component leaves the page node tree
Get user information
Enable the button component
<button type="primary" open-type="getUserInfo"
bindgetuserinfo="handleGetUserInfo">
登陆
</button>open-type="getUserInfo" set the function of the button to get user information
bindgetuserinfo is a call after clicking. Among the formal parameters that come with it, there is user information
handleGetUserInfo(e) {
console.log(e)
const { userInfo } = e.detail;
}Basic configuration of the page
| backgroundColor |
The background color of the pull-down refresh, the part of the pull-down refresh is the background |
| backgroundTextStyle |
The background text style of the applet has only two values of light color and dark color |
| navigationBarBackgroundColor |
The background color of the navigation bar |
| navigationBarTitleText |
The title text of the navigation bar |
| navigationBarTextStyle |
The text color of the navigation bar has only two values black black and white white |
| enablePullDownRefresh |
Enable the pull-to-refresh function, the default value is false |
| onReachBottomDistance |
The distance to trigger the bottoming method, the unit is px |
TabBar settings
Configure in pages.json in uni-app
"tabBar": {
"color": "#000000",
"selectedColor": "#d00",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"position": "bottom"，
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/icon/shouye.png",
"selectedIconPath": "static/icon/pitch-icon/shouye.png"
}
// 此处进行配置第二个tabBar页面
]
}Precautions
1 tabBar minimum two, maximum five
2 The font icon below needs two colors, unselected and selected. It is recommended to use it as a picture after downloading
3 When the tabBar is set to the top, there will be no icons, only text
uni-app introduces vantUi
1 The built-in terminal npm installs the vant applet version
2 Create a new wxcomponents folder and copy the dist folder in @vant . And paste it and rename it to vant
3 You can delete the folder generated by introducing vant
4 It is required to import vant normally, but the file path is "/wxcomponents/vant/...."
5 Modify the configuration in pages.json . Let it use vant and npm configuration, the specific code is as follows
set dynamic top text
In pages.json, when creating a new file, the corresponding data will be automatically added. You can set the header text here, or introduce the vant style
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表",
"enablePullDownRefresh": false,
"usingComponents": {
"van-icon": "/wxcomponents/vant/icon/index",
}
}Encapsulate axios request
Create the utils folder and add the http.js file in the folder
function axios({
url,
method = "get",
data = {}
}) {
uni.showLoading({
title: '拼命加载中...',
mask: true
})
return new Promise((resolve, reject) => {
uni.request({
url: "https://www.uinav.com/api/public/v1" + url,
method,
data,
success(res) {
resolve(res.data)
uni.hideLoading()
},
fail(err) {
reject(err)
uni.hideLoading()
uni.showToast({
title: "请求失败"
})
}
})
})
}
export default axios
when using the page
introduce
import axios from '../../utils/http.js'use
axios({ url: '/home/swiperdata'}).then(res => {
console.log(res)
})The life cycle function of the applet is compatible with uni-app at the same time
| onLoad |
When the page is loaded, it triggers the created life cycle equivalent to vue |
| onReady |
When the page is rendered for the first time, it triggers the mounted life cycle equivalent to Vue |
| onShow |
When the page is displayed/cut to the foreground, it triggers the activated which is equivalent to Vue |
| onHide |
Trigger equivalent to Vue's deActivited when the page hides/cuts into the background |
| onUnload |
When the page is unloaded, it triggers the destroyed life cycle equivalent to vue |
| onPullDownRefresh |
Hook function for pull-down refresh |
| onReachBottom |
Pull up to the bottom loaded hook function |
Turn on and off to refresh
uni.startPullDownRefresh() // Enable the pull-down refresh function
uni.stopPullDownRefresh() // method to stop pull-down refresh
In the WeChat applet, it is wx.startPullDownRefresh ()
Customize the applet navigation bar
1 Define "navigationStyle": "custom" in the pages of the page to be used
2 Define a subcomponent, this subcomponent is a custom header navigation bar, there is no onLode in this component , you can use mounted
uni.getSystemInfo ({}) can get the basic information of the mobile phone
statusBarHeight is the height of the mobile navigation bar
3 The page used introduces this component, and the parent-child component can be used to pass values normally
Note: If the click event does not take effect in this component, you can try to trigger the incoming event from the child to the parent
Subcontracting of uni-app
1 pages is the location where the applet is used to place pages. At the same level as it, create a subpackage folder and create corresponding files. The format is as follows
2 In pages.json , configure subcontracting
"subPackages": [{
"root": "packageOne",
"pages": [
{
"path": "search/search",
"style": {
"navigationBarTitleText": "商品搜索",
"enablePullDownRefresh": true,
"backgroundColor": "#d00",
"onReachBottomDistance": 260
}
}
//在此处添加另一个页面，{path:....,style....}
] }]The root attribute is the folder name of the subpackage, and the subpackage pages are placed in the pages array, and the rest are consistent with the page configuration of the pages folder
The routing of uni-app WeChat applets are the same except for the prefix
label jump
tag name
<navigator url="/pages/home/home" open-type="navigate"></navigator>open-type parameter
| navigate |
It will hide the current page and enter a new page. The page stack can have up to ten layers. |
| redirect |
Will destroy (close) the current page and enter the new page |
| switchTab |
Specifically used to jump to the tabbar page, he will destroy all non-tabbar pages |
| navigateBack |
Close the current page and return to the previous level or levels |
| reLaunch |
You can jump to the tabbar page, which will close all pages and enter a new page |
logical jump
| Keep the current page and jump to a page in the app | |
| Close the current page and jump to a page in the app | |
| Close all pages and open to a page within the app. | |
| Jump to the tabBar page and close all other non-tabBar pages | |
| Close the current page, return to the previous page or multi-level page You can determine how many layers need to be returned by |
|
| Preloading pages is a performance optimization technique |
Routing parameters and receiving parameters
Note: switchTab cannot pass parameters
传参：wx.redirectTo({ url: '/pages/home/home?id='+id })
Receive: destructure in the options object of the onLoad function that monitors page loading
image preview
// 图片预览
preview(img) { //点击的图片的网址
//接受一个数组或字符串，里面的内容是要预览的图片的网址的集合
let image = this.dataAll.pics.map(item => item.pics_mid_url)
uni.previewImage({ //开启预览的api
current: img, //当前点击的图片
urls: image //图片的集合
})
},uni-app's built-in pop-up box
Pop-up box
uni.showToast({
title: '添加成功',
icon: 'checkbox',
mask: true
})loading
uni.showLoading({
title: '拼命加载中...',
mask: true
})Add shipping address
addSite() { //事件
//uni-app获取用户收货地址的api
uni.chooseAddress({
success(res) { //成功时的回调
console.log(res)
}
})
}Use of checkbox components
Because it is a packaged component, v-model does not work. Set the value of whether it is checked or not to checked . You can set its click event through @click , and modify the checked value in the event . If it is circular data , pass the subscript in the event to change the corresponding data
share
share button
<button open-type="share">分享</button>corresponding logic
onShareAppMessage is a shared function with parameters options, which can return several data
onShareAppMessage(
return {
title: " ", //标题
path: '/pages/index/index', //分享的页面
imageUrl: '/images/chiken.webp' //分享的主题图片
}
)Scan code
wx.scanCode({ //扫码事件函数
onlyFromCamera: false, //是否只能摄像头扫码，要关闭
scanType: ['barCode', 'qrCode'], //扫描的类型，条形码，二维码
success: (result) => {}, //成功的回调
fail: (res) => {}, //失败的回调
complete: (res) => {}
})access to personal information
1 Write a button component
<button type="primary" open-type="getUserInfo"
@click="add" v-if="!isWarrant">
登录</button>2 Use uni.getUserProfile to pull user authorization, success is triggered when the OK button is clicked, and the res parameter is the personal information returned when the acquisition is successful
add() {
uni.getUserProfile({
desc: '用于获取个人资料', // 这里的desc在微信开发文档中要求必须填写的
success: (res) => {
this.isWarrant = true
this.userInfo = res.userInfo
console.log(res.userInfo)
}
})
}