微信小程序：https://developers.weixin.qq.com/miniprogram/dev/framework/

Vue:https://v3.cn.vuejs.org/guide/introduction.html#起步

uniapp:https://uniapp.dcloud.io

html:https://www.runoob.com/html/html-tutorial.html

css:https://www.runoob.com/css/css-intro.html

flex布局：https://www.runoob.com/w3cnote/flex-grammar.html

绝对定位和相对定位：https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html

HBuildX常用功能使用：https://www.jianshu.com/p/f51b31c978c4

HBuilderX里的uni-app，根目录是相当于src，dist放到unpackage目录下。

src目录下是不能直接 npm install 引入第三方库的。可以在别处新建一个文件夹然后install下载第三方库，然后把相关库文件copy到src下（也就是uniapp根目录下）。

下载流程如下：

• 创建一个空的文件夹如：A，电脑上随便建一个。
• 进入 文件夹A 打开命令行工具，执行 npm init 一路回车即可。
• 下载第三方库：npm install XX --save。
• 进入 node_modules 目录，就是我们需要的第三方库。
• 在 HBuilderX 里面新建 uni-app，将将刚才下载的三个文件夹拷贝到项目根目录。

注意事项：function函数会改变this的指向，可以用res=>{}函数来代替。

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

manifest.json是应用的配置文件，用于指定应用的名称、图标、权限。

APP.vue是应用的根组件，所用页面都是在App.vue中进行切换。是应用的入口文件，可以调用应用的生命周期函数。

mian.js是项目的入口文件，主要作用是初始化vue实例，并且使用需要的插件。

uni.scss控制整体风格样式。

unpackage是打包目录，这里有各个平台的打包文件。

pages所用的页面存放目录。

static静态资源目录，如图片。

components组件的存放目录。

规范：页面文件遵循vue单文件组件（SFC）规范。

接口能力接近微信小程序，把wx换成uni。

组件标签靠近小程序规范。

数据绑定及事件处理同vue规范，同时绑定了app及页面生命周期。

为适应多端运行，建议使用flex布局。

样式的几种使用方式：

行内样式：直接在标签中写stytle，

引用样式：在stytle中使用@import url("./XX/xx.cs")引用外部.css

App.vue中的stytle是全局样式，每一个文件中都能用；

pages下面的vue文件的样式是局部样式；局部样式会覆盖全局样式。

字体文件的引用路径推荐使用~@开头的绝对路径；

uni.scss使用预处理样式，使用的时候直接使用，不需要引用样式文件。

pages.json中的   globalStyle：用于设置应用的状态栏、导航条、标题、窗口背景色等。Pages下面的stytle可以设置具体页面的样式，会覆盖掉globalStytle样式。

注意：要用到样式嵌套，需要设置    除了使用scss，也可以使用less，这两个都是需要下载插件的。

less、sass、stylus这三个都是css预编译器，可以嵌套样式；

生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle

应用的生命周期：在App.vue中

onLaunch：uniapp初始化完成时触发，全局只触发一次；

onShow:uniapp启动，或从后台进入前台显示。

onHide:uniapp从前台进入后台。

onError：uniapp报错时触发。

页面的生命周期：

onLoad：监听页面加载，其参数为上个页面传递的参数，参数类型为Object（用于页面参数），只会触发一次。

onShow：监听页面显示，页面每次出现在屏幕上触发，包括下级页面点返回露出当前页面，会触发多次。

onReady:监听页面初次渲染完成，只会触发一次。

onHide：监听页面隐藏。

onUnload：页面卸载。

onResize:监听窗口尺寸的变化。

onPullDownRefresh:监听用户下拉动作，一般用于下拉刷新。可以在pages.json中globalStytle下设置全局的（所有页面都可以使用下拉刷新，不推荐）"enablePullDownRefresh":true。也可以在Pages下面设置每一个页面的下拉刷新，"enablePullDownRefresh":true。

onReachBottom:页面滚动到底部的事件，一般用来做上拉加载，可以在pages.json中设置。

onTapItemTap:点击tab时触发。

tabbar的页面展现过一次后就保留在内存中，再次切换tabbar页面只触发每个页面的onshow，不会再触发onload。

网络请求：https://uniapp.dcloud.io/api/request/request

get请求：

数据缓存：临时的把数据存储到本地，不是数据库；https://uniapp.dcloud.io/api/storage/storage?id=setstorage

图片上传和预览：https://uniapp.dcloud.io/api/media/image

条件注释跨端兼容：https://uniapp.dcloud.io/platform

#ifdef APP-PLUS
需条件编译的代码
#endif

#ifndef H5
需条件编译的代码
#endif

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

API 的条件编译：
// #ifdef %PLATFORM%

平台特有的API实现

// #endif

组件的条件编译：

平台特有的组件

样式的条件编译：

/* #ifdef %PLATFORM% */

平台特有样式

/* #endif */

导航跳转和传参：https://uniapp.dcloud.io/api/router?id=navigateto

组件导航跳转：https://uniapp.dcloud.io/component/navigator

组件跳转

如果要跳转到tabbar页面，需要设置open-type="switchTab"属性，

open-type 的值redirect：销毁当前页面，然后跳转到响应的页面。

open-type的值navigateBack：和delta配合使用，delta表示返回的层数。

open-type的值navigate：普通的跳转，下一个页面有返回箭头。

open-type的值reLaunch：销毁全部页面，应用重新加载一个页面。

API跳转：

uni.switchTab 跳转到tabbar页面，关闭其他所有非tabBar页面。

uni.switchTab({
                    url:"../community/communityindex"
                })

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

uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。

uni.reLaunch 关闭所有页面，打开到应用内的某个页面。

uni.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

uni.preloadPage 预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

传递参数：

组件导航传参：?id=80&age=20">组件跳转

 下一个页面接收参数：

api跳转传递参数（编程式导航）：

uni.navigateTo({
                url:"./homedetail?id=60&age=22"
            })

下一个页面接收参数：

组件的创建和生命周期、组件通讯方式：

 创建一个后缀名为.vue的文件，其他组件可以通过import的方式导入，再通过components进行注册即可。

组件生命周期：

beforeCreate() {console.log('组件开始实例化，但是数据还没初始化完成，页面还没有开始渲染')},created() {console.log('实例已经创建完成，但是还没有挂载，一般在里面初始化数据')},beforeMount() {console.log('组件还没渲染到页面')},mounted() {console.log('组件已经渲染到页面上')},beforeUpdate() {console.log('数据更新之前，只有H5能用')},updated() {console.log('数据已经更新到组件上，只有H5能用')},beforeDestroy() {console.log('组件销毁前')},destroyed() {console.log('组件已经销毁')}

组件间的通讯：https://uniapp.dcloud.io/api/window/communication

父-》子

子->父

用全局的api方法实现组件通信：

1.uni.$emit('update',{msg:'数据'})   update是触发的事件。

2.监听update事件

uni.$on('update',function(data){

console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);

})

3.监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

uni.$once('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);

})

4.移除全局自定义事件监听器。

uni.$off("事件",回调])

uni-ui库：一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。https://uniapp.dcloud.io/component/README?id=uniui

单位：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

轮播图：

注意：要无限轮播，需要必须设置circular="true"

隐藏导航栏：在pages.json中设置样式（页面样式或者全局样式中）："navigationStyle":"custom",//隐藏导航栏，APP和H5有效

隐藏滚动条：在pages.json中设置样式（页面样式或者全局样式中）："scrollIndicator":"none" // 不显示滚动条 ，只有APP有效