Introduction
What is uni-app?
It is a full-end development framework based on Vue.js. Developers write a set of code that can be published to multiple platforms such as iOS, Android, Web (responsive), and various small programs and fast apps. Develop once, run everywhere.
Nomination UI
uView
Since uni-app was released in early 2018, it has been developing vigorously. It is thriving, and the community is full of voices.
Therefore, uView came into being, and the goal of uView is to become the best UI framework in uni-app ecology.
Regarding the reason for the name of uView, the first letter u comes from the first letter of uni-app, uni-app is based on Vue.js, Vue and View (extended to UI, view) have the same pronunciation, and the view component uni-app is the most The foundation, the most important component, is named uView, which expresses the meaning of uni-app and Vue.
The performance of basic components is higher than that of extended components.
Two, uni-app basics
01 Basic grammar
Data presentation
Definition: Defined in data
Use: Interpolate { {}} in tempelate , no need to use this
Note: There is no need for parentheses in the attribute, and':' needs to be added before the attribute name, which is different from the WeChat applet.
Data loop
Usage in WeChat Mini Program
wx:for="{ {data source}}" wx:for-index="index alias" wx:for-item="item alias"
Usage in vue
vue-for="item in 数据源" 或者 vue-for="（item，index） in 数据源"
<view v-for="(item) in list" :key="item.id">
{
{item.name}} --- {
{item.id}}
</view>
// 数组
list: [
{id:0,name:'张三'},
{id:1,name:'李四'},
{id:2,name:'王五'},
]- Conditional compilation
v-if: To manipulate the DOM, need to be recompiled, so it is not suitable for frequent switching
v-show: only manipulate the style, no matter whether it is displayed or not, there will be this element
Calculated attributes
Similar to the processing interface of calculation data, it reduces the complex logic operations on the data in the template, such as data filtering, and removes some or some data that is not to be rendered
// 使用计算属性
<view>
<view v-for="item in filterList" :key="item.id">
{
{item.name}}
</view>
</view>
// 计算属性节点
computed:{
money(){
return "$" + this.num
},
filterList(){
// 使用过滤
return this.list.filter(item=>item.id<=0)
}
}The filter() method creates a new array, and the elements in the new array are passed checking all elements in the specified array that meet the conditions.
Note: filter() will not detect empty arrays, filter() will not change the original arrays. It is a JS array method, not a filter in vue. The common ones are forEach, map, and filter.
02 events
Case 1:
Same as vue usage and same use @click="handleClick"
<template></template>
<view>
<view @click="handleClick">点击</view>
</view>
</template>
<script>
export default {
methods:{
handleClick () {
console.log('view被点击了，事件被触发，函数被执行');
}
}
}
</script>
<style lang="scss">
</style>
Case 2: Passing custom attributes
Custom attributes come from WeChat native applet
<template>
<view>
<view data-index="11" @click="handleClick1($event)">点击1</view>
</view>
</template>
<script>
export default {
methods:{
handleClick1 (event) {
// event.currentTarget.dataset.index
console.log(event)
}
}
}
</script>
<style lang="scss">
</style>
Case 3: Passing custom attributes + common parameters
, the order of placement can be adjusted flexibly
<template>
<view>
<view data-index="11" @click="handleClick1($event,1)">点击1</view>
</view>
</template>
<script>
export default {
methods:{
handleClick1 (event,index) {
console.log(event);
console.log(index);
}
}
}
</script>
<style lang="scss">
</style>
03 components
The use process of components is
defined, introduced, registered, and used.
Passing parameters of components
: parent to child: parent to child, parent, attribute
Son to Father: Son to Father, First Son, Event
Uni-app global data transfer
The first embodiment : In main.js definition, using this.baseUrl direct call
Vue.prototype.baseUrl = 'www.baidu.com' + 'Vue.prototype.baseUrl '
The second way : Define in App.vue, use getApp().globalData.baseUrl to call
globalData: {baseUrl:'www.baidu.com '+' getApp().globalData.baseUrl'}
The third way : the usage of vuex in vue, refer to the official vue documentation for this.
The fourth method : local storage, please check the official documentation API.
Component slot
The parent passes the specific label to the child through the slot label placeholder .
Note: The input box has no color and is invisible on the surface. The slot label needs to be wrapped by the view label, otherwise it will not be displayed.
04 life cycle comparison
The life cycle of uni-app
Reference link
Application onlaunch triggered when the uni-app initialization is complete App.vue
Page onLoad monitors the page loading page.vue
Component created When the component is created, mounted When the component is created, the component is completed. vue
The life cycle of WeChat Mini Programs
Reference link
The life cycle of vue
Reference link
Three, sample project
01 Create a project from the command line
// 安装vue脚手架
npm install -g @vue/cli
// 创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-project
// 模板选择
选择默认模板
// 运行生成mp-weixin文件夹
npm run dev:mp-weixin
npm run dev:h5 // 直接在浏览器输入本地URL访问
// 如果是微信小程序，则需要导入生成的文件夹mp-weixin编译运行，位置：my-project\dist\dev\mp-weixin
打开微信开发者工具H5 running effect
WeChat applet running effect
WeChat applet running effect
02 HBuilder X panel to create a project
03 File structure
04 Basic configuration and cleaning
Sass style usage configuration
npm install sass-loader node-sasscompile-node-sass compile plugin installation
Compile scss/sass to css. Uni-app compilation or right-click on the file-use when compiling external commands
Clean up the contents of the sample component
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>Built-in Sass style usage
<template>
<view class="content">
<view class="rpx">rpx</view>
<view class="vhvw">vw</view>
<view class="sass">sass</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.rpx{
background-color: blanchedalmond;
width: 750rpx;
height: 150rpx;
}
.vhvw{
background-color: #2B8ACE;
width: 100vw;
height: 10vh;
}
.sass{
background-color: #FFC600;
// sass内置样式的使用
color: $uni-color-success;
}
</style>Finally, if you need these materials, you can click here to get them
