Ⅰ uniapp 获取当前页面路径
uniapp获取当前页面路径
方式一:
方式二:
用官方已经挂在的 $mp 变量获取
var pages = getCurrentPages() // 获取栈实例
pages是一个数组对象,每个对象里面其实就是已经打开的页面的对象,可以根据pages.length查看跳转级数
应用场景(返回固定页面):
如果A为根页面,直接使用
其中A页面不是根页面
如图
若从A页面-->B页面-->D页面,从D返回A,只需delta为 2,即
若从A页面-->C页面-->F页面-->G页面-->D页面,从D返回A,需要设置delta: 4,即
使用var pages = getCurrentPages() // 获取所有打开页面,
若A为第三级页面(即从根页面到A页面跳转两次),计算返回级数
Ⅱ uni-app 代码
一个uni-app工程,默认包含如下目录及文件:
┌─common 用于存放一些通用的 js/css/less/scss
│─cloudfunctions 云函数目录(阿里云为aliyun,腾讯云为tcb)
│─ components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放用于webview的本地网页的目录, 详见
├─platforms 存放各平台专用页面的目录, 详见
│ ├─ app-plus app
│ ├─ h5 h5
│ ├─ mp-weixin 微信小程序
├─ pages 业务页面文件存放的目录
│ ├─index
│ └─index.vue index页面
├─ static 存放静态资源(如图片、视频等)的目录, 打包时其内容直接拷贝而不编译
├─wxcomponents 存放小程序组件的目录, 详见
│ └──custom 微信小程序自定义组件
│ ├─index.js
│ ├─index.wxml
│ ├─index.json
│ └─index.wxss
├─ main.js Vue初始化入口文件
├─ App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─ manifest.json 配置应用名称、appid、logo、版本等打包信息, 详见
└─ pages.json 配置页面路由、导航条、选项卡等页面类信息, 详见
运行在视图层的js,避免逻辑层和渲染层交互通信折损。
仅支持编译到微信小程序、H5、app-vue
nvue可用bindingx代替
运行在视图层的js,避免逻辑层和渲染层交互通信折损。
性能比WXS更好。
仅支持编译到 app-vue 和 H5
在视图层操作dom,因此可接触到dom、bom API,可使用f2、echarts、threejs库,但不可直接访问逻辑层数据,因此不可以使用 uni 相关接口(如:uni.request)
基于 weex 改进的原生渲染引擎,提供了原生渲染能力。
vue页面使用webview渲染;nvue页面使用原生渲染。一个项目中两种页面可以混用。
仅可在App.vue中监听,在其它页面监听无效。
onLaunch 、onShow、onHide 、onError 等
onLoad 、onShow 、onReady 、onHide 、onUnload 、onPullDownRefresh 、onReachBottom 、onBackPress、onPageScroll等
同vue组件生命周期
beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed
通过pages.json配置,通过 navigator 组件或调用 API 跳转,类似小程序
可以在 vue-config.js 中配置更多环境
vue页面是webview渲染的、app端的nvue页面是原生渲染的。
为保证通用,应使用flex布局
rpx和px是通用的,但 rem、vw、vh、百分比等在nvue中不支持
rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向
App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx
没有 * 选择器
page 代替了 body 选择器
App.vue 中的样式为全局样式,nvue页面不支持全局样式
不支持 / 的绝对路径
引入字体图标请参考, 字体图标
Ⅲ uniapp 中api 获取的数据怎样读取出来
根据截图推测,你可能是刚接触开发吧。
看样子你的服务端的返回是直接print_r的,这个返回是打印数组内容的。
你可以使用json_encode返回json数据,然后就可以在uniap的js中console打印出来数据了,这样就可以在小程序中的控制台看到返回了
Ⅳ uniapp中如何获取网页地址参数
uniapp 中要获取地址 http://xxxxxxx/#/pages/my/index ?id=124 的参数
1:获取本页面的地址
let local = location.href;
2:获取参数
let payment_id = this.getParam(local, "payment_id");
//获取url中的参数
getParam(path, name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(path))
return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
}
Ⅳ uniapp开发的时候别人想要访问怎么办
uniapp开发的时候别人想要访问怎么办:
1.第一种解决方法:
直接创建一个vue.config.js文件,并在里面配置devServer,直接上代码,重启跑项目。
2.第二种解决方法:
在src目录下找到mainfest.json文件,修改该文件,点击“源码视图”看到h5,接口调用。
3.还有一种无需配置:
使用HBuilder X 内置浏览器,不存在跨域问题,推荐使用
Ⅵ uniapp如何获取网页源码
通过使用脚手架创建的项目可以更清晰的看到它的架构,也可以直接阅读打包编译的源码。
第一点:首先选择免费源码,免费网站源码有很多网站都能下载到,这类免费代码也是属于测试过的,可以选择下载。
第二点:免费源码的广告文件删除,免费源码下载后,要进行一次清理,首先做的就是删除里面的广告文件,比如一些广告快捷键链接等。
第三点:免费源码的修改工作。免费网站源码尽量选择网站下载站自己本身做个测试的进行下载,且需要有一定的修改能力。
Ⅶ 踩坑记-uniapp+uView(HBuilder)
Q:方案1:有双搜索图标的原因是,多余的那个灰色搜索图标是移动端解析 input type='search' 时,自带的图标样式。故只需要将input search类型改成常规text类型即可。找到search组件的源码,将 comfirm-type="search" 去掉即可。如下图:
方案2:通过控制编译后的原生dom元素来去掉多余的搜索图标。例如:
Ⅷ uniapp自学笔记(三)动态获取数据
ok,我们目前已经完成了首页,如果我们只是为了制作一个文章系统的话,首页+列表页+详情页已经足够满足我们的使用了。
所以我们开始在pages中创建这俩页面。
现在pages.json路由中增加这俩:
前面我们首页中的icon列表是一个静态页面页,我们需要连接才能跳转到列表页面。
这里我们需要用到uniapp内置的跳转方法:
这里我们先把页面之间的跳转关系完成,完成后,我们会在页面之间传递参数,再通过ajax完成动态数据交互!
如法炮制!我们把详情页面也完成:
这里涉及到了一个我们非常熟悉的知识:生命周期,我们需要在生命周期onload的时候,把数据注入到页面中。
所谓生命周期就是onload,onready之类的那一套东西,这里如果细说的话会非常的复杂。因为onshow,onhide在不同的.vue中,这里指APP.vue和子页面.vue中又稍微有所不同。
这里我整理了一个列表,感兴趣的同学可以研究研究。不愿意研究,其实你光掌握一个onload也足够你应对大多数情况了。
学会使用生命周期以后,我们接下来要进入ajax通过端口查询数据,然后渲染到页面上。
uniapp提供一个uni.request方法,帮助我们获取ajax的数据,请看例子:
uniapp的ajax使用方法就是小程序和vue的结合。这里需要注意的是,uniapp在页面跳转的时候,可以发送一个参数,在接收的页面中通过options.xx来接收。注意看上面的例子,是在onload生命周期中接收的,options就是onload的一个参数。
跳转的时候,可以发现id就是拼接进去的。
这里可能会遇到一个问题,那就是你从本地请求的端口可能会产生跨域的问题。
这里推荐两种解决方法:第一个,使用xhbuilder内置的浏览器
第二个,如果你用的是chrome浏览器,可以安装跨域 插件 来解决这个问题。
这个插件的名字是:Allow-Control-Allow-Origin。如果你打不开chrome插件市场的话,你可能要想办法翻墙一下。
这里还有一个问题,那就是,我们页面顶部的title,是在路由pages.json中设置的,但是我们的数据是动态的。
当我们点击了某一项的时候,需要动态的修改一下标题,这个时候需要使用uniapp提供的setNavigationBarTitle方法。
上面遗漏了一个知识,就是当我们通过ajax获取到了内容以后,如果这个内容是字符串还好,但是它有可能是一个富文本,就是我们常说的内容详情。
如果内容是一段html的话,我们就不能直接放到项目中,那样是无法解析出来的。这个时候我们需要使用rich-text标签。
这样就可以正确解析出内容了。
到目前为止,我们已经完成了首页, 列表页和详情页。项目的基础功能已经搭建完毕了,接下来,我们将会进入其他强大功能的学习。
因为最近有一些忙,uniapp的教程可能会暂停一段时间,这一段时期我会给大家推荐一些轻松的教程或者龙哥故事汇的一些文章,希望大家见谅哈。
Ⅸ uniapp使用websocket怎么用有演示代码吗
uniapp是支持使用websocket的,具体怎么使用你可以看下uniapp官方的开发文档。
要测试websocket,你得学会自己搭建websocket服务器。
如果嫌麻烦,可以试试第三方的websocket框架。
我近期在uniapp插件市场中找到一款叫做GoEasy的插件,使用下来整体效果不错,你也可以试试。
他们有提供相关的demo,结合demo和开发文档一起看,上手很快的。
1、如果你只是做简单的websocket消息推送,可以看这个hello world的demo源码:网页链接
2、如果你是做即时通讯/聊天类的产品,可以看看这个聊天的demo源码:网页链接
希望以上内容能帮到你,有用记得采纳哦。
Ⅹ uniapp源码怎么改
第一步:找到文件
第二步:看一下源码复不复杂,复杂的话放弃(也不是不行) 看到了吗,核心代码写的就是一个text标签,也没有插槽,所以不能自定义扩展组件。所以只要在这里改一下就好了。
第三步:修改思路主要是是利用作用域插槽传值 总结就是利用作用域插槽,不想自定义的时候用默认内容,想自定义的时候利用作用域把值再传回来 核心代码粘一下 //修改