目录

 

【uni-app基础】

【uni-app之nvue】

【uni-app基础】

一、事件绑定

  1. @click ：点击
  2. @langtap ：长按

 

二、事件传参

不支持自定义事件，建议id传参。

  1.  e.target.id ：获取的对象包含冒泡，穿刺。
  2.  e.currentTarget.id： 获取的是目标对象，更加准确。

 

三、组件

1.  scroll-view ：滚动组件，内部view，可设置横向或者纵向滚动，用弹性盒布局，内部view约束在一行，可实现横向滚动导航。

2.  swiper ：滑块，内部swiper-item，用来做轮播图。里面放图或者文字。

3.  text ：只有这里的才可以复制，其他的节点不允许。

4.  button： @getuserinfo，uni.getUserinfo小程序获取用户信息。原生open-type=”getUserInfo”

5.  checkbox-group : 复选框父组件，绑定@change事件，可收集label下的checkbox选中的value值，detail中。

6.  input ： 注意小程序和app的不同。

7.  picker : 底部弹窗，日期省份选择，@change事件的e.detail.value选中的下标， {{data[index]}}

8.  from : 表单组件，可以获取表单内部所有表单控件的键值对，name为键名。 @submit.

四、导航跳转

1. 组件navigator，open-type控制跳转方式。声明式跳转。用url链接相对跳转。

2.  uni.navitateTo 原页面不销毁。里面对象形式的{url:”地址”}

3. uni.redirectTo 重定向跳转，原页面销毁，更新数据时。

4. nui.navitateBack 返回原页面。{delta:1},返回上级一层。

5.  hash,history  在manifest.json中配置。

五、传参

1. 页面跳转传参

:url=”’地址？name=’+test&age=18” onLoad:function(options){获取传参，动态的话，用拼接。

2.组件传参

模拟事件传参。

子组件，在方法中用this.$emit(名字，参数)来传递

父组件，绑定：名字=”方法”，方法可以接受到参数。

 

六、接口

封装request请求。

  1. 图片

1. uni.chooseImage({})：选择图片，可以得到临时地址。res.tempFilePathsx

2. uni.previewImage({})：预览图片

3. uni.getImageInfo({})：得到地址后，用来图片信息，宽高路径类型方向。

  1. 上传、下载
  2. uni.unloadFileRes : 上传图片.
  3. 下载后，是临时路径需要利用文件保存API
  4. 数据缓存
  5. uni.setStorage: 异步存储，类似微信setData。
  6. uni.setStorageSync:同步存储，小程序需要用try和catch包裹。
  7. get获取，remove移除，传入的key。
  8. 设备信息
  9. uni.getSysteminfo: 获取设备的型号等设备信息。
  10. uni.makePhoneCall({phoneNumber:’110’}) 拨打电话
  11. uni.setClipboardData 剪切板。
  12. uni.addPhoneContact 可以往手机添加联系人，没有获取。
  13. 导航配置
  14. uni.setNavigationBarTitle 设置顶部导航的标题。
  15. uni.setNavigationBarColor 设置顶部标题栏颜色。
  16. 下拉刷新
  17. 需要在page.json中，style选项开启enablePullDownRefresh，封装加载数据函数。

page++，数据为空时，return false。

uni.stopPullDownRefresh（）可以停止下拉刷新

uni.startPullDownRefresh() 调用触发下拉刷新动画。跟手动下拉一致。

onpulldownrefresh() 页面监听用户下拉动作。小程序

  1. 上拉加载
  2. onRachBottom :function(){} 监听滚动条到达底部。
  3. 跨端兼容
  4. 用注释语法，包裹不同的展示模块

小程序，#ifdef MP-WEIXIN   #endif

h5+ app，#ifdef APP-PLUS   #endif

  1. 交互提示
  2. uni.showLoading({}) 加载提示。uni.hideLoading()，关闭
  3. uni.showModel({}) 弹出模态框，有确定取消的。
  4. uni.showActionSheet（{}）底部弹出功能菜单。
  • 登陆
  1. 小程序

在manifest.json底部有小程序appid需要配置。

getuserinfo，微信获取用户数据。

  1. app第三方

SDK里面设置。微信第三方开放平台。

  1. 判断登陆

global，全局变量。小程序。

  • 分享
  1. 微信，onShareAppMessage.支持小程序。
  2. 第三方，uni.share.去各个开放平台申请。
  • 引入iconfont图标
  1. 把想用的图标添加至项目，下载到本地，记事本打开iconfont.css复制粘贴到公共样式。标签放相应类名就可以了。

 

 

 

 

 

 

十、生命周期

1. vue的生命周期,都可以使用

初始化阶段

  • beforeCreate：实例初始化后，啥都没有$route对象存在，可根据路由信息重定向操作。监视观测之前。
  • created：实例创建完成之后。数据观测，属性算法回调完成。挂载还没开始$el，this.data和methods可用。开始在内存中绘制虚拟DOM
  • beforeMount：挂载dom开始之前。render执行中有$el，但为空，无法操作DOM。
  • mounted：挂载之后调用。元素渲染完成，创建vm. el，依赖DOM的代码放这。

更新显示阶段

  • beforeUpdate：$vm.data更新后，虚拟DOM重新渲染之前调用，可以修改$vm.data，不会触发附加的重渲染过程。
  • updated：虚拟DOM重新渲染之后。组件和data更新，可以操作DOM，但不能修改data，不然死循环。
  • activated：
  • deactivated：keep-alive停用时调用。

死亡销毁阶段

  • beforeDestroy：实例销毁之前。还是可以用的，哈哈。
  • destroyed：实例销毁之后。绑定解除，监听移除，子实例销毁。

错误捕获

  • errorCaptured：捕获子孙错误时调用。
  1. 应用级生命周期、只可在APP.vue中
  • onLaunch ：初始化完成，全局只触发一次。
  • onShow：应用启动
  • onHide：应用从后台进入前台
  1. 页面级生命周期，类似小程序。
  • onLoad：页面加载，参数为上个页面传递的。
  • onShow：监听页面显示，dom不一定渲染
  • onReady：初次渲染完成
  • onHide：页面隐藏
  • onUnload：页面卸载
  • onpullDownRefresh：监听用户下拉动作
  • onReachBottom：监听上拉触底
  • onShareAppMessage:点击右上角分享
  • onNavigationBarButtonTap:原生标题按钮点击
  • onPageScroll:监听页面滚动，单位px。

十一、样式

  1. 字体大小，2倍关系，想要15px的字体，应设置为30upx.
  2. :class=”active:isActive,color:isColor”,用对象形式，控制显示的样式。
  3. ：class=”[数组，数组]”各个样式。
  4. 三元运算。
  5. 全局的标题栏设置，在globalStyle中配置，单个在pages中配置
  • 创建项目
  1. 用HBuilderX创建项目
  • 非npm创建的项目，想要引入第三方库vant。

当组件引入。

  1. 用npm

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue 名字

 

 

 

 

【uni-app之nvue】

  • 支持nvue编译配置

在manifest文件的app-plus加入

"usingComponents": true,//开启自定义编译模式
"renderer":"native",//weex编译
"nvueCompiler" : "uni-app",//开启混合渲染,支持nvue

在app-plus后面添加编译模式支持

/* 小程序特有相关 */
"mp-weixin": {
"appid": "wxf6ff290fc07fad30",
"setting": {
"urlCheck" : false,
"es6" : true
},
"usingComponents": true
},
  • 样式差异

不支持嵌套css  !!!!!!!

  1. 弹性盒。

nvue,默认为弹性盒模型。默认方向为column.

  1. 只有text标签可以设置字体大小颜色。
  2. 布局不能用百分比
  3. 只能用class选择器
  4. border和background不支持简写

 

 

 

  • map配置

nvue只支持高德地图。

获取key

key名称：根据应用需求输入应用的名称，如“HBuilder.Android”；
安全码：SHA1：应用打包时使用证书的指纹字符串（SHA1），HBuilder默认打包使用的签名为"BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58"
Package：应用包名，在提交App云端打包时默认为“io.dcloud.%APPID%”（用户可自定义修改），如“io.dcloud.HBuilder”。
设置完成后点击“获取KEY”保存。

 

 

uniapp中支持requestAnimationFrame吗 uniapp使用_uni-app用法