# uniapp 安装微信开发者工具，上传打包好的代码，到微信公众号小程序平台发布 ## 生命周期 全局文件`app.js`中定义了一些声明周期的方法 - onLaunch() 当小程序初始化完成时触发onLaunch（全局只触发一次） - onShow() 当小程序启动，或从后台进入前台显示，会触发 onShow - onHide() 当小程序从前台进入后台，会触发 onHide - onError() 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 ------ 这是每个page**页面的周期函数** - onLoad() 页面加载时触发，全局只会调用一次，在该周期内可获取当前页面路径的参数 - onShow() 页面显示时触发或者切入前台时触发，也就是在该周期内可以获取请求数据 - onReady() 页面初次渲染完成时触发，只会调用一次，代表页面已经可以和视图层进行交互 - onHide() 页面隐藏或者切入后台时触发，如底部tab切换到其他页面或小程序切入后台时触发。 - onUnload() 页面卸载时触发 **下拉触底生命周期** - onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新 - onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发；触底：默认距底部50px执行此函数 **上拉加载**原理： 滚定区域是给固定高度, 设置overflow-y:auto来实现 触发条件：滚动条的scrollTop值+可视范围的高度值clientHeight >=文档的总高度scrollHeight >- scrollHeight：可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取; > > - clientHeight：可以通过 document.documentElement.clientHeight、window.innerHeight 获取；推荐使用getBoundingClientRect()来获取高度, 因为使用前者会引起浏览器回流，造成一些性能问题。 > > - scrollTop：可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取; **下拉刷新** 开启： > 方法一：需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh > 方法二：通过调用uni.startPullDownRefresh方法来开启下拉刷新 关闭下拉刷新：uni.stopPullDownRefresh() 原理： > 大部分的下拉刷新控件，都是用contentInset实现的。默认情况下，如果一个UIScrollView的左上角在导航栏的正下方，那么它的contentInset是64，而contentOffset是-64。继续下拉的话，contentOffset就会越来越小，如果上滑，contentOffset就会增大，直到左上角达到屏幕的左上角时，contentOffset刚好为0。 > > 默认情况下，如果下拉一个UIScrollView，在松手之后，会弹回初始的位置（导航栏下方）。而大部分的下拉刷新控件，都是将自己放在UIScrollView的上方，起始y设置成负数，所以平时不会显示出来，只有下拉的时候才会出现，放开又会弹回去。然后在loading的时候，临时把contentInset增大，相当于把UIScrollView往下挤，于是下拉刷新的控件就会显示出来，然后刷新完成之后，再把contentInset改回原来的值，实现回弹的效果。 问题：下拉刷新获取数据，请求完最后一页数据后，又进行一次下拉--又重新请求了一次，如何避免重复请求现象 > 可以通过uni.startPullDownRefresh()，在onLoad中（即页面刚加载进来时）调用该API实现开始下拉功能；在下拉刷新函数中，调用后台接口获取每一页的数据，将每次获取的数据列表累加起来，直到请求到最后一页数据后，调用uni.stopPullDownRefresh()，关闭下拉刷新，这时，即便再次下拉，也不会请求到接口数据了。 ### 单位rpx rpx是uniapp和微信小程序中的一种响应式单位，可以根据屏幕宽度进行自适应，规定了屏幕宽为750 rpx px换算rpx :750/屏幕宽度，代表1rpx=x px，一般移动端的设计图纸就是 750px，不用转化 ## nvue https://uniapp.dcloud.io/nvue-outline 在App端，使用vue页面，则使用webview渲染； 使用nvue页面(native vue的缩写)，则使用原生渲染。uni-app App端内置了一个基于 weex 改进的原生渲染引擎 一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。 - css写法有区别 > border 不支持简写，在 nvue 中需要拆分； > >选择器只能选择单类； > >引入样式文件方法不同；`<style src="@/main.css"></style>` > >不支持使用 scss、less 等预编译语言； > >不能在 <style> 标签中直接引入字体文件，需要用 weex 来加载字体 - nvue 和 vue 通讯 推荐使用uni.$on、uni.$emit的方式进行页面通讯； > nvue 向 vue 传值：在 nvue中使用 uni.postMessage(data) 发送数据，参数 data 只能是 json 数据，json 数据的值只支持字符串。在vue中使用 onUniNViewMessage 函数监听数据。 > vue 向 nvue 传值： > > 方法一：使用 storage 缓存的方式进行参数传递。 > > 方法二：使用 globalData 全局数据的方式进行参数传递。 ## 项目结构 - pages.json：用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等 - manifest.json：是应用的配置文件，用于指定应用的名称、图标、权限等。 - App.vue：所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。 - main.js：项目入口文件，主要作用是初始化vue实例并使用需要的插件。 - uni.scss：整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。 - unpackage就是打包目录，在这里有各个平台的打包文件 - pages所有的页面存放目录 - static静态资源目录，例如图片等 - components组件存放目录 ### 注意事项 - uniapp不支持动态组件，` <component v-bind:is="currentTabComponent"></component> ` , 让多个组件使用同一个挂载点，并动态切换 - uniapp不支持具名插槽，会导致页面塌陷 uni.getLocation（除了APP）不会直接返回地址，需要使用第三方api（高德、百度等）获取位置信息，使用高德地图需要注意，高德的web的key和小程序的key不一样，于是乎这里还有兼容性问题，或者根本就不是兼容性问题，需要直接写2套代码，并且使用条件编译来处理代码编译问题 - 小程序没有window对象 - 应用生命周期和页面周期不一样，应用生命周期尽在app.vue中定义，onLaunch、onShowonHide、onError、onUniNViewMessage；页面生命周期按照执行顺序为onLoad、onShow、onReady，onLoad只执行一次，onShow页面刷新就会执行一次； - uniapp中，canvas画图，安卓机正常，但是ios设备无法绘图，可能是原因是在转base64的过程中，需要对image对象先声明跨域，后给src属性赋值 - uniapp的page.josn里面写条件编译时候，逗号（","）一定要写在条件编译里面