HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

西安招聘 混合APP开发者

西安招聘多端APP开发者,要求会Hbuildx,uniapp,mui,联系QQ:1319346578

西安招聘多端APP开发者,要求会Hbuildx,uniapp,mui,联系QQ:1319346578

【完整项目分享】纯Html5+MUI实现的移动端电子书阅读APP

首先呢,我是个文笔不太好的女产品经理,请大家不要抨击我的文笔。。。
这个项目从头到尾我都有参与,因为我做过一段时间前端工程师,所以偶尔也帮忙做一下技术调查类的工作(创业公司,你懂的!)。话不多说,切入正题!!!

一、技术选型
(略)我虽然参与他们的讨论,但是翻邮件的时候发现,都是唠家常的。。。此处尴尬。。。大概意思就是DCloud更适合!!!其他的RN难度大、APICloud刚赔了钱给DCloud、Flutter难度更大不够快等等。。。

二、功能说明
这个嘛!主要是分享一下这个APP主要是干啥的,有哪些功能,里面可能会有一些点大家有共同点,权当抛砖引玉。

    概要介绍:一款基于区块链通证经济的电子书阅读APP(读书即挖矿),每天读书就可以获得一定的通证奖励,通证就是类似比特币那种。  

    通用功能:登录/注册、检查更新、通知、支付、文件下载/上传(阿里云OSS)等等。  

    特色功能:EPub格式电子书阅读器。  

三、界面截图

闪屏页广告
闪屏页广告
登陆页
登陆页
个人中心
个人中心
头像设置
头像设置
首页
首页
书架
书架
电子书阅读
电子书阅读
侧栏目录
侧栏目录
换个背景
换个背景
分类导航
分类导航
沉浸式
沉浸式
沉浸式
沉浸式
购物车
购物车

好啦!还有很多很多页面,就不截图了!!!

四、开发问题
1、部分Vivo、oppo手机无法打开app或者白屏(未解决,解决后分享给大家)
2、Iphone底部导航栏被遮盖(未解决,解决后分享给大家)
3、其他一些小问题还没有解决,不过很快啦!

五、下载体验(微信扫码)
目前刚上线安卓版,IOS在调试问题!
购物车

继续阅读 »

首先呢,我是个文笔不太好的女产品经理,请大家不要抨击我的文笔。。。
这个项目从头到尾我都有参与,因为我做过一段时间前端工程师,所以偶尔也帮忙做一下技术调查类的工作(创业公司,你懂的!)。话不多说,切入正题!!!

一、技术选型
(略)我虽然参与他们的讨论,但是翻邮件的时候发现,都是唠家常的。。。此处尴尬。。。大概意思就是DCloud更适合!!!其他的RN难度大、APICloud刚赔了钱给DCloud、Flutter难度更大不够快等等。。。

二、功能说明
这个嘛!主要是分享一下这个APP主要是干啥的,有哪些功能,里面可能会有一些点大家有共同点,权当抛砖引玉。

    概要介绍:一款基于区块链通证经济的电子书阅读APP(读书即挖矿),每天读书就可以获得一定的通证奖励,通证就是类似比特币那种。  

    通用功能:登录/注册、检查更新、通知、支付、文件下载/上传(阿里云OSS)等等。  

    特色功能:EPub格式电子书阅读器。  

三、界面截图

闪屏页广告
闪屏页广告
登陆页
登陆页
个人中心
个人中心
头像设置
头像设置
首页
首页
书架
书架
电子书阅读
电子书阅读
侧栏目录
侧栏目录
换个背景
换个背景
分类导航
分类导航
沉浸式
沉浸式
沉浸式
沉浸式
购物车
购物车

好啦!还有很多很多页面,就不截图了!!!

四、开发问题
1、部分Vivo、oppo手机无法打开app或者白屏(未解决,解决后分享给大家)
2、Iphone底部导航栏被遮盖(未解决,解决后分享给大家)
3、其他一些小问题还没有解决,不过很快啦!

五、下载体验(微信扫码)
目前刚上线安卓版,IOS在调试问题!
购物车

收起阅读 »

HBuilder X无法检测到手机或者模拟器最后一招解决方案

我也是经常遇到这个问题,老是检测不到模拟器或者手机。
其实这是adb的问题,我们只需要通过电脑的cmd命令行手动检测设备就好了!

adb命令的使用:

1、找到HBuilder X 的目录
2、找到HBuilder X 带的adb程序,将此程序在的路径复制,放到Path中(环境变量)

配置环境变量:
我的电脑->鼠标右键->高级系统设置->高级->环境变量->path->双击,新建->粘贴adbs目录地址即可

继续阅读 »

我也是经常遇到这个问题,老是检测不到模拟器或者手机。
其实这是adb的问题,我们只需要通过电脑的cmd命令行手动检测设备就好了!

adb命令的使用:

1、找到HBuilder X 的目录
2、找到HBuilder X 带的adb程序,将此程序在的路径复制,放到Path中(环境变量)

配置环境变量:
我的电脑->鼠标右键->高级系统设置->高级->环境变量->path->双击,新建->粘贴adbs目录地址即可

收起阅读 »

mui仿有赞微信端用户注册登录界面模板

mui

绿色风格的一款mui仿有赞微信端用户注册登录界面模板,还带有手机号码、密码验证效果
模板下载:https://www.sucaihuo.com/templates/1582.html

继续阅读 »

绿色风格的一款mui仿有赞微信端用户注册登录界面模板,还带有手机号码、密码验证效果
模板下载:https://www.sucaihuo.com/templates/1582.html

收起阅读 »

HBuilder X开发uni-app项目如何使用mumu模拟器调试。

调试 mumu模拟器
  1. 到mumu官网下载并安装模拟器并记住安装路劲,后面设置adb有用。

  2. 打开mumu设置,找到开发者选项打开USB调试。

  3. 打开HBuilder开发工具,依次选择菜单 运行->运行到手机模拟器->Android模拟器端口设置

    • 设置adb路径,未MuMu安装目录下 ./emulator/nemu/vmonitor/bin/adbserver.exe (不要复制,请自定手动浏览选择!--||)
    • 设置Android模拟器端口 7555 (这是是在网上找的,如果不行请百度一下)。
  4. 这时候模拟器运行项就出来了,依次选择(也可以直接选择快捷运行按钮,在菜单栏下面类似一个播放按钮)运行->运行到手机模拟器->运行-[设备mumu]-[项目名称] 即可

  5. 注意.mumu模拟器的运行配置不建议设置太好,会增加崩溃的几率,还有就是建议把mumu模拟器的窗口置顶勾上,可以增加调试稳定性。

继续阅读 »
  1. 到mumu官网下载并安装模拟器并记住安装路劲,后面设置adb有用。

  2. 打开mumu设置,找到开发者选项打开USB调试。

  3. 打开HBuilder开发工具,依次选择菜单 运行->运行到手机模拟器->Android模拟器端口设置

    • 设置adb路径,未MuMu安装目录下 ./emulator/nemu/vmonitor/bin/adbserver.exe (不要复制,请自定手动浏览选择!--||)
    • 设置Android模拟器端口 7555 (这是是在网上找的,如果不行请百度一下)。
  4. 这时候模拟器运行项就出来了,依次选择(也可以直接选择快捷运行按钮,在菜单栏下面类似一个播放按钮)运行->运行到手机模拟器->运行-[设备mumu]-[项目名称] 即可

  5. 注意.mumu模拟器的运行配置不建议设置太好,会增加崩溃的几率,还有就是建议把mumu模拟器的窗口置顶勾上,可以增加调试稳定性。

收起阅读 »

android NFC MifareClassic 读IC卡加密扇区方法

uniapp Native.JS NFC Android

近段时间在做android下NFC的M1卡的加密扇区的读取,参考了Android_磊子的操作基础内容,但是涉及到MifareClassic类操作验证未能找到相关资料,后来查看了MifareClassic类的源代码和基于android原生案例,实现了加密扇区读取。分享下代码,希望对大家有帮助。
对于NFC操作的基本部分有很多资料都一样的,这里不再赘述,仅简单介绍MifareClassic验证和读取的过程
1、创建MifareClassic对象,MifareClassic.get(tag);
2、建立MifareClassic类连接,MifareClassic.connect();
3、对扇区(0-15)进行验证,按KeyA和KeyB两种验证,
 (1) MifareClassic.authenticateSectorWithKeyA(sector,key);
  其中sector为扇区号,key为6字节验证码,此处Key需要处理为-128至127的字节,开始使用0x00-0xFF会报错
 (2) MifareClassic.authenticateSectorWithKeyB(sector,key);
  其中sector为扇区号,key为6字节验证码,此处Key需要处理为-128至127的字节,开始使用0x00-0xFF会报错
4、按块(sector*4+i)读取扇区内的16Byte内容,MifareClassic.readBlock(Block);
Block0=sector×4+0;
Block1=sector×4+1;
Block2=sector×4+2;
Block3=sector×4+3;
5、关闭MifareClassic连接,MifareClassic.close();
MifareClassic读取代码

//MifareClassic读取代码  
readData:function(intent){  
    var tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
    var techList = tag.getTechList();  
    var bisMfc=false;  
    for(var i=0;i<techList.length;i++){  
        if(techList[i].indexOf('MifareClassic')>=0){  
            bisMfc=true;  
            break;  
        }  
    }  
    if(!bisMfc){  
        this.ICERROR='卡片类型错误!';  
        return;  
    }  
    var mfc=MifareClassic.get(tag);  
    if(!mfc){  
        this.ICERROR='卡片获取错误!';  
        return;  
    }  
    mfc.setTimeout(3000);  
    if(!mfc.isConnected()){  
        try{  
            invoke(mfc,'connect');   
        }catch(e){  
            this.ICERROR='卡片连接错误!';  
            return;  
        }  
    }  
    try{  
        this.ICUID=this.ByteArrayToHexString(tag.getId());  
        var cmdBytes=this.HexStringToByteArray(this.keyVal);  
        var auth=false;  
        if(this.keyType=="A"){  
            auth=invoke(mfc,"authenticateSectorWithKeyA",parseInt(this.sector),cmdBytes);  
        }else{  
            auth=invoke(mfc,"authenticateSectorWithKeyB",parseInt(this.sector),cmdBytes);  
        }  
        if(!auth){  
            this.ICERROR='扇区验证失败';  
            return;  
        }  
        var sectorData=[];  
        var tmpRet;  
        this.ICData='IC卡扇区数据>>';  
        for(var i=0;i<4;i++){   
            tmpRet=invoke(mfc,"readBlock",this.sector*4+i);  
            this.ICData=this.ICData+'\n';  
            this.ICData=this.ICData+this.ByteArrayToHexString(tmpRet);  
            sectorData.push.apply(sectorData,tmpRet);  
        }  
        console.log(this.ByteArrayToHexString(sectorData));  
        this.ICERROR='读卡完成';  
    }catch(e){  
        this.ICERROR=e.message;  
        console.error(e);   
    }finally{  
        mfc.close();  
    }  
}  
//Key处理函数  
HexStringToByteArray:function(instr) {  
    var hexA = new Array();  
    var pos = 0;  
    var len = instr.length/2;  
    for(var i=0; i<len; i++)  
    {  
        var s = instr.substr(pos, 2);  
        var v = parseInt(s, 16);  
        if(v>=128)  
            v=v-256;  
        hexA.push(v);  
        pos += 2;  
    }  
    return hexA;  
}

项目是基于nui-app项目的vue测试通过的,附件共享了vue文件。
项目需设置android.permission.NFC权限。

继续阅读 »

近段时间在做android下NFC的M1卡的加密扇区的读取,参考了Android_磊子的操作基础内容,但是涉及到MifareClassic类操作验证未能找到相关资料,后来查看了MifareClassic类的源代码和基于android原生案例,实现了加密扇区读取。分享下代码,希望对大家有帮助。
对于NFC操作的基本部分有很多资料都一样的,这里不再赘述,仅简单介绍MifareClassic验证和读取的过程
1、创建MifareClassic对象,MifareClassic.get(tag);
2、建立MifareClassic类连接,MifareClassic.connect();
3、对扇区(0-15)进行验证,按KeyA和KeyB两种验证,
 (1) MifareClassic.authenticateSectorWithKeyA(sector,key);
  其中sector为扇区号,key为6字节验证码,此处Key需要处理为-128至127的字节,开始使用0x00-0xFF会报错
 (2) MifareClassic.authenticateSectorWithKeyB(sector,key);
  其中sector为扇区号,key为6字节验证码,此处Key需要处理为-128至127的字节,开始使用0x00-0xFF会报错
4、按块(sector*4+i)读取扇区内的16Byte内容,MifareClassic.readBlock(Block);
Block0=sector×4+0;
Block1=sector×4+1;
Block2=sector×4+2;
Block3=sector×4+3;
5、关闭MifareClassic连接,MifareClassic.close();
MifareClassic读取代码

//MifareClassic读取代码  
readData:function(intent){  
    var tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
    var techList = tag.getTechList();  
    var bisMfc=false;  
    for(var i=0;i<techList.length;i++){  
        if(techList[i].indexOf('MifareClassic')>=0){  
            bisMfc=true;  
            break;  
        }  
    }  
    if(!bisMfc){  
        this.ICERROR='卡片类型错误!';  
        return;  
    }  
    var mfc=MifareClassic.get(tag);  
    if(!mfc){  
        this.ICERROR='卡片获取错误!';  
        return;  
    }  
    mfc.setTimeout(3000);  
    if(!mfc.isConnected()){  
        try{  
            invoke(mfc,'connect');   
        }catch(e){  
            this.ICERROR='卡片连接错误!';  
            return;  
        }  
    }  
    try{  
        this.ICUID=this.ByteArrayToHexString(tag.getId());  
        var cmdBytes=this.HexStringToByteArray(this.keyVal);  
        var auth=false;  
        if(this.keyType=="A"){  
            auth=invoke(mfc,"authenticateSectorWithKeyA",parseInt(this.sector),cmdBytes);  
        }else{  
            auth=invoke(mfc,"authenticateSectorWithKeyB",parseInt(this.sector),cmdBytes);  
        }  
        if(!auth){  
            this.ICERROR='扇区验证失败';  
            return;  
        }  
        var sectorData=[];  
        var tmpRet;  
        this.ICData='IC卡扇区数据>>';  
        for(var i=0;i<4;i++){   
            tmpRet=invoke(mfc,"readBlock",this.sector*4+i);  
            this.ICData=this.ICData+'\n';  
            this.ICData=this.ICData+this.ByteArrayToHexString(tmpRet);  
            sectorData.push.apply(sectorData,tmpRet);  
        }  
        console.log(this.ByteArrayToHexString(sectorData));  
        this.ICERROR='读卡完成';  
    }catch(e){  
        this.ICERROR=e.message;  
        console.error(e);   
    }finally{  
        mfc.close();  
    }  
}  
//Key处理函数  
HexStringToByteArray:function(instr) {  
    var hexA = new Array();  
    var pos = 0;  
    var len = instr.length/2;  
    for(var i=0; i<len; i++)  
    {  
        var s = instr.substr(pos, 2);  
        var v = parseInt(s, 16);  
        if(v>=128)  
            v=v-256;  
        hexA.push(v);  
        pos += 2;  
    }  
    return hexA;  
}

项目是基于nui-app项目的vue测试通过的,附件共享了vue文件。
项目需设置android.permission.NFC权限。

收起阅读 »

解决HbuilerX 无法启动的问题

解决 Win HbuilderX无法启动的问题
解决方法如下,删除了注册表中有关hbuilder的东西,就是所有能通过hbuilder字段搜索到的全部删除
然后删除你安装的Hubilder X
然后删除所有用户目录下
例子
C:\Users\用户名\AppData\Roaming\HBuilder X 这个文件夹
然后从官方下载最新的 解压打开就可以使用

继续阅读 »

解决 Win HbuilderX无法启动的问题
解决方法如下,删除了注册表中有关hbuilder的东西,就是所有能通过hbuilder字段搜索到的全部删除
然后删除你安装的Hubilder X
然后删除所有用户目录下
例子
C:\Users\用户名\AppData\Roaming\HBuilder X 这个文件夹
然后从官方下载最新的 解压打开就可以使用

收起阅读 »

郑州app开发外包公司,什么样的公司好呢

移动APP 5+App开发

  找郑州app外包公司开发软件,费用、工期是两个最重要也是最基本的要求。郑州app制作公司知道投资方一般都希望费用越低,工期越短越好,为了拿到单子,很多外包服务商就迎合客户,报开发周期时,就报的很短,就是为了打动客户,先拿下单子再说,但实际情况是开发一款app软件,无论复杂还是简单,都有自己的开发周期,并不是想多快就能多快。

  第一、app开发是一个系统工程,有系统的工作流程

  一个成熟的app软件项目,其实开发过程是一样的。从一个想法到一个产品都要经过这些过程,业务流程确定,功能点梳理,原型图,效果图,架构搭建,前端开发,后端开发,测试,上线。简单的官网也是这个过程,只不过其中一些环节比较简单,用时较少。复杂的APP,每个环节都用时较多。

  app开发是一个系统工作,不太懂技术的人总是以为写代码才是开发产品,其实前期的设计才是关键,真到了开发环节,反而非常可控。但如果一些环节没做好,就会影响相关的环节,甚至导致整个项目失败。

  第二、原生的开发、写代码,测试的时间是绝对的

  一个互联网产品,如果是原生开发,就是大家认为那种通过写代码开发出来的,写代码的时间是必须的,一个程序员每天能写的代码数是固定的,如果一个产品需要10万行代码,一个程序员一天500行,那一个人写简单算就是200天。测试的时间也绝对的,一个产品开发过程中,一直伴随测试,有功能点的黑盒测试,还是测代码质量的白盒测试,还是联调的灰盒测试,可以说产品上线后质量不是决定在开发,而决定在测试,测试一个功能点,从写测试用例到测试,少的几个小时,多则几天。

  讲到这里,大家对互联网产品开发周期为什么不能随意缩短有了大体的认识,也就知道为什么正规的外包公司为什么有时会比小外包公司开发周期还长,因为一个根据流程一步步开发,一个可能节省了很多流程,或用一些模板,结果是上线快了,但你的产品暗伤可能很多,后期升级,修复困难非常大。
本文由专业的郑州app外包公司燚轩科技整理发布。

继续阅读 »

  找郑州app外包公司开发软件,费用、工期是两个最重要也是最基本的要求。郑州app制作公司知道投资方一般都希望费用越低,工期越短越好,为了拿到单子,很多外包服务商就迎合客户,报开发周期时,就报的很短,就是为了打动客户,先拿下单子再说,但实际情况是开发一款app软件,无论复杂还是简单,都有自己的开发周期,并不是想多快就能多快。

  第一、app开发是一个系统工程,有系统的工作流程

  一个成熟的app软件项目,其实开发过程是一样的。从一个想法到一个产品都要经过这些过程,业务流程确定,功能点梳理,原型图,效果图,架构搭建,前端开发,后端开发,测试,上线。简单的官网也是这个过程,只不过其中一些环节比较简单,用时较少。复杂的APP,每个环节都用时较多。

  app开发是一个系统工作,不太懂技术的人总是以为写代码才是开发产品,其实前期的设计才是关键,真到了开发环节,反而非常可控。但如果一些环节没做好,就会影响相关的环节,甚至导致整个项目失败。

  第二、原生的开发、写代码,测试的时间是绝对的

  一个互联网产品,如果是原生开发,就是大家认为那种通过写代码开发出来的,写代码的时间是必须的,一个程序员每天能写的代码数是固定的,如果一个产品需要10万行代码,一个程序员一天500行,那一个人写简单算就是200天。测试的时间也绝对的,一个产品开发过程中,一直伴随测试,有功能点的黑盒测试,还是测代码质量的白盒测试,还是联调的灰盒测试,可以说产品上线后质量不是决定在开发,而决定在测试,测试一个功能点,从写测试用例到测试,少的几个小时,多则几天。

  讲到这里,大家对互联网产品开发周期为什么不能随意缩短有了大体的认识,也就知道为什么正规的外包公司为什么有时会比小外包公司开发周期还长,因为一个根据流程一步步开发,一个可能节省了很多流程,或用一些模板,结果是上线快了,但你的产品暗伤可能很多,后期升级,修复困难非常大。
本文由专业的郑州app外包公司燚轩科技整理发布。

收起阅读 »

分享个hb 即时会话的APP防微信小程序功能

小程序 IM

分享个 hb 即时会话的APP
防微信 带小程序功能 首页
下载链接

继续阅读 »

分享个 hb 即时会话的APP
防微信 带小程序功能 首页
下载链接

收起阅读 »

uni-app 中如何刷新页面

返回刷新 uniapp

我们知道 ,html重新加载页面有几种方式

  1. reload():强迫浏览器刷新当前页面 ;
  2. replace() :通过指定URL替换当前缓存在历史里(客户端)的项目 ;
  3. 添加标签<meta http-equiv="refresh" content="20"> : 页面自动刷新;

而在uni-app 中并没有页面重新加载和刷新当前页面的概念,所以接下来,告诉不会的同学 uni-app 中怎么刷新页面。

如何刷新页面

场景:从个人中心页面,进入登录页面。登录成功之后返回个人中心页面,个人中心页面数据进行相应的变化。

  1. 使用缓存

    点击登录按钮之后,关键代码:

    // ...  
    methods: {  
        bindLogin(e) {  
            try {  
                uni.setStorageSync('login_key', {  
                    avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                    token: 'user123456',  
                    userName: '缓存登录用户',  
                    login: true  
                });  
            } catch (e) {  
                // error  
            }  
            uni.navigateBack();  
        }  
    }  
    // ...  

    返回到个人中心页面,关键代码:

    // ...  
    data(){  
        return {  
            storageData:{}  
        }  
    },  
    onShow: {  
        const loginKey = uni.getStorageSync('login_key');  
    
        if (loginKey) {  
            console.log(loginKey);  
            this.storageData = {  
                avatarUrl: loginKey.avatarUrl,  
                login: loginKey.login,  
                userName: loginKey.userName  
            };  
        }  
    }  
    // ...  
  2. 使用 vuex

    vuex 关键代码

    // ...  
    const store = new Vuex.Store({  
        state: {  
            login: false,  
            token: '',  
            avatarUrl: '',  
            userName: ''  
        },  
        mutations: {  
            login(state, provider) {  
                state.login = true;  
                state.token = provider.token;  
                state.userName = provider.userName;  
                state.avatarUrl = provider.avatarUrl;  
            },  
            logout(state) {  
                state.login = false;  
                state.token = '';  
                state.userName = '';  
                state.avatarUrl = '';  
            }  
        }  
    })  
    // ...  

    点击登录按钮之后,关键代码:

    import { mapMutations } from 'vuex';  
    // ...  
    methods: {  
        bindLogin(e) {  
    
            this.login({  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'vuex登录用户'  
            });  
            uni.navigateBack();  
        },  
        ...mapMutations(['login'])  
    }  
    // ...  

    返回到个人中心页面,关键代码:

    import { mapState } from 'vuex';  
    
    // ...  
    computed: {  
        ...mapState(['avatarUrl', 'login', 'userName'])  
    }  
    // ...  

关联阅读:uni-app 全局变量的几种实现方式

结语: 整体下来都没有什么难点的,推荐使用 vuex 去实现类似功能。

完成示例,请下载附件。

继续阅读 »

我们知道 ,html重新加载页面有几种方式

  1. reload():强迫浏览器刷新当前页面 ;
  2. replace() :通过指定URL替换当前缓存在历史里(客户端)的项目 ;
  3. 添加标签<meta http-equiv="refresh" content="20"> : 页面自动刷新;

而在uni-app 中并没有页面重新加载和刷新当前页面的概念,所以接下来,告诉不会的同学 uni-app 中怎么刷新页面。

如何刷新页面

场景:从个人中心页面,进入登录页面。登录成功之后返回个人中心页面,个人中心页面数据进行相应的变化。

  1. 使用缓存

    点击登录按钮之后,关键代码:

    // ...  
    methods: {  
        bindLogin(e) {  
            try {  
                uni.setStorageSync('login_key', {  
                    avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                    token: 'user123456',  
                    userName: '缓存登录用户',  
                    login: true  
                });  
            } catch (e) {  
                // error  
            }  
            uni.navigateBack();  
        }  
    }  
    // ...  

    返回到个人中心页面,关键代码:

    // ...  
    data(){  
        return {  
            storageData:{}  
        }  
    },  
    onShow: {  
        const loginKey = uni.getStorageSync('login_key');  
    
        if (loginKey) {  
            console.log(loginKey);  
            this.storageData = {  
                avatarUrl: loginKey.avatarUrl,  
                login: loginKey.login,  
                userName: loginKey.userName  
            };  
        }  
    }  
    // ...  
  2. 使用 vuex

    vuex 关键代码

    // ...  
    const store = new Vuex.Store({  
        state: {  
            login: false,  
            token: '',  
            avatarUrl: '',  
            userName: ''  
        },  
        mutations: {  
            login(state, provider) {  
                state.login = true;  
                state.token = provider.token;  
                state.userName = provider.userName;  
                state.avatarUrl = provider.avatarUrl;  
            },  
            logout(state) {  
                state.login = false;  
                state.token = '';  
                state.userName = '';  
                state.avatarUrl = '';  
            }  
        }  
    })  
    // ...  

    点击登录按钮之后,关键代码:

    import { mapMutations } from 'vuex';  
    // ...  
    methods: {  
        bindLogin(e) {  
    
            this.login({  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'vuex登录用户'  
            });  
            uni.navigateBack();  
        },  
        ...mapMutations(['login'])  
    }  
    // ...  

    返回到个人中心页面,关键代码:

    import { mapState } from 'vuex';  
    
    // ...  
    computed: {  
        ...mapState(['avatarUrl', 'login', 'userName'])  
    }  
    // ...  

关联阅读:uni-app 全局变量的几种实现方式

结语: 整体下来都没有什么难点的,推荐使用 vuex 去实现类似功能。

完成示例,请下载附件。

收起阅读 »

头像裁剪压缩,分享下图片裁剪压缩,jq头像裁剪

图片裁剪 头像裁剪

1.可以手动移动底图,放大缩小,随意移动,方框可以改成圆框,我的头像是方框的

2.宣传图片,45度多次旋转,左右旋转,上下旋转




3.裁剪完显示裁剪区域

非常感谢王者地带,是昨天学习了他的app后,自己改造一下,和他稍有区别![/鞠躬]

继续阅读 »

1.可以手动移动底图,放大缩小,随意移动,方框可以改成圆框,我的头像是方框的

2.宣传图片,45度多次旋转,左右旋转,上下旋转




3.裁剪完显示裁剪区域

非常感谢王者地带,是昨天学习了他的app后,自己改造一下,和他稍有区别![/鞠躬]

收起阅读 »

云打包苹果开发者账号被封

iOS打包 打包 Apple云端打包

苹果开发者账号被封 , 被封的原因是 把p12证书和Provisioning Profiles文件上传到第三方打包平台 或 云打包之类的平台 ; 现在账号被封了, 什么鬼? 企业号被封不好解封啊...

苹果开发者账号被封 , 被封的原因是 把p12证书和Provisioning Profiles文件上传到第三方打包平台 或 云打包之类的平台 ; 现在账号被封了, 什么鬼? 企业号被封不好解封啊...