笔记课程

工具准备

下载HBuilderX 点击下载HBuilderX

下载微信开发者工具点击下载微信开发者工具

使用参考uni-app官网官网

新建项目运行

文件---新建----项目

运行到谷歌浏览器H5

运行------谷歌浏览器打开---打开成功（第一次可能需要安装插件，自行安装后第二次再编译，即可成功）

运行到微信开发者工具

运行-------开发者工具打开会有以下两个问题：

第一次会需要填写开发者工具路径（运行--运行到小程序---运行设置---填写微信开发工具路径）

开发者工具里面打开运行端口（设置--安全设置---打开服务端端口）

mac使用HBuilderX第一次运行uni-app参考

运行到手机

首先用数据线连接手机

点击运行，运行到手机，选择自己的设备，手机同意安装，编译成功。

均运行成功：

项目目录和文件作用

总结：开发规范==》是vue和微信小程序的组合

全局配置page.json

参考uni-app官网

更多配置参考官网

新建页面

在pages文件夹下新建文件：

eg：新建message-->message.vue

在page.json中的pages:[{},{}]说明，每项有path,style配置特别的页面,如下：更多属性参考官网

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" :                                                                                    {"navigationBarTitleText": "消息","enablePullDownRefresh": true,"navigationBarBackgroundColor": "#4dd4d4"}},{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "云上小店","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

配置tabbar

参考代码：

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "组件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
}

condition启动配置

在page.json中配置condition

运行小程序中下拉选择直接打开详情页：

uni-app组件的使用

组件：搭建页面的基本结构 uni-app组件参考

常用组件

view相当于HTML中的div 了解一下

text文本组件 selectable文本是否可选

button按钮组件了解一下

image组件了解一下

uni-app样式

uni-app数据绑定

跟vue一模一样，在data中直接定义数据就可以，使用v:bind简写:bind

v-bind使用跟vue中一样绑定属性

v-for 同循环数组数据跟vue中一样

uni-app绑定事件

跟vue中一样 v-on:click="func()" 或@click="func()"

事件对象：不传参默认第一个为e 或者通过$event传事件对象

uni-app生命周期

应用生命周期

onLaunch:初始化调用一次 onShow:多次调用 onHide onError

测试调用：

页面生命周期

onLoad 触发一次 onShow触发多次 onHide 多次调用

下拉刷新

详见下拉刷新了解

触发下拉刷新

pages里面

enablePullDownRefresh :true

页面中调用：

uni.startPullDownRefresh() //开启下拉刷新

uni.stopPullDownRefresh() //停止下拉刷新

上拉加载

一般用于触底加载数据

设置触底距离

onReachBottomDistance:200 距离底部200预加载数据

页面调用onReachBottom(){}

网络请求

uni.request 网络请求

数据缓存

uni.setStorage

异步接口示例：

uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});

uni.removeStorage

异步接口示例：

uni.removeStorage({key: 'storage_key',success: function (res) {console.log('success');}
});

更多参考官网文档……

图片上传及预览

上传图片 uni.chooseimage 详解

示例：

uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (res) {console.log(JSON.stringify(res.tempFilePaths));}
});

预览图片 uni.previewImage

使用示例：

条件注释跨端兼容

h5 小程序有一些需求差异或者是uni-app本身差异

ifdef 适配 endif

html注释

js注释

css注释

导航跳转和传参

声明式导航利用navigator 去了解

open-type="switchTab" 才能跳转tabbar页面

示例：

<template><view><view class="page-body"><view class="btn-area"><navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"><button type="default">跳转到新页面</button></navigator><navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover"><button type="default">在当前页打开</button></navigator><navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover"><button type="default">跳转tab页面</button></navigator></view></view></view>
</template>
<script>
// navigate.vue页面接受参数
export default {onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数console.log(option.id); //打印出上个页面传递的参数。console.log(option.name); //打印出上个页面传递的参数。}
}
</script>

编程式导航去了解

uni.navifateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

示例：

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({url: 'test?id=1&name=uniapp'
});

uni-switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

示例：

uni.switchTab({url: '/pages/index/index'
});

uni-app创建组件

基本跟vue创建组件一样

//页面引入
import test from './components/test'//注册组件
components:{test
}//页面使用
<test></test>

组件生命周期基本跟vue一致

组件通讯方式

跟vue相似，父传子，属性方式

父传子，通过属性的方式

子传父，通过$emit触发事件的方式

//调用子组件
<test :father="father" @sonClick="sonClick"></test>//子组件接收父组件值
props:['father']子组件
this.$emit("sonClick",'测试传父组件值');  //触发事件，传值给父组件//父组件-------子组件传值给父组件
methods:{
sonClick(info){console.log(info):
}

兄弟组件之间传值（就是vue组件中的event bus)
示例：

//全局触发事件
uni.$emit('update',10);
//接收事件
uni.$on('update',(info)=>{//...逻辑
})

uni-ui组件库使用

扩展组件使用了解

去插件市场点击前往插件市场

示例日历插件日历插件

导入插件

选择项目自动导入

组件使用

引入

使用

  <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change"/>

uni-app入门并使用学习相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app 调用网络打印机_一套代码，七端运行-uni-app
为什么要使用uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 同时在别的方面它也有很大优 ...
视频教程-深度学习与TensorFlow 2入门实战-深度学习
深度学习与TensorFlow 2入门实战新加坡国立大学研究员龙良曲 ¥399.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减5 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
Android开发的经典入门教材和学习…
Android开发的经典入门教材和学习路线? 1.想利用寒假期间学习Android开发,了解到应该先学习Java,不知道选哪本书入门,学习Java和Android有什么经典教材,适合初学者.(有C++ ...
物联网控制APP入门专题（二）---阿里云iot studio移动可视化功能基本操作
微信小程序连接阿里云物联网平台云端API实现物联操控 03-25 其中包含cryptojs.uuid生成模块,还有用于微信小程序连接阿里云物联网平台云端API的专属sdk,已结实现效果demo,只需填 ...
UI设计师培训入门都需要学习什么技术?
UI设计在如今的IT行业是非常火热的,它的发展前景是非常可观的,想要进入到这个行业的小伙伴越来越多,那么UI设计师培训入门都需要学习什么技术呢?小编下面为大家做下详细的介绍. UI设计师培训入门都需要 ...
深度学习如何入门？怎么入门机器/深度学习？
链接:https://www.zhihu.com/question/26006703/answer/536169538 怎么入门机器/深度学习? 回答这个问题,最先要考虑的问题是:你有多少时间? 准备 ...
机器学习入门到进阶学习路线图
作者: 龙心尘 && 寒小阳原文:http://blog.csdn.net/longxinchen_ml/article/details/50749614 http://blog.c ...
深度学习入门教程UFLDL学习实验笔记三：主成分分析PCA与白化whitening
深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening 主成分分析与白化是在做深度学习训练时最常见的两种预处理的方法,主成分分析是一种我们用的很多的降维的一种手段,通 ...

uni-app入门并使用学习