HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

canvas 的 canvas-id 设置无效

我这边使用 插件市场的uQRCode二维码生成插件,但是在设置动态canvas-id时候一直无效,导致后续uni.canvasToTempFilePath()一直无法获取到canvas

我这边使用 插件市场的uQRCode二维码生成插件,但是在设置动态canvas-id时候一直无效,导致后续uni.canvasToTempFilePath()一直无法获取到canvas

监听uniapp页面滚动结束的方法

  1. 监听页面生命周期 onReachBottom 链接: https://uniapp.dcloud.io/collocation/frame/lifecycle
  2. page-meta 标签 有一个事件 @scrolldone 可以直接监听页面滚动结束
  3. 引入了一个组件,组件中要监听页面滚动结束,就不能用 页面生命周期 了
    在 <scroll-view></scroll-view>监听滚动事件( 注意:必须给scroll-view标签设定高度,不然事件没有效果),@scroll="addClass",
    data中定义了2个变量, scroll_end(为真滚动结束),scrollTop (页面滚动的高度)

                        addClass(event){  
                this.scroll_end = false;  
                const that = this;  
                this.scrollTop = event.detail.scrollTop;  
                clearTimeout(timer);  
                var timer = setTimeout(function(){  
                    if( event.detail.scrollTop === that.scrollTop ){  
                        that.scroll_end = true;  
                        console.log(that.scroll_end,"是否结束",event.detail.scrollTop, "data", that.scrollTop )  
                        clearTimeout(timer);  
                        timer = null;  // 处理回收   
                    }  
    
                }, 500)  
            },
    效果展示: 绑定的是 animate.css 的class class="{'animate__backOutRight': !scroll_end, 'animate__backInRight' : scroll_end }"
继续阅读 »
  1. 监听页面生命周期 onReachBottom 链接: https://uniapp.dcloud.io/collocation/frame/lifecycle
  2. page-meta 标签 有一个事件 @scrolldone 可以直接监听页面滚动结束
  3. 引入了一个组件,组件中要监听页面滚动结束,就不能用 页面生命周期 了
    在 <scroll-view></scroll-view>监听滚动事件( 注意:必须给scroll-view标签设定高度,不然事件没有效果),@scroll="addClass",
    data中定义了2个变量, scroll_end(为真滚动结束),scrollTop (页面滚动的高度)

                        addClass(event){  
                this.scroll_end = false;  
                const that = this;  
                this.scrollTop = event.detail.scrollTop;  
                clearTimeout(timer);  
                var timer = setTimeout(function(){  
                    if( event.detail.scrollTop === that.scrollTop ){  
                        that.scroll_end = true;  
                        console.log(that.scroll_end,"是否结束",event.detail.scrollTop, "data", that.scrollTop )  
                        clearTimeout(timer);  
                        timer = null;  // 处理回收   
                    }  
    
                }, 500)  
            },
    效果展示: 绑定的是 animate.css 的class class="{'animate__backOutRight': !scroll_end, 'animate__backInRight' : scroll_end }"
收起阅读 »

有人需要插件市场直播插件的UI模板吗?带货弹幕基础的美颜都有,便宜售出,跳楼价

插件市场 插件 直播

有人需要插件市场直播插件的UI模板吗?带货弹幕基础的美颜都有,可以自己改动
麻烦联系qq:1037606624, 便宜售出,跳楼价

有人需要插件市场直播插件的UI模板吗?带货弹幕基础的美颜都有,可以自己改动
麻烦联系qq:1037606624, 便宜售出,跳楼价

IOS平台hybrid模式发布后的版本页面空白

uniapp

如题,我在使用HBuilderX工具编译调试hybrid页面的时候页面显示正常,下面两张图片,一个是HBuilderX编译的,一个是正式版发布后的。

是我哪里没配置好吗,用的是WKWebview的内核了,感觉也不关内核事情,但线上的发布版本hybrid就是显示不了任何东西

继续阅读 »

如题,我在使用HBuilderX工具编译调试hybrid页面的时候页面显示正常,下面两张图片,一个是HBuilderX编译的,一个是正式版发布后的。

是我哪里没配置好吗,用的是WKWebview的内核了,感觉也不关内核事情,但线上的发布版本hybrid就是显示不了任何东西

收起阅读 »

设置了程序的web browser 用ie11 启动程序后不生效

悬赏园豆:10 [待解决问题] 浏览: 12次
RegistryKey reg = Registry.LocalMachine;
using (RegistryKey run = reg.OpenSubKey(@"SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", true))
{
var key = "ch2.Spider.SiteManager.exe";
var value = run.GetValue(key);
if (value == null)
{
try
{
Int32 tempInt = 0;
unchecked
{
tempInt = (Int32)0x2AF9;
}https://q.cnblogs.com/q/128360/

                run.SetValue(key, tempInt, RegistryValueKind.DWord);  
                MessageBox.Show("  当前应用程序已成功写入注册表!", "提示", MessageBoxButtons.OK, MessageBoxIcon.Information);  
            }  
            catch (Exception ex)  
            {  
                MessageBox.Show(ex.Message.ToString(), "提示", MessageBoxButtons.OK, MessageBoxIcon.Error);  
            }  
        }  
        else  
        {  
            MessageBox.Show(value.ToString(), "提示", MessageBoxButtons.OK, MessageBoxIcon.Information);  
        }
继续阅读 »

悬赏园豆:10 [待解决问题] 浏览: 12次
RegistryKey reg = Registry.LocalMachine;
using (RegistryKey run = reg.OpenSubKey(@"SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", true))
{
var key = "ch2.Spider.SiteManager.exe";
var value = run.GetValue(key);
if (value == null)
{
try
{
Int32 tempInt = 0;
unchecked
{
tempInt = (Int32)0x2AF9;
}https://q.cnblogs.com/q/128360/

                run.SetValue(key, tempInt, RegistryValueKind.DWord);  
                MessageBox.Show("  当前应用程序已成功写入注册表!", "提示", MessageBoxButtons.OK, MessageBoxIcon.Information);  
            }  
            catch (Exception ex)  
            {  
                MessageBox.Show(ex.Message.ToString(), "提示", MessageBoxButtons.OK, MessageBoxIcon.Error);  
            }  
        }  
        else  
        {  
            MessageBox.Show(value.ToString(), "提示", MessageBoxButtons.OK, MessageBoxIcon.Information);  
        }
收起阅读 »

利用WordPress作为后端快速生成多端小程序和APP

5+App开发 百度小程序 支付宝小程序 微信小程序 WordPress

WordPress 作为后端生成多端小程序、快应用及APP,可用于资讯、新闻、博客、企业官网等

后端使用开源博客建站系统wordpress和小程序开源版插件,前端使用uniapp。 已测试多端小程序和APP,均可稳定运行,暂时未测试快应用。

因为没有用到互动功能,所以后端其实不用设置appid和密钥那些东西 。

案例演示
安卓APP:https://wwa.lanzous.com/iWVq9e8tc6j
H5演示:https://h5.wpnicer.com/
小程序和快应用没有上线,暂时没有演示

截图展示



使用方法
后端

  1. 搭建wordpress网站,推荐使用nginx1.18+php7.3+mysql5.6
  2. 在wordpress插件市场搜索“REST API TO MiniProgram”安装并启用插件
  3. 设置wordpress固定连接及伪静态规则,推荐使用/%post_id%.html
  4. 在浏览器输入https://xxx.com/wp-json/wp/v2/posts 或在浏览器输入https://xxx.com/wp-json/wp/v2 如果有数据输出则说明设置没有问题,如果出现404或者其他问题则说明伪静态没有设置好
  5. 设置开源版插件中的
    小程序首页滑动文章ID
    在小程序里显示的文章分类id
    选择"关于"页面
    开启小程序的评论
    开启评论审核
    海报图片默认地址

前端
1.在uniapp插件市场搜索“wordpress”选择此项目https://ext.dcloud.net.cn/plugin?id=2214
​2.将本项目导入HbuilerX
3.设置/utils/config.js下的域名及首页导航信息
4.保存编译即可

继续阅读 »

WordPress 作为后端生成多端小程序、快应用及APP,可用于资讯、新闻、博客、企业官网等

后端使用开源博客建站系统wordpress和小程序开源版插件,前端使用uniapp。 已测试多端小程序和APP,均可稳定运行,暂时未测试快应用。

因为没有用到互动功能,所以后端其实不用设置appid和密钥那些东西 。

案例演示
安卓APP:https://wwa.lanzous.com/iWVq9e8tc6j
H5演示:https://h5.wpnicer.com/
小程序和快应用没有上线,暂时没有演示

截图展示



使用方法
后端

  1. 搭建wordpress网站,推荐使用nginx1.18+php7.3+mysql5.6
  2. 在wordpress插件市场搜索“REST API TO MiniProgram”安装并启用插件
  3. 设置wordpress固定连接及伪静态规则,推荐使用/%post_id%.html
  4. 在浏览器输入https://xxx.com/wp-json/wp/v2/posts 或在浏览器输入https://xxx.com/wp-json/wp/v2 如果有数据输出则说明设置没有问题,如果出现404或者其他问题则说明伪静态没有设置好
  5. 设置开源版插件中的
    小程序首页滑动文章ID
    在小程序里显示的文章分类id
    选择"关于"页面
    开启小程序的评论
    开启评论审核
    海报图片默认地址

前端
1.在uniapp插件市场搜索“wordpress”选择此项目https://ext.dcloud.net.cn/plugin?id=2214
​2.将本项目导入HbuilerX
3.设置/utils/config.js下的域名及首页导航信息
4.保存编译即可

收起阅读 »

微信小程序下载pdf文件,自动保存.bin的文件,无法查看

微信小程序下载pdf文件,自动保存.bin的文件,无法查看

createTime: 1595323383
filePath: "http://store/wx6b5ff8d1bf9943cf.o6zAJsyHF2wfOo2MSt2yxt16Aky0.bTRP5h5ocYto875c25ee072d790cff21eff14716d9aa.bin"
size: 5004538

怎么解决啊

继续阅读 »

微信小程序下载pdf文件,自动保存.bin的文件,无法查看

createTime: 1595323383
filePath: "http://store/wx6b5ff8d1bf9943cf.o6zAJsyHF2wfOo2MSt2yxt16Aky0.bTRP5h5ocYto875c25ee072d790cff21eff14716d9aa.bin"
size: 5004538

怎么解决啊

收起阅读 »

DCloud 云服务如何开具发票

发票 云服务

> 文档已迁移至新链接:https://uniapp.dcloud.net.cn/dev/finance/invoice.html
> 如有疑问,可以单独发贴咨询。

继续阅读 »

> 文档已迁移至新链接:https://uniapp.dcloud.net.cn/dev/finance/invoice.html
> 如有疑问,可以单独发贴咨询。

收起阅读 »

uniapp 如何在pages引用nvue

uniapp

问题描述
在做小程序的时候遇到个问题,就是悬浮在地图上的cover-view里面不能装input,即使是我把input封装为cover-input在真机上也一样显示不出来。后来看了一篇帖子,说用nvue可以。于是我就新建了一个nvue文件想把原本的vue文件给替换掉。没想到直接报了Error: ENOENT: no such file or directory, open 'E:\Project\uniApp\AnJiaTenancy\pages\search\search.vue'

继续阅读 »

问题描述
在做小程序的时候遇到个问题,就是悬浮在地图上的cover-view里面不能装input,即使是我把input封装为cover-input在真机上也一样显示不出来。后来看了一篇帖子,说用nvue可以。于是我就新建了一个nvue文件想把原本的vue文件给替换掉。没想到直接报了Error: ENOENT: no such file or directory, open 'E:\Project\uniApp\AnJiaTenancy\pages\search\search.vue'

收起阅读 »

app支付宝最简单的接入方式 分享学习

H5支付 应用内支付 支付宝 移动APP

最为简化的app对接支付宝付款功能,之前遇到返回62000,这个主要是channel 这个参数未被定义 指定的付款渠道!
以下代码仅供参考,根据自己的项目实质性修改,使用!本人已测试安卓和ios均可付款成功,后端采用异步验证!传达给服务器,通过数据检索,判断是否充值成功!

// 获取支付通道
var aliChannel = null; // 支付宝支付
var channel = null; //支付通道

//支付宝通道
function zhiyunokrss() //需要进入页面自动执行该串代码 获取app内嵌sdk支付通道
{
plus.payment.getChannels(function(channels){
for (var h in channels) {
var channel=channels[h];
if(channel.id=='qhpay'||channel.id=='appleiap'){ // 屏蔽360和苹果通道
continue;
}

if (channels[h].id == "alipay") {    //筛选支付宝通道  
    aliChannel=channels[h];       //指定支付宝通道  
}   
}         

},function(e){
tishi("获取支付通道失败:"+e.message);
});
}

//执行付款
function chongr(id,crok){
var Hzsh=参数1 安全自定义
var Hssk= 参数2 安全自定义
var nrs = document.getElementById("eduss").value //付款金额
//var PAYSERVER=''; 原生url地址 可根据传值判断 进行支付宝 微信 ios支付方式

    if(id == 'alipay'){      
    PAYSERVER = "http://..............ok.php";  后端版本php  
    channel = aliChannel;      
    mui.ajax(PAYSERVER,{   
        dataType:'text',//服务器返回json格式数据   
        type:'GET',//HTTP请求类型  
        data:{Hzsh:Hzsh.......},    
        timeout:3000,//超时时间设置为10秒;    
        success:function(data){   
        plus.payment.request(channel,data,function(result){    //给新手提示一下:调起支付宝打开支付 channel 指定通道  data 支付宝返回一串订单验证 通过它即可打开支付宝app进入付款页面  
                        tishi("充值成功!");  
                        //关闭页面                                
                        },function(error){   

                         tishi("充值失败"+error.code);   
                        });      

        },    
        error:function(xhr,type,errorThrown){    
        tishi(xhr+'--'+type+'--'+errorThrown) //错误提示  
        }    
    });  

}
}


是不是非常简单,我也研究很近,高手勿喷,仅供新手学习交流!


//后端方面 ok.php
<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: text/plain');

require_once 'aop/AopClient.php';
require_once 'aop/request/AlipayTradeAppPayRequest.php';

$urls = $_REQUEST['cs1'];//编号
$czje = $_REQUEST['cs2'];//金额
$czh = $_REQUEST['cs3'];//账户名

// 获取支付金额
$amount='';
if($_SERVER['REQUEST_METHOD']=='POST'){
$amount=$_POST['total'];
}else{
$amount=$_GET['total'];
}

$total = floatval($amount);
if(!$total){
$total = 1;
}

$aop = new AopClient;
$aop->gatewayUrl = "https://openapi.alipay.com/gateway.do";
$aop->appId = "20**";//appID
$aop->rsaPrivateKey = "支付宝秘钥";//'请填写开发者私钥去头去尾去回车,一行字符串';
$aop->format = "json";
$aop->charset = "UTF-8";
$aop->signType = "RSA2";
$aop->alipayrsaPublicKey = "支付宝秘钥";//请填写支付宝公钥,一行字符串'
$request = new AlipayTradeAppPayRequest();

// 异步通知地址
$notify_url = 'http://app..................jso';//商户外网可以访问的异步地址 支付宝平均按毫秒向服务器发送信息,确认对方是否付款成功 异步位置需要根据支付宝官方反馈支付状态判断支付结果;

// 订单标题
$subject = '会员充值';
// 订单详情
$body = '会员违章服务费';
// 订单号,示例代码使用时间值作为唯一的订单ID号
//$out_trade_no = $urls;

//SDK已经封装掉了公共参数,这里只需要传入业务参数
$bizcontent = "{\"body\":\"".$body."\","
. "\"subject\": \"".$subject."\","
. "\"out_trade_no\": \"".$urls."\","
. "\"timeout_express\": \"30m\","
. "\"total_amount\": \"".$czje."\","
. "\"product_code\":\"QUICK_MSECURITY_PAY\""
. "}";
$request->setNotifyUrl($notify_url);
$request->setBizContent($bizcontent);
//这里和普通的接口调用不同,使用的是sdkExecute
$response = $aop->sdkExecute($request);

// 注意:这里不需要使用htmlspecialchars进行转义,直接返回即可
echo $response; //返回json给app
?>

继续阅读 »

最为简化的app对接支付宝付款功能,之前遇到返回62000,这个主要是channel 这个参数未被定义 指定的付款渠道!
以下代码仅供参考,根据自己的项目实质性修改,使用!本人已测试安卓和ios均可付款成功,后端采用异步验证!传达给服务器,通过数据检索,判断是否充值成功!

// 获取支付通道
var aliChannel = null; // 支付宝支付
var channel = null; //支付通道

//支付宝通道
function zhiyunokrss() //需要进入页面自动执行该串代码 获取app内嵌sdk支付通道
{
plus.payment.getChannels(function(channels){
for (var h in channels) {
var channel=channels[h];
if(channel.id=='qhpay'||channel.id=='appleiap'){ // 屏蔽360和苹果通道
continue;
}

if (channels[h].id == "alipay") {    //筛选支付宝通道  
    aliChannel=channels[h];       //指定支付宝通道  
}   
}         

},function(e){
tishi("获取支付通道失败:"+e.message);
});
}

//执行付款
function chongr(id,crok){
var Hzsh=参数1 安全自定义
var Hssk= 参数2 安全自定义
var nrs = document.getElementById("eduss").value //付款金额
//var PAYSERVER=''; 原生url地址 可根据传值判断 进行支付宝 微信 ios支付方式

    if(id == 'alipay'){      
    PAYSERVER = "http://..............ok.php";  后端版本php  
    channel = aliChannel;      
    mui.ajax(PAYSERVER,{   
        dataType:'text',//服务器返回json格式数据   
        type:'GET',//HTTP请求类型  
        data:{Hzsh:Hzsh.......},    
        timeout:3000,//超时时间设置为10秒;    
        success:function(data){   
        plus.payment.request(channel,data,function(result){    //给新手提示一下:调起支付宝打开支付 channel 指定通道  data 支付宝返回一串订单验证 通过它即可打开支付宝app进入付款页面  
                        tishi("充值成功!");  
                        //关闭页面                                
                        },function(error){   

                         tishi("充值失败"+error.code);   
                        });      

        },    
        error:function(xhr,type,errorThrown){    
        tishi(xhr+'--'+type+'--'+errorThrown) //错误提示  
        }    
    });  

}
}


是不是非常简单,我也研究很近,高手勿喷,仅供新手学习交流!


//后端方面 ok.php
<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: text/plain');

require_once 'aop/AopClient.php';
require_once 'aop/request/AlipayTradeAppPayRequest.php';

$urls = $_REQUEST['cs1'];//编号
$czje = $_REQUEST['cs2'];//金额
$czh = $_REQUEST['cs3'];//账户名

// 获取支付金额
$amount='';
if($_SERVER['REQUEST_METHOD']=='POST'){
$amount=$_POST['total'];
}else{
$amount=$_GET['total'];
}

$total = floatval($amount);
if(!$total){
$total = 1;
}

$aop = new AopClient;
$aop->gatewayUrl = "https://openapi.alipay.com/gateway.do";
$aop->appId = "20**";//appID
$aop->rsaPrivateKey = "支付宝秘钥";//'请填写开发者私钥去头去尾去回车,一行字符串';
$aop->format = "json";
$aop->charset = "UTF-8";
$aop->signType = "RSA2";
$aop->alipayrsaPublicKey = "支付宝秘钥";//请填写支付宝公钥,一行字符串'
$request = new AlipayTradeAppPayRequest();

// 异步通知地址
$notify_url = 'http://app..................jso';//商户外网可以访问的异步地址 支付宝平均按毫秒向服务器发送信息,确认对方是否付款成功 异步位置需要根据支付宝官方反馈支付状态判断支付结果;

// 订单标题
$subject = '会员充值';
// 订单详情
$body = '会员违章服务费';
// 订单号,示例代码使用时间值作为唯一的订单ID号
//$out_trade_no = $urls;

//SDK已经封装掉了公共参数,这里只需要传入业务参数
$bizcontent = "{\"body\":\"".$body."\","
. "\"subject\": \"".$subject."\","
. "\"out_trade_no\": \"".$urls."\","
. "\"timeout_express\": \"30m\","
. "\"total_amount\": \"".$czje."\","
. "\"product_code\":\"QUICK_MSECURITY_PAY\""
. "}";
$request->setNotifyUrl($notify_url);
$request->setBizContent($bizcontent);
//这里和普通的接口调用不同,使用的是sdkExecute
$response = $aop->sdkExecute($request);

// 注意:这里不需要使用htmlspecialchars进行转义,直接返回即可
echo $response; //返回json给app
?>

收起阅读 »

夜间模式/黑暗模式的另一种简单实现思路

夜间模式

前言
项目临近上线,突然说要适配黑暗模式,nvue项目,没有提前设计好的情况下,css换皮简直工程浩大,时间来不及。
那么偷懒时间好巧看到某新闻类app的夜间模式就是一个暗色遮罩(ps:走过一段改变屏幕亮度的弯路),这样灵感不就来了嘛。

正文
1,plus.nativeObj.View创建一个rgba(0,0,0,0.3)遮罩view;
2,设置view的interceptTouchEvent为false,不影响其他页面的点击;
3,使用startAnimation方法在副view上添加一个gif(太阳变月亮的哪种),实现动画效果;
4,打开夜间模式就view.show();startAnimation();就够了。
5,除了开关之外,还有存入storage一个isNight标识,当app进入或者启动页结束后根据isNight来重新显示遮罩view。
另外上述3完全可以用两个view实现,而且更方便。

废话
这种取巧的方法亲测好用,不会影响到原生video或者页面跳转。
ps:在想到这个办法之前已经被自己坑得体无完肤了,抛砖引玉,想知道css换皮在nvue中有没有好的实现方式啊,毕竟无法子类名选择,难道就真的很蛋疼的一个一个的写吗,有没有什么巧妙的方法呢。

继续阅读 »

前言
项目临近上线,突然说要适配黑暗模式,nvue项目,没有提前设计好的情况下,css换皮简直工程浩大,时间来不及。
那么偷懒时间好巧看到某新闻类app的夜间模式就是一个暗色遮罩(ps:走过一段改变屏幕亮度的弯路),这样灵感不就来了嘛。

正文
1,plus.nativeObj.View创建一个rgba(0,0,0,0.3)遮罩view;
2,设置view的interceptTouchEvent为false,不影响其他页面的点击;
3,使用startAnimation方法在副view上添加一个gif(太阳变月亮的哪种),实现动画效果;
4,打开夜间模式就view.show();startAnimation();就够了。
5,除了开关之外,还有存入storage一个isNight标识,当app进入或者启动页结束后根据isNight来重新显示遮罩view。
另外上述3完全可以用两个view实现,而且更方便。

废话
这种取巧的方法亲测好用,不会影响到原生video或者页面跳转。
ps:在想到这个办法之前已经被自己坑得体无完肤了,抛砖引玉,想知道css换皮在nvue中有没有好的实现方式啊,毕竟无法子类名选择,难道就真的很蛋疼的一个一个的写吗,有没有什么巧妙的方法呢。

收起阅读 »

微信小程序 searchbar uniapp中实现

uniapp 自定义组件

uniapp中如何实现https://developers.weixin.qq.com/miniprogram/dev/extended/weui/search.html

类似附件中组件套用效果,其中

组件searchbar需要引用组件cells,cell

组件cell需要引用组件cells

继续阅读 »

uniapp中如何实现https://developers.weixin.qq.com/miniprogram/dev/extended/weui/search.html

类似附件中组件套用效果,其中

组件searchbar需要引用组件cells,cell

组件cell需要引用组件cells

收起阅读 »