1.配置
应用发布时,需要在manifest.json中修改h5配置
目录结构:
pages 业务页面文件存放的目录
static 静态文件目录(images之类)
App.vue App 全局应用配置
main.js 初始化入口文件
manifest.json 多端配置信息
pages.json 配置页面路由、导航等信息,类似原生小程序的 app.json
2.插件配置选择菜单 【工具】 >> 【插件安装】
建议安装这些:
NPM
内置浏览器
内置终端
App真机运行
uni-app编译
Git插件
js-beautify
prettier
htmlhint
stylelint
eslint-plugin-vue
eslint-js
js压缩
css压缩
scss/sass编译
es6编译
3.框架模型
MVVM 是 Model-View-ViewModel 的简写,即模型-视图-视图模型。MVVM 模式是通过以下三个核心组件组成
ViewModel 的角色就是将视图与模型之间来回转化:
模型转化为视图:将服务器发送的数据转化成我们看到的页面内容。这就是 `{{}}` 进行数据对应的作用。
视图转化为模型:将所页面内容及用户操作信息转化成服务器的数据。这部分是指令与 `dom` 事件对应的作用。
视图与模型这两者之间的来回转化,我们称之为数据的双向绑定。
在 Vue 中可以发现:
Model:data 处存放的数据
View:template 中 HTML 代码展示的视图
ViewModel:是 methods 里的 JS 逻辑代码
如此一来,我们已经对 MVVM 有了初步的认识。
DOM 的数据通过 Vue 的 directives(指令)来改变,所以直接改变 model 的数据就可以直接将数据反映在 DOM 上面。
前面的 v-model 指令就是用户在输入框操作时反映显示在视图中(你要添加的名字: {{newName}} ),
所以我们使用 Vue 这样的框架时,想要改变视图样式不是直接像 jQuery 操作 DOM 一样去操作,
而是改变数据,让数据的去驱动视图样式的改变。
4.生命周期
5.数据绑定
Vue 数据绑定最常见的形式就是使用 Mustache 语法 (双大括号) 的文本插值,
比如 {{singer}},Mustache 标签将会被替代为对应数据对象上 singer 属性的值。
无论何时,绑定的数据对象上 singer 属性发生了改变,插值处的内容都会更新,{{singer}} 会被渲染成 周杰伦。
Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令
<view v-bind:title="singer">喜欢的歌手是: {{singer}}</view>
// 渲染成
<view title="周杰伦">喜欢的歌手是: 周杰伦</view>
----------------------
当然模板语法提供了完全的 JavaScript 表达式支持,你可以写一些简单的表达式,
下面这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
6.指令
<template>
<!-- v-text:在元素当中插入值 -->
<view v-text='singer'></view>
<!-- v-for:根据变量的值来循环渲染元素 -->
<view v-for="(item, index) in list">
{{item}}--{{index}}
</view>
<!-- v-if和v-else:根据表达式的真假值来动态插入和移除元素 -->
<view v-if="isShow">我会显示</view>
<view v-else>我不会显示,但是我要跟有 v-if 指令的元素并齐</view>
<!-- v-model:把input的值和变量绑定了,实现了数据和视图的双向绑定 -->
<input type="text" v-model="singer">
<!-- v-bind:绑定元素的属性并执行相应的操作 -->
<view v-bind:class="{t1: isBig}">isBig 为 true 时,该元素class类名会变为 t1</view>
<!-- 上面v-bind可以简写 : -->
<view :class="{t1: isBig}">isBig 为 true 时,该元素class类名会变为 t1</view>
<!-- v-on:监听元素事件,并执行相应的操作 -->
<view v-on:click="change">该元素绑定了点击事件</view>
<!-- 上面 v-on:可以简写 @ -->
<view @click="change">该元素绑定了点击事件</view>
</template>
<script>
export default {
data() {
return {
singer: '周杰伦',
list:[1, 2, 3, 4],
isShow: true,
isBig: true
}
},
methods: {
change () {
// ...
}
}
}
</script>
7.Uniapp 基础组件分为以下八大类:
视图容器(View Container)
基础内容(Basic Content)
表单组件(Form)
导航(Navigation)
媒体组件(Media)
地图(Map)
画布(Canvas)
webview(Web-view)
8.基础组件
可以看到三个主要元素组成 template , script ,style
。
· html 部分由 template 标签元素闭合组成,其余 view, image 元素遵循小程序的元素定义组成,需要注意的是组件元素必须有一个根元素(root element)包裹,不然会报错编译失败。
· script 部分由 ES6 的 export default 导出整个页面模块,可以在其他页面引入该组件。
· props 是申明需要从父组件接收的数据
· data 数据部分是一个函数,返回该页面实例下的所有数据引用,data 必须声明为返回一个初始数据对象的函数;否则该组件关闭时,数据不会自动销毁,再次打开该组件时,会显示上次数据。
//正确用法,使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法,会导致再次打开页面时,显示上次数据
data: {
title: 'Hello'
}
props 中声明的数据与组件 data 函数 return 的数据主要区别就是 `props 的来自父级`,
而 `data 中的是组件自己的数据`,作用域是组件本身,
这两种数据都可以在模板 template 及计算属性 computed 和方法 methods 中使用。
created `组件`生命周期函数, 还有 beforeCreate , beforeMount 等生命周期
与 Vue 标准组件的生命周期相同,
`但没有页面级的 onLoad 等生命周期`。
methods 是事件处理函数对象,包含整个页面交互及逻辑处理的函数。
`this.$emit('getMsg', this)` 这一句是该组件通过 `this.$emit() 派发事件`,
引用这个组件的地方可以利用 `$on` 对事件进行监听,实现参数的传递与事件向上传递,
当前的 this 指的是该组件本身,指针指向当前组件。
通俗的话就是,我传递一个叫 getMsg 事件并当前所有的参数内容出去,你只要在外面接收就可以了。
css 部分由 style 标签组成,这里面样式只作用当前的元素。
style 支持 css3 标准,不用再写多余的 hack,比如 `-webkit-` 前缀等,已经由整个框架完成 hask 编译,
可以看到 style 标签有个 l`ang="scss"`,说明里面的样式表可以直接以 scss 形式书写,
当然 lang 的属性值还可以是 less,stylus,找到合适自己的 css 预编译期可以事半功倍。
1.父子组件(组件引用者与组件)的关系可以总结为 props 向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。 2.注意:所有组件与属性名都是小写,单词之间以连字符-连接。根节点为 ``,这个 `` 下只能有一个根 `` 组件。
Uniapp 并没有限制使用 HTML 标签,如果开发者写了 div 等标签,
在编译到非 H5 平台时也会被编译器转换为 view 标签,
类似的还有 span 转 text 、a 转 navigator 等,包括 css 里的元素选择器也会转。
但为了管理方便、策略统一,新写代码时仍然建议使用 view 等组件
9.scss写法
修改前:
.goods-list .item .img .txt{
/* 样式 */
}
.goods-list .item .name{
/* 样式 */
}
.goods-list .item .name .sub{
/* 样式 */
}
.goods-list .item .price{
/* 样式 */
}
.goods-list .item .num{
/* 样式 */
}
修改后:
.goods-list {
.item {
.img .txt{
/* 样式 */
}
.name{
/* 样式 */
.sub{
/* 样式 */
}
}
.price{
/* 样式 */
}
.num{
/* 样式 */
}
}
}
-----
<style lang="scss">
/* 颜色变量 */
$theme-color: #21d398;
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 例如,设置页面背景 #007aff */
page{
background: $uni-color-primary;
}
.btn{
color:#fff;
background: $theme-color;
}
</style>
BEM命名:BEM 是 BlockElementModifier 的简称,其实是块(block)、元素(element)、修饰符(modifier)的简称
<template>
<view>
<view class="doraemon">
<view class="doraemon__face">
<view class="doraemon__face-eye "></view>
<view class="doraemon__face-mouth"></view>
<view class="doraemon__face-nose"></view>
</view>
<view class="doraemon__hand">
<view class="doraemon__hand-finger"></view>
</view>
<view class="doraemon__footer">
<view class="doraemon__footer-toe"></view>
</view>
</view>
</view>
</template>
<style lang="scss">
.doraemon{
.doraemon-face{
.doraemon-face_eye{}
.doraemon-face_mouth{}
.doraemon-face_nose{}
}
/* 或者使用 @root */
@at-root #{&}-face {
@at-root #{&}_eye{}
}
.doraemon-hand{
.doraemon-hand_finger{}
}
.doraemon-footer{
.doraemon-footer_toe{}
}
}
</style>
10.rpx
计算公式
rpx 即响应式 px,跟 rem 实现是类似的,一种根据屏幕宽度自适应的动态单位。规定以 750rpx 为屏幕基准宽(移动端更多以 iphone 6 的尺寸设计),750rpx 恰好为屏幕宽度。
屏幕变宽,rpx 实际显示效果会等比放大。Uniapp 集成了其他 iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台的特性,为实现多端开发而定义的一种样式单位。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之,页面元素宽度在 Uniapp 中的宽度计算公式:
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
在 HBuilderX【偏好设置】->【编辑器设置】中进行配置
11.vuex使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。uniapp集成了vuex的状态管理功能,可以在多端情况下使用。
这个状态自管理应用包含以下几个部分:
state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。
Vuex 防止随意修改而不好跟踪状态,规定组件不允许直接修改 store 实例的 state,组件必须通过 action 来改变 state ,
也就是说,组件里面应该执行 action 来分发 (dispatch) 事件通知 store 去改变。
这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,
同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚的先进的调试工具。