uni-app  
H5+  
MUI  
有问题找组织  

学习讨论群组： 646444826

　　对于分类来说，一般包括一级分类，二级分类，三级分类，一般2级分类是比较好做的，大部分网站都是左边点击二级分类，右边显示相对应商品，这就要用到jquery技术了。下面就来为大家详细分析一下该如何实现吧。

　　首先把二级分类给全部遍历出来，Html代码如下：
<volist name='cate' id='vo'>
<li <if condition="$Think.get.name eq $vo['name']">class="active"</if> onclick="funbrand('{$vo.name}','{$vo.id}')" ">
<span style="font-weight: 600;font-size: 13px;height: 45px; display: flex;justify-content: center;align-items: center;padding: 0;border-right: 5px solid white;" data="{$vo.id}" name="cateid" title="">{$vo.name}</span>
</li>
</volist>

根据需求添加点击事件，写jquery：
jquery代码如下:
function funbrand(id,obj){
debugger;
$(obj).addClass('active');

$(obj).siblings('a').removeClass('active');  
cateid=$("span[name='cateid']").attr('data');  

$('.all').removeClass('active');  
var test=$('.all').attr('title');   
var goodscateid = id;  
 cate_id=$("input[name='cateid1']").val();  
$('#id').val(goodscateid);  
var types = $('#type').val();  
$.ajax({  
    url:"{:U('Mobile/goods1')}",  
    data:{goodscateid:goodscateid,types:types,cate_id:cate_id},  
    dataType:"json",  
    type:"post",  
    success:function(data){  
        alert(data.v);  
        str = '';  
        $('.good_list').empty();  
        if (data.status==1) {  

            $.each(data.shops,function(index,obj){  

             str+='<dl class="clearfix">';  

             if(test=='套餐'){  
                 str+='<dt class="col-sm-5 col-xs-5"  style="text-align: center;margin-bottom:25px;margin-top:25px">';  
                 str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';  
                 str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';  
                     str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"><div style="height:50px; overflow:hidden;"><h4 style="height: 30px; line-height: 10px; color:#000; ">'+obj.gname+'</h4></div><p style=" font-size:18px;"> .... </p><br/> <p class="money" style="margin-top:0px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';  
             }else{  
                 str+='<dt class="col-sm-5 col-xs-5"  style="text-align: center;margin-bottom:8px;margin-top:8px">';  
                 str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';  
                 str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';  
               str+='<span>'+obj.norms+'/'+obj.unity+'</span></a></dt>';  
                str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"> <h4 style="height: 30px; line-height: 15px; color:#000; ">'+obj.gname+'</h4> <p class="money" style="margin-top:30px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';  
            }   

            if (obj.quota!='0') {  
                    str+=' <span style="border: 1px solid #c63731; padding:2px; color:#c63731;border-radius: 8px; font-size: 10px;">'  
                    str+='限购'+obj.quota+ obj.unity;               
                   str+='</span>';  
                     }  
               if (obj.repertor==0) {  
                   if(test=='套餐'){  
                         str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:-15px;right:0px;">';  
                        str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive"  width="30" /></em>';  

                    }else{  
                         str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:5px;right:0px;">';  
                         str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive"  width="30" /></em>';   
                    }  

                      }else{  
                         str+='<em>补货中</em>'  
                    }  
                str+=' </dd></dl>';  
                     })  
            $('.good_list').append(str);  
            $('.good_list').html(str).ready(function(){  

                 $(".addcar").click(function(){  
                 // debugger;  
                var uid = $('#uid').val();  
                var gid = $(this).attr('title');  
                // var cnum = $(this).parent().find("input[class*=num_val]").val();  
                // alert(uid);  
                var cnum=$(this).attr('att');  
                if (uid=='') {  
                    alert('请先登陆');  
                    location="{:U('Mobile/login')}";  
                    return false;  
                }  

                 $.ajax({  
                    url:"{:U('Mobile/goods_info')}",  
                    data:{gid:gid},  
                    dataType:"json",  
                    type:"post",  

                     success:function(data){  
                      // alert(data);  
                        // alert(data.thumb);  
                         // $(".img").src('/Public/Admin/kindeditor-4.1.10/attached/image'+data.thumb);  
                        var thumb=data.thumb;  
                        var tep='/Public/Admin/kindeditor-4.1.10/attached/image'+thumb;  
                          $("#shopping_img").attr('src', src=tep) ;  
                          $('.mo_shopping_quota').text(data.quota);  
                          $('.mo_shopping_gid').text(data.gid);  
                         $(".title").text(data.gname);  
                         $(".shopping_gui").text(data.norms+'/'+data.unity);  
                         $('.shopping_money').text(data.price);  
                         $('.shelflife').text(data.shelflife);  
                         $('.mo_shopping_gid').text(data.gid);   
                        $('.mo_shopping_addnum').text(data.addnum);  
                          $(".mo_shopping").css("display","block");  
                          $('.num').val(data.addnum);  
                         }  
                     })  

                 })  

             });  
         }  
     },  
 })  

}

Php查询并输出，代码如下：
public function goods1(){
$goodscateid=I('goodscateid');
$cate_id=I('cate_id');
$where['brandid']=array('exp',"regexp '(,|^)" .'$cate_id'."(,|$)'");
// $where['bid']=$goodscateid;
// $info=M("brandlist")->where("bid=$goodscateid")->find();
$info=M("brandlist")->where($where)->select();
foreach ($info as $key => $value) {
$bname=$value['bname'];
$shops[] = M('goodsinfo')->where("brandlist='$bname'")->order("gid desc")->find();
}

 foreach ($shops as $key => $value) {  
      $pic=explode(",",substr($value['thumb'],1,strlen($value['thumb'])));  
      $shops[$key]['thumb']=$pic[0];  
}  
if ($shops) {  
      $returnValue['status']=1;  
      $returnValue['shops']=$shops;  

    }else{  
  $returnValue['status']=2;  

    }  
$this->ajaxReturn($returnValue);  

}

　　好了，现在大家已经知道该怎么做了吧，那么如果还存在有疑问的，可以留言咨询，我们可以共同讨论，一起学习进步。

　　本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明原文作者及出处!

以前一直用Dcloud和api开发混合app，最近官方推出一个uniApp 总要一起采坑吧，欢迎大家进群一起交流或者分享经验。

QQ群：854873282。

　　开发一个app多少钱?开发一个app需要多长的时间?这是很多的客户都会问到的一个问题。根据客户的开发的app的类型，开发的需求，不同的app开发都会有范围内的变化。但是一般的app开发的周期在3到6个月，如果需要开发的app功能比较的复杂，或者很特别，有或者有很多新的创意元素，其开发的周期也会相应的延长。如果想要知道具体的app开发的时间需要多久的话，那么下面就跟大家讲解一下app开发中各阶段所花费的大概时间。

　　想要了解开发一款app需要多长时间，需要先知道影响一个app开发的周期的因素有什么呢?除了是选择开发方案的定制还是选择模板以外，还有其他因素影响，这里以定制开发的方案，根据开发方案上的要求，定制开发，满足所有的功能需求。开发的流程中各个阶段需要花费的大概时间。

　　1、数据整合：允许用户访问数据，向第三方展示数据。所花费时间大致为2-3天;

　　2、数据储存：建立本地的app板块，也就是后端进行实现数据储存。所花时间大致为3-5天;

　　3、用户账号管理：创建用户账号的管理，接入管理系统。几分钟时间就可以搞定，不计入总开发时间内;

　　4、框架设计：根据开发的要求，设计app的框架，进行用户的体验和交互。所花时间大致为1-2天;

　　5、UI设计：根据app的特点设计良好的用户体验UI，保持界面的良好的交互性。所花时间大致为7-10天左右;

　　7、UI开发;把UI的模块转变成可以运行的代码，功能界面。所花时间大致为1-2天;

　　8、程序语言开发：根据app开发的功能等各方面的要求，开发出可运行的程序语言，变成可实现功能的app。所花时间大致为2-3个月;

　　9、app测试：测试app的功能性、交互性。站在用户的角度测试app的各方面的内容，包括是bug修复。所花时间大致为3-5天;

　　10、反复的测试app，不断的完善app功能，交互，实现开发方案的所有的需求。所花时间大致为2-3天。

　　影响一个app的开发的周期时间的因素有前端设计、用户界面、 后端整合、用户管理、身份验证等。一个专业的app开发公司能够根据多年来的开发经验，尽量的缩短开发的时间长度，满足客户的要求。信息来由郑州app开发公司燚轩科技整理发布。

uni-app  
H5+  
MUI  
有问题找组织  
学习讨论群组： 418967623  
-------------

算半个标题党吧，当然问题也可能解决了，先说一下遇到的问题吧：
注：此问题只在IOS真机中存在，真机测试都没问题，只有打包安装才有问题
app首页使用了官方提供的原生底部选项卡，一直没有问题，好好的

直到昨天，记忆中没有修改配置文件（只修改了选项卡图标的大小），然后打包安装之后发现，
除首页之外那几个选项卡出现了BUG，感觉就像app的标题栏遮挡住了子webview
我打的ios安装包都是上传到蒲公英上的，之前的没问题，于是我挨个重新安装，找到了一个没问题的（没问题的这个安装包是2天前打的包）
但是我将项目一天天的还原回去的时候，却发现bug一直存在。。
有种感觉B了狗了~
调试了一上午，各种还原各种替换，都没有解决。

而且我将没有问题的安装包，解压，找到www目录，然后把里面的所有文件替换掉本地项目的，也还是不行~
后来在底部选项卡的代码中看到了如下代码：

//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容  
if(mui.os.android) {  
    if(plus.navigator.isImmersedStatusbar()) {  
        subpage_style.top += plus.navigator.getStatusbarHeight();  
    }  
    if(self.getTitleNView()) {  
        subpage_style.top += 40;  
    }  
}

于是尝试把判断是否为安卓的去掉了，成了这样：

if(plus.navigator.isImmersedStatusbar()) {  
    subpage_style.top += plus.navigator.getStatusbarHeight();  
}  
if(self.getTitleNView()) {  
    subpage_style.top += 40;  
}

然后再打包，安装发现好了。。。。
虽然有点懵懂，但是不知道为什么。。。。为什么之前一直好好的，就突然出问题了。。
而且我的项目是每天一次手动全量备份的，我一天天的还原，都还原到一周之前了，也还是不行。。。
所以有些疑惑？有没有其他同行也遇到过这问题？？或者说这是不是一会BUG???

uniapp websocket体验demo：https://ext.dcloud.net.cn/plugin?id=1334

一个项目在方向、目标和运营理念已经定义了的时候，我们会去考虑项目本身的周期和开发成本。当然，所有的公司都会在项目能够达成目标的同时尽量减少人力成本和时间成本，其中，就会有用到三方的软件和框架。
大道至简 知易行难，作为一名开发人员站在开发的角度上来讲，怎样去攻克一个技术难题或者需要学习新的语言、技术去应用于新的项目，已经不会是最大的问题，而时间成本以及人力成本会是一个团队以及公司去考虑的侧重点。怎样去减少这些开发成本最终达到同样的期望效果，今天我给大家介绍一款产品：GoEasy, 简单而强大的三方WebSocket。
机缘巧合中接触到了GoEasy,在一次紧急项目中为了节约开发时间成本而找到了GoEasy,在介绍上看着非常简单，怕的是不够稳定，所以购买了付费的做了并发测试，效果好的有点意外，非常稳定。
这是我跟着官网的入门流程走的步骤：
1 登录 www.goeasy.io
2 注册账号并登录
3 登录进入后台
我的应用→创建应用→选择地区→获取APP keys
这里选择地区有3个选项可以选择，华东（杭州）、美国东部（弗吉尼亚）、新加坡，根据产品使用用户所在地来选择效果最佳。
点开APP keys 查看

我们会获得2个对应的key,一个只能用来订阅channel来接收消息的Subscribe key和一个既可以发送消息也可以订阅channel来接受消息的Common key。
OK 现在用一个demo来展示，为什么只需要9分钟。
服务器→客户端
这里我用JAVA来演示，当然 GoEasy适用于任何语言和浏览器。
先用JAVA写一个Demo
package com.cy;

import io.goeasy.GoEasy;
import io.goeasy.publish.GoEasyError;
import io.goeasy.publish.PublishListener;

public class GoEasySdkTest {

public static void main(String[] args) {  
    GoEasy goEasy = new GoEasy("rest-hangzhou.goeasy.io", "your app keyXXXXXXXXXXXXXXXXX");  
    goEasy.publish("demo", "HelloWorld", new PublishListener(){  
        @Override  
        public void onSuccess() {  
            System.out.println("Publish Success");  
        }  

        @Override  
        public void onFailed(GoEasyError error) {  
            System.out.println("Publish failed "+error.getCode()+":"+error.getContent());  
        }  
    });  
}  

}
这里需要注意的是，我这里用的GoEasy的依赖包,可以直接下载
用html 写一个接收端
<html>
<head>
<script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
<script type="text/javascript">
var goeasy = new GoEasy({
appkey: 'your app keyXXXXXXXXXXXXXX'
});
goeasy.subscribe({
channel: 'demo',
onMessage: function(message){
//收到消息的第一行，打出日志，以这个时间作为检查的标准
alert('收到：'+message.content);
}
});

    </script>  
</head>  

</html>
这里我用的是Common key，在实战项目中，接收端使用Common key会存在安全缺陷，建议使用Subscribe key。
还有需要注意的一点就是，CDN host和Rest host 取决于你在创建应用时的选择。
最后从页面接受结果可以看到与C#中demo content推送的内容一致。

同时，我们也可以完成客户端→客户端的推送
发送端
<!DOCTYPE html>
<html>
<html>
<head>
<script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
<script type="text/javascript">
var goeasy = new GoEasy({
appkey: 'your app keyXXXXXXXXXXXXXX'
});

        function publishMessage() {  
            var publishMessage = document.getElementById("content").value;  
            goeasy.publish({  
                channel: 'demo',  
                message: publishMessage,  
                onFailed: function (error) {  
                    alert(error.code+" : "+error.content);  
                },  
                onSuccess: function(){  
                    document.getElementById("content").value='';  
                }  
            });  
        }  

    </script>  
</head>  
<body>  
<textarea rows="3" cols="20" id="content">  

</textarea>  
<button id="fasong" onclick="publishMessage()">Send</button>  

接收端代码不变，我们从发送端发送消息

最后接受成功

同样的app key在不同的代码以及环境中都能够达到同样的效果，GoEasy 在让WebSocket变简单的过程中为开发人员极大的减少了时间和人力成本，如果您对安全性有要求的话，GoEasy 付费项目中有OTP 。是官方独有的技术，完全保证了消息的安全。

Hbulider能实现手机直播吗?

一个小时了，等着打包下不了班

　　对于投资app开发来说，最常见的例子，很多人上来就问做一个手机app多少钱?或者问做一个简单的手机app多少钱?这对于很多郑州app开发公司来说，根本没有办法回答，为什么呢?接下来专业的郑州app开发公司燚轩科技来分别回答一下这些问题，看完之后大家就明白了，为什么询问app开发报价之后无法得到一个准确的答复。

　　第一种，问做一个手机app多少钱?

　　其实问这个问题就像是到手机专卖店问，一个手机要多少钱一样，手机有三五百的，也有三五千上万的，手机的品牌、用途、配置等不一样价格是天差地别的，同理，问手机app也一样。必须表达清楚自己要的是什么样的手机app，用于什么场景，解决什么问题，具体需要哪些功能，没有这些就来问价格，简直就是到手机专卖店直接说我要一个手机，你告诉我价格就行了!店员肯定一脸懵逼，用看稀奇的眼神来看你，因为你根本就没有说要买什么样的手机!因此，对于这个做一个手机app多少钱的问题，那么答案是：从几百几千到几个亿，都有可能!

　　第二种，我要做一个简单的手机app，多少钱?

　　其实，每个人对于简单的定义是不一样的，你说的简单具体简单到什么程度，又具体要做什么东西的，要知道很多人认为微信也挺简单的...没有具体的说明，根本就谈不上简单不简单!因此，对于这个问题，那么给出的回答则是：请说清楚具体功能要求先。

　　很多不负责的手机app开发商只会告诉客户开发一个手机app很简单，快点签合同开工吧!但是客户都说不清楚手机app具体需要哪些功能，开放商怎么会知道呢?如果寄希望于开发商为你思考细节，最可能的结果就是给你偷换概念，这样报价才会更低，增加选择他的机会!例如，一个客户只说要注册登录，而没有提要找回密码，这个不负责任的开放商也难得糊涂，没有提醒他，最后这手机app就没有找回密码功能。

更新：从HBuilderX版本0.1.51或以上开始，uni-app支持使用npm安装第三方包。使用方式参考NPM支持。

以下为过期信息=================================================
HBuilderX版本0.1.50或以下版本参考以下文章使用。

uni-app 的目录结构，不是src、dist并列方式。
HBuilderX里的uni-app，根目录是相当于src，dist并放到了unpackage目录下。
src目录下是不能直接 npm install 引入第三方库的。
你可以在别处install，然后把相关文件copy到src下。

本文以 echarts 为例讲解 uni-app 如何引用 npm 第三方库。

1. 下载第三方库

uni-app 使用了 mpvue 的部分代码，所以我们的 echarts 库使用兼用 mpvue 版本的 mpvue-echarts，同时需要引用百度的 echarts。

下载流程如下：

• 创建一个空的文件夹如：test-echarts。
• 进入 test-echarts 打开命令行工具，执行 npm init 一路回车即可。
• 下载第三方库：npm install echarts mpvue-echarts --save。
• 进入 node_modules 目录，里面的三个目录：echarts、mpvue-echats 、zrender 就是我们需要的第三方库。

2. 创建uni-app工程

在 HBuilderX 里面新建 uni-app，将将刚才下载的三个文件夹拷贝到项目根目录，最终项目截图如下：

3. 在uni-app里面使用第三方库

和一般的 vue 项目引用第三方库的方法一样，如下所示，这样我们就能在工程里面使用 echarts 和 mpvue-echarts 了。

import * as echarts from 'echarts'  
import mpvueEcharts from 'mpvue-echarts'

本示例源码在附件工程里面，下面是部分代码和效果截图：

<template>  
    <div class="container">  
        <mpvue-echarts :echarts="echarts" :onInit="onInit" />  
    </div>  
</template>  

<script>  
    import * as echarts from 'echarts'  
    import mpvueEcharts from 'mpvue-echarts'  

    function initChart(canvas, width, height) {  
        ......  
    }  
    export default {  
        data() {  
            return {  
                echarts,  
                onInit: initChart  
            }  
        },  
        components: {  
            mpvueEcharts  
        }  
    }  
</script>  

<style>  
    .container {  
        flex: 1;  
    }  
</style>

大家对做菜的流程都不陌生，确定菜式，准备材料，烹饪食材后，即可出锅摆盘，正式开动。而开发一款电商app的流程，也可如此简单，不懂的小伙伴们可以看过来！
开发电商app的详细流程如下：
一、 需求确定
需求确定是第一步也是至关重要的一步，不仅因App的整个生命周期都以用户需求为中心，还因需求决定着app开发的方式，新兴的“SaaS”模块化技术开发电商App是现在比较流行的。
电商App开发平台需要与客户进行详细的沟通，梳理出客户的功能需求、周期、费用等内容，梳理出客户的具体要求，让电商App开发平台精准把握客户的定位，并构思功能如何实现。
如果客户对电商App的功能不是特别了解，可以参考力谱云app制作平台中，大量成功的电商App经典案例。
二、 素材准备
确定需求后，下一步是客户明确表达出产品理念和设计需求，电商App开发平台的UI设计师会应客户需求，设计商城图标、启动页等基本素材，供App填充内容。
在App开发过程中，需要与一些第三方平台进行接洽。客户需要提供一些必备素材，供第三方账号申请。
第三方支付：微信app支付，微信公众号支付，支付宝支付所需资料。
第三方登录：QQ登录，微信登录，微博登录所需资料。
应用市场上架：苹果应用市场、腾讯应用宝、360手机助手所需资料。
三、 应用制作
需求确定好，素材也完备了之后，接着就可以进入应用制作了。目前的主流开发技术普遍采用SaaS模式。
SaaS技术的优势在于，它能将功能组件模块化，并提前开发好。既能减少App制作成本，又能缩短App制作时间。
采用SaaS技术的电商App开发平台，只需应客户的功能需求，进行模块组建、商城配置，并对App进行内容填充、布局规划和初始设置即可，历时一两周就可以搭建完成一个电商App。
四、 测试
App制作完成后，还需要进行关于功能、性能等方面的测试，以保证App的正常运行与功能完整性。
五、 应用上架
产品交付后，开发好的App还需要提交到各应用市场进行上架。
力谱云App制作平台，作为目前仅有的全网合一开发平台，支持iOS App、安卓App、小程序、微商城、移动网站的同时搭建，还可帮助客户同时申请App在App Store、安卓应用市场及微信中上架。
六、 支付培训
电商App上线后，如何实操，无需客户忧心。可靠的电商App开发平台会提供专业的培训。目前，电商app开发平台力谱云向客户所提供的详细培训，包括平台使用、应用更新、运营管理等系列方面。
七、 App维护和更新
除此之外，App后期的维护和更新也是许多人关心的重点。
好的电商App开发平台会有专业的技术团队，进行技术维护，App更新升级，可以从团队规模、技术经验、以及案例方面进行调研。
当前，电商App开发平台力谱云，会定期、免费做软件的维护和更新。
如此一来，一个看似简单的app开发，经由以上流程至此就算全部完成了。