uni-app小白入门

发表于

先撸一遍uni-app 官网。这个网站也不错 uni-app从入门到精通
下面是个人笔记，大部分是从官网上摘抄的重点

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

Tips：

  • static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
  • css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

什么是‘nvue’，以及如何使用

在官网中的在uni-app中使用Weex可看到相关内容
Weex的文件的后缀名为 .nvue (native vue), uni-app中 .nvue 只会编译到 5+App 端。

如何使用 vuex

相关文档可看官网如何使用vuex

uni-app 内置了 vuex 我们不用安装vuex，直接使用即可

  1. 首先在项目根目录下新建一个目录store

  2. 在store文件夹下新建文件index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //store/index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({
        state: {...},
        mutations: {...},
        actions: {...}
    })

    export default store

  3. 在项目根目录下的main.js里引用

    1
    2
    3
    4
    5
    6
    7
    //main.js
    ...
    import store from './store'
    Vue.prototype.$store = store //这行是必须的
    const app = new Vue({
        store,...
    })

  4. 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ...

    //test.vue 使用时：
    import {mapState,mapMutations} from 'vuex'

    ...
    	computed: {
    		...mapState(['userName'])
    	},

    	methods:{
    		...mapMutations(['changeLogo']),
    	}

定制主题

配置一个主题文件，我这里使用 less 来写样式，这样可以用变量来设置颜色，然后在每个页面都引入这个文件来使用其中定义的颜色（不会导致这个主题文件在应用中出现多次），但是这样没法让用户切换主题

使用插槽slot

#####在uni-app中使用插槽与在vue中几乎一样，但是在使用具名插槽时有一点区别：请看例子
定义一个组件m-button, 与vue没有区别：

1
2
3
4
5
6
7
8
9
10
11
<template>
	<view class="btn-wrap" :class="{'default': defaultAcitve}">
		<slot> <!-- 默认插槽 -->
			<view>
				{{text}}
			</view>
		</slot> 
		<slot name="icon"></slot> <!-- 具名插槽 icon -->
		<slot name="text"></slot> <!-- 具名插槽 text -->
	</view>
</template>

使用具名插槽有区别

1
2
3
4
5
6
7
8
9
<m-button>
	<view class="mine-btn">
		<image class="image" src="../../static/images/contact.png" mode=""></image> 来自默认插槽
	</view>
	<template slot="icon">
		<image class="image" src="../../static/images/contact.png" mode=""></image>
	</template>
	<text slot="text">来自text插槽</text>
</m-button>

注意事项：

  1. 在uni-app中使用默认插槽与在vue中使用默认插槽没有区别。在使用具名插槽时，添加slot属性的那个元素是不会被插入插槽的。也就是说上面的 ‘来自text插槽’ 。
  2. 在循环中使用组件时，插槽里的变量无法生效，但不含变量的内容可以正常使用
  3. 使用默认插槽时，被插入内容不要用 <template></template> 标签包裹

坑

  1. 对 text 标签的行高只能比默认的高，没法设置的比默认值跟小。解决办法是在text的父标签（如view）中设置行高
  2. 组件的样式会被编译到引用它的那个页面中去，所以组件的样式可能会污染页面。解决办法是在组件最外层元素上添加一个唯一的class名（也可是id），然后其他类名就都是在这个类名之下了，也就构成了为选择器，就不会选中组件以外的元素了。
  3. 暂不支持在组件上使用 Class 与 Style 来设置样式
  4. data()定义变量需要注意，变量不能重名，包括对象的健值。如下，articles.title 得到的结果是 ‘首页’。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    title: '首页',
    articles: [
    	{
    		title: '法律文章标题',
    		content: '法律文章内容，河南省高院审理案件时，故意忽略关键证据，导致被告被误判。经我方评查后，上诉成功。'
    	},
    	{
    		title: '法律文章标题',
    		content: '法律文章内容，河南省高院审理案件时，故意忽略关键证据，导致被告被误判。经我方评查后，上诉成功。'
    	}
    }