uni-app 知识点

---【uni-app】:

　　是一个使用vue。js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,android,H5,以及各种小程序，

　　（微信/支付宝/百度/头条/QQ/钉钉）等多个平台

---【环境搭建】：

　　1，安装APP开发版HBuilderX

　　2，安装微信开发者工具

---【使用HBuilderX初始化项目】：

　　1，点击HBuilderX菜单栏文件》项目》新建》

　　2，选择uni-app填写项目名称，项目创建的目录

---【项目的运行】 可以打包成H5网页，安卓/IOS应用，和各种小程序

　　1，点击运行，选择运行在浏览器

　　2，点击运行，运行在小程序》运行在微信开发者工具

　　　　-第一次运行在微信开发者工具时需要注意两个问题，

　　　　1，第一次运行会弹出一个框需要填写微信开发者工具的路径

　　　　2，右键桌面的微信开着工具，打开文件夹所在位置，复制路径，然后把路径粘贴到弹出框里

　　　　设置完路径打开微信小程序可能会报错，打不开，须在微信开发者工具里进行设置

　　　　1，点击上方菜单的设置》安全设置》端口号，选择开启

　　3，运行在安卓手机/ios手机，点击运行》运行在手机或者模拟器，前提是手机用数据线连接电脑

---【项目目录介绍以及开发规范简介】：

　　1，page文件夹，存放页面的文件夹

　　2，static文件夹，存放静态资源的文件夹 /图片/字体图标，等

　　3，unpackage>dist     存放最终打包输出的文件

　　4，App.vue 文件    是项目的根组件 是页面的入口文件，可调用应用的生命周期函数

　　5，main.js 文件      是项目的入口文件 ，项目加载首先会加载main.js

　　6，manifest.json 文件 用来配置应用的一些打包的东西

　　7，pages.json  文件    用来设置整个项目的页面的存放路径，以及窗口的外观

　　8，uni.scss  文件   常用的样式变量

开发规范：

　　1，页面文件遵循vue中文件组件 ，后缀为vue

　　2，组件标签靠近小程序规范  详见官方文档

　　3，接口能力，靠近微信小程序规范，但需前缀wx替换为uni   详见官方文档

　　4，数据绑定及事件处理同vue.js规范，同时补充了app及页面的生命周期

　　5，为兼容多端运行，建议使用flex布局 进行开发

 

---【全局外观的样式，配置】：pages.json

　　1,'globalStyle":{

　　　　"navigationBarBackgroundColor":"#7FFF00"     //设置顶部导航栏的背景色  十六进制

　　　　"navigationBarTextStyle":"black"                        //设置顶部导航栏标题的文字颜色 仅支持black/white     字符串

　　　　"navigationBarTitleText":"xxxxxx"                       //自定义标题的文字

　　　　"enablePullDownRefresh":true                            //是否开启全局下拉刷新 此时向下拉的部分，会出现背景色通过下边的属性可设置背景的颜色

　　　　"backgroundColor":"#7CCD7C"                           //设置下拉出来的背景色，   十六进制

　　　　"backgroundTextStyle":"dark"                             //设置下拉loading的样式： 仅支持dark/light    暗色和亮色的loading

　　　　"onReachBottomDistance":50                           //页面上拉触底事件触发时距页面底部的距离，仅支持px

　　}

 ---【创建新页面和页面的配置】：pages.json

　　1，右键page文件夹，新建cart文件夹，在cart文件夹中新建cart.vue页面

　　2，在全局pages.json 文件中加入页面的路径，"pages":[{"path":pages/cart/cart.vue}]     pages数组的第一项为默认展示页

页面的配置：style  配置局部页面的独有外观样式

　　“pages”:[

　　　　{

　　　　　　"path":"pages/cart/cart.vue",

　　　　　　"style":{

　　　　　　　　"navigationBarTitleText":"xxxxxx"          //自定义标题的文字,style子页面配置和全局的配置一样，会覆盖全局外观配置的样式

　　　　　　　　"h5":{          //h5页面单独设置特有的样式 //还有微信小程序，百度，之类的单独设置的样式 请查看官方文档

　　　　　　　　　　"pullToRefresh":{      //下拉刷新的loading 颜色

　　　　　　　　　　　　"color":"#7D26CD"

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　}

　　]

---【配置基本的tabbar】：在pages.json 文件里配置tabbar

　　"tabBar":{

　　　　"list":[     //是一个数组，数组里以对象方式放的是每一个tab 

　　　　　　{

　　　　　　　　"text":"首页",               //tab的文字

　　　　　　　　"pagePath":"pages/index/index",     //点击跳转的路径

　　　　　　　　"iconPath":"static/tabs/home.xxx" ,   //设置默认的图标

　　　　　　　　"aslectedIconPath":"static/tabs/home2.xxx"   设置选中时的图标

 

                       }

　　　　],

　　　　"color":"#xxxxx" ,                              //tab上的文字默认颜色    和list同级

　　　　"selectedColor":"#xxxxxx"                //tab上的文字选中时的颜色

　　　　“backgroundColor”:"#xxxxx"             //tab的背景色

　　　　"position":"top"                                 //移到页面上方切换栏，  图标会消失

　　}

---【condition启动模式配置】：在pages.json

　　"condition":{      //配完之后在开发者工具上 点击普通编译，选择name=详情页，就跳转详情页了

　　　　"current":0                 //当前激活的模式，list节点的索引值，， 选择的是list的【0】

　　　　"list":[

　　　　　　{

　　　　　　　　"name":"详情页",

　　　　　　　　"path":"pages/xxx/xxx",  //路径

　　　　　　　　"query":"id=80"             //参数

　　　　　　}

　　　　]

　　}　　

---【uni-app 组件】：

　　1，<text></text>              相当于spann标签

　　　　=selectable    布尔值   表示可以选中复制文字

　　　　=space="emsp"      显示连续空格   ensp中文子一半/emsp中文字符大小/nbsp 根据字体设置的空格大小

　　2，<view></view>  相当于div

　　　　=hover-class="xxx"   .xxx{background:red}      //按下去会加入的样式的样式， 背景变红

　　　　=hover-stop-propagetion      //加上这个属性可阻止事件冒泡

　　　　=:hover-start-time="2000"    //点击之后过2秒触发事件

　　　　=:hover-stay-time = "2000"    //点击离开之后，过两秒样式才消失

　　3，<button></button> 按钮组件

　　　　=<button size="mini">按钮</button>   小号按钮，默认是沾满

　　　　=<button type="primary">按钮</button>     蓝色按钮

　　　　=<button plain></button>                    按钮背景色透明

　　　　=<button disabled></button>               按钮禁止点击

　　　　=<button loading></button>               旋转的圆圈

　　4，<image></image>   图片组件

　　　　=<image src="xxxxxxx"></image>    图片默认宽高为  320/240px 

　　　　=<image mode="aspectFit"></image>    保持纵横比例，可以完整的显示出来

　　　　=<image mode="aspectFill"></image>    外层容器，的宽度贴满，高度剪掉了

　　5，原生小程序的组件也可以用。例如轮播图等

---【样式的学习】：

　　=使用@import url（）　　来导入外联样式表    page相当于body节点

　　=定义在App.vue中的样式为全局样式，在pages目录下的vue文件中定义的样式为局部样式，并会覆盖App.vue中相同的选择器

---【使用字体图标】：

　　1，把阿里字体的文件夹放入静态文件夹中、在iconfont.css文件中把url里的路径改成前缀是 -@/static/fonts

　　2，在app.vue的样式中引入inconfont.css ///    @import url (''./static/fonts/iconfonts.css)

--[使用sass]:安装插件

　　1，在上方菜单的工具》插件安装》选择sass编译 》安装       //安装成功直接保存 ，直接成功直接使用

---【uni-app 的数据绑定】：和vue 一摸一样，把数据定义在data中

　　export default {

　　　　data（）{

　　　　　　return{

　　　　　　　　msg:"hello-nui"

　　　　　　}

　　　　}

　　}

---【插值表达式 v-bind/基本的运算，三元运算符，v-for】 和vue一样

---【绑定事件，事件对象event，方法传参数和事件对象(20,$event)】和vue一样

---【关于键盘事件的问题】：e.target.keyCode进行响应但是不能响应回车。

 ---【input 回车事件响应】<input type="text" v-model="str" @confirm="ass"/> 要使用confirm

---【应用的生命周期函数】： 写在APP。vue  入口跟组件里定义

　　1，onLaunch    应用打开 初始化完成时触发，只触发一次                  首先

　　2，onShow      应用启动，应用显示出来了 或从后台进入前台显示     然后  =》会触发多次

　　3,  onHide　　从前台进入后台触发 应用隐藏了                                     

　　 

---【页面的生命周期函数】：

　　1，onLoad            监听页面加载   可以拿到上个页面传递过来的参数（option）    首先

　　2，onShow           监听页面显示                                                                               然后

　　3，onReady          监听页面初次渲染完成                                                                 其次

　　4，onHide             监听页面隐藏

　　5，onUnload          监听页面卸载

　　6，onPullDownRefresh   监听用户下拉动作页面需开启下拉刷新功能，用于下拉刷新》处理完数据刷新后，uni.stopPullDownRefresh（）方法可停止下拉刷新

　　6-1：点击事件触发下拉刷新，在事件中，调用  uni.startPullDownRefresh（）方法来开启下拉刷新

　　7，onReachBottom         页面滚动到底部触发，配合onReachBottomDistance可设置距离底部的距离 常用于上拉加载下一页数据

 

---【发送get请求】：uni.request（object）

　　1，uni.request(url:'xxxxx',sussers(res){console.log(res)})

　　培训讲的方法，nui.request({url:"xxxx"}).then（(res)=>{console.log(res)}）

---【设置分包】：

　　在page.json 里使用subPackages 设置分包

---【数据缓存】：

　　1，uni.setStorage    设置缓存  uni.setStorage（{key:"id",data:80,succsee(){存成功的回调函数}  }）

　　　　let idd = uni.setStorageSync（id）  同步获取数据的方法

　　2，uni.getStorage    获取缓存   uni.getStorage（{key:"id",succsee(){获取成功的回调函数}  }）

　　3,  uni.removeStorage    删除缓存    uni.removeStorage（{key:"id",succsee(){删除成功的回调函数}  }）

 

---【图片的上传和预览】：uni.chooseImage（object） 从本地相册选择图片或使用相机拍照  具体可参考官文的媒体模块

　　<button @click = "chooseImg">上传图片</button>

　　methods:{

　　　　chooseImg(){ 

　　　　　　uni.chooseImage（{

　　　　　　　　count:5，   //限制上传图片的数量  在浏览器限制不了个数

　　　　　　　　success：res=>{上传成功的回调函数 ---》this.imageArr = res.temFilePaths 可拿到上传成功的图片路径}

　　　　　　}）

　　  }   }

---【图片的预览】：uni.previewImage（object）   点击图片会 会显示点击的图片进行预览

　　　　《image @click = "previewImag">   给点击的图片绑定点击事件

　　　　previewImg(current){    //点击图片传过来图片的地址

　　　　　　uni.previewImage（{

　　　　　　　　current:current，

　　　　　　　　urls:this.imgArr    //所有的图片预览

　　　　　　　　loop:true              //可循环预览   在APP上可以

　　　　　　}）

　　　　}

---【条件编译 跨端兼容】：

　　跨端兼容：

             按照uni-app规范开发即可保证多平台兼容，大部分业务均可直接满足

　　      但是：1，大量写if else 会造成性能低下 2，编译到不同工程后二次修改，会让后续升级变得很麻烦

　　      uni.app提供了条件编译手段，可在一个工程里优雅的完成平台个性化实现

　  条件编译：   具体可参考 官文 的 条件注释实现跨端兼容

　　　　是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里的代码编译到不同平台

　　　　写法是   以 #ifdef加平台标志 开头 以#endif 结尾

　　　　<!-- #ifdef H5-->

　　　　<view>我希望旨在H5页面中看见</view>

　　　　<!-- #endif -->

---【导航跳转 和传参】：声明式跳转 // 编程式跳转

　　声明式跳转：navigator

　　　　<navigaor url="/pages/detail/detail?id=80&age = 19">跳转至详情页</navigator>    点击跳转到了详情页，带返回箭头 不能跳转到tab 组件的页面

　　　　　　在生命周期函数里拿到参数   onLoad(options){  console.log(option)}   拿到传来的参数

              <navigaor url="/pages/detail/detail" open-type = "redirect">跳转至详情页</navigator>    点击跳转到了详情页当前页面关闭，不带返回箭头 不能跳转到tab 组件的页面

　　　　<navigaor url="/pages/message/message" open-type = "switchTab">跳转至信息页</navigator>   跳信息页，时候tab组件上的页面    

　　编程式跳转：

　　　　<button @click = "goDetail"> 跳转至详情页</button>

　　　　goDetail(){

　　　　　　uni.navigateTo（{

　　　　　　　　url:"/pages/detail/detail?id=20"        //点击挑战到了详情页 带返回箭头 普通页面  不能跳转tab组件页面

　　　　　　}）

　　　　}

　　　　goDetail(){

　　　　　　uni.switchTab（{

　　　　　　　　url:"/pages/message/message"        //点击挑战到tab页面，关闭其他非tab页面 

　　　　　　}）

　　　　}

　　　　goDetail(){

　　　　　　uni.redirectTo（{

　　　　　　　　url:"/pages/message/message"        //点击挑战到详情页，关闭当前页面 

　　　　　　}）

　　　　}

---【组件的使用创建】：

　　和vue一样，其他组件通过 importd来导入，然后注册组件

　　1，import login from "@/components/text.vue"

　　2,conpinte:{  login   }

---【组件的生命周期函数 】：和vue的一样       

 

---【组件之间的通讯方式】：

　　1，父传子 绑定数据   props 来接受数据  和vue一样

　　2，子传父，$emit     自定义事件，来传值   和vue 一样

---需求，兄弟组件传值  点击a组件的按钮，修改b组件的数据

　　》b组件

　　　　created(){

　　　　　　uni.$on（'updateNum',num=>{          通过，unni.$on 注册一个全局事件，使用Num接受传来的参数

　　　　　　　　this.num +=num

　　　　　　}）

　　　　}

　　》a组件

　　　　<button @click=addNum"">按你牛</button>

　　　　methods:{

　　　　　　addNum(){

　　　　　　　　uni.$emit（"updateNum",10）

　　　　　　}

　　　　}

---【扩展组件uni-ui的使用】 详情官文  nui-ui

　　：是跨端ui库，基于vue组件的，flex布局的，无dom的跨全段ui库，不包括基础组件，是基础组件的补充

---【uni-ui的特点】：

　　1，高性能  是小程序和混合app领域，uni-ui是性能的标杆

　　2，自动差量更新数据 

---【使用】：

　　1，选择组件  没登陆要登录一下  使用HBuilderX导入插件

　　2，使用import  来导入 components文件夹里的组件。然后挂载

　　3，使用方式和vue一样

 

 

rpx

 

推荐设计稿使用ipone的375px尺寸等于750rpx

设计稿得px转为rpx只需要乘2就可以了