HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app二维码、条形码扫码自定义

uniapp

uni-app二维码、条形码扫码自定义

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下scan.vue文件拷贝到自己项目目录下

2.插件全局配置

  • 在项目里main.js中配置如下代码
import scan from './components/scan.vue'  

Vue.component('scan',scan)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <scan @getCode="getScanCode"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  
            //获取扫码控件  
            getScanCode(val){  
                console.log(val)  
            },  
        }  
    }  
</script>  

<style>  

</style>  
兼容性

uni-app项目ios、android都兼容

继续阅读 »

uni-app二维码、条形码扫码自定义

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下scan.vue文件拷贝到自己项目目录下

2.插件全局配置

  • 在项目里main.js中配置如下代码
import scan from './components/scan.vue'  

Vue.component('scan',scan)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <scan @getCode="getScanCode"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  
            //获取扫码控件  
            getScanCode(val){  
                console.log(val)  
            },  
        }  
    }  
</script>  

<style>  

</style>  
兼容性

uni-app项目ios、android都兼容

收起阅读 »

【经验分享】uniapp的input安卓自动聚焦和双向绑定安卓5.1局部组件失效

input

自动聚焦爬坑
需求:在扫码pda扫码然后每次扫完需要自动input
爬坑:一开始,我设置focus,在浏览器调试可以,但打包成安卓运行在5.1就会失效。经验就是:

    <input class="uni-input"  @confirm="onKeyInput"  
             :focus='setFocus' placeholder="请扫描条码" v-model="inputValue" disable=true @blur='resetFocus' @focus="addStyle" />  

export default {  
        components: {  
            mpvuePicker  
        },  
        data() {  
            return {  
                setFocus: false,  
            };  
        },  
        methods: {  
            resetFocus() {  
                this.setFocus = false;  
            }  
               }}

在失去焦点的时候 一定要把focus设置为 false,然后在别的事件触发完,再设置为true

            postProductInfo: function(product = {}) {  
                let _data = product;  
                uni.request({  
                    url: url,  
                    method: 'POST',  
                    data: _data,  
                    success: (res) => {  
                        uni.showToast({  
                            title: res.data.msg,  
                            duration: 1000  
                        });  
                        this.stockTimeNum()  
                        setTimeout(() => {  
                            this.setFocus = true  
                        }, 400)  
                    }  
                })  
            },

比如这里,坑就是之前我之前已经在某个地方写了this.setFocus = true,页面确实聚焦了,但是在有toast,下面的列表举荐渲染的时候,页面的input会闪一下,导致重新失去焦点,这时候需要自己找下在哪是最后一次渲染完 然后重新聚焦。

安卓5.1双向绑定失效

我在安卓8.0没问题 但是在pda扫码机器上 在动态刷新已扫码数量的时候,会不更新。控制台打印信息为:请求成功,但是无数据。不敢复现bug截图了。

解决办法:

        data() {  
            return {  
                pickerText: '',  
                scope: ''  
            };  
        },  
               methods: {  
            onConfirm(e) {  
                this.pickerText = e  
                this.scope = this.pickerText.value[0]   
                this.$nextTick(function() {  
                    this.stockTimeNum() // 这里的请求方法我直接直接使用this.pickerText.value[0] 请求传餐,会在5.1失效。。。爬坑时间半天。  
                    this.setFocus = true  
                })  
            }  
}

ps:爬了一天T.T。感谢uniapp团队。

继续阅读 »

自动聚焦爬坑
需求:在扫码pda扫码然后每次扫完需要自动input
爬坑:一开始,我设置focus,在浏览器调试可以,但打包成安卓运行在5.1就会失效。经验就是:

    <input class="uni-input"  @confirm="onKeyInput"  
             :focus='setFocus' placeholder="请扫描条码" v-model="inputValue" disable=true @blur='resetFocus' @focus="addStyle" />  

export default {  
        components: {  
            mpvuePicker  
        },  
        data() {  
            return {  
                setFocus: false,  
            };  
        },  
        methods: {  
            resetFocus() {  
                this.setFocus = false;  
            }  
               }}

在失去焦点的时候 一定要把focus设置为 false,然后在别的事件触发完,再设置为true

            postProductInfo: function(product = {}) {  
                let _data = product;  
                uni.request({  
                    url: url,  
                    method: 'POST',  
                    data: _data,  
                    success: (res) => {  
                        uni.showToast({  
                            title: res.data.msg,  
                            duration: 1000  
                        });  
                        this.stockTimeNum()  
                        setTimeout(() => {  
                            this.setFocus = true  
                        }, 400)  
                    }  
                })  
            },

比如这里,坑就是之前我之前已经在某个地方写了this.setFocus = true,页面确实聚焦了,但是在有toast,下面的列表举荐渲染的时候,页面的input会闪一下,导致重新失去焦点,这时候需要自己找下在哪是最后一次渲染完 然后重新聚焦。

安卓5.1双向绑定失效

我在安卓8.0没问题 但是在pda扫码机器上 在动态刷新已扫码数量的时候,会不更新。控制台打印信息为:请求成功,但是无数据。不敢复现bug截图了。

解决办法:

        data() {  
            return {  
                pickerText: '',  
                scope: ''  
            };  
        },  
               methods: {  
            onConfirm(e) {  
                this.pickerText = e  
                this.scope = this.pickerText.value[0]   
                this.$nextTick(function() {  
                    this.stockTimeNum() // 这里的请求方法我直接直接使用this.pickerText.value[0] 请求传餐,会在5.1失效。。。爬坑时间半天。  
                    this.setFocus = true  
                })  
            }  
}

ps:爬了一天T.T。感谢uniapp团队。

收起阅读 »

封装了一个简易的tab组件,已发布npm包,可直接安装使用

ui组件 组件 自定义组件

自己之前在业务中碰到需要tab组件,发现uni-app没有提供该基础组件,因此自己封装了一个简易的tab标签组件,如果有需要可以拿去使用,如果觉得还阔以,还请赏个star以激励作者,蟹蟹啦。
npm包中包含组件实现以及demo示例,很清晰,有问题可以提issue,会尽快回复。
github地址:https://github.com/tingyuxuan2302/uni-app

继续阅读 »

自己之前在业务中碰到需要tab组件,发现uni-app没有提供该基础组件,因此自己封装了一个简易的tab标签组件,如果有需要可以拿去使用,如果觉得还阔以,还请赏个star以激励作者,蟹蟹啦。
npm包中包含组件实现以及demo示例,很清晰,有问题可以提issue,会尽快回复。
github地址:https://github.com/tingyuxuan2302/uni-app

收起阅读 »

iOS证书相关知识介绍

iOS打包 iOS

很多刚开始接触iOS证书的开发者可能不是很了解iOS证书的类型功能和概念。

下面对iOS证书的几个方面进行介绍。

iOS证书的类型和作用

1、iOS开发证书

iOS开发证书是用于测试APP,在开发过程中安装到苹果手机真机测试APP的运行情况。

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书,用iOS发布证书打包的ipa才能上传到App Store审核。

3、iOS推送证书

iOS推送证书是用于推送通知的,平时我们在手机的系统栏下拉看到的那些消息就是推送通知,如果要做这个功能就需要配置推送证书。

4、iOS企业证书

iOS企业证书需要企业开发者账号才能申请,用于无法上架App Store的苹果APP打包签名使用。

常用的就是以上这4种iOS证书,当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS证书的构成和有效性

iOS证书由两个文件构成。p12文件和.mobileprovision文件

p12文件相当于公钥,.mobileprovision文件相当于私钥。

开发证书p12文件苹果规定只能申请2个,发布证书p12文件只能申请3个!iOS证书配置.mobileprovision文件是没有任何数量限制的!

p12可以共用,一个p12可以对应无数个.mobileprovision文件!所以就算p12申请一个也够用了,可以对应创建无数套iOS证书!

所以对于证书数量的担忧是没有意义的!不会限制你上架多少个APP!

ios证书的有效期是一年,在我们软件的和开发者后台都能看到到期时间。

iOS证书可以删除吗,到期怎么更新

iOS证书是可以随意删除的(不管有没有到期),不会影响已经上架的APP。

如果你还在测试APP。删除了测试用的开发证书,APP将打不开,当然这个也没什么关系,测试APP是要不停打包的,重新申请证书打包重新安装就可以了。

iOS证书到期了需不需要重新申请呢,具体看需要,如果你要更新已经上架的APP,更新版本,删除到期的证书重新申请打包上传更新。

如果不更新APP,到期了不管他也没什么关系,不会影响上架了的APP。

继续阅读 »

很多刚开始接触iOS证书的开发者可能不是很了解iOS证书的类型功能和概念。

下面对iOS证书的几个方面进行介绍。

iOS证书的类型和作用

1、iOS开发证书

iOS开发证书是用于测试APP,在开发过程中安装到苹果手机真机测试APP的运行情况。

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书,用iOS发布证书打包的ipa才能上传到App Store审核。

3、iOS推送证书

iOS推送证书是用于推送通知的,平时我们在手机的系统栏下拉看到的那些消息就是推送通知,如果要做这个功能就需要配置推送证书。

4、iOS企业证书

iOS企业证书需要企业开发者账号才能申请,用于无法上架App Store的苹果APP打包签名使用。

常用的就是以上这4种iOS证书,当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS证书的构成和有效性

iOS证书由两个文件构成。p12文件和.mobileprovision文件

p12文件相当于公钥,.mobileprovision文件相当于私钥。

开发证书p12文件苹果规定只能申请2个,发布证书p12文件只能申请3个!iOS证书配置.mobileprovision文件是没有任何数量限制的!

p12可以共用,一个p12可以对应无数个.mobileprovision文件!所以就算p12申请一个也够用了,可以对应创建无数套iOS证书!

所以对于证书数量的担忧是没有意义的!不会限制你上架多少个APP!

ios证书的有效期是一年,在我们软件的和开发者后台都能看到到期时间。

iOS证书可以删除吗,到期怎么更新

iOS证书是可以随意删除的(不管有没有到期),不会影响已经上架的APP。

如果你还在测试APP。删除了测试用的开发证书,APP将打不开,当然这个也没什么关系,测试APP是要不停打包的,重新申请证书打包重新安装就可以了。

iOS证书到期了需不需要重新申请呢,具体看需要,如果你要更新已经上架的APP,更新版本,删除到期的证书重新申请打包上传更新。

如果不更新APP,到期了不管他也没什么关系,不会影响上架了的APP。

收起阅读 »

【阿里云双11特惠最后几天!!】云服务器低至86/年 229/3年,另外有香港服务器 119/年

阿里云OSS

阿里云双十一,云服务器历史最低价来啦啦啦!!
1核-2G-1M,1年86元,3年229。
2核-4G-3M,3年799元。
2核-8G-5M,3年1399元。
4核-8G-5M,1年5621元。
8核-16G-8M,3年12209元。
1核-1G-1M,香港服务器1年119块。
2核-4G-5M,香港服务器3年2926块。
现在下单就可以买。
(没有新账号的,用家人的来注册阿里云并且实名)
拼团链接:https://www.aliyun.com/1111/2019/group-buying-share?ptCode=F9E6C0F5F69CFE2439882EFC16E69926647C88CF896EF535&userCode=wbqjs7bw&share_source=copy_link

先领取2000元红包再拼团
红包链接:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=wbqjs7bw

继续阅读 »

阿里云双十一,云服务器历史最低价来啦啦啦!!
1核-2G-1M,1年86元,3年229。
2核-4G-3M,3年799元。
2核-8G-5M,3年1399元。
4核-8G-5M,1年5621元。
8核-16G-8M,3年12209元。
1核-1G-1M,香港服务器1年119块。
2核-4G-5M,香港服务器3年2926块。
现在下单就可以买。
(没有新账号的,用家人的来注册阿里云并且实名)
拼团链接:https://www.aliyun.com/1111/2019/group-buying-share?ptCode=F9E6C0F5F69CFE2439882EFC16E69926647C88CF896EF535&userCode=wbqjs7bw&share_source=copy_link

先领取2000元红包再拼团
红包链接:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=wbqjs7bw

收起阅读 »

uni-app给textarea设置show-confirm-bar不能隐藏完成那一栏

无法生效的写法:<textarea show-confirm-bar="false">
测试有效的写法:<textarea :show-confirm-bar="A" >,在js的data中设置A:false

不知道是否清晰

继续阅读 »

无法生效的写法:<textarea show-confirm-bar="false">
测试有效的写法:<textarea :show-confirm-bar="A" >,在js的data中设置A:false

不知道是否清晰

收起阅读 »

从入门到放弃

如果你的app现在和未来都不会涉及和原生代码混合开发,可以考虑使用5 SDK。
uniapp同理。

否则

我劝你老老实实使用原生代码进行开发。我个人在项目开始时采用5 SDK开发,因为前期工期紧张需求不明确,确实给我省了时间。随着需求越来越明确,混合开发不可避免了。现在项目已经历时两年,我怀着沉痛的心情要抛弃这个框架,除了在androidstudio中不能调试外,它的每一次升级或者android每出一个新版本我都提心吊胆。

最后想说每个框架都有它的应用场景,不要视图一招鲜吃遍天

继续阅读 »

如果你的app现在和未来都不会涉及和原生代码混合开发,可以考虑使用5 SDK。
uniapp同理。

否则

我劝你老老实实使用原生代码进行开发。我个人在项目开始时采用5 SDK开发,因为前期工期紧张需求不明确,确实给我省了时间。随着需求越来越明确,混合开发不可避免了。现在项目已经历时两年,我怀着沉痛的心情要抛弃这个框架,除了在androidstudio中不能调试外,它的每一次升级或者android每出一个新版本我都提心吊胆。

最后想说每个框架都有它的应用场景,不要视图一招鲜吃遍天

收起阅读 »

从入门到放弃

如果你的app现在和未来都不会涉及和原生代码混合开发,可以考虑使用5+SDK。
uniapp同理。

否则

我劝你老老实实使用原生代码进行开发。我个人在项目开始时采用5+SDK开发,因为前期工期紧张需求不明确,确实给我省了时间。随着需求越来越明确,混合开发不可避免了。现在项目已经历时两年,我怀着沉痛的心情要抛弃这个框架,除了在androidstudio中不能调试外,它的每一次升级或者android每出一个新版本我都提心吊胆。

最后想说每个框架都有它的应用场景,不要视图一招鲜吃遍天

继续阅读 »

如果你的app现在和未来都不会涉及和原生代码混合开发,可以考虑使用5+SDK。
uniapp同理。

否则

我劝你老老实实使用原生代码进行开发。我个人在项目开始时采用5+SDK开发,因为前期工期紧张需求不明确,确实给我省了时间。随着需求越来越明确,混合开发不可避免了。现在项目已经历时两年,我怀着沉痛的心情要抛弃这个框架,除了在androidstudio中不能调试外,它的每一次升级或者android每出一个新版本我都提心吊胆。

最后想说每个框架都有它的应用场景,不要视图一招鲜吃遍天

收起阅读 »

跨域 h5请求错误

跨域请求

解决方法:

在manifest.json
"h5": {
"devServer": {
"port": 8080,
"disableHostCheck": true,
"proxy": {
"/dpc": { //“/dpc”编译器访问地址重定向到你的域名,
//访问的原本url(“http://www.域名.com/1/index”,改成url(“/dpc/1.index....”)
"target": "http://www.域名.com", //你的域名
"changeOrigin": true,
"secure": false,
"pathRewrite":{"^/dpc":""}
}
}
}
}

继续阅读 »

解决方法:

在manifest.json
"h5": {
"devServer": {
"port": 8080,
"disableHostCheck": true,
"proxy": {
"/dpc": { //“/dpc”编译器访问地址重定向到你的域名,
//访问的原本url(“http://www.域名.com/1/index”,改成url(“/dpc/1.index....”)
"target": "http://www.域名.com", //你的域名
"changeOrigin": true,
"secure": false,
"pathRewrite":{"^/dpc":""}
}
}
}
}

收起阅读 »

听书APP

需要购买的用户可以联系(注明来路)
QQ:2010409646
APP下载

整套价格 (PC后台+接口+APP源码)=9000元

需要购买的用户可以联系(注明来路)
QQ:2010409646
APP下载

整套价格 (PC后台+接口+APP源码)=9000元

iOS上架被拒Guideline 5.1.1问题

iOS打包 iOS

iOS上架被拒Guideline 5.1.1条款问题解决步骤!

Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage

We noticed that your app requests the user’s consent to access their camera/microphone but does not clarify the use of this feature in the permission modal alert.
Next Steps
To resolve this issue, please revise the permission modal alert to specify why the app is requesting access to the user's camera/microphone.
The permission request alert should specify how your app will use this feature to help users understand why your app is requesting access to their personal data.

意思就是没有对请求的相关权限进行描述,或者描述的不够准确,比如使用到了定位,相册相机,通讯录等权限,要把为什么使用这些权限做下详细描述!

权限描述举例说明

比如一个外卖应用,获取定位后需要展示附近的美食信息。那么,相应的定位权限描述,应当是类似“获取定位信息用于为用户提供附近的美食信息”这样的描述。

而不应当是,“获取用户当前位置信息”这种没有明确描述定位用处的信息。

下面介绍修改权限说明入口及例子!修改后重新打包上传审核!

HBuilderX开发工具修改入口!

打开manifest.json文件

继续阅读 »

iOS上架被拒Guideline 5.1.1条款问题解决步骤!

Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage

We noticed that your app requests the user’s consent to access their camera/microphone but does not clarify the use of this feature in the permission modal alert.
Next Steps
To resolve this issue, please revise the permission modal alert to specify why the app is requesting access to the user's camera/microphone.
The permission request alert should specify how your app will use this feature to help users understand why your app is requesting access to their personal data.

意思就是没有对请求的相关权限进行描述,或者描述的不够准确,比如使用到了定位,相册相机,通讯录等权限,要把为什么使用这些权限做下详细描述!

权限描述举例说明

比如一个外卖应用,获取定位后需要展示附近的美食信息。那么,相应的定位权限描述,应当是类似“获取定位信息用于为用户提供附近的美食信息”这样的描述。

而不应当是,“获取用户当前位置信息”这种没有明确描述定位用处的信息。

下面介绍修改权限说明入口及例子!修改后重新打包上传审核!

HBuilderX开发工具修改入口!

打开manifest.json文件

收起阅读 »

关于MUI适配IOS13的一些经验分享

调试 mui iOS13

问题产生背景

由于业余发展的需要,我们对一款MUI开发的5+App进行了功能上的增加。开始的时候是在Android平台上使用真机调试 的模式进行开发测试,完成测试之后,在进行IOS测试时遇到了一些问题,在这里做一些总结。

开发工具

HbuilderX

  • 初始版本:2.2.0
  • 最终版本:2.3.7

IOS端问题

问题一: 无法进行调试

  • 原因: 由于IOS系统升级,老版本的HbuilderX中的基座无法对iOS进行真机调试操作
  • 解决方案: 按照官方的要求,将HbuilderX升级到2.3的版本以后,我这里是将HbuilderX升级到了最新的稳定版本-2.3.7

问题二: 启动App后无法跳转到首页

  • 原来方案: 之前关闭App的启动图,是在程序中使用plus.navigator.closeSplashscreen() 这个方法,但是在IOS13上,这个方法没有生效,然后也没有在配置文件中进行配置
  • 原因: 配置文件没有配置,程序中代码没生效
  • 解决方案: 在配置文件中勾选 自动关闭启动界面
    如图所示

问题三: 登录和获取用户信息session不一致

  • 影响: 这个问题,导致在IOS上App无法获取用户的信息,无法进行下一步的操作
  • 原因:
    • iOS有UIWebview和WKWebview两种webview,从IOS13开始苹果将UIWebview列为过期的API
    • MUI开发的5+App默认为UIWebview,然而HbuilderX2.2.5+版本已将IOS上所有的webview的默认内核由UIWebview调整为 WKWebview
    • 如果同时在一个app里使用这两种webview,注意这两种webview之间的cookie、localstorage、session不共享,但plus.storage是共享的。
  • 解决方案: 在manifest.json文件源码视图中设置 plus -> kernel -> ios的值为 "UIWebview"
    如图所示
继续阅读 »

问题产生背景

由于业余发展的需要,我们对一款MUI开发的5+App进行了功能上的增加。开始的时候是在Android平台上使用真机调试 的模式进行开发测试,完成测试之后,在进行IOS测试时遇到了一些问题,在这里做一些总结。

开发工具

HbuilderX

  • 初始版本:2.2.0
  • 最终版本:2.3.7

IOS端问题

问题一: 无法进行调试

  • 原因: 由于IOS系统升级,老版本的HbuilderX中的基座无法对iOS进行真机调试操作
  • 解决方案: 按照官方的要求,将HbuilderX升级到2.3的版本以后,我这里是将HbuilderX升级到了最新的稳定版本-2.3.7

问题二: 启动App后无法跳转到首页

  • 原来方案: 之前关闭App的启动图,是在程序中使用plus.navigator.closeSplashscreen() 这个方法,但是在IOS13上,这个方法没有生效,然后也没有在配置文件中进行配置
  • 原因: 配置文件没有配置,程序中代码没生效
  • 解决方案: 在配置文件中勾选 自动关闭启动界面
    如图所示

问题三: 登录和获取用户信息session不一致

  • 影响: 这个问题,导致在IOS上App无法获取用户的信息,无法进行下一步的操作
  • 原因:
    • iOS有UIWebview和WKWebview两种webview,从IOS13开始苹果将UIWebview列为过期的API
    • MUI开发的5+App默认为UIWebview,然而HbuilderX2.2.5+版本已将IOS上所有的webview的默认内核由UIWebview调整为 WKWebview
    • 如果同时在一个app里使用这两种webview,注意这两种webview之间的cookie、localstorage、session不共享,但plus.storage是共享的。
  • 解决方案: 在manifest.json文件源码视图中设置 plus -> kernel -> ios的值为 "UIWebview"
    如图所示
收起阅读 »