HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app h5页面在chrome浏览器上跨域问题,不需要安装插件,只需要在终端输入一行代码解决

h5 跨域 uniapp

终端里输入命令:
open -a "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir=/Users/你电脑的名称/chromeDevUserData/
此方法可以解决chrome跨域,但有个问题每次关闭chrome后又会出现跨域,需要终端里重新输这条命令。

继续阅读 »

终端里输入命令:
open -a "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir=/Users/你电脑的名称/chromeDevUserData/
此方法可以解决chrome跨域,但有个问题每次关闭chrome后又会出现跨域,需要终端里重新输这条命令。

收起阅读 »

uni-app ios 苹果真机运行

博客地址:https://www.cnblogs.com/yunsun/p/11506444.html

博客地址:https://www.cnblogs.com/yunsun/p/11506444.html

ipa上传反馈修改info.plist用途字符串问题方案

iOS打包 iOS

很多开发者上传ipa后,收到苹果的反馈邮件说请修改应用程序info.plist文件中相关用途字符串!

意思就是需要对请求的权限进行详细说明,比如使用到了定位,相册,通讯录等权限,要把为什么使用这些权限做下详细描述!

反馈翻译截图例子!

权限描述举例说明

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

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

HBuilderX开发工具修改入口!

打开manifest.json文件

分享一个iOS上架App Store详细图文流程

继续阅读 »

很多开发者上传ipa后,收到苹果的反馈邮件说请修改应用程序info.plist文件中相关用途字符串!

意思就是需要对请求的权限进行详细说明,比如使用到了定位,相册,通讯录等权限,要把为什么使用这些权限做下详细描述!

反馈翻译截图例子!

权限描述举例说明

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

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

HBuilderX开发工具修改入口!

打开manifest.json文件

分享一个iOS上架App Store详细图文流程

收起阅读 »

端点云招聘web前端

uniapp Vue

招聘有uni-app、vue开发工作经验的web前端,工作地点:广东珠海,有意向联系电话:13532270246(林生)
端点云专注珠海小程序开发珠海app开发珠海网站开发珠海建站公司珠海网站设计,是著名的珠海网络公司/珠海的网络公司。

继续阅读 »

招聘有uni-app、vue开发工作经验的web前端,工作地点:广东珠海,有意向联系电话:13532270246(林生)
端点云专注珠海小程序开发珠海app开发珠海网站开发珠海建站公司珠海网站设计,是著名的珠海网络公司/珠海的网络公司。

收起阅读 »

监听所有应用推送信息

推送 广播

监听所有应用推送信息:https://ext.dcloud.net.cn/plugin?id=756

监听所有应用推送信息:https://ext.dcloud.net.cn/plugin?id=756

uni-app在h5端使用tabBar的页面下用uni.redirectTo跳转会导致tabBar导航栏不隐藏

uniapp bug已修复

在h5端,如果是用到tabBar做导航栏的话,用uni.redirectTo跳转的时候,tabBar导航栏是不会隐藏的,android和ios端倒没有这个情况,不知道是属于bug呢还是属于其他的

在h5端,如果是用到tabBar做导航栏的话,用uni.redirectTo跳转的时候,tabBar导航栏是不会隐藏的,android和ios端倒没有这个情况,不知道是属于bug呢还是属于其他的

DCloud助力,Vue官网有免费中文视频教程了!

视频教程 Vue

Vue官网,是广大前端开发者学习Vue.js最重要的阵地。官网上有详细的文档、及部分视频教程。但之前这些视频都是英文的,对国内开发者的入门学习不太友好。

为了让更多开发者低门槛进入vue生态,DCloud与Vue官方合作,全新录制Vue中文视频教程,现已正式上线并更新到Vue官网,供大家免费观看学习。


更细致的是,在很多API文档旁,都提供了这个API对应视频讲解的链接。

该系列视频免费、且没有广告

除了观看视频讲解外,学习者还可点击右上角按钮,使用HBuilderX打开课程源码亲自动手编码,更深入的掌握Vue.js的具体用法。

在HBuilderX中可以方便的对Vue的语法进行代码提示转到定义,能在代码助手右侧看到API的详细文档链接。


通过HBuilderX右上角的预览,开发者可以实时了解自己代码的运行情况,还可以查看logdebug打断点。


Vue.js是我们中国人创造的世界级前端框架,在国内,它已经远远超过reactangular。下图为今年的百度指数对比:


欢迎广大开发者积极拥抱Vue,共同促进生态的繁荣发展!

​

继续阅读 »

Vue官网,是广大前端开发者学习Vue.js最重要的阵地。官网上有详细的文档、及部分视频教程。但之前这些视频都是英文的,对国内开发者的入门学习不太友好。

为了让更多开发者低门槛进入vue生态,DCloud与Vue官方合作,全新录制Vue中文视频教程,现已正式上线并更新到Vue官网,供大家免费观看学习。


更细致的是,在很多API文档旁,都提供了这个API对应视频讲解的链接。

该系列视频免费、且没有广告

除了观看视频讲解外,学习者还可点击右上角按钮,使用HBuilderX打开课程源码亲自动手编码,更深入的掌握Vue.js的具体用法。

在HBuilderX中可以方便的对Vue的语法进行代码提示转到定义,能在代码助手右侧看到API的详细文档链接。


通过HBuilderX右上角的预览,开发者可以实时了解自己代码的运行情况,还可以查看logdebug打断点。


Vue.js是我们中国人创造的世界级前端框架,在国内,它已经远远超过reactangular。下图为今年的百度指数对比:


欢迎广大开发者积极拥抱Vue,共同促进生态的繁荣发展!

​

收起阅读 »

【实战】uni-app实战仿微信app全栈开发视频教程

uniapp 教程 教程 视频教程

新的旅程开启~

课程概述

本季度预计250课时(如果有新内容,会继续增加),每周二更新(后期加速)

前端部分:

采用uni-app,开启纯nvue原生渲染,大大提高性能,并且开启nvue的uni-app模式,兼容Android、iOS和小程序端。

后端部分:

采用egg.js(阿里旗下基于Node.js 和 Koa的一个Nodejs的企业级应用开发框架)

课程学习链接入口:

uni-app实战仿微信app开发视频教程
https://study.163.com/course/courseMain.htm?courseId=1209487898&share=2&shareId=480000001892585

或者进入网易云课堂,搜索uni-app即可看到

课程大纲见以下图!





课程学习链接入口:

uni-app实战仿微信app开发视频教程
https://study.163.com/course/courseMain.htm?courseId=1209487898&share=2&shareId=480000001892585

或者进入网易云课堂,搜索uni-app即可看到

继续阅读 »

新的旅程开启~

课程概述

本季度预计250课时(如果有新内容,会继续增加),每周二更新(后期加速)

前端部分:

采用uni-app,开启纯nvue原生渲染,大大提高性能,并且开启nvue的uni-app模式,兼容Android、iOS和小程序端。

后端部分:

采用egg.js(阿里旗下基于Node.js 和 Koa的一个Nodejs的企业级应用开发框架)

课程学习链接入口:

uni-app实战仿微信app开发视频教程
https://study.163.com/course/courseMain.htm?courseId=1209487898&share=2&shareId=480000001892585

或者进入网易云课堂,搜索uni-app即可看到

课程大纲见以下图!





课程学习链接入口:

uni-app实战仿微信app开发视频教程
https://study.163.com/course/courseMain.htm?courseId=1209487898&share=2&shareId=480000001892585

或者进入网易云课堂,搜索uni-app即可看到

收起阅读 »

uniapp接入极光推送

极光推送

之前5+app根据极光的文档成功接入了极光推送,文档见https://github.com/jpush/jpush-hbuilder-demo
现在打算把项目转成uniapp模式,但是极光的文档是写给5+app的,js里面有window和document操作,在uniapp上不适用。
搜了一圈论坛也没找到解决方案,索性根据我刚学不到1个月的前端知识研究了一下(我是做安卓的),结果还成功了。
其实集成方式和5+的都一样,只是要修改极光官方的js文件而已,js文件见:https://github.com/jpush/jpush-hbuilder-demo/blob/master/jpush.js。
说下实现吧:

  1. uniapp不需要再监听plus,直接使用
  2. windows.plus 也不需要,直接使用plus
  3. 因为没有document了,所以极光写的事件发送接收机制就用不了了,这块要改,看了下uniapp的文档,发现可以用uni.$emit和uni.$on发送和监听事件。
    附上jpush.js文档
    使用:
    离线打包,基本的集成见极光的github文档,jpush.js需要替换
    1.在main.js里导入jpush.js
    import '@/‘你的文档目录’/jpush.js'

    2. 在app.vue的onLaunch()里监听事件(以接收自定义消息为例)

    uni.$on('jpush.receiveMessage',function(data){  
                console.log('监听到事件来自极光推送 ,携带参数 msg 为:' + data);  
                uni.showModal({  
                    title: '极光推送',  
                    content: "极光推送成功啦",  
                    success: function (res) {  
                        if (res.confirm) {  
                            console.log('用户点击确定');  
                        } else if (res.cancel) {  
                            console.log('用户点击取消');  
                        }  
                    }  
                })  
            })

    3.极光操作,和5+app的一样,调用plus.Push的对应方法即可(以设置alias为例)

    plus.Push.setAlias(alias);

对了,只在安卓上测试过~~~~~~

继续阅读 »

之前5+app根据极光的文档成功接入了极光推送,文档见https://github.com/jpush/jpush-hbuilder-demo
现在打算把项目转成uniapp模式,但是极光的文档是写给5+app的,js里面有window和document操作,在uniapp上不适用。
搜了一圈论坛也没找到解决方案,索性根据我刚学不到1个月的前端知识研究了一下(我是做安卓的),结果还成功了。
其实集成方式和5+的都一样,只是要修改极光官方的js文件而已,js文件见:https://github.com/jpush/jpush-hbuilder-demo/blob/master/jpush.js。
说下实现吧:

  1. uniapp不需要再监听plus,直接使用
  2. windows.plus 也不需要,直接使用plus
  3. 因为没有document了,所以极光写的事件发送接收机制就用不了了,这块要改,看了下uniapp的文档,发现可以用uni.$emit和uni.$on发送和监听事件。
    附上jpush.js文档
    使用:
    离线打包,基本的集成见极光的github文档,jpush.js需要替换
    1.在main.js里导入jpush.js
    import '@/‘你的文档目录’/jpush.js'

    2. 在app.vue的onLaunch()里监听事件(以接收自定义消息为例)

    uni.$on('jpush.receiveMessage',function(data){  
                console.log('监听到事件来自极光推送 ,携带参数 msg 为:' + data);  
                uni.showModal({  
                    title: '极光推送',  
                    content: "极光推送成功啦",  
                    success: function (res) {  
                        if (res.confirm) {  
                            console.log('用户点击确定');  
                        } else if (res.cancel) {  
                            console.log('用户点击取消');  
                        }  
                    }  
                })  
            })

    3.极光操作,和5+app的一样,调用plus.Push的对应方法即可(以设置alias为例)

    plus.Push.setAlias(alias);

对了,只在安卓上测试过~~~~~~

收起阅读 »

Windows申请iOS发布证书p12打包ipa过程分享

iOS打包

在HBuilderX打包需要用到私钥证书p12接profile文件.mobileprovision

下面介绍如何申请这两个iOS证书文件并且打包!

一、下载安装iOS上架辅助软件Appuploader

Appuploader下载链接

Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,在Windows开发也可以轻松申请到iOS证书打包!

方便快捷,配合本教程使用,可以快速掌握如何真机测试及上架!

下载软件包后解压直接使用,无需安装。

一、申请iOS发布证书(p12文件)

发布证书用于上架,证书有p12及mobileprovision两个文件,配套使用,先申请p12!

1.1、点击右下角+ADD选择

类型:下拉选择发布证书

证书名称:不要中文、随意设置

邮箱:随意

密码:证书的密码、比如设置123这样,不用很复杂,记好、打包时要用、很重要

应用id:这里不用选

点击ok创建。

1.2、创建成功后,找到刚创建的发布证书(iOS Distribution这个类型的就是发布证书,如果之前创建过请看过期时间就知道哪个是新创建的了),点击p12 文件,下载保存.p12证书文件到电脑。

二、创建iOS发布描述文件(.mobileprovision文件)

2.1、返回Appuploader首页,选择描述文件进去。

在申请ios描述文件之前先加个应用id(如果之前加过要用以前加过的应用id,可跳过此步)

应用id:又称套装id,appid,BundleID,包名,各打包平台叫法不同!

点击右下角+ADD,在应用id项,点击下拉三角符号即可看到以前加过的记录!

初次使用或者需要上架另一个项目app需要先创建一个新的应用id!

3.1、添加新应用ID步骤,点击添加应用id!(不同的APP需要编写不同的应用id相当于app的身份证)

应用id:三段式格式、如app名称是淘宝,可以编写为com.app.taobao,自由编写!不能重复!具有唯一性@

名称:数字或者字母,自由编写,不要中文,不能重复。

点击ok添加!

如果添加报错(应用id具有唯一性,可能重复添加或者别人用过这个应用id),解决办法就是查看自己是否已经加过,或者修改编下应用id再添加。

点击ok只要没弹出报错就是添加成功了,注意先关掉窗口,重新点右下角+ADD进入下拉应用id可查看刚添加的应用id是否存在。

2.2、添加成功后,点击右下角+ADD,进入添加界面!

Type:下拉选择发布版profile

应用id:选择对应的应用id(又称套装id,appid,BundleID,包名)

证书:选中全部就行

Devices:设备这里不像选开发版profile时会出现,发布版不用选。

输入名称:不要中文,随意,123之类的就行,注意不要跟之前申请过的名称一样),点击ok创建。

2.3、选择刚创建的发布版描述文件(iOS Distribution这个类型的就是发布描述文件,找刚创建的输入的名称),点击Download下载,保存到电脑

申请到p12及mobileprovision这两个iOS证书文件即可去打包了!

四、HBuilderX打包ipa

4.1、打开HBuilderX工具,选择开发好的项目,点击发行,选择发行为原生安装包。

4.2、选择iOS打包,支持的设备类型(可以选择支持iPhone和支持ipad),选择使用苹果证书

AppID:跟申请证书描述.mobileprovision时选择的要一致(又称套装id,appid,BundleID,应用id,包名)

profile文件:选择上传配置文件.mobileprovision

私钥证书:上传.p12文件

私钥密码:输入创建p12设置的密码。

然后点击打包。

4.3、打包成功后,下载保存ipa,这个ipa包即可上传到App Store审核!

如果上架不熟悉可查看完整详细的iOS APP上架教程

继续阅读 »

在HBuilderX打包需要用到私钥证书p12接profile文件.mobileprovision

下面介绍如何申请这两个iOS证书文件并且打包!

一、下载安装iOS上架辅助软件Appuploader

Appuploader下载链接

Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,在Windows开发也可以轻松申请到iOS证书打包!

方便快捷,配合本教程使用,可以快速掌握如何真机测试及上架!

下载软件包后解压直接使用,无需安装。

一、申请iOS发布证书(p12文件)

发布证书用于上架,证书有p12及mobileprovision两个文件,配套使用,先申请p12!

1.1、点击右下角+ADD选择

类型:下拉选择发布证书

证书名称:不要中文、随意设置

邮箱:随意

密码:证书的密码、比如设置123这样,不用很复杂,记好、打包时要用、很重要

应用id:这里不用选

点击ok创建。

1.2、创建成功后,找到刚创建的发布证书(iOS Distribution这个类型的就是发布证书,如果之前创建过请看过期时间就知道哪个是新创建的了),点击p12 文件,下载保存.p12证书文件到电脑。

二、创建iOS发布描述文件(.mobileprovision文件)

2.1、返回Appuploader首页,选择描述文件进去。

在申请ios描述文件之前先加个应用id(如果之前加过要用以前加过的应用id,可跳过此步)

应用id:又称套装id,appid,BundleID,包名,各打包平台叫法不同!

点击右下角+ADD,在应用id项,点击下拉三角符号即可看到以前加过的记录!

初次使用或者需要上架另一个项目app需要先创建一个新的应用id!

3.1、添加新应用ID步骤,点击添加应用id!(不同的APP需要编写不同的应用id相当于app的身份证)

应用id:三段式格式、如app名称是淘宝,可以编写为com.app.taobao,自由编写!不能重复!具有唯一性@

名称:数字或者字母,自由编写,不要中文,不能重复。

点击ok添加!

如果添加报错(应用id具有唯一性,可能重复添加或者别人用过这个应用id),解决办法就是查看自己是否已经加过,或者修改编下应用id再添加。

点击ok只要没弹出报错就是添加成功了,注意先关掉窗口,重新点右下角+ADD进入下拉应用id可查看刚添加的应用id是否存在。

2.2、添加成功后,点击右下角+ADD,进入添加界面!

Type:下拉选择发布版profile

应用id:选择对应的应用id(又称套装id,appid,BundleID,包名)

证书:选中全部就行

Devices:设备这里不像选开发版profile时会出现,发布版不用选。

输入名称:不要中文,随意,123之类的就行,注意不要跟之前申请过的名称一样),点击ok创建。

2.3、选择刚创建的发布版描述文件(iOS Distribution这个类型的就是发布描述文件,找刚创建的输入的名称),点击Download下载,保存到电脑

申请到p12及mobileprovision这两个iOS证书文件即可去打包了!

四、HBuilderX打包ipa

4.1、打开HBuilderX工具,选择开发好的项目,点击发行,选择发行为原生安装包。

4.2、选择iOS打包,支持的设备类型(可以选择支持iPhone和支持ipad),选择使用苹果证书

AppID:跟申请证书描述.mobileprovision时选择的要一致(又称套装id,appid,BundleID,应用id,包名)

profile文件:选择上传配置文件.mobileprovision

私钥证书:上传.p12文件

私钥密码:输入创建p12设置的密码。

然后点击打包。

4.3、打包成功后,下载保存ipa,这个ipa包即可上传到App Store审核!

如果上架不熟悉可查看完整详细的iOS APP上架教程

收起阅读 »

关于云打包后,找不到(google play)64位版本的 arm64-v8a【上架谷歌商店问题】

云端打包发布常见问题 HBuilder X GooglePlay

此版本不符合 Google Play 关于提供 64 位版本应用的规定 以下 APK 或 App Bundle 面向 64 位设备,但只有 32 位原生代码

请彻底卸载HBuilderX旧版本(编辑器)后,再次重新安装新版本HBuilderX2.1.5 alpha。本人亲测有效!并不是服务端没有64位版本。
备注:我的是mac版本。

继续阅读 »

此版本不符合 Google Play 关于提供 64 位版本应用的规定 以下 APK 或 App Bundle 面向 64 位设备,但只有 32 位原生代码

请彻底卸载HBuilderX旧版本(编辑器)后,再次重新安装新版本HBuilderX2.1.5 alpha。本人亲测有效!并不是服务端没有64位版本。
备注:我的是mac版本。

收起阅读 »

tabbar进二级页面变通实现

业务需求,应用内嵌了一个商城模块,tabbar中有一项,点击后要跳入商城,也就是二级页面(二级页面也包括新的tabbar)。
但是官方的tabbar不开放切换事件,点击了某一项后一定会切换到对应的页面。
为了实现需求,变通想了一种方法:
首先要写一个空的tabbar对应页面,写入pages.json骗一下编译器,毕竟我们还是需要生成一个按钮的。
然后在空的页面的onShow里执行跳转uni.navigateTo到二级页面(redirect不行,进二级页面时首页的tabbar不消失)。
二级页面中监听返回事件onBackPress,uni.switchTab到首页某一项。(参考https://ask.dcloud.net.cn/article/35120)
执行效果马马虎虎吧,二级页面tabbar只能用前端写的了,而且因为多了一层中转,所以打开速度会变慢。
官方说 “如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件”,但是首先view的绘制及管理很麻烦(菜鸟无力啊),而且拦截点击事件后,该按钮就没有点击变色的效果了,用户体验不好。
如果有更好的方法,欢迎指教!

继续阅读 »

业务需求,应用内嵌了一个商城模块,tabbar中有一项,点击后要跳入商城,也就是二级页面(二级页面也包括新的tabbar)。
但是官方的tabbar不开放切换事件,点击了某一项后一定会切换到对应的页面。
为了实现需求,变通想了一种方法:
首先要写一个空的tabbar对应页面,写入pages.json骗一下编译器,毕竟我们还是需要生成一个按钮的。
然后在空的页面的onShow里执行跳转uni.navigateTo到二级页面(redirect不行,进二级页面时首页的tabbar不消失)。
二级页面中监听返回事件onBackPress,uni.switchTab到首页某一项。(参考https://ask.dcloud.net.cn/article/35120)
执行效果马马虎虎吧,二级页面tabbar只能用前端写的了,而且因为多了一层中转,所以打开速度会变慢。
官方说 “如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件”,但是首先view的绘制及管理很麻烦(菜鸟无力啊),而且拦截点击事件后,该按钮就没有点击变色的效果了,用户体验不好。
如果有更好的方法,欢迎指教!

收起阅读 »