uni-app 知识点
<p>---【uni-app】:</p><p> 是一个使用vue。js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,android,H5,以及各种小程序，</p>
<p> （微信/支付宝/百度/头条/QQ/钉钉）等多个平台</p>
<p>---【环境搭建】：</p>
<p> 1，安装APP开发版HBuilderX</p>
<p> 2，安装微信开发者工具</p>
<p>---【使用HBuilderX初始化项目】：</p>
<p> 1，点击HBuilderX菜单栏文件》项目》新建》</p>
<p> 2，选择uni-app填写项目名称，项目创建的目录</p>
<p>---【项目的运行】 可以打包成H5网页，安卓/IOS应用，和各种小程序</p>
<p> 1，点击运行，选择运行在浏览器</p>
<p> 2，点击运行，运行在小程序》运行在微信开发者工具</p>
<p> -第一次运行在微信开发者工具时需要注意两个问题，</p>
<p> 1，第一次运行会弹出一个框需要填写微信开发者工具的路径</p>
<p> 2，右键桌面的微信开着工具，打开文件夹所在位置，复制路径，然后把路径粘贴到弹出框里</p>
<p> 设置完路径打开微信小程序可能会报错，打不开，须在微信开发者工具里进行设置</p>
<p> 1，点击上方菜单的设置》安全设置》端口号，选择开启</p>
<p> 3，运行在安卓手机/ios手机，点击运行》运行在手机或者模拟器，前提是手机用数据线连接电脑</p>
<p>---【项目目录介绍以及开发规范简介】：</p>
<p> 1，page文件夹，存放页面的文件夹</p>
<p> 2，static文件夹，存放静态资源的文件夹 /图片/字体图标，等</p>
<p> 3，unpackage>dist 存放最终打包输出的文件</p>
<p> 4，App.vue 文件 是项目的根组件 是页面的入口文件，可调用应用的生命周期函数</p>
<p> 5，main.js 文件 是项目的入口文件 ，项目加载首先会加载main.js</p>
<p> 6，manifest.json 文件 用来配置应用的一些打包的东西</p>
<p> 7，pages.json 文件 用来设置整个项目的页面的存放路径，以及窗口的外观</p>
<p> 8，uni.scss 文件 常用的样式变量</p>
<p>开发规范：</p>
<p> 1，页面文件遵循vue中文件组件 ，后缀为vue</p>
<p> 2，组件标签靠近小程序规范 详见官方文档</p>
<p> 3，接口能力，靠近微信小程序规范，但需前缀wx替换为uni 详见官方文档</p>
<p> 4，数据绑定及事件处理同vue.js规范，同时补充了app及页面的生命周期</p>
<p> 5，为兼容多端运行，建议使用flex布局 进行开发</p>
<p> </p>
<p>---【全局外观的样式，配置】：pages.json</p>
<p> 1,'globalStyle":{</p>
<p> "navigationBarBackgroundColor":"#7FFF00" //设置顶部导航栏的背景色 十六进制</p>
<p> "navigationBarTextStyle":"black" //设置顶部导航栏标题的文字颜色 仅支持black/white 字符串</p>
<p> "navigationBarTitleText":"xxxxxx" //自定义标题的文字</p>
<p> "enablePullDownRefresh":true //是否开启全局下拉刷新 此时向下拉的部分，会出现背景色通过下边的属性可设置背景的颜色</p>
<p> "backgroundColor":"#7CCD7C" //设置下拉出来的背景色， 十六进制</p>
<p> "backgroundTextStyle":"dark" //设置下拉loading的样式： 仅支持dark/light 暗色和亮色的loading</p>
<p> "onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部的距离，仅支持px</p>
<p> }</p>
<p> ---【创建新页面和页面的配置】：pages.json</p>
<p> 1，右键page文件夹，新建cart文件夹，在cart文件夹中新建cart.vue页面</p>
<p> 2，在全局pages.json 文件中加入页面的路径，"pages":[{"path":pages/cart/cart.vue}] pages数组的第一项为默认展示页</p>
<p>页面的配置：style 配置局部页面的独有外观样式</p>
<p> “pages”:[</p>
<p> {</p>
<p> "path":"pages/cart/cart.vue",</p>
<p> "style":{</p>
<p> "navigationBarTitleText":"xxxxxx" //自定义标题的文字,style子页面配置和全局的配置一样，会覆盖全局外观配置的样式</p>
<p> "h5":{ //h5页面单独设置特有的样式 //还有微信小程序，百度，之类的单独设置的样式 请查看官方文档</p>
<p> "pullToRefresh":{ //下拉刷新的loading 颜色</p>
<p> "color":"#7D26CD"</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> ]</p>
<p>---【配置基本的tabbar】：在pages.json 文件里配置tabbar</p>
<p> "tabBar":{</p>
<p> "list":[ //是一个数组，数组里以对象方式放的是每一个tab </p>
<p> {</p>
<p> "text":"首页", //tab的文字</p>
<p> "pagePath":"pages/index/index", //点击跳转的路径</p>
<p> "iconPath":"static/tabs/home.xxx" , //设置默认的图标</p>
<p> "aslectedIconPath":"static/tabs/home2.xxx" 设置选中时的图标</p>
<p> </p>
<p> }</p>
<p> ],</p>
<p> "color":"#xxxxx" , //tab上的文字默认颜色 和list同级</p>
<p> "selectedColor":"#xxxxxx" //tab上的文字选中时的颜色</p>
<p> “backgroundColor”:"#xxxxx" //tab的背景色</p>
<p> "position":"top" //移到页面上方切换栏， 图标会消失</p>
<p> }</p>
<p>---【condition启动模式配置】：在pages.json</p>
<p> "condition":{ //配完之后在开发者工具上 点击普通编译，选择name=详情页，就跳转详情页了</p>
<p> "current":0 //当前激活的模式，list节点的索引值，， 选择的是list的【0】</p>
<p> "list":[</p>
<p> {</p>
<p> "name":"详情页",</p>
<p> "path":"pages/xxx/xxx", //路径</p>
<p> "query":"id=80" //参数</p>
<p> }</p>
<p> ]</p>
<p> } </p>
<p>---【uni-app 组件】：</p>
<p> 1，<text></text> 相当于spann标签</p>
<p> =selectable 布尔值 表示可以选中复制文字</p>
<p> =space="emsp" 显示连续空格 ensp中文子一半/emsp中文字符大小/nbsp 根据字体设置的空格大小</p>
<p> 2，<view></view> 相当于div</p>
<p> =hover-class="xxx" .xxx{background:red} //按下去会加入的样式的样式， 背景变红</p>
<p> =hover-stop-propagetion //加上这个属性可阻止事件冒泡</p>
<p> =:hover-start-time="2000" //点击之后过2秒触发事件</p>
<p> =:hover-stay-time = "2000" //点击离开之后，过两秒样式才消失</p>
<p> 3，<button></button> 按钮组件</p>
<p> =<button size="mini">按钮</button> 小号按钮，默认是沾满</p>
<p> =<button type="primary">按钮</button> 蓝色按钮</p>
<p> =<button plain></button> 按钮背景色透明</p>
<p> =<button disabled></button> 按钮禁止点击</p>
<p> =<button loading></button> 旋转的圆圈</p>
<p> 4，<image></image> 图片组件</p>
<p> =<image src="xxxxxxx"></image> 图片默认宽高为 320/240px </p>
<p> =<image mode="aspectFit"></image> 保持纵横比例，可以完整的显示出来</p>
<p> =<image mode="aspectFill"></image> 外层容器，的宽度贴满，高度剪掉了</p>
<p> 5，原生小程序的组件也可以用。例如轮播图等</p>
<p>---【样式的学习】：</p>
<p> =使用@import url（） 来导入外联样式表 page相当于body节点</p>
<p> =定义在App.vue中的样式为全局样式，在pages目录下的vue文件中定义的样式为局部样式，并会覆盖App.vue中相同的选择器</p>
<p>---【使用字体图标】：</p>
<p> 1，把阿里字体的文件夹放入静态文件夹中、在iconfont.css文件中把url里的路径改成前缀是 -@/static/fonts</p>
<p> 2，在app.vue的样式中引入inconfont.css /// @import url (''./static/fonts/iconfonts.css)</p>
<p>--[使用sass]:安装插件</p>
<p> 1，在上方菜单的工具》插件安装》选择sass编译 》安装 //安装成功直接保存 ，直接成功直接使用</p>
<p>---【uni-app 的数据绑定】：和vue 一摸一样，把数据定义在data中</p>
<p> export default {</p>
<p> data（）{</p>
<p> return{</p>
<p> msg:"hello-nui"</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p>---【插值表达式 v-bind/基本的运算，三元运算符，v-for】 和vue一样</p>
<p>---【绑定事件，事件对象event，方法传参数和事件对象(20,$event)】和vue一样</p>
<p>---【关于键盘事件的问题】：e.target.keyCode进行响应但是不能响应回车。</p>
<p> ---【input 回车事件响应】<input type="text" v-model="str" @confirm="ass"/> 要使用confirm</p>
<p>---【应用的生命周期函数】： 写在APP。vue 入口跟组件里定义</p>
<p> 1，onLaunch 应用打开 初始化完成时触发，只触发一次 首先</p>
<p> 2，onShow 应用启动，应用显示出来了 或从后台进入前台显示 然后 =》会触发多次</p>
<p> 3, onHide 从前台进入后台触发 应用隐藏了 </p>
<p> </p>
<p>---【页面的生命周期函数】：</p>
<p> 1，onLoad 监听页面加载 可以拿到上个页面传递过来的参数（option） 首先</p>
<p> 2，onShow 监听页面显示 然后</p>
<p> 3，onReady 监听页面初次渲染完成 其次</p>
<p> 4，onHide 监听页面隐藏</p>
<p> 5，onUnload 监听页面卸载</p>
<p> 6，onPullDownRefresh 监听用户下拉动作页面需开启下拉刷新功能，用于下拉刷新》处理完数据刷新后，uni.stopPullDownRefresh（）方法可停止下拉刷新</p>
<p> 6-1：点击事件触发下拉刷新，在事件中，调用 uni.startPullDownRefresh（）方法来开启下拉刷新</p>
<p> 7，onReachBottom 页面滚动到底部触发，配合onReachBottomDistance可设置距离底部的距离 常用于上拉加载下一页数据</p>
<p> </p>
<p>---【发送get请求】：uni.request（object）</p>
<p> 1，uni.request(url:'xxxxx',sussers(res){console.log(res)})</p>
<p> 培训讲的方法，nui.request({url:"xxxx"}).then（(res)=>{console.log(res)}）</p>
<p>---【设置分包】：</p>
<p> 在page.json 里使用subPackages 设置分包</p>
<p>---【数据缓存】：</p>
<p> 1，uni.setStorage 设置缓存 uni.setStorage（{key:"id",data:80,succsee(){存成功的回调函数} }）</p>
<p> let idd = uni.setStorageSync（id） 同步获取数据的方法</p>
<p> 2，uni.getStorage 获取缓存 uni.getStorage（{key:"id",succsee(){获取成功的回调函数} }）</p>
<p> 3, uni.removeStorage 删除缓存 uni.removeStorage（{key:"id",succsee(){删除成功的回调函数} }）</p>
<p> </p>
<p>---【图片的上传和预览】：uni.chooseImage（object） 从本地相册选择图片或使用相机拍照 具体可参考官文的媒体模块</p>
<p> <button @click = "chooseImg">上传图片</button></p>
<p> methods:{</p>
<p> chooseImg(){ </p>
<p> uni.chooseImage（{</p>
<p> count:5， //限制上传图片的数量 在浏览器限制不了个数</p>
<p> success：res=>{上传成功的回调函数 ---》this.imageArr = res.temFilePaths 可拿到上传成功的图片路径}</p>
<p> }）</p>
<p> } }</p>
<p>---【图片的预览】：uni.previewImage（object） 点击图片会 会显示点击的图片进行预览</p>
<p> 《image @click = "previewImag"> 给点击的图片绑定点击事件</p>
<p> previewImg(current){ //点击图片传过来图片的地址</p>
<p> uni.previewImage（{</p>
<p> current:current，</p>
<p> urls:this.imgArr //所有的图片预览</p>
<p> loop:true //可循环预览 在APP上可以</p>
<p> }）</p>
<p> }</p>
<p>---【条件编译 跨端兼容】：</p>
<p> 跨端兼容：</p>
<p> 按照uni-app规范开发即可保证多平台兼容，大部分业务均可直接满足</p>
<p> 但是：1，大量写if else 会造成性能低下 2，编译到不同工程后二次修改，会让后续升级变得很麻烦</p>
<p> uni.app提供了条件编译手段，可在一个工程里优雅的完成平台个性化实现</p>
<p> 条件编译： 具体可参考 官文 的 条件注释实现跨端兼容</p>
<p> 是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里的代码编译到不同平台</p>
<p> 写法是 以 #ifdef加平台标志 开头 以#endif 结尾</p>
<p> <!-- #ifdef H5--></p>
<p> <view>我希望旨在H5页面中看见</view></p>
<p> <!-- #endif --></p>
<p>---【导航跳转 和传参】：声明式跳转 // 编程式跳转</p>
<p> 声明式跳转：navigator</p>
<p> <navigaor url="/pages/detail/detail?id=80&age = 19">跳转至详情页</navigator> 点击跳转到了详情页，带返回箭头 不能跳转到tab 组件的页面</p>
<p> 在生命周期函数里拿到参数 onLoad(options){ console.log(option)} 拿到传来的参数</p>
<p> <navigaor url="/pages/detail/detail" open-type = "redirect">跳转至详情页</navigator> 点击跳转到了详情页当前页面关闭，不带返回箭头 不能跳转到tab 组件的页面</p>
<p> <navigaor url="/pages/message/message" open-type = "switchTab">跳转至信息页</navigator> 跳信息页，时候tab组件上的页面 </p>
<p> 编程式跳转：</p>
<p> <button @click = "goDetail"> 跳转至详情页</button></p>
<p> goDetail(){</p>
<p> uni.navigateTo（{</p>
<p> url:"/pages/detail/detail?id=20" //点击挑战到了详情页 带返回箭头 普通页面 不能跳转tab组件页面</p>
<p> }）</p>
<p> }</p>
<p> goDetail(){</p>
<p> uni.switchTab（{</p>
<p> url:"/pages/message/message" //点击挑战到tab页面，关闭其他非tab页面 </p>
<p> }）</p>
<p> }</p>
<p> goDetail(){</p>
<p> uni.redirectTo（{</p>
<p> url:"/pages/message/message" //点击挑战到详情页，关闭当前页面 </p>
<p> }）</p>
<p> }</p>
<p>---【组件的使用创建】：</p>
<p> 和vue一样，其他组件通过 importd来导入，然后注册组件</p>
<p> 1，import login from "@/components/text.vue"</p>
<p> 2,conpinte:{ login }</p>
<p>---【组件的生命周期函数 】：和vue的一样 </p>
<p> </p>
<p>---【组件之间的通讯方式】：</p>
<p> 1，父传子 绑定数据 props 来接受数据 和vue一样</p>
<p> 2，子传父，$emit 自定义事件，来传值 和vue 一样</p>
<p>---需求，兄弟组件传值 点击a组件的按钮，修改b组件的数据</p>
<p> 》b组件</p>
<p> created(){</p>
<p> uni.$on（'updateNum',num=>{ 通过，unni.$on 注册一个全局事件，使用Num接受传来的参数</p>
<p> this.num +=num</p>
<p> }）</p>
<p> }</p>
<p> 》a组件</p>
<p> <button @click=addNum"">按你牛</button></p>
<p> methods:{</p>
<p> addNum(){</p>
<p> uni.$emit（"updateNum",10）</p>
<p> }</p>
<p> }</p>
<p>---【扩展组件uni-ui的使用】 详情官文 nui-ui</p>
<p> ：是跨端ui库，基于vue组件的，flex布局的，无dom的跨全段ui库，不包括基础组件，是基础组件的补充</p>
<p>---【uni-ui的特点】：</p>
<p> 1，高性能 是小程序和混合app领域，uni-ui是性能的标杆</p>
<p> 2，自动差量更新数据 </p>
<p>---【使用】：</p>
<p> 1，选择组件 没登陆要登录一下 使用HBuilderX导入插件</p>
<p> 2，使用import 来导入 components文件夹里的组件。然后挂载</p>
<p> 3，使用方式和vue一样</p>
<p> </p>
<p> </p>
<p>rpx</p>
<p> </p>
<p>推荐设计稿使用ipone的375px尺寸等于750rpx</p>
<p>设计稿得px转为rpx只需要乘2就可以了</p><br><br>
来源：https://www.cnblogs.com/zzhqdkf/p/12507705.html
頁:
[1]