uni-app 是一个使用 vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
A页面向B页面传递参数
uni.navigateTo({
url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io')
});
B页面接收A页面传递的参数
export default {
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option. url); //打印出上个页面传递的参数。
}
}
自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。
具体如何使用呢?我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。
首先,在我的页面监听事件。
// 我的页面
onLoad(){
// 监听事件
uni.$on('login',(usnerinfo)=>{
this.usnerinfo = usnerinfo;
})
},
onUnload() {
// 移除监听事件
uni.$off('login');
},
因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重复监听。
// 登陆页面
uni.$emit('login', {
avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',
token: 'user123456',
userName: 'unier',
login: true
});
使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。
以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景,如:
定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。
注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。
示例如下:
在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公用的方法。
const websiteUrl = 'http://uniapp.dcloud.io';
const now = Date.now || function () {
return new Date().getTime();
};
const isArray = Array.isArray || function (obj) {
return obj instanceof Array;
};
export default {
websiteUrl,
now,
isArray
}
接下来在 pages/index/index.vue 中引用该模块
<script>
import helper from '../../common/helper.js';
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + helper.now());
},
methods: {
}
}
</script>
将一些使用频率较高的常量或者方法,直接扩展到 Vue.prototype 上,每个 Vue 对象都会“继承”下来。
Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';
Vue.prototype.now = Date.now || function () {
return new Date().getTime();
};
Vue.prototype.isArray = Array.isArray || function (obj) {
return obj instanceof Array;
};
<script>
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + this.now());
},
methods: {
}
}
</script>
这种方式,只需要在 main.js 中定义好即可在每个页面中直接调用。
<script>
export default {
globalData: {
text: 'text'
},
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
赋值:getApp().globalData.text = 'test'
取值:console.log(getApp().globalData.text) // 'test'
如果需要把globalData的数据绑定到页面上,可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起,nvue页面在uni-app编译模式下,也支持onshow。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
HBuilderX 2.2.5+起,支持vue和nvue之间共享。参考
这里以登录后同步更新用户信息为例,简单说明下 Vuex 的用法,更多更详细的 Vuex 的内容,建议前往其官网 Vuex 学习下。
举例说明:
在 uni-app 项目根目录下新建 store 目录,在 store 目录下创建 index.js 定义状态值
const store = new Vuex.Store({
state: {
login: false,
token: '',
avatarUrl: '',
userName: ''
},
mutations: {
login(state, provider) {
console.log(state)
console.log(provider)
state.login = true;
state.token = provider.token;
state.userName = provider.userName;
state.avatarUrl = provider.avatarUrl;
},
logout(state) {
state.login = false;
state.token = '';
state.userName = '';
state.avatarUrl = '';
}
}
})
import store from './store'
Vue.prototype.$store = store
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
...mapMutations(['logout'])
}
}
</script>
示例操作步骤:未登录时,提示去登录。跳转至登录页后,点击“登录”获取用户信息,同步更新状态后,返回到个人中心即可看到信息同步的结果。
注意:对比前面的方式,该方式更加适合处理全局的并且值会发生变化的情况。
* .vue 和 .nvue 并不是一个规范,因此一些在 .vue 中适用的方案并不适用于 .nvue。 Vue 上挂载属性,不能在 .nvue 中使用。**
uni.getUserInfo 接口调用方式起初通过button 来获取用户信息,或者 直接调用 uni.getUserInfo 来获取信息 在当前微信更新接口后,这2个接口将直接返回匿名用户数据,不在弹窗提示
发现了点击按钮1可以更新title内容,但是点击按钮2却无法更新title内容。这个究竟是为什么呢?在changeTitle2方法的success方法中,该success方法指向闭包,所以this属于闭包
首先介绍最原始的跳转方法,类似于html中的 a 标签,不过在uniapp中需要将 a 标签换成 <navigator url=跳转的地址>……</navigator>
static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。css、less/scss 等资源同样不要放在 static 目录下
发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;
computed里面的属性不能在data属性中出现,用来监控computed中自定义的变量 ,computed合适多个变量或对象处理后返回一个结果值,其中一个值发生变化则computed监控的属性值就会发生变化
开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家:问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新
当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关
基于QR.createQrCodeImg方法生成二维码,在使用uniapp开发的小程序,app应用,某一页面需要将网页Url生成的二维码进行展示,即将Url生成为base64的二维码图片。
使用uniapp编译成小程序时,在生命周期onLaunch中运用redirectTo或reLaunch跳转页面后点击事件失效,但是如果你重定向的页面中有使用navigator组件跳转后再返回,点击事件又有效了,在原生微信小程序中重定向没有问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!