HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uniapp打包的App启动微信小程序

微信小程序

使用微信接口生成sheme路径(https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html),然后使用plus.runtime.openURL("weixin://dl/business/?t=xid5O4zsPiv")启动

继续阅读 »

使用微信接口生成sheme路径(https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html),然后使用plus.runtime.openURL("weixin://dl/business/?t=xid5O4zsPiv")启动

收起阅读 »

个推【程序员双十一专属福利】已到账,速来!

消息推送

又是一年“双十一”,

全民都在买买买。

当然,程序员们也没落下,

格子衫、双肩包、机械键盘、生发套餐......

程序员的购物车也是满满当当图片

图片
作为广大开发者的好伙伴,

这个“双十一”,

个推也为大家带来了一波超强福利!

30天消息推送VIP服务,免费送

智能手环、激光键盘、防脱大礼包,免费领

开发神器和潮流好物,等你抱回家!

快来参与吧

继续阅读 »

又是一年“双十一”,

全民都在买买买。

当然,程序员们也没落下,

格子衫、双肩包、机械键盘、生发套餐......

程序员的购物车也是满满当当图片

图片
作为广大开发者的好伙伴,

这个“双十一”,

个推也为大家带来了一波超强福利!

30天消息推送VIP服务,免费送

智能手环、激光键盘、防脱大礼包,免费领

开发神器和潮流好物,等你抱回家!

快来参与吧

收起阅读 »

uni-app一键登录

一键登录

下载附件看吧

下载附件看吧

nuve vue3 封装接口请求

http.js

function http(url, method='get', data){
uni.showLoading({mask:true});
return new Promise((resolve, reject) => {
uni.request({
url:'http://aichat.jucd.cn/api/'+ url,
method: method,
header:{
token:uni.getStorageSync('token'),
},
success: (res) => {
resolve(res);
},
fail:(res) => {
uni.showModal({
content: '网络联接失败',
showCancel: false
});
reject(err)
},
complete: (res) => {
uni.hideLoading();
}
})
})

return url + getApp().globalData.apiroot  + uni.getStorageSync('token');  

}
export default http;

main.js
import http from './common/http.js'
app.config.globalProperties.$http = http;

页面调用

getApp().$http('get/base').then(res => {
this.http_val = res;
console.log(res.statusCode)
})

继续阅读 »

http.js

function http(url, method='get', data){
uni.showLoading({mask:true});
return new Promise((resolve, reject) => {
uni.request({
url:'http://aichat.jucd.cn/api/'+ url,
method: method,
header:{
token:uni.getStorageSync('token'),
},
success: (res) => {
resolve(res);
},
fail:(res) => {
uni.showModal({
content: '网络联接失败',
showCancel: false
});
reject(err)
},
complete: (res) => {
uni.hideLoading();
}
})
})

return url + getApp().globalData.apiroot  + uni.getStorageSync('token');  

}
export default http;

main.js
import http from './common/http.js'
app.config.globalProperties.$http = http;

页面调用

getApp().$http('get/base').then(res => {
this.http_val = res;
console.log(res.statusCode)
})

收起阅读 »

笨蛋!不要点进来啊!!!

额,我应该算是HbuilderX老用户了,从开始学习html用notepad,第一个IDEA就是HbuilderX,后来又尝试过各种软件(nodepad++, idea, webstorm, vscode, subline...),只有一个原因,HbuilderX图标太丑、控制台太丑,特别是接触到VScode这种还有插件辅助的插件,没有对比就没有伤害嘛,所以有点更那啥了,但是我用其他软件就发现,其他软件的写代码实在难写,我双击标签也不能选中所有包括子类的标签,双击不能选中行,以及SB vscode的多行注释蠢得一笔等等,所以我始终用不惯其他软件,在我心中HbuilderX是中用不中看,VSCODE是中看不中用,有n次用Hbuilderx敲代码正爽,然后看界面,这图标、控制台、没插件....,很不是滋味。因为我是前端嘛,对美有一种追求,尤其是看到被我美化后的VSCODE。我想我应该会慢慢习惯VSCODE吧

继续阅读 »

额,我应该算是HbuilderX老用户了,从开始学习html用notepad,第一个IDEA就是HbuilderX,后来又尝试过各种软件(nodepad++, idea, webstorm, vscode, subline...),只有一个原因,HbuilderX图标太丑、控制台太丑,特别是接触到VScode这种还有插件辅助的插件,没有对比就没有伤害嘛,所以有点更那啥了,但是我用其他软件就发现,其他软件的写代码实在难写,我双击标签也不能选中所有包括子类的标签,双击不能选中行,以及SB vscode的多行注释蠢得一笔等等,所以我始终用不惯其他软件,在我心中HbuilderX是中用不中看,VSCODE是中看不中用,有n次用Hbuilderx敲代码正爽,然后看界面,这图标、控制台、没插件....,很不是滋味。因为我是前端嘛,对美有一种追求,尤其是看到被我美化后的VSCODE。我想我应该会慢慢习惯VSCODE吧

收起阅读 »

uniapp原生tabbar凸起跳转解决方案

1.tabBar list数量设置为偶数添加 把需要突出跳转的tabbar页添加进去

  1. app.vue onLaunch下添加监听中间突出事件
    //监听tabbar中间按钮
    uni.onTabBarMidButtonTap((e) => {
    console.log(11111);
    uni.switchTab({
    url: '跳转地址', //如果tabBar list没有设置是挑战不了的 所以设置一个
    });
    })

  2. 隐藏多余的tabBar (骚操作)
    app.vue onLaunch 下添加
    uni.setTabBarItem({
    index: 2,//要隐藏的tabBar
    visible:false
    })
    uni.setTabBarItem({
    index: 3,//要隐藏的tabBar
    visible:false
    })

继续阅读 »

1.tabBar list数量设置为偶数添加 把需要突出跳转的tabbar页添加进去

  1. app.vue onLaunch下添加监听中间突出事件
    //监听tabbar中间按钮
    uni.onTabBarMidButtonTap((e) => {
    console.log(11111);
    uni.switchTab({
    url: '跳转地址', //如果tabBar list没有设置是挑战不了的 所以设置一个
    });
    })

  2. 隐藏多余的tabBar (骚操作)
    app.vue onLaunch 下添加
    uni.setTabBarItem({
    index: 2,//要隐藏的tabBar
    visible:false
    })
    uni.setTabBarItem({
    index: 3,//要隐藏的tabBar
    visible:false
    })

收起阅读 »

关于uniPush消息推送的一些经验

unipush

如果进行App项目的开发并且需要处理消息推送的业务,可以使用uniPush来实现.
一.准备基础
1.申请dcloud开发者并且认证即可.这是登录/注册链接: dcloud开发者中心

  1. 申请厂商开发者账号,如果小米,华为等.
    说明:
    dcloud开发者中心提供uniPush应用配置,厂商推送设置,这里边你可以提供cid以及厂商推送配置进行调试App的消息推送,还有另外一点是厂商推送的提供是为了保证App离线时你的消息推送和透传消息可以正常到达App.

更多具体指南可以访问: uniPush使用指南

二.dcloud开发者中心
1.请确保你的App应用已存在或者新增一个,配置应用的AppID要相同,项目上的AppID和开发者中心-应用列表的AppID是同一个的,切勿搞混.查看项目的AppID可以在根目录的【manifest.json】-基础配置中查看.在dcloud开发者中心则是【我创建的应用】中查看,找到项目应用后点击【应用名称】进入应用界面.

  1. 配置uniPush,在uniPush-配置管理中填写配置,你的App包名需要和打包时的包名一致.例如云打包时填写的【Android包名】是io.dcloud.hbuilder,那么你的uniPush包名也是一样.
  2. 厂商推送配置.华为开发者联盟
    你可以根据你的调试机型去申请相应的厂商开发者账号,在申请认证通过后返回dcloud开发者中心配置厂商推送设置即可.下面以【华为开发者联盟】厂商为例:
    a.注册账户并认证
    b.前往【管理中心】-【开发服务-PUSH】中添加项目,如图:

    然后在项目中增加应用,填写应用信息,包名也需要和项目的包名一致,不可乱填,如图:


现在你需要配置【SHA256指纹证书】,这个指纹证书是在你云打包App时使用到的证书中,如果不知道如何查看,可以查看这个:证书生成指南
在填写好华为PUSH应用配置后,回到dcloud开发者中心中修改uniPush-厂商推送设置-华为的信息,其中,
AppID => APP ID
AppSecret => Client Secret
PkgName => App包名(请注意,所以的App均需一致!)
agconnect-services.json文件可以在华为开发者联盟-我的项目中下载下来,也就是刚刚新增项目中的应用,拿来这边直接上传即可,填写好后保存。

推送厂商设置主要是为了处理App离线通知而设置的,不然当用户没有活跃在App的时候是无法收到消息推送和透传消息的,请注意。还有就是各厂商推送的需要可能会不太一样,比如有些厂商推送离线消息需要上架到应用市场才可以。

三、测试推送消息和透传消息
在此之前我们需要获得clientID(cid),可以使用一下代码:
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo();
// #endif

这里会返回,id,token,clientid,AppID,AppKey,其中clientID就是我们需要的东西,假如启动App后该方法不返回任何数据,可以使用settimeout延迟一点时间再获取也可以。

监听消息推送和透传消息可以使用如下代码:
plus.push.addEventListener("click", (msg) => {
this.log({'type': 'click', 'data': JSON.stringify(msg)})
})
plus.push.addEventListener("receive", (msg) => {
this.log({'type': 'receive', 'data': JSON.stringify(msg)})
})

不同的是click事件可以响应消息推送和透传消息,只要在通知栏可以看得到的消息,点击后都可以响应。而对于receive事件来说仅是接受透传消息,你在发送透传消息的时候请使用【非标准格式】消息体即可进入receive事件中。
具体说明可见,uni-app使用unipush推送问题汇总

有了cid后,我们可以dcloud开发者中心-uniPush的【创建推送】中测试消息推送和透传消息功能,填入相应的信息即可然后点击【预览】即可。

需要注意的是,获取cid不可使用【基座调试】,需要云打包后把安装包安装到手机上进行调试测试,在这里获取到的cid才是可以使用的。

一些可以帮助的链接:
Unipush常见问题
UniPush使用指南

继续阅读 »

如果进行App项目的开发并且需要处理消息推送的业务,可以使用uniPush来实现.
一.准备基础
1.申请dcloud开发者并且认证即可.这是登录/注册链接: dcloud开发者中心

  1. 申请厂商开发者账号,如果小米,华为等.
    说明:
    dcloud开发者中心提供uniPush应用配置,厂商推送设置,这里边你可以提供cid以及厂商推送配置进行调试App的消息推送,还有另外一点是厂商推送的提供是为了保证App离线时你的消息推送和透传消息可以正常到达App.

更多具体指南可以访问: uniPush使用指南

二.dcloud开发者中心
1.请确保你的App应用已存在或者新增一个,配置应用的AppID要相同,项目上的AppID和开发者中心-应用列表的AppID是同一个的,切勿搞混.查看项目的AppID可以在根目录的【manifest.json】-基础配置中查看.在dcloud开发者中心则是【我创建的应用】中查看,找到项目应用后点击【应用名称】进入应用界面.

  1. 配置uniPush,在uniPush-配置管理中填写配置,你的App包名需要和打包时的包名一致.例如云打包时填写的【Android包名】是io.dcloud.hbuilder,那么你的uniPush包名也是一样.
  2. 厂商推送配置.华为开发者联盟
    你可以根据你的调试机型去申请相应的厂商开发者账号,在申请认证通过后返回dcloud开发者中心配置厂商推送设置即可.下面以【华为开发者联盟】厂商为例:
    a.注册账户并认证
    b.前往【管理中心】-【开发服务-PUSH】中添加项目,如图:

    然后在项目中增加应用,填写应用信息,包名也需要和项目的包名一致,不可乱填,如图:


现在你需要配置【SHA256指纹证书】,这个指纹证书是在你云打包App时使用到的证书中,如果不知道如何查看,可以查看这个:证书生成指南
在填写好华为PUSH应用配置后,回到dcloud开发者中心中修改uniPush-厂商推送设置-华为的信息,其中,
AppID => APP ID
AppSecret => Client Secret
PkgName => App包名(请注意,所以的App均需一致!)
agconnect-services.json文件可以在华为开发者联盟-我的项目中下载下来,也就是刚刚新增项目中的应用,拿来这边直接上传即可,填写好后保存。

推送厂商设置主要是为了处理App离线通知而设置的,不然当用户没有活跃在App的时候是无法收到消息推送和透传消息的,请注意。还有就是各厂商推送的需要可能会不太一样,比如有些厂商推送离线消息需要上架到应用市场才可以。

三、测试推送消息和透传消息
在此之前我们需要获得clientID(cid),可以使用一下代码:
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo();
// #endif

这里会返回,id,token,clientid,AppID,AppKey,其中clientID就是我们需要的东西,假如启动App后该方法不返回任何数据,可以使用settimeout延迟一点时间再获取也可以。

监听消息推送和透传消息可以使用如下代码:
plus.push.addEventListener("click", (msg) => {
this.log({'type': 'click', 'data': JSON.stringify(msg)})
})
plus.push.addEventListener("receive", (msg) => {
this.log({'type': 'receive', 'data': JSON.stringify(msg)})
})

不同的是click事件可以响应消息推送和透传消息,只要在通知栏可以看得到的消息,点击后都可以响应。而对于receive事件来说仅是接受透传消息,你在发送透传消息的时候请使用【非标准格式】消息体即可进入receive事件中。
具体说明可见,uni-app使用unipush推送问题汇总

有了cid后,我们可以dcloud开发者中心-uniPush的【创建推送】中测试消息推送和透传消息功能,填入相应的信息即可然后点击【预览】即可。

需要注意的是,获取cid不可使用【基座调试】,需要云打包后把安装包安装到手机上进行调试测试,在这里获取到的cid才是可以使用的。

一些可以帮助的链接:
Unipush常见问题
UniPush使用指南

收起阅读 »

这是HbuilderX最新功能吗?

> 可视化diff

> 可视化diff

UNIAPP更新尽扯淡

更新

UNIAPP更新尽扯淡,每次更新都能出bug,明明以前版本调试好的,更新uni之后就不能用了。

UNIAPP更新尽扯淡,每次更新都能出bug,明明以前版本调试好的,更新uni之后就不能用了。

uniapp商城实战之uView UI框架前端极速开发教程

自定义组件 组件 视频教程 uniapp

uView框架前端极速开发课程已发布上线 https://edu.csdn.net/course/detail/35573 共108多节,包含了uview官网中90%多的组件,又开发了大量的自定义组件,奠定了大家以后独立开发多端应用的基础,现在有优惠,需要的抓紧啦!

uniapp商城实战之uView UI框架前端极速开发

继续阅读 »

uView框架前端极速开发课程已发布上线 https://edu.csdn.net/course/detail/35573 共108多节,包含了uview官网中90%多的组件,又开发了大量的自定义组件,奠定了大家以后独立开发多端应用的基础,现在有优惠,需要的抓紧啦!

uniapp商城实战之uView UI框架前端极速开发

收起阅读 »

如果有用高德地图的,3.2.9以上版本尽量不要更新

map nvue 高德地图

目前3.2.9以上版本,第一次加载应用,第一次进入map页面,map会有大概30-50s的灰色方格页面展示,目前官方意思是等高德地图的官方来做适配- -。虽然不是很理解,官方目前好像也没有说是否可有以降高德地图版本的方法,如果有在nvue中用高德地图的,尽量不要更新3.2.9以上版本。

继续阅读 »

目前3.2.9以上版本,第一次加载应用,第一次进入map页面,map会有大概30-50s的灰色方格页面展示,目前官方意思是等高德地图的官方来做适配- -。虽然不是很理解,官方目前好像也没有说是否可有以降高德地图版本的方法,如果有在nvue中用高德地图的,尽量不要更新3.2.9以上版本。

收起阅读 »