HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

公告:关于HBuilder运行基座发送测试push信息的问题

推送

6月11日傍晚6点,HBuilder运行基座弹出了测试推送消息,说明如下:

  1. 只影响HBuilder手机运行基座,因为是HBuilder运行基座的appkey信息泄露。和打包发行后的app无关,打包的app的key信息是开发者自己去个推申请的。
  2. 目前我司已经重置了HBuilder运行基座的appkey信息,已经泄露的appkey不会继续危害HBuilder运行基座。
  3. HBuilder运行基座是内置了所有三方sdk的,包括推送sdk,否则Hello H5+、hello uni-app等测试应用将无法在运行基座上运行。这和开发者的app是否开通了push没有关系,这个运行基座并不是开发者的app。开发者配置sdk信息后,必须打包后才能生效。

经过调查,已经找到了发送push的当事人,也联合个推方搞明白了事情原委。
2019年6月11日傍晚,DCloud的一名开发者,qq号951740***,第一次开发推送,向个推联系获取技术支持。
在qq群中,个推技术支持向开发者询问ccid,开发者在HBuilder基座里打印出了基座的ccid,在qq群里发给了个推技术支持。
个推技术支持在未核实开发者身份的情况下,把HBuilder基座的key信息发给了该开发者。
开发者使用HBuilder基座的key信息进行推送测试,发送了4次推送消息。他以为是自己在测试,完全没有想到是群发给了所有HBuilder基座用户。

事发后,我们第一时间联系个推,清空了待发送队列,但仍然有4千多台设备被推送出去。

个推方已经向DCloud书面道歉,并为HBuilder基座的push发送制定了特殊的使用规则,防止以后类似事情再发生。
同时个推内部也封死了mastersecret的获取方式,开发者想获取mastersecret,必须使用注册邮箱来申请重置。杜绝人员泄露mastersecret的可能。

对于懂技术的人,看完经过描述就明白怎么回事了。但仍有不懂技术原理的人,有各种莫名其妙的担忧。
再次强调,此事与DCloud无关,发送行为不是DCloud所为、泄露key信息不是DCloud所为,不是什么实习生或离职员工,也不是系统或产品漏洞,完全不影响开发者对DCloud产品或运营服务的信任。
开发者即使使用原生或其他跨平台开发工具做app,只要使用三方sdk,当三方sdk厂商泄露了你的key信息,就会遇到一样的问题。

开发者也不必担心个推是否会泄露自己的key信息给三方:

  1. HBuilder基座是公开的、可调试的app,这是一个特殊情况。开发者自己做的app,别人拿不到你的ccid,自然无法通过ccid查其他key信息。
  2. 个推内部已经封死了mastersecret的获取方式,开发者想获取mastersecret,必须使用注册邮箱来申请重置。杜绝技术支持人员泄露mastersecret的可能。

不管怎么样,各位开发者一定要保护好自己的各种sdk的账户和key信息,减少泄露的可能。

继续阅读 »

6月11日傍晚6点,HBuilder运行基座弹出了测试推送消息,说明如下:

  1. 只影响HBuilder手机运行基座,因为是HBuilder运行基座的appkey信息泄露。和打包发行后的app无关,打包的app的key信息是开发者自己去个推申请的。
  2. 目前我司已经重置了HBuilder运行基座的appkey信息,已经泄露的appkey不会继续危害HBuilder运行基座。
  3. HBuilder运行基座是内置了所有三方sdk的,包括推送sdk,否则Hello H5+、hello uni-app等测试应用将无法在运行基座上运行。这和开发者的app是否开通了push没有关系,这个运行基座并不是开发者的app。开发者配置sdk信息后,必须打包后才能生效。

经过调查,已经找到了发送push的当事人,也联合个推方搞明白了事情原委。
2019年6月11日傍晚,DCloud的一名开发者,qq号951740***,第一次开发推送,向个推联系获取技术支持。
在qq群中,个推技术支持向开发者询问ccid,开发者在HBuilder基座里打印出了基座的ccid,在qq群里发给了个推技术支持。
个推技术支持在未核实开发者身份的情况下,把HBuilder基座的key信息发给了该开发者。
开发者使用HBuilder基座的key信息进行推送测试,发送了4次推送消息。他以为是自己在测试,完全没有想到是群发给了所有HBuilder基座用户。

事发后,我们第一时间联系个推,清空了待发送队列,但仍然有4千多台设备被推送出去。

个推方已经向DCloud书面道歉,并为HBuilder基座的push发送制定了特殊的使用规则,防止以后类似事情再发生。
同时个推内部也封死了mastersecret的获取方式,开发者想获取mastersecret,必须使用注册邮箱来申请重置。杜绝人员泄露mastersecret的可能。

对于懂技术的人,看完经过描述就明白怎么回事了。但仍有不懂技术原理的人,有各种莫名其妙的担忧。
再次强调,此事与DCloud无关,发送行为不是DCloud所为、泄露key信息不是DCloud所为,不是什么实习生或离职员工,也不是系统或产品漏洞,完全不影响开发者对DCloud产品或运营服务的信任。
开发者即使使用原生或其他跨平台开发工具做app,只要使用三方sdk,当三方sdk厂商泄露了你的key信息,就会遇到一样的问题。

开发者也不必担心个推是否会泄露自己的key信息给三方:

  1. HBuilder基座是公开的、可调试的app,这是一个特殊情况。开发者自己做的app,别人拿不到你的ccid,自然无法通过ccid查其他key信息。
  2. 个推内部已经封死了mastersecret的获取方式,开发者想获取mastersecret,必须使用注册邮箱来申请重置。杜绝技术支持人员泄露mastersecret的可能。

不管怎么样,各位开发者一定要保护好自己的各种sdk的账户和key信息,减少泄露的可能。

收起阅读 »

这通知什么鬼??现在官方这么嗨了吗

HBuilder


基座头一回收到推送


基座头一回收到推送

编辑器更新2.0.0.20190610版本 编译input组件 变形

编辑器更新 编译input组件 变形 我的样式没有问题 用旧的版本编译就正常

编辑器更新 编译input组件 变形 我的样式没有问题 用旧的版本编译就正常

阿里icon图标浏览器预览没有问题,但是在APP中不显示

将src: url('//at.alicdn.com/t/font_1231814_9dilkcfckhr.ttf') format('truetype');
改为src: url('https://at.alicdn.com/t/font_1231814_9dilkcfckhr.ttf') format('truetype');
今天用手机调试项目时发现在浏览器中正常的图标,到手机上不显示了,经过一番查找发现在引用链接前加上‘https:’就可以了!!!

继续阅读 »

将src: url('//at.alicdn.com/t/font_1231814_9dilkcfckhr.ttf') format('truetype');
改为src: url('https://at.alicdn.com/t/font_1231814_9dilkcfckhr.ttf') format('truetype');
今天用手机调试项目时发现在浏览器中正常的图标,到手机上不显示了,经过一番查找发现在引用链接前加上‘https:’就可以了!!!

收起阅读 »

nvue页面引用iconfont图标经验分享

uni_app nvue icon

前言:发现社区在对nvue使用iconfont图标的文章还是比较少,在这里刚好遇到了,那就分享一下我的解决方法。

在项目中遇到了需要在nvue里使用iconfont图标,
刚开始照着社区搜索的答案:https://ask.dcloud.net.cn/question/64622

这样引入css文件:

<style src="@/common/iconfont.css"></style>

然后再使用

<div class="iconfont icon-like"></div>

真机运行后,好家伙,纹丝不动,气人的是还没法调试……

再次搜索发现社区都是只言片语,于是将搜索范围扩大到百度,发现了玄机。

下面给出正确打开方式:

<!--使用unicode的形式-->  
<text class="iconfont icon-like">&#xe64e;</text>  

<!--图标内容使用data里的变量-->  
<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{fontName}}</text>
data:{  
    return {  
          fontName: "\ue64e",  
    }  
},  
created() {  
    var domModule = weex.requireModule("dom");  
    domModule.addRule('fontFace', {  
           'fontFamily': 'iconfont',  
           'src': "url(\'http://at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\')"  
    })  
}
.iconfont {  
    font-family: iconfont;  
}  
.icon-like {  
    width: 36px;  
    height: 36px;  
    font-size: 34px;  
}

上面的代码展示了两种图标使用方式,自行选择其中一种使用,亲测有效。

--------------------------------下面展示一些坑点-----------------------------------

坑点一:
载入的字体文件ttf文件,url前面一定得有协议头,如http,iconfont上面是没有协议头的,应该是为了自适应支持https

错误写法:( 分分给你一个方框框看看~)

'src': "url(\'//at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\')"

正确写法是:(需要加上协议头)

'src': "url(\'http://at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\')"

坑点二:
上面两种引用形式,使用的内容编码其实是不一样的,这个可以在iconfont.com上面找到哈。

第一种引用方式的code获取方式:
1.鼠标放在图标上,选择右上角的按钮『编辑』
2.弹出窗口后,复制里面的16进制的Unicode码:e64e,使用时,需要在前面加上\u,即完整编辑为:\ue64e。

第二种引用方式的code获取方式:
1.鼠标放在图标上,直接复制即可。

继续阅读 »

前言:发现社区在对nvue使用iconfont图标的文章还是比较少,在这里刚好遇到了,那就分享一下我的解决方法。

在项目中遇到了需要在nvue里使用iconfont图标,
刚开始照着社区搜索的答案:https://ask.dcloud.net.cn/question/64622

这样引入css文件:

<style src="@/common/iconfont.css"></style>

然后再使用

<div class="iconfont icon-like"></div>

真机运行后,好家伙,纹丝不动,气人的是还没法调试……

再次搜索发现社区都是只言片语,于是将搜索范围扩大到百度,发现了玄机。

下面给出正确打开方式:

<!--使用unicode的形式-->  
<text class="iconfont icon-like">&#xe64e;</text>  

<!--图标内容使用data里的变量-->  
<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{fontName}}</text>
data:{  
    return {  
          fontName: "\ue64e",  
    }  
},  
created() {  
    var domModule = weex.requireModule("dom");  
    domModule.addRule('fontFace', {  
           'fontFamily': 'iconfont',  
           'src': "url(\'http://at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\')"  
    })  
}
.iconfont {  
    font-family: iconfont;  
}  
.icon-like {  
    width: 36px;  
    height: 36px;  
    font-size: 34px;  
}

上面的代码展示了两种图标使用方式,自行选择其中一种使用,亲测有效。

--------------------------------下面展示一些坑点-----------------------------------

坑点一:
载入的字体文件ttf文件,url前面一定得有协议头,如http,iconfont上面是没有协议头的,应该是为了自适应支持https

错误写法:( 分分给你一个方框框看看~)

'src': "url(\'//at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\')"

正确写法是:(需要加上协议头)

'src': "url(\'http://at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\')"

坑点二:
上面两种引用形式,使用的内容编码其实是不一样的,这个可以在iconfont.com上面找到哈。

第一种引用方式的code获取方式:
1.鼠标放在图标上,选择右上角的按钮『编辑』
2.弹出窗口后,复制里面的16进制的Unicode码:e64e,使用时,需要在前面加上\u,即完整编辑为:\ue64e。

第二种引用方式的code获取方式:
1.鼠标放在图标上,直接复制即可。

收起阅读 »

方法return 在app调试中是空,或者计算属性返回在真机调试中也是空的解决方法

真机调试

今天在将应用放到安卓手机调试的过程中发现原本可以显示内容在h5上可以显示却在真机调试上为空,类似代码如下 无法return出内容,
demo代码

<view class="page">{{vifshow(2)}}</view>  
methods: {  
        vifshow: function(id) {  
            if (id == 1) {  
                return("sdas")  
            } else if(id==2) {  
                return("2323")  
            }}  
,}

经过无数次的试验发现将测试代码放到新创建的空项目中调试发现可以使用于是考虑没准是编译器版本的问题内容见 发现果然新版的是而老版的配置文件没有这个usingComponents选项,添加后在app上运行就正常了

"app-plus": {      
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式` ,否则为`template模板模式`     
    }    
继续阅读 »

今天在将应用放到安卓手机调试的过程中发现原本可以显示内容在h5上可以显示却在真机调试上为空,类似代码如下 无法return出内容,
demo代码

<view class="page">{{vifshow(2)}}</view>  
methods: {  
        vifshow: function(id) {  
            if (id == 1) {  
                return("sdas")  
            } else if(id==2) {  
                return("2323")  
            }}  
,}

经过无数次的试验发现将测试代码放到新创建的空项目中调试发现可以使用于是考虑没准是编译器版本的问题内容见 发现果然新版的是而老版的配置文件没有这个usingComponents选项,添加后在app上运行就正常了

"app-plus": {      
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式` ,否则为`template模板模式`     
    }    
收起阅读 »

Uni-App微信小程序页面间通信的HOOK方式

过去两年多一直在H5+环境里开发,刚接触uni-app不久,在h5+里可以方便的通过

WebviewObject plus.webview.create( url, id, styles, extras );

里的extras传递参数给其他页面,也可以通过

var index_main = plus.webview.getWebviewById("index_main");  
index_main.evalJS('update_bill_badge_num()');

来调用已经打开的页面上的方法,或者定义一个接收参数的函数,把参数传递到已经打开的页面里

到了uni-app里的小程序,小的一些参数我可以通过/page/home/home?abc=123这种方式,或者通过LocalStoreage来传递,但是如果是比较大的json,通过第一种方式肯定不行,通过LS方式又太慢了,通过Vue.protoype.xxx来挂载一些常量还可以,变量是没用的,在这个页里修改了,在另外一个页面里还是原来的值。

我在网上看到这篇文章《微信小程序页面间通信的5种方式》https://segmentfault.com/a/1190000008895441 里的方式五:通过hack方法直接调用通信页面的方法,感觉这不就是H5+里的通过webview来传值的方式吗?

然后我就在微信小程序的开发环境里实验成功了

微信小程序里:首先定义了一个pages.js文件,在小程序根目录新建了一个plugin目录,然后放在里面
====================
pages.js的内容:

// plugin/pages.js  
// 缓存pageModel,一个简要实现  

export default class PM {  

    constructor() {  
        this.$$cache = {};  
    }  

    add(pageModel) {   
        let pagePath = this._getPageModelPath(pageModel);   

        this.$$cache[pagePath] = pageModel;   
    }   

    get(pagePath) {   
        return this.$$cache[pagePath];   
    }   

    delete(pageModel) {   
        try {   
            delete this.$$cache[this._getPageModelPath(pageModel)];   
        } catch (e) {   
        }   
    }   

    _getPageModelPath(page) {   
        // 关键点   
        return page.__route__;   
    }  

}

====================
然后在小程序的app.js里引入:

//app.js  
import PageModel from './plugin/pages.js'; //引入  
App({  

    pages: new PageModel(), //挂载一个pages对象   

    onLaunch: function () {  
    },  

    globalData: {  
        userInfo: null  
    }  

})

====================
在页面A里:

// pageA  
let app = getApp();  
Page({  
    data: {  
        helloMsg: 'hello from PageA'  
    },  
    onLoad() {   
        //加入页面缓存对象   
        app.pages.add(this);   

        console.log('Page A');   
    },   
    onShow(){   
        console.log(this.data.helloMsg);   
    },   

    gotoC() {   
        wx.navigateTo({   
            url: '/pages/home/home'   
        });   
    },   

    sayHello(msg) {   
        this.setData({   
            helloMsg: msg   
        });   
    },   

    writeHello(msg){   
        console.log(msg);   
    }  

});

====================
然后在页面C里:

//pageC  
let app = getApp();  
Page({  

    onLoad(){   
        console.log('Page C');   
        this.doSomething();   
    },   

    doSomething() {   

        console.log('do PageC method\n\n');   

        // 见证奇迹的时刻   
        let data_msg = app.pages.get('pages/index/index').data.helloMsg;   

        console.log('------获取A的数据------');   
        console.log( data_msg );   
        console.log('----------------------\n\n');   

        console.log('------改变A的数据------');   
        app.pages.get('pages/index/index').sayHello('hello from PageC');   
        console.log('----------------------\n\n');   

        console.log('------调用A的方法------');   
        app.pages.get('pages/index/index').writeHello('PageC call PageA method!');   
        console.log('----------------------\n\n');   

    }  

});

在页面C里成功获取了页面A的变量,还能调用页面A的方法,如果改变了页面A的变量,,在从页面C回到页面A时,如果显示这个被修改的变量,可以看到变量内容的确被修改了。看到这个实验的结果,我喜出望外,打算把它引入到uni-app中:

一开始我就想仿照微信小程序的方式:
====================
在main.js里

import Vue from 'vue'  
import App from './App'  
import store from './store'  
import PageModel from './pages.js'; //引入  

//省略其他内容  

App.mpType = 'app'  

const app = new Vue({  

    //加入PageModel   
    pages: new PageModel(),   

    ...App  

})  
app.$mount()

====================
又或者放在App.vue里:

<script>  

import PageModel from './pages.js';   

export default {   

    //加入PageModel   
    pages: new PageModel(),   

    onLaunch: function() {   
        console.log('App Launch')   
    },   
    onShow: function() {   
        console.log('App Show')   
    },   
    onHide: function() {   
        console.log('App Hide')   
    }   
}  

</script>  

<style>  
/* 每个页面公共css */  
</style>

然后在PageA里:
var app = getApp();
app.pages.add(this);
两种方法都不行,都报错误,应该是没有正确的把pages挂载到app上去。

console.log( app );
发现其实还是挂载成功了的,在很深的层里:
这样是成功的

app.$vm.$options.pages.add(this);  
console.log( app.$vm.$options.pages );

在PageC里:

var page_index_obj = app.$vm.$options.pages.get('pages/index/index');  
var page_index_obj_index_data = page_index_obj._data.index_data;  
console.log( page_index_obj_index_data )

我对uni-app不太熟悉,对Vue也只是刚开始学习使用,然后搜到社区里一篇文章《getApp() 挂载实例方法》https://ask.dcloud.net.cn/article/35810 ,应该就是我想要的东西,但是说的太模糊了,dcloud的源码实在太长了,看不太懂,直接加到hooks也是不行的,能否指教一下,怎么把自己写的对象,挂载上去。

const hooks = [  
    'onHide',  
    'onError',  
    'onPageNotFound',  
    'onUniNViewMessage',  
    //'pages', //无效  
];

我现在可以实现数据的传递了,但是下面这样的写法,实在是有点丑陋

app.$vm.$options.pages.add(this);  
app.$vm.$options.pages.get('pages/index/index')._data.index_data;‘

另外记得在页面的onUnload里,记得要从页面栈里删除当前对象

        onUnload(){  
            app.$vm.$options.pages.delete(this);  
        },

PS.我已经在项目里使用了上述方法了,相当于在app.$vm.$options.pages里建了一个栈,而且里面的数据和方法都是可以调用的,,比如关闭当前页面的时候,把本页的数据传递到上一个页面里,不知道大家还有更好的方法~

我回复了上文作者,一直没回应我,可能是太忙了,上次文章也没排版好,这次重发一遍。

继续阅读 »

过去两年多一直在H5+环境里开发,刚接触uni-app不久,在h5+里可以方便的通过

WebviewObject plus.webview.create( url, id, styles, extras );

里的extras传递参数给其他页面,也可以通过

var index_main = plus.webview.getWebviewById("index_main");  
index_main.evalJS('update_bill_badge_num()');

来调用已经打开的页面上的方法,或者定义一个接收参数的函数,把参数传递到已经打开的页面里

到了uni-app里的小程序,小的一些参数我可以通过/page/home/home?abc=123这种方式,或者通过LocalStoreage来传递,但是如果是比较大的json,通过第一种方式肯定不行,通过LS方式又太慢了,通过Vue.protoype.xxx来挂载一些常量还可以,变量是没用的,在这个页里修改了,在另外一个页面里还是原来的值。

我在网上看到这篇文章《微信小程序页面间通信的5种方式》https://segmentfault.com/a/1190000008895441 里的方式五:通过hack方法直接调用通信页面的方法,感觉这不就是H5+里的通过webview来传值的方式吗?

然后我就在微信小程序的开发环境里实验成功了

微信小程序里:首先定义了一个pages.js文件,在小程序根目录新建了一个plugin目录,然后放在里面
====================
pages.js的内容:

// plugin/pages.js  
// 缓存pageModel,一个简要实现  

export default class PM {  

    constructor() {  
        this.$$cache = {};  
    }  

    add(pageModel) {   
        let pagePath = this._getPageModelPath(pageModel);   

        this.$$cache[pagePath] = pageModel;   
    }   

    get(pagePath) {   
        return this.$$cache[pagePath];   
    }   

    delete(pageModel) {   
        try {   
            delete this.$$cache[this._getPageModelPath(pageModel)];   
        } catch (e) {   
        }   
    }   

    _getPageModelPath(page) {   
        // 关键点   
        return page.__route__;   
    }  

}

====================
然后在小程序的app.js里引入:

//app.js  
import PageModel from './plugin/pages.js'; //引入  
App({  

    pages: new PageModel(), //挂载一个pages对象   

    onLaunch: function () {  
    },  

    globalData: {  
        userInfo: null  
    }  

})

====================
在页面A里:

// pageA  
let app = getApp();  
Page({  
    data: {  
        helloMsg: 'hello from PageA'  
    },  
    onLoad() {   
        //加入页面缓存对象   
        app.pages.add(this);   

        console.log('Page A');   
    },   
    onShow(){   
        console.log(this.data.helloMsg);   
    },   

    gotoC() {   
        wx.navigateTo({   
            url: '/pages/home/home'   
        });   
    },   

    sayHello(msg) {   
        this.setData({   
            helloMsg: msg   
        });   
    },   

    writeHello(msg){   
        console.log(msg);   
    }  

});

====================
然后在页面C里:

//pageC  
let app = getApp();  
Page({  

    onLoad(){   
        console.log('Page C');   
        this.doSomething();   
    },   

    doSomething() {   

        console.log('do PageC method\n\n');   

        // 见证奇迹的时刻   
        let data_msg = app.pages.get('pages/index/index').data.helloMsg;   

        console.log('------获取A的数据------');   
        console.log( data_msg );   
        console.log('----------------------\n\n');   

        console.log('------改变A的数据------');   
        app.pages.get('pages/index/index').sayHello('hello from PageC');   
        console.log('----------------------\n\n');   

        console.log('------调用A的方法------');   
        app.pages.get('pages/index/index').writeHello('PageC call PageA method!');   
        console.log('----------------------\n\n');   

    }  

});

在页面C里成功获取了页面A的变量,还能调用页面A的方法,如果改变了页面A的变量,,在从页面C回到页面A时,如果显示这个被修改的变量,可以看到变量内容的确被修改了。看到这个实验的结果,我喜出望外,打算把它引入到uni-app中:

一开始我就想仿照微信小程序的方式:
====================
在main.js里

import Vue from 'vue'  
import App from './App'  
import store from './store'  
import PageModel from './pages.js'; //引入  

//省略其他内容  

App.mpType = 'app'  

const app = new Vue({  

    //加入PageModel   
    pages: new PageModel(),   

    ...App  

})  
app.$mount()

====================
又或者放在App.vue里:

<script>  

import PageModel from './pages.js';   

export default {   

    //加入PageModel   
    pages: new PageModel(),   

    onLaunch: function() {   
        console.log('App Launch')   
    },   
    onShow: function() {   
        console.log('App Show')   
    },   
    onHide: function() {   
        console.log('App Hide')   
    }   
}  

</script>  

<style>  
/* 每个页面公共css */  
</style>

然后在PageA里:
var app = getApp();
app.pages.add(this);
两种方法都不行,都报错误,应该是没有正确的把pages挂载到app上去。

console.log( app );
发现其实还是挂载成功了的,在很深的层里:
这样是成功的

app.$vm.$options.pages.add(this);  
console.log( app.$vm.$options.pages );

在PageC里:

var page_index_obj = app.$vm.$options.pages.get('pages/index/index');  
var page_index_obj_index_data = page_index_obj._data.index_data;  
console.log( page_index_obj_index_data )

我对uni-app不太熟悉,对Vue也只是刚开始学习使用,然后搜到社区里一篇文章《getApp() 挂载实例方法》https://ask.dcloud.net.cn/article/35810 ,应该就是我想要的东西,但是说的太模糊了,dcloud的源码实在太长了,看不太懂,直接加到hooks也是不行的,能否指教一下,怎么把自己写的对象,挂载上去。

const hooks = [  
    'onHide',  
    'onError',  
    'onPageNotFound',  
    'onUniNViewMessage',  
    //'pages', //无效  
];

我现在可以实现数据的传递了,但是下面这样的写法,实在是有点丑陋

app.$vm.$options.pages.add(this);  
app.$vm.$options.pages.get('pages/index/index')._data.index_data;‘

另外记得在页面的onUnload里,记得要从页面栈里删除当前对象

        onUnload(){  
            app.$vm.$options.pages.delete(this);  
        },

PS.我已经在项目里使用了上述方法了,相当于在app.$vm.$options.pages里建了一个栈,而且里面的数据和方法都是可以调用的,,比如关闭当前页面的时候,把本页的数据传递到上一个页面里,不知道大家还有更好的方法~

我回复了上文作者,一直没回应我,可能是太忙了,上次文章也没排版好,这次重发一遍。

收起阅读 »

tp5.1+uni-app开发移动app或者小程序

b站视频 全栈开发简单教程
https://www.bilibili.com/video/av54175781?from=search&seid=8237648774832145478

b站视频 全栈开发简单教程
https://www.bilibili.com/video/av54175781?from=search&seid=8237648774832145478

键盘弹起时背景图片挤压(一般用于登录页面)

背景图

使用uni.getSystemInfoSync()获取可用宽高,最后设置到view上即可。

使用uni.getSystemInfoSync()获取可用宽高,最后设置到view上即可。

原生层级覆盖问题解决方案

subnvue

一、uni-app的原生层级覆盖

另见文档:https://uniapp.dcloud.io/component/native-component**

二、5+App的原生对象层级覆盖

为了提升性能,5+提供了一批原生对象,比如plus.video、plus.map、plus.nativeObj、plus.nativeUI、plus.webview、plus.barcode、plus.gallery.pick、plus.camera

虽然提升了性能,但带来了前端组件无法覆盖原生控件的层级问题,为了解决这个问题,有2种方案:

plus.nativeObj.view的层级是最高的,它高于子webview、高于uni-app的subnvue。

  • 子webview
    子webview的意思是创建一个新的非全屏webview,盖住原生界面对象。
    子webview没有plus.nativeObj.view的限制,可以随意覆盖。
    子webview会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单,plus.nativeObj.view可以简单实现,也没必要用子webview。

子webview可以设zindex,来调节多个子webview的层级。但不建议使用太多子webview,影响性能。

继续阅读 »

一、uni-app的原生层级覆盖

另见文档:https://uniapp.dcloud.io/component/native-component**

二、5+App的原生对象层级覆盖

为了提升性能,5+提供了一批原生对象,比如plus.video、plus.map、plus.nativeObj、plus.nativeUI、plus.webview、plus.barcode、plus.gallery.pick、plus.camera

虽然提升了性能,但带来了前端组件无法覆盖原生控件的层级问题,为了解决这个问题,有2种方案:

plus.nativeObj.view的层级是最高的,它高于子webview、高于uni-app的subnvue。

  • 子webview
    子webview的意思是创建一个新的非全屏webview,盖住原生界面对象。
    子webview没有plus.nativeObj.view的限制,可以随意覆盖。
    子webview会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单,plus.nativeObj.view可以简单实现,也没必要用子webview。

子webview可以设zindex,来调节多个子webview的层级。但不建议使用太多子webview,影响性能。

收起阅读 »

uniapp app 端调微信支付接口

微信支付

uni-app 官方文档支付接口如下:

uni.requestPayment({  
    provider: provider, // wxpay、alipay  
    orderInfo: 'orderInfo', //微信、支付宝订单数据  
    success: function (res) {  
        console.log('success:' + JSON.stringify(res));  
    },  
    fail: function (err) {  
        console.log('fail:' + JSON.stringify(err));  
    }  
});

传送门:uniapp app 端调起支付宝支付接口

文档中 orderInfo 的格式没写清楚,今天刚好在研究支付,发现调起微信支付接口的 orderInfo 可以是对象,也可以是对象字符串,比如:

let obj = {  
    appid: 应用ID,  
    noncestr: 随机字符串,  
    package: 'Sign=WXPay', // 固定值,以微信支付文档为主  
    partnerid: 商户号,  
    prepayid: 预支付交易会话ID,  
    timestamp: 时间戳,  
    sign: 签名 // 根据签名算法生成签名  
}  
// 第一种写法,传对象  
let orderInfo = obj  
// 第二种写法,传对象字符串  
let orderInfo = JSON.stringify(obj)  
uni.requestPayment({  
    provider: 'wxpay',  
    orderInfo: orderInfo, //微信、支付宝订单数据  
    success: function (res) {  
        console.log('success:' + JSON.stringify(res));  
    },  
    fail: function (err) {  
        console.log('fail:' + JSON.stringify(err));  
    }  
});
  • 微信支付接口文档

    Tips:
    当时做项目所传的参数和签名都正确,结果还是返回 -1,查了半天结果用的是 deCloud 的标准定义基座,它的包名跟自己的 app 申请的包不一样,导致不能正常调起微信支付接口,但支付宝的可以。更换自定义基座,填上自己的包名,证书等,然后打包安装运行就 ok 了
    在这里插入图片描述

继续阅读 »

uni-app 官方文档支付接口如下:

uni.requestPayment({  
    provider: provider, // wxpay、alipay  
    orderInfo: 'orderInfo', //微信、支付宝订单数据  
    success: function (res) {  
        console.log('success:' + JSON.stringify(res));  
    },  
    fail: function (err) {  
        console.log('fail:' + JSON.stringify(err));  
    }  
});

传送门:uniapp app 端调起支付宝支付接口

文档中 orderInfo 的格式没写清楚,今天刚好在研究支付,发现调起微信支付接口的 orderInfo 可以是对象,也可以是对象字符串,比如:

let obj = {  
    appid: 应用ID,  
    noncestr: 随机字符串,  
    package: 'Sign=WXPay', // 固定值,以微信支付文档为主  
    partnerid: 商户号,  
    prepayid: 预支付交易会话ID,  
    timestamp: 时间戳,  
    sign: 签名 // 根据签名算法生成签名  
}  
// 第一种写法,传对象  
let orderInfo = obj  
// 第二种写法,传对象字符串  
let orderInfo = JSON.stringify(obj)  
uni.requestPayment({  
    provider: 'wxpay',  
    orderInfo: orderInfo, //微信、支付宝订单数据  
    success: function (res) {  
        console.log('success:' + JSON.stringify(res));  
    },  
    fail: function (err) {  
        console.log('fail:' + JSON.stringify(err));  
    }  
});
  • 微信支付接口文档

    Tips:
    当时做项目所传的参数和签名都正确,结果还是返回 -1,查了半天结果用的是 deCloud 的标准定义基座,它的包名跟自己的 app 申请的包不一样,导致不能正常调起微信支付接口,但支付宝的可以。更换自定义基座,填上自己的包名,证书等,然后打包安装运行就 ok 了
    在这里插入图片描述

收起阅读 »

献礼“618”,1700+集前端视频教程免费看

JavaScript

一年一度“618”,岁岁年年狂剁手。
随着网购时代的到来,越来越多的剁手节让大家谜一样的沉浸其中,无法自拔,什么618、双十一、双十二、双旦等等
年前定下的攒钱目标还没开始就要宣告结束
这就是人生不得不承认的事实

然而比618来得更猝不及防的
是各大电商的营销文案
一个比一个精彩
一个比一个诱惑

所谓清空购物车一时爽,事后剁手火葬场
小妙深知购物狂+剁手党的疯狂
也深知这样一个“节日”对自媒体人来说意味着什么
当然是拼文案拼营销拼姿势啊
反正,钱是越花越少的
经验是越攒越多的
精彩文案给你摆在这
这个手你剁不剁?

小妙作为剁手大军的一员,深深了解大家的纠结与痛苦
而我今年就不一样了,不但不剁手,还可以免费学到知识

免费看?免费?是的,你没看错,真的免费!!!

即日起,注册妙味视频平台的新用户,即可获得价值239元包含1700+集的前端优质视频教程的7天观看权限
无论你是在学布局还是在学小程序,亦或是在学Vue、react,这里应有尽有,爱学习的你,还没心动么,心动了的话就赶快行动起来吧

活动详情见海报:

继续阅读 »

一年一度“618”,岁岁年年狂剁手。
随着网购时代的到来,越来越多的剁手节让大家谜一样的沉浸其中,无法自拔,什么618、双十一、双十二、双旦等等
年前定下的攒钱目标还没开始就要宣告结束
这就是人生不得不承认的事实

然而比618来得更猝不及防的
是各大电商的营销文案
一个比一个精彩
一个比一个诱惑

所谓清空购物车一时爽,事后剁手火葬场
小妙深知购物狂+剁手党的疯狂
也深知这样一个“节日”对自媒体人来说意味着什么
当然是拼文案拼营销拼姿势啊
反正,钱是越花越少的
经验是越攒越多的
精彩文案给你摆在这
这个手你剁不剁?

小妙作为剁手大军的一员,深深了解大家的纠结与痛苦
而我今年就不一样了,不但不剁手,还可以免费学到知识

免费看?免费?是的,你没看错,真的免费!!!

即日起,注册妙味视频平台的新用户,即可获得价值239元包含1700+集的前端优质视频教程的7天观看权限
无论你是在学布局还是在学小程序,亦或是在学Vue、react,这里应有尽有,爱学习的你,还没心动么,心动了的话就赶快行动起来吧

活动详情见海报:

收起阅读 »