1. Advantages and disadvantages of uniapp
Advantages:
a. A set of code can generate multiple terminals
b. Low learning cost , the syntax is Vue, and the components are small programs
c. Strong expansion ability
d. Developed using HBuilderX, supporting Vue syntax
e. Breaking through the system's native ability to call H5 Disadvantages of limitations
:
a. It has been in existence for a short time, and many places are not perfect
b. The community is not big
c. The official feedback on problems is not timely
d. It is worse than WeChat applets and iOS on the Android platform
e. File naming is limited
2. In one sentence, describe the similarities and differences between uniapp, vue and WeChat applets
To put it simply, Uni-app is to use vue instructions and components and APIs of applets
When vue and uni-app dynamically bind a variable value to an attribute of an element, a colon ":" will be added in front of the attribute;
when the applet binds a variable value to an element attribute, it will use two Curly braces {
{ }} are enclosed, if no braces are added, it is considered as a string.
3. The configuration file, entry file, main component and page management part of uniapp
pages.json
configuration file, global page path configuration, application status bar, navigation bar, title, window background color setting and other
main.js
entry files, the main function is to initialize the vue instance, define global components, and use required plug-ins such as vuex, Note that uniapp cannot use vue-router, routing must be configured in pages.json. If the developer insists on using vue-router, the conversion plugin can be found in the plugin market.
App.vue
is the main component of uni-app, and all pages are switched under App.vue, which is the page entry file. But App.vue itself is not a page, and view elements cannot be written here. In addition, the application life cycle can only be monitored in App.vue, and the monitoring in the page is invalid.
The pages
page management part is used to store pages or components.
The manifest.json
file is the configuration file of the application, which is used to specify the name, icon, permissions, etc. of the application. The project created by HBuilderX has this file in the root directory, and the project created by CLI has this file in the src directory.
package.json
configuration extension.
4. The method of configuring tabBar in Uniapp and the configuration of the secondary page path
The first item in the pages.json
pages array indicates the application startup page
{
//页面路径配置,未设置root则path默认完整路径
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
}
],
//二级页面，设置了root根文件路径，则path可以简写
"subPackages": [{
"root": "pages/test-sub",
"pages": [
{
"path": "login/index",
"style": {
"navigationBarTitleText": "登录"
}
}
]
}],
//全局样式配置
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
//tab样式和选中后效果
"color": "#7A7E83",
"selectedColor": "#2BD3DE",
"borderStyle": "black",
"backgroundColor": "#F8F8F8",
//tab页面配置，包括图标路径，tab名称、路径
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/农场_24种子.png",
"selectedIconPath": "static/农场_31花草.png",
"text": "首页"
},
{
"pagePath": "pages/user/index",
"iconPath": "static/农场_36稻草人.png",
"selectedIconPath": "static/农场_28蜜蜂.png",
"text": "个人中心"
},
{
"pagePath": "pages/test/index",
"iconPath": "static/农场_36稻草人.png",
"selectedIconPath": "static/农场_28蜜蜂.png",
"text": "测试页面"
}
]
}
}
5. Common components in Uniapp (just say a few)
view: view container.
icon: icon
text: Text component.
button: button
image: image
swiper: carousel
6. Cross-end adaptation - conditional compilation
Writing method: start with #ifdef or #ifndef plus %PLATFORM% , end with #endif.
- #ifdef: if defined only exists on a certain platform
- #ifndef: if not defined exists except for a certain platform
- %PLATFORM%: platform name
//template
<!-- #ifdef MP-WEIXIN -->
<!-- 只在小程序中生效 -->
<view>我是微信小程序</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<!-- 只在 app 中生效 -->
<view>我是 app </view>
<!-- #endif -->
//js
// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif
//css
/* #ifdef MP-WEIXIN */
/* 只在小程序中生效 */
.header {
color:red
}
/* #endif */
7. Command statements commonly used in Uniapp
v-for: loop rendering (note plus: 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: property binding (shorthand: )
8. Local cache in Uniapp
Synchronous storage: uni.setStorageSync, get: uni.getStorageSync
Asynchronous storage: uni.setStorage , get: uni.getStorage
9. How to define uni-app global variables and how to obtain them
Set globalData settings in app.js, js files where needed
let app=getApp()
app.globalData.data
10. Life cycle in uni
The life cycle of the interface and application is mostly the life cycle of the applet, and
the life cycle of the component is the life cycle of vue
1. Application life cycle
1. onLaunch ——triggered when uni-app initialization is completed ( global only triggers once )
2.onShow——When uni-app starts, or enters the foreground from the background to display
3.onHide——when uni-app enters the background from the foreground
4.onError——triggered when uni-app reports an error
5.onUniNViewMessage——monitor the data sent by the nvue page, please refer to the communication from nvue to vue
6. onUnhandledRejection - event listener function for unhandled Promise rejection (2.8.1+)
7. onPageNotFound - the page does not exist monitoring function
8.onThemeChange——monitor system theme changes
2. The life cycle of the page
1.onInit——monitor page initialization, its parameters are the same as onLoad parameters, which are the data passed on the previous page, the parameter type is Object (used for page parameter passing), and the trigger time is earlier than onLoad
2. onLoad ——Monitor page loading , its parameter is the data passed on the previous page , the parameter type is Object (used for page parameter passing), refer to the example
3.onShow——monitor page display. Triggered every time a page appears on the screen, including returning from a subordinate page to reveal the current page
4.onReady——Monitor the completion of the initial rendering of the page. Note that if the rendering speed is fast, it will be triggered before the page enters the animation
5.onHide——listen to hide the page
6.onUnload——monitor page unloading
7. onResize——Monitor window size changes
3. Component life cycle
The life cycle supported by uni-app components is the same as the life cycle of vue standard components
1.beforeCreate——is called after the instance is initialized.
2.created——is called immediately after the instance is created.
3.beforeMount——Called before the mount starts.
4.mounted——Called after mounting to the instance. See Note for details: It is not sure that all subcomponents are mounted here. If you need to perform operations after subcomponents are fully mounted, you can use the $nextTickVue official document
5.beforeUpdate——Called when the data is updated, which occurs before the virtual DOM is patched.
6.updated—The hook will be called after the virtual DOM is re-rendered and patched due to data changes.
7.beforeDestroy——Called before the instance is destroyed. At this step, the instance is still fully available.
8.destroyed——Called after the Vue instance is destroyed. After calling, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.
11. Jump method in uniapp (navigator label, uni.navigateTo method)
Labeling method:
<navigator url="/pages/about/about"></navigator>
Jump to the tabBar page and add open-type="switchTab"
page jump
uni.navigateTo({url: "/path ? Parameter = parameter value"}) Keep the current page, only non-tabBar pages can be opened. uni.redirectTo({}) closes and uninstalls the current page, and can only open non-tabBar page
tabBar jump
uni.switchTab closes all non-tabbar pages, can only open tabBar pages, and cannot pass url parameters
uni.reLaunch({}) closes and uninstalls all pages, and can open any page
12. Transfer value between uniapp project pages
1. Pass single or multiple parameters
Method: splicing directly after the address
1. Splice the parameters to be passed after the address on the page to be redirected, and splice with & when passing multiple
//任务列表页传递id 跳转到相应的任务详情页
gettaskList（id）{
//传递多个参数时直接用&符拼接
uni.navigateTo({
url:'gettaskList?id=${id}'
})
}2. When receiving, receive the passed parameters in the onload function of the page
// 任务详情页通过 onLoad 生命周期中接传递过来的参数 id
onLoad(option){
console.log('上一个页面传递过来的参数', option)
console.log('id', option.id)
console.log('item', option.item)
// 接下来就是你需要该id做些什么，比如通过id查询到该详情等
}
Second, transfer objects
If there are many parameters that need to be passed, since the url of the uniapp jump page api has a length limit, use the following data to pass:
// item 为该列表的每一项的数据对象；encodeURIComponent 为uniapp 提供的api
getTaskList(item) {
uni.navigateTo({
url: `getTaskList?item=${encodeURIComponent(JSON.stringify(item))}`,
});
}when receiving
// 同样onLoad 生命周期中进行接收， decodeURIComponent 为uniapp 提供的api
onLoad(option) {
const item = JSON.parse(decodeURIComponent(option.item));
console.log('上一个页面传递过来的参数对象'，item );
// 接下来就是你需要该对象数据做些什么，当然这里你可以直接赋值给data绑定的数据
this.objData = item;
}Note: JSON.stringify must be used to convert it into a JSON string when passing data , and then JSON.parse must be used to parse it when receiving it !
The same is true for manipulating arrays, because arrays are also objects
13. The creation, use and parameter passing of components in Uniapp
In uni-app, you can create a file with a suffix named vue, that is, create a component successfully, and other components can import the component through import, and then register through components to pass parameters Method: parent to child
, Child to parent, global, event bus
14. git basic commands
1. git init turns this directory into a warehouse that can be managed by git
2. git add.
3. git commit -m 'first commit' submits the file to the warehouse
4. git remote add origin +//warehouse address//associated remote warehouse
5. git push -u origin master //Push all the contents of the local library to the remote library
15. Three ways to transfer data between pages in the uniapp project
The first (use URL programmatic parameter transfer when jumping to the page)
One-way transfer: only the upper-level page can be passed to the lower-level page
Two-way transfer : the upper-level page can be passed to the lower-level page, and the lower-level page can also be passed to the upper-level page
Upper-level page (use events, use the variable name of the lower-level page to transfer data to the upper-level page to obtain the passed parameters)
preserveRevise(){
uni.navigateTo({
url:'/pages/addressMange/addressMange?id=1',
events:{
//获取下级页面传递回来的参数
sonPageData:data=>{
console.log(data);
}
}
})
}Subordinate page (Use this.getOpenerEventChannel().emit to pass the variable name and variable value of the parameter to the superior page)
onLoad(e){
console.log(e.id);
this.getOpenerEventChannel().emit('sonPageData',"我是第二个页面传递回来的数据")
}
the second
Use uni.setStorageSync and uni.getStorageSync to cache and retrieve data and finally destroy cached data
Upper-level page (data cache for data that needs to be passed)
Note: The cached data must be in the form of a string, and the object or array needs to be converted first
let item = JSON.stringify(this.userInfo[e])
uni.setStorageSync('userInfo',item)Subordinate pages (retrieve and destroy cached data)
onLoad() {
console.log("进入了编辑地址页面");
var data = uni.getStorageSync('userInfo')//取出缓存数据
var res = JSON.parse(data)
this.userInfo = res
uni.removeStorageSync('userInfo')
var data = uni.getStorageSync('userInfo')//销毁缓存数据
console.log(data);
}
third
Use uni.$emit and uni.$on to pass values across pages
Pass the value page (use uni.$emit to pass the variable name and variable value of the value)
uni.$emit('addUserInfo',this.userInfo)Receive value page (use uni.$on to receive passed parameters in onload cycle)
uni.$on('addUserInfo',res=>{
console.log(res);
})Note: uni.$emit and uni.$on belong to the global cross-page parameter transfer, and the removal monitoring time should be added in the onUnload cycle on the page receiving the value.
onUnload() {
uni.$off('addUserInfo')
}