HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

vue-property-decorator 中 Watch 的使用,监控数据组件变化

在前端开发的时候为了方便常会用到组件,这个时候就涉及到传值,并且用input时使用v-model绑定的值需要是本地的备份参数,这就容易引发一个问题,就是当外部值变换后,本地不能及时重新赋值。

这里有篇文章对vue-property-decorator的使用写的非常详细:
https://juejin.cn/post/6844903741456384014

而监控数值变换最顺手的是Watch监控,值得注意是,当我们引用时需要辨别是否import来源正确,因为有很多Watch,所以自动引入容易出现混乱且很难注意到重点是报错不会告诉你(巨坑)需要一个版本一个版本回退才能发现。

正确的import:
import {Vue, Component, Emit, Prop, Watch} from 'vue-property-decorator';

部分代码:

<input v-model="temp_label" :placeholder="placeholder.type" />

@Prop({default: ''}) label!:string;

private temp_label = this.label;

@Watch('label', { immediate: true })
onLabelChanged(val: string, oldVal: string) {
this.temp_label = val;
}

关于Watch的高级用法可以参考这篇文章:
https://segmentfault.com/a/1190000038222430

继续阅读 »

在前端开发的时候为了方便常会用到组件,这个时候就涉及到传值,并且用input时使用v-model绑定的值需要是本地的备份参数,这就容易引发一个问题,就是当外部值变换后,本地不能及时重新赋值。

这里有篇文章对vue-property-decorator的使用写的非常详细:
https://juejin.cn/post/6844903741456384014

而监控数值变换最顺手的是Watch监控,值得注意是,当我们引用时需要辨别是否import来源正确,因为有很多Watch,所以自动引入容易出现混乱且很难注意到重点是报错不会告诉你(巨坑)需要一个版本一个版本回退才能发现。

正确的import:
import {Vue, Component, Emit, Prop, Watch} from 'vue-property-decorator';

部分代码:

<input v-model="temp_label" :placeholder="placeholder.type" />

@Prop({default: ''}) label!:string;

private temp_label = this.label;

@Watch('label', { immediate: true })
onLabelChanged(val: string, oldVal: string) {
this.temp_label = val;
}

关于Watch的高级用法可以参考这篇文章:
https://segmentfault.com/a/1190000038222430

收起阅读 »

uni-app 解决 ios iap 苹果支付 丢单问题

解决思路:
1.苹果支付,没有绑定支付方式,绑定支付方式,然后支付之后,会造成丢单问题,uni.requestPayment,会回调失败,

  1. 拿到小票,进行二次验证,即可解决

主要难点是,怎么拿到小票,现在已经找到方法

有偿提供代码,QQ:543610866

继续阅读 »

解决思路:
1.苹果支付,没有绑定支付方式,绑定支付方式,然后支付之后,会造成丢单问题,uni.requestPayment,会回调失败,

  1. 拿到小票,进行二次验证,即可解决

主要难点是,怎么拿到小票,现在已经找到方法

有偿提供代码,QQ:543610866

收起阅读 »

引入阿里巴巴普惠字体 报错

引入字体

Failed to decode downloaded font: file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/static/Alibaba-PuHuiTi-Medium.ttf at __uniappview.html:0

报错的原因应该是字体文件的命名不规范导致 ,简化成 puhuitimedium.ttf 之后就可以了


    @font-face {  
        font-family: AlibabaPuHuiTiMedium;  
        src: url('@/static/puhuitimedium.ttf') format('truetype');  
    }  

如果是画图 canvas的话 参看插件 https://ext.dcloud.net.cn/plugin?id=954

继续阅读 »

Failed to decode downloaded font: file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/static/Alibaba-PuHuiTi-Medium.ttf at __uniappview.html:0

报错的原因应该是字体文件的命名不规范导致 ,简化成 puhuitimedium.ttf 之后就可以了


    @font-face {  
        font-family: AlibabaPuHuiTiMedium;  
        src: url('@/static/puhuitimedium.ttf') format('truetype');  
    }  

如果是画图 canvas的话 参看插件 https://ext.dcloud.net.cn/plugin?id=954

收起阅读 »

uniapp ble低功耗蓝牙开发总结

低功耗蓝牙
  1. 在安卓系统中:订阅多个特征值,notifyBLECharacteristicValueChange必须在获取完所有的特征值以后串行notify。notifyBLECharacteristicValueChange成功以后notify第二个特征值,第二个特征值notify成功以后notify第三个特征值...
  2. 在鸿蒙系统中:订阅多个特征值,writeBLECharacteristicValue成功以后无法在onBLECharacteristicValueChange回调中获取到新的特征值变化。需要在writeBLECharacteristicValue成功以后重新notifyBLECharacteristicValueChange需要变化的特征值。
  3. 获取服务需要添加定时器延迟获取,具体时间看设备
  4. 在鸿蒙系统中读特征值property no support 或者 写特征值失败的情况。需要在失败的回调函数中重新读或写

继续阅读 »
  1. 在安卓系统中:订阅多个特征值,notifyBLECharacteristicValueChange必须在获取完所有的特征值以后串行notify。notifyBLECharacteristicValueChange成功以后notify第二个特征值,第二个特征值notify成功以后notify第三个特征值...
  2. 在鸿蒙系统中:订阅多个特征值,writeBLECharacteristicValue成功以后无法在onBLECharacteristicValueChange回调中获取到新的特征值变化。需要在writeBLECharacteristicValue成功以后重新notifyBLECharacteristicValueChange需要变化的特征值。
  3. 获取服务需要添加定时器延迟获取,具体时间看设备
  4. 在鸿蒙系统中读特征值property no support 或者 写特征值失败的情况。需要在失败的回调函数中重新读或写

收起阅读 »

vue3 setup 语法糖中使用uniui popup

popup vue3

官方文档中还有些例子是vue2的写法

下面代码是一个简单的示例,供大家参考。

<template>  
  <view>  
            <view>  
            <!-- 提示信息弹窗 -->  
            <uni-popup ref="message" type="message">  
                <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>  
            </uni-popup>  
        </view>  

            <button type="primary" @click="messageToggle('success')">MESSAGE</button>  

  </view>  
</template>  

<script setup>  

    import {  
        ref,  
        onMounted  
    } from 'vue'  

    const message = ref(null)  
    const msgType = ref('')  
    const messageText = ref('')  

    onMounted(()=>{  
        console.log('onMounted')  
        // console.log(message.value)  
    })  
    function messageToggle(type) {  
        msgType.value = type  
        messageText.value = `这是一条${type}消息提示`  
        // this.$refs.message.open()  
        message.value.open()  
    }  
</script>  
继续阅读 »

官方文档中还有些例子是vue2的写法

下面代码是一个简单的示例,供大家参考。

<template>  
  <view>  
            <view>  
            <!-- 提示信息弹窗 -->  
            <uni-popup ref="message" type="message">  
                <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>  
            </uni-popup>  
        </view>  

            <button type="primary" @click="messageToggle('success')">MESSAGE</button>  

  </view>  
</template>  

<script setup>  

    import {  
        ref,  
        onMounted  
    } from 'vue'  

    const message = ref(null)  
    const msgType = ref('')  
    const messageText = ref('')  

    onMounted(()=>{  
        console.log('onMounted')  
        // console.log(message.value)  
    })  
    function messageToggle(type) {  
        msgType.value = type  
        messageText.value = `这是一条${type}消息提示`  
        // this.$refs.message.open()  
        message.value.open()  
    }  
</script>  
收起阅读 »

全类型文件选择上传组件-多端支持

上传文件 文件

官方一直不出app端选择非图片视频文件api,没办法只能自己实现了,如果你翻到这篇文章,组件地址给你:

全类型文件选择上传组件地址
https://ext.dcloud.net.cn/plugin?id=5459

继续阅读 »

官方一直不出app端选择非图片视频文件api,没办法只能自己实现了,如果你翻到这篇文章,组件地址给你:

全类型文件选择上传组件地址
https://ext.dcloud.net.cn/plugin?id=5459

收起阅读 »

关于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;  
}
收起阅读 »