HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于BLE蓝牙的一点点经验,希望能给你们多一点摸鱼的时间

步骤
1.初始化蓝牙模块 uni.openBluetoothAdapter
2.搜索设备 uni.startBluetoothDevicesDiscovery 这一步拿到设备Id deviceId
3.连接到设备 uni.createBLEConnection 连接成功后停止扫描 uni.stopBluetoothDevicesDiscovery,断开连接到下次连接需要等待几秒钟,让设备能反应过来,哈哈!
4.获取设备的所有服务uni.getBLEDeviceServices 这里遍历res.services拿到主服务
5.获取到某个服务的所有特征值uni.getBLEDeviceCharacteristics 遍历res.characteristics
6.一般用不到read的特征值,所以不需要保存,只要保存写和订阅通知的
7.这里需要同时满足(item.properties.notify || item.properties.indicate) && item.properties.write这个条件,通知和写必须同时满足,我这边是这样的,只有同时满足的才能发送和订阅成功,另外,只需要订阅一次!
这里记录下此时的服务id和特征值,用于后面写入数据
8.监听数据uni.onBLECharacteristicValueChange 可以放外面,提前监听,不需要等到订阅通知成功后再进行
9.写入数据 uni.writeBLECharacteristicValue 这里可能会遇到发送超过20字节问题,采用分包发送 ;每发送20字节需要sleep一定时间,这个时间也是看设备反应快慢的,这里根据自己的设备尝试设置合适的值.

源代码自己下载观看,觉得对你有一点帮助的,点个赞支持一下,码字不容易

继续阅读 »

步骤
1.初始化蓝牙模块 uni.openBluetoothAdapter
2.搜索设备 uni.startBluetoothDevicesDiscovery 这一步拿到设备Id deviceId
3.连接到设备 uni.createBLEConnection 连接成功后停止扫描 uni.stopBluetoothDevicesDiscovery,断开连接到下次连接需要等待几秒钟,让设备能反应过来,哈哈!
4.获取设备的所有服务uni.getBLEDeviceServices 这里遍历res.services拿到主服务
5.获取到某个服务的所有特征值uni.getBLEDeviceCharacteristics 遍历res.characteristics
6.一般用不到read的特征值,所以不需要保存,只要保存写和订阅通知的
7.这里需要同时满足(item.properties.notify || item.properties.indicate) && item.properties.write这个条件,通知和写必须同时满足,我这边是这样的,只有同时满足的才能发送和订阅成功,另外,只需要订阅一次!
这里记录下此时的服务id和特征值,用于后面写入数据
8.监听数据uni.onBLECharacteristicValueChange 可以放外面,提前监听,不需要等到订阅通知成功后再进行
9.写入数据 uni.writeBLECharacteristicValue 这里可能会遇到发送超过20字节问题,采用分包发送 ;每发送20字节需要sleep一定时间,这个时间也是看设备反应快慢的,这里根据自己的设备尝试设置合适的值.

源代码自己下载观看,觉得对你有一点帮助的,点个赞支持一下,码字不容易

收起阅读 »

uniapp input输入框实现自动选中

uniapp input
<input id="select" v-model="value" :focus='focus' @focus="render._select">  

<script module="render" lang="renderjs">  
    export default {  
        methods: {  
            _select () {  
                document.querySelector('#select input').select()  
            }  
        }  
    }  
</script>

实测Android、ios、H5均可生效

继续阅读 »
<input id="select" v-model="value" :focus='focus' @focus="render._select">  

<script module="render" lang="renderjs">  
    export default {  
        methods: {  
            _select () {  
                document.querySelector('#select input').select()  
            }  
        }  
    }  
</script>

实测Android、ios、H5均可生效

收起阅读 »

uni-app 机智云 GizWifi 原生插件

uni-app 机智云 GizWifi 原生插件

有需要的,可联系我:543610866

uni-app 机智云 GizWifi 原生插件

有需要的,可联系我:543610866

开发一个完整的聊天App,遇到的坑!

登录 升级更新 真机调试 消息推送

使用vue 开发了一个聊天App
功能点

1. 阿里云推送
阿里云移动推送插件 https://ext.dcloud.net.cn/plugin?id=7628
阿里云厂商通道插件 https://ext.dcloud.net.cn/plugin?id=7629

注意点:a. app未上架,只有小米和华为可以推送!并且开发环境下不能推,需要云打包
b. 正确填写证书和包名,并且与阿里云配置相同的包名
c. 在manifest中填写Appkey等配置
d. app模块配置中 勾选Push
e. 华为手机中,有时候黑屏收不到消息,因为黑屏有时候走的是离线推送的通道!
f. 在线推送 使用plus.push.createMessage 创建推送 plus.push.addEventListener('click',func) 监听通知点击事件,然后获取到具体参数 跳转不同页面

2. 在线热更新,整包更新

注意点
a. 热更新使用编辑器打出wgt包 上传到服务端 客户端请求接口获取到url后 使用 uni.downloadFile 下载 再使用 uni.saveFile保存 最后调用
plus.runtime.install(packagePath, { force: true }, installSuccess, installError) install 只能用于热更新!!!!
使用install 安装完包 一定不要用 quit 和 restart 方法退出或重启! 如果使用了第三方插件,quit可能不会杀死后台应用!导致更新包异常,我这里就出现了
createMessage 通知 或者通知点击失效的问题,后面改为让用户手动退出应用
b.整包更新 使用 一定要写第三个参数! 不然小米有的机型会报错!!!!解析失败 或者打不
开浏览器

 plus.runtime.openURL(url,()=>{    
// 兼容小米手机  
plus.runtime.openURL( url,(e) => { },'com.android.browser')    
  })   

3. 登录鉴权
用户打开app 需要判断用户是否登录,我这里在App.vue中引入了 authorization mixins
注意点:
启动图一定要设置为手动关闭模式! 具体设置在全局的app-plus -> splashscreen ->

"splashscreen" : {
"alwaysShowBeforeRender" : false,
"waiting" : false,
"autoclose" : false,
"delay" : 0
},

export default {  
  mixins: [authorization],  
  onLaunch: () => {},  
  methods: {},  
}

authorization

export default {  
  onLaunch() {  
   //判断是否登录  
    this.GET_USER_INFO()  
      .then(() => {  
        // 成功跳转首页  
        uni  
          .switchTab({  
            url: '/pages/home/index',  
          })  
          .then(() => {  
            this.closeSplashscreen()  
          })  
      })  
      .catch(() => {  
        //跳转登录页面  
        logout().then(() => this.closeSplashscreen())  
      })  
  },  
  methods: {  
    ...mapActions('user', ['GET_USER_INFO']),  
    //关闭启动图  
    closeSplashscreen() {  
      // #ifdef APP-PLUS  
      plus.navigator.closeSplashscreen()  
      // #endif  
    },  
  },  
}

4.debug工具,在线上环境经常需要debug 看日志
https://ext.dcloud.net.cn/plugin?id=7183

5..9png自适应启动图
安卓一定所有的分辨率设置不同分辨率的.9png,也就是要有 1080 720 480的.9 不然不生效!

继续阅读 »

使用vue 开发了一个聊天App
功能点

1. 阿里云推送
阿里云移动推送插件 https://ext.dcloud.net.cn/plugin?id=7628
阿里云厂商通道插件 https://ext.dcloud.net.cn/plugin?id=7629

注意点:a. app未上架,只有小米和华为可以推送!并且开发环境下不能推,需要云打包
b. 正确填写证书和包名,并且与阿里云配置相同的包名
c. 在manifest中填写Appkey等配置
d. app模块配置中 勾选Push
e. 华为手机中,有时候黑屏收不到消息,因为黑屏有时候走的是离线推送的通道!
f. 在线推送 使用plus.push.createMessage 创建推送 plus.push.addEventListener('click',func) 监听通知点击事件,然后获取到具体参数 跳转不同页面

2. 在线热更新,整包更新

注意点
a. 热更新使用编辑器打出wgt包 上传到服务端 客户端请求接口获取到url后 使用 uni.downloadFile 下载 再使用 uni.saveFile保存 最后调用
plus.runtime.install(packagePath, { force: true }, installSuccess, installError) install 只能用于热更新!!!!
使用install 安装完包 一定不要用 quit 和 restart 方法退出或重启! 如果使用了第三方插件,quit可能不会杀死后台应用!导致更新包异常,我这里就出现了
createMessage 通知 或者通知点击失效的问题,后面改为让用户手动退出应用
b.整包更新 使用 一定要写第三个参数! 不然小米有的机型会报错!!!!解析失败 或者打不
开浏览器

 plus.runtime.openURL(url,()=>{    
// 兼容小米手机  
plus.runtime.openURL( url,(e) => { },'com.android.browser')    
  })   

3. 登录鉴权
用户打开app 需要判断用户是否登录,我这里在App.vue中引入了 authorization mixins
注意点:
启动图一定要设置为手动关闭模式! 具体设置在全局的app-plus -> splashscreen ->

"splashscreen" : {
"alwaysShowBeforeRender" : false,
"waiting" : false,
"autoclose" : false,
"delay" : 0
},

export default {  
  mixins: [authorization],  
  onLaunch: () => {},  
  methods: {},  
}

authorization

export default {  
  onLaunch() {  
   //判断是否登录  
    this.GET_USER_INFO()  
      .then(() => {  
        // 成功跳转首页  
        uni  
          .switchTab({  
            url: '/pages/home/index',  
          })  
          .then(() => {  
            this.closeSplashscreen()  
          })  
      })  
      .catch(() => {  
        //跳转登录页面  
        logout().then(() => this.closeSplashscreen())  
      })  
  },  
  methods: {  
    ...mapActions('user', ['GET_USER_INFO']),  
    //关闭启动图  
    closeSplashscreen() {  
      // #ifdef APP-PLUS  
      plus.navigator.closeSplashscreen()  
      // #endif  
    },  
  },  
}

4.debug工具,在线上环境经常需要debug 看日志
https://ext.dcloud.net.cn/plugin?id=7183

5..9png自适应启动图
安卓一定所有的分辨率设置不同分辨率的.9png,也就是要有 1080 720 480的.9 不然不生效!

收起阅读 »

云函数使用正则函数判断电话和邮箱

一个很简单且常用的方式,但是碰到了一些坑所以写个帖子记录一下。
事先声明,这个方式是后来想起来uniapp本身提供手机号邮箱注册功能所以去看了一下基础代码才写对的哈哈。

    //判断是否是邮箱  
const isEmail = (str) => {  
    let expr = /^[a-z0-9]{1}[a-z0-9_-]{1,}@[a-z0-9]{1,}(\\.[a-z]{2,})*\\.[a-z]{2,}$/  

    if (expr.test(str)){  
        return true;  
    }  
    return false;  
}  

//判断是否是手机号  
const isPhone = (str) => {  
    let expr = /^1[3456789]\\d{9}$/  

    if (expr.test(str)){  
        return true;  
    }  
    return false;  
}
继续阅读 »

一个很简单且常用的方式,但是碰到了一些坑所以写个帖子记录一下。
事先声明,这个方式是后来想起来uniapp本身提供手机号邮箱注册功能所以去看了一下基础代码才写对的哈哈。

    //判断是否是邮箱  
const isEmail = (str) => {  
    let expr = /^[a-z0-9]{1}[a-z0-9_-]{1,}@[a-z0-9]{1,}(\\.[a-z]{2,})*\\.[a-z]{2,}$/  

    if (expr.test(str)){  
        return true;  
    }  
    return false;  
}  

//判断是否是手机号  
const isPhone = (str) => {  
    let expr = /^1[3456789]\\d{9}$/  

    if (expr.test(str)){  
        return true;  
    }  
    return false;  
}
收起阅读 »

分享云函数调用云函数的一个简陋的解决方法

应用场景:最近需要做一个用户验证的函数,由于还没有学习使用框架是直接分了多个文件夹存放不同的云函数,那么就需要跨文件夹调用云函数。
前情提要:云函数在接受前端返回数值时会获得用户登录凭证。

问题出现:当我A文件夹内的 index.js 调用B文件夹内的 index.js 内的 test函数时,根据官方文档,我们可以像前端一样调用:

// 调用B文件夹对应云函数
await uniCloud.callFunction({
name: 'uni-id-cf',
data: {
action: 'action',
params: params
}
});

实践结果可以在B文件夹内的index.js中打印传输过来的event,但是函数没有得到调用,打印返回值是 {code: 403, msg: '缺少token'},而这段返回值来自于:

const {
action,
uniIdToken
} = event;

//UNI_WYQ:这里的uniID换成新的,保证多人访问不会冲突  
uniID = uniID.createInstance({  
    context  
})  

//event为客户端上传的参数  
console.log('event : '   JSON.stringify(event));  
console.log('context : '   JSON.stringify(context))  

if (!uniIdToken) {  
    return {  
        code: 403,  
        msg: '缺少token'  
    }  
}  

很明显是没有得到uniIdToken,这是本应从前端传输获取的,那么最终修改是手动添加传输uniIdToken:

await uniCloud.callFunction({
name: 'uni-id-cf',
data: {
action: 'action',
params: params
uniIdToken: event.uniIdToken
}
});

虽然仍然会有提示缺少context等,但是确实是可以正常运行了。等以后有更好的解决方法了再回来更新~

继续阅读 »

应用场景:最近需要做一个用户验证的函数,由于还没有学习使用框架是直接分了多个文件夹存放不同的云函数,那么就需要跨文件夹调用云函数。
前情提要:云函数在接受前端返回数值时会获得用户登录凭证。

问题出现:当我A文件夹内的 index.js 调用B文件夹内的 index.js 内的 test函数时,根据官方文档,我们可以像前端一样调用:

// 调用B文件夹对应云函数
await uniCloud.callFunction({
name: 'uni-id-cf',
data: {
action: 'action',
params: params
}
});

实践结果可以在B文件夹内的index.js中打印传输过来的event,但是函数没有得到调用,打印返回值是 {code: 403, msg: '缺少token'},而这段返回值来自于:

const {
action,
uniIdToken
} = event;

//UNI_WYQ:这里的uniID换成新的,保证多人访问不会冲突  
uniID = uniID.createInstance({  
    context  
})  

//event为客户端上传的参数  
console.log('event : '   JSON.stringify(event));  
console.log('context : '   JSON.stringify(context))  

if (!uniIdToken) {  
    return {  
        code: 403,  
        msg: '缺少token'  
    }  
}  

很明显是没有得到uniIdToken,这是本应从前端传输获取的,那么最终修改是手动添加传输uniIdToken:

await uniCloud.callFunction({
name: 'uni-id-cf',
data: {
action: 'action',
params: params
uniIdToken: event.uniIdToken
}
});

虽然仍然会有提示缺少context等,但是确实是可以正常运行了。等以后有更好的解决方法了再回来更新~

收起阅读 »

前端开发者群

前端开发者群,本群讨论关于前端的相关问题,如:面试,招聘,发展前景,技术疑问
码如下,有需要的加:

继续阅读 »

前端开发者群,本群讨论关于前端的相关问题,如:面试,招聘,发展前景,技术疑问
码如下,有需要的加:

收起阅读 »

10年+ 全栈经验,全职接单

外包 外包接单

10年+ 全栈经验,全职接单,QQ:787436120 vx: Cr1mes_9

10年+ 全栈经验,全职接单,QQ:787436120 vx: Cr1mes_9

微信支付code:100报错

微信支付

本人出现情况:真机运行,hbuilderx基座。第一次支付成功,以后支付就是code:100报错
1.检查支付配置数据,但是前端嘛,没啥检查一看就对,再说我都支付成功了,花钱了,所以数据大差不差应该没错。

  1. 所以我决定自定义基座,结果报错code:100
  2. 啥原因,我百度。最后就是打包成apk给别的同事测试,发现可以正常支付,由此,我使用另一个账号支付,成功!
  3. 综上,解决办法。打包apk让别的冤大头花钱去。(可能是微信测试支付时有缓存,因为我那个测试支付报错的微信是一直code:100)
继续阅读 »

本人出现情况:真机运行,hbuilderx基座。第一次支付成功,以后支付就是code:100报错
1.检查支付配置数据,但是前端嘛,没啥检查一看就对,再说我都支付成功了,花钱了,所以数据大差不差应该没错。

  1. 所以我决定自定义基座,结果报错code:100
  2. 啥原因,我百度。最后就是打包成apk给别的同事测试,发现可以正常支付,由此,我使用另一个账号支付,成功!
  3. 综上,解决办法。打包apk让别的冤大头花钱去。(可能是微信测试支付时有缓存,因为我那个测试支付报错的微信是一直code:100)
收起阅读 »

如何实现苹果登录授权 Sign In with Apple

App打包 移动APP App离线打包

iOS 开发苹果登录授权 Sign In with Apple
网上关于苹果登录授权的文章已经已有很多,但大多数介绍有些繁琐,实际操作起来很简单。核心要获取到三个参数:team_id, client_id, key_id,再通过 uapp 命令生成 JWT Token 给后端就完事了。

苹果审核有一条规定,如果出现比如微信、QQ、Facebook等第三方账号登录时,必须要加上苹果登录,否则无法通过审核。苹果登录只针对 iOS 13及以上版本有效。

1、获取 team_id 和 client_id
进入 Identifiers 页:https://developer.apple.com/account/resources/identifiers/list

点 Identifiers+ ,注意这里输入的 com.code0xff.uapp.login 就是 client_id,换成你自己的。

下面的服务列表选中 Sign in with Apple, 点 Edit ,输入你自己服务器端的 Callback URL:

至此,我们已成功获得到两个参数 team_id 和 client_id。

2、获取 key.txt 和 key_id
进入 Keys 页:https://developer.apple.com/account/resources/authkeys/list

点 Keys+ 创建 Key,依次操作:输入 Key Name,选中 Sign in with Apple,Configure。

Configure 页面,选中在哪个 App 中使用:

点 Download,下载后文件改名为 key.txt,放入工程的 jwt 目录下:

jwt
├── config.json
└── key.txt

至此,我们已成功获得 key.txt 和 key_id。

3、通过 uapp 获得 JWT Token
JWT Token 是给服务端的,有效期6个月,所以要记得在快到6个月的时候重新生成替换。

如果还没有安装 uapp,可以通过 npm 安装:

npm i -g uapp
做完上面 jwt 目录下已经有了 key.txt,下面创建 config.json 并放入上面获得的 team_id, client_id, key_id。

jwt/config.json 内容如下:

{
"team_id": "3DSM494K6L",
"client_id": "com.code0xff.uapp.login",
"key_id": "3C7FMSZC8Z"
}
然后执行:

uapp info
就可以看到 JWT Token 了,发给后端使用既可。

继续阅读 »

iOS 开发苹果登录授权 Sign In with Apple
网上关于苹果登录授权的文章已经已有很多,但大多数介绍有些繁琐,实际操作起来很简单。核心要获取到三个参数:team_id, client_id, key_id,再通过 uapp 命令生成 JWT Token 给后端就完事了。

苹果审核有一条规定,如果出现比如微信、QQ、Facebook等第三方账号登录时,必须要加上苹果登录,否则无法通过审核。苹果登录只针对 iOS 13及以上版本有效。

1、获取 team_id 和 client_id
进入 Identifiers 页:https://developer.apple.com/account/resources/identifiers/list

点 Identifiers+ ,注意这里输入的 com.code0xff.uapp.login 就是 client_id,换成你自己的。

下面的服务列表选中 Sign in with Apple, 点 Edit ,输入你自己服务器端的 Callback URL:

至此,我们已成功获得到两个参数 team_id 和 client_id。

2、获取 key.txt 和 key_id
进入 Keys 页:https://developer.apple.com/account/resources/authkeys/list

点 Keys+ 创建 Key,依次操作:输入 Key Name,选中 Sign in with Apple,Configure。

Configure 页面,选中在哪个 App 中使用:

点 Download,下载后文件改名为 key.txt,放入工程的 jwt 目录下:

jwt
├── config.json
└── key.txt

至此,我们已成功获得 key.txt 和 key_id。

3、通过 uapp 获得 JWT Token
JWT Token 是给服务端的,有效期6个月,所以要记得在快到6个月的时候重新生成替换。

如果还没有安装 uapp,可以通过 npm 安装:

npm i -g uapp
做完上面 jwt 目录下已经有了 key.txt,下面创建 config.json 并放入上面获得的 team_id, client_id, key_id。

jwt/config.json 内容如下:

{
"team_id": "3DSM494K6L",
"client_id": "com.code0xff.uapp.login",
"key_id": "3C7FMSZC8Z"
}
然后执行:

uapp info
就可以看到 JWT Token 了,发给后端使用既可。

收起阅读 »

我需要一个支持265的视频播放器插件

插件开发

具体功能实现类似uniapp 的video组件,但是需要支持265视频编码格式

具体功能实现类似uniapp 的video组件,但是需要支持265视频编码格式

HBuilderX 真机调试连接手机经常搜索不到设备问题解决办法!

真机调试

解决办法:第一步 打开终端命令行 首先查看adb devices 查看当前adb连接设备列表
第二步 输入命令 adb kill-server 杀死服务
第三步重启服务 adb start-server 基本上就可以连接上了!

继续阅读 »

解决办法:第一步 打开终端命令行 首先查看adb devices 查看当前adb连接设备列表
第二步 输入命令 adb kill-server 杀死服务
第三步重启服务 adb start-server 基本上就可以连接上了!

收起阅读 »