说明：
首先说明，官方建议隐藏HTML的头header，而不是隐藏wap2app的原生头。
因为wap2app的原生头渲染更快，页面加载时不会出现整屏白屏的情况。

情景：
但是wap站的header中已存在相关的逻辑，功能全部移到原生标题栏上很是麻烦。因此，我们为了解决双标题问题，需要禁止原生标题栏。

如何隐藏？
sitemap.json如下：
{
"global": {
"webviewParameter": {
"titleNView": false, //禁用原生标题栏
"statusbar": {
//系统状态栏样式(前景色)
"style": "dark",
"background": "#F7F7F7"
},
"appendCss": "",
"appendJs": ""
},
"easyConfig": {
"quit":{
"toast":{
"showFeedback": false
}
},
"open": {
"animation": {//窗口切换动画配置 参考文档 【http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12750】 -> open.animation
"type": "pop-in", //窗口动画类型 默认为 slide-in-right
"duration": 300
}
}
}
},
"pages": [
{
"webviewId": "W2Ahello.wap2app.dcloud.io",//首页
"matchUrls": [
{
"href": "http://hello.wap2app.dcloud.io"
}, {
"href": "http://hello.wap2app.dcloud.io"
}
],
"webviewParameter": {
"titleNView": false,
"statusbar": {
//状态条背景色，
//首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条，则建议将首页的statusbar配置为false，这样状态条可以和原生导航条背景色保持一致；
"background": "#f7f7f7"
}
}
},
{//未适配的公共页面，可拦截原生下载和头部导航栏, 注：通配符的规则+放在最后一个节点才能达到适配所有未适配的公共页面效果，适配规则优先级为自上而下查找匹配规则
"webviewId": "common",
"matchUrls": [
{
"hostname": "R:.",
"pathname": "R:."
}
],
"webviewParameter": {
"titleNView":false,
"statusbar": {
"style":"dark",
//状态条背景色，
//首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
"background": "#F7F7F7"
}
},
"easyConfig": {
"quit":{
"toast":{
"showFeedback": false
}
},
"open": {
"animation": {//窗口切换动画配置 参考文档 【http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12750】 -> open.animation
"type": "pop-in", //窗口动画类型 默认为 slide-in-right
"duration": 300
}
}
}

    }  
]  

}

今天不讲太多具体的技术，随便侃一侃websocket，想到哪说哪。

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

和comet相比
相比comet技术，websocket不仅节约了header的问题（websocket的head信息只有短短的2个字节）。更加重要的是是通信的稳定性，comet在遇到网络问题之后，想要在不刷新页面的情况下恢复通信，非常困难，而websocket中提供了onclose函数来处理断开网络后的情况，这为我们与服务器的通信提供了可靠的保障。在、github上有一个js库
（https://github.com/joewalnes/reconnecting-websocket）就是通过这种方式来处理websocket断网重连。
当然这么好用的websocket也不是没有它的问题，websocket目前来看最大的问题是浏览器的支持（幸好大部分的服务器软件在比较新的版本中都已经支持了websocket），ie直到10才开始支持这种协议，而且每个浏览器最近在升级浏览器的时候，都会对websocket做出细微的调整。而且，想象你打开一个页面，当这个页面打开websocket连接并且执行一个内部IP地址的端口扫描,如果端口扫描发现了内部网络上发现了一个开启的80端口，一个隧道就可能通过你的浏览器建立。这样做很可能最终绕过防火墙，并且允许访问内部内容。所以安全问题，也是websocket现在面临的一大隐患。
WebSocket是HTML5出的协议，也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）。
首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充。有交集，但是并不是全部。
另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。通俗来说，你可以用HTTP协议传输非Html数据，就是这样。再简单来说，层级不一样。
WebSocket的协议是持久化的，而HTTP是非持久化的协议。
今天说到这里，关于WebSocket的下次我们接着聊。www.goeasy.io 这家是专门做WebSocket的，有兴趣可以关注一下。

关于微信支付的时候，一直提示-1的问题，我也是整理了半天，才弄出来个原因，

首先，准备工作要做好，要保证：
1、menifest.json中配置了微信的appid
2、服务端请求prepareid正确返回；
3、服务端返回数据格式与官方一致：
4、android版云打包，数字签名，与微信开放平台配置一致（不会的用百度）；
这四个要保证

一、确保APP端代码没有问题
先保证用官方的基座然后模拟器测试，可以正常调起微信支付，这一点是为了保证APP里面的代码是正常的，
因为微信支付不能真机调试，而且我用自定义基座也不能正常更新，不知道是不是BUG
官方文档：支付插件配置
注意：此文章里面，官方中微信接口的链接改成这个：http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/?total=

二、将APP端请求的代码改成自己的
如果你是用上面的文档的代码的话，将WXPAYSERVER的值改成自己的服务器接口链接，然后自己证书打包安装在手机上

然后就是处理服务器端就可以了，此时安利几个工具：Fiddler(抓包)、PostMan(模拟请求)以及一款可以内网穿透的工具(如Ngrok)
有了上面三个工具，可以开心愉快的测试了

三、服务器端处理
我用的是TP5，但是其他的也一样，使用的是微信的SDK；
这一点，咱官方也是有一个github文档微信支付示例
关于这一点，如果你只按上面的文档来的话，你不会成功的，因为微信支付有两个点：1、先生成prepareid（预订单），2、根据prepareid再进行一次签名才可以返回给app！
1、生成预订单：
使用微信的SDK，要在config中配置四个参数：APPID、MCHID、KEY、APPSECRET，四个参数是什么意思在SDK中有，注意，key这个参数在下面也要使用到
我的是这样的：

        $wxOrderData = new \WxPayUnifiedOrder();  
        $wxOrderData->SetOut_trade_no($this->orderNo); //这个换成自己的订单号  
        $wxOrderData->SetTrade_type('APP');//这个参数是固定的，必须是APP  
        $wxOrderData->SetTotal_fee($orderPrice * 100); //这个是支付金额（单位是分）  
        $wxOrderData->SetBody('XXX商城'); //这个自己随意  
        $wxOrderData->SetNotify_url( $backUrl ); //这个回调，这个地址也是你自己的  
        $result = \WxPayApi::unifiedOrder($wxOrderData); //此时$result就是返回的prepareid的信息  
        // 请先确保这里请求成功，成功的话是预订单这个$result ['prepay_id']，然后调用$this->sign($result ['prepay_id']);，返回的数组就是要向app返回的信息

 2、生成签名并返回详细信息  
   之前做过小程序支付，也有这一步，于是就将小程序的代码复制过来了，结果失败，就一直没找到原因，直到我看到微信APP开发文档的时候，有这么一句话：不好意思，刚才去找了一下，，，，找不到了，反正就是签名是由五个参数生成的：timestamp、appid、partnerid、prepayid、noncestr、package，这五个少一个都不行！

    private function sign($prepayid) //$prepayid这个参数就是第1步里面获取的预订单id  
    {  
        $time = (string)time();  
        $rand = md5(time() . mt_rand(0, 1000));  
        $data = [];  
        $data['timestamp'] = $time;  
        $data['appid'] = '这是你的appid';  
        $data['partnerid'] = '这是你的商户号';  
        $data['prepayid'] = $prepayid;  
        $data['noncestr'] = $rand;  
        $data['package'] = 'Sign=WXPay';  //介个是固定的  

        $sign = $this->MakeSign( $data );  

        $data['sign'] = $sign;  
        return $data;  //这个数组就是返回给app的信息  
    }  
    private function ToUrlParams($data)  
    {  
        $buff = "";  
        foreach ($data as $k => $v)  
        {  
            if($k != "sign" && $v != "" && !is_array($v)){  
                $buff .= $k . "=" . $v . "&";  
            }  
        }  

        $buff = trim($buff, "&");  
        return $buff;  
    }  
    private function MakeSign( $data )  
    {  
        //签名步骤一：按字典序排序参数  
        ksort($data);  
        $string = $this->ToUrlParams($data);  
        //签名步骤二：在string后加入KEY  
        $string = $string . "&key=你的key";  //注意，敲黑板了，这里还要加上在config中配置过的key  
        //签名步骤三：MD5加密  
        $string = md5($string);  
        //签名步骤四：所有字符转为大写  
        $result = strtoupper($string);  
        return $result;  
    }

四、对比官方返回的参数，官方返回的参数是下面这样的：

{  
    "appid": "wx0411fa6a39d61297",  
    "noncestr": "9p5hdwtt0jsoYw22",    
    "package": "Sign=WXPay",   
    "partnerid": "1230636401",  
    "prepayid": "wx121809269549694a9dde5a333322923488",  
    "timestamp": 1534068566,  
    "sign": "19174B7A2EE5463007FFFF8298F4538E"  
}

  可以将自己的返回信息和上面的进行对比，发现是一样的，都是7个参数，且参数都一样  
 注：有的时候，第一次拉取成功了，但是并没有支付而是返回了，然后再拉取的时候会报错，因为订单号重复了，这时候有抓包的工具的话，是可以看到prepayid是null，因为预订单是有时效的，这个需要自己在做一下判断。  
 还有一个注意点：plus.payment.request发起支付的时候，接收到的参数是json格式的字符串而不是对象，这点要注意一下，因为我封装了ajax请求，默认将json格式转为对象，所以在用的时候要将参数再转为字符串  

以上是我自己的经验，有啥问题大家都可以分享一下。

　　账户金额明细表是统计用户所花的每笔金额和用户所在这个系统所赚的每笔金额，通俗的讲也就是收入和支出。但是很多编程技术人员在刚开始的时候，不知道如何去实现，往往或出现有收入记录却无支出记录，或者是相反的情况，所以对于这个问题，下面专业的郑州app开发公司燚轩科技就来为大家分析讲解一下。

　　1、客户所在本系统消费的金额所产生的提成，写入本记录表中。php代码如下：
if(I('pay_state')==2 && I('state')==3){
$money=$info['money']/100;
$uid=$info['uid'];
$update['authe_uid']=$info['uid'];
$user=M('user');
$list=$user->where("uid=$uid")->find();
$sale_uid=$list['sale_uid'];
$update['sale_uid']=$list['sale_uid'];
$bili=M('sys')->where("id=1")->find();
$bi=$bili['sale_rate']/100;
$put_money=$money$bi/100;
$update['money']=$put_money100;
$update['real_money']=$put_money100;
$update['time']=time();
$update['state']=1;
$update['type']=2;
$sale_user=M('sale_user');
$sale=$sale_user->where("sale_uid=$sale_uid")->find();
$up['tal_money']=$sale['tal_money']+$put_money100;
$sale_user->where("sale_uid=$sale_uid")->save($up); }
　　2、平台给销售代理定时发放的金额，写入本记录表中。php代码如下:
public function dopay_money(){
if(I("bank_card")==''){
error("打款账号不能为空");die;
}
if(I("money_num")==''){
error("打款单号不能为空");die;
}
if(I("money")==''){
error("打款金额不能为空");die;
}
if(I("money")>I("tal_money")){
error("账户总金额不足");die;
}
$bank_card=I("bank_card");
$money_num=I("money_num");
$money=I("money");
$sale_uid=I("sale_uid");
$info=M("sys")->where("id=1")->find();
$min_money=$info['min_money']/100;
if($money<$min_money){
error("打款金额最低为".$min_money."元");
}
$sale_user=M("sale_user");
$moneyb=M("money");
$userinfo=$sale_user->where("sale_uid=$sale_uid")->find();
$data['tal_money']=$userinfo['tal_money']-$money*100;

if($sale_user->where("sale_uid=$sale_uid")->save($data)){  
  $da['sale_uid']=$sale_uid;  
  $da['money']=$money*100;  
  $da['real_money']=$money*100;  
  $da['time']=time();  
  $da['state']=2;  
  $da['type']=1;  
  $da['bank_card']=$bank_card;  
  $da['money_num']=$money_num;  
  if($moneyb->add($da)){  
    success("成功",U("Oasys/sale"));  
  }else{  
    error("失败");  
  }  
}  

}
　　好了，看到这里相信大家都知道该如何去做了，那么如果大家还是存在一些细节问题的话，可以留言咨询，我们看到后会第一时间回复。本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明出处。

缩略图不显示原因
thumbs这个参数必须是数组而不是字符串

uni-app 跨平台应用开发教程已经发布
一套代码可以发布为ios Android app、小程序。
课程总计25节 + 补充课程覆盖了开发中常用的知识点，知识点覆盖率 90% 以上！
通过课程您将学会：
1、uni-app
2、小程序
3、vue 基础
课程购买地址
https://ke.qq.com/course/323825?tuin=4f8da6

有什么解决方案，可以避免WX_SECRET等信息泄露？

文章内容已过期，最新版HBuilderX在处理less、scss、stylus时无需如此复杂。HBuilderX插件管理里安装less等编译插件后可直接使用。
但以下内容对typescript、coffeescript、pug仍然有效，使用下面的方式更换对应loader。
有个注意，uni-app插件目录会随着uni-app插件的升级而被替换。

==============分割线==============

1. 找到HBuilderX安装目录下的 plugins\uniapp 目录

2. 在该目录下的命令行窗口执行 npm install less less-loader --save（可使用cnpm）安装加载器

3. 打开plugins\uniapp\build\webpack.base.conf.js 文件，添加

   {  
   test: /\.less$/,  
   loader: "style-loader!css-loader!less-loader",  
   }

   到module.rules下。

4. 然后就可以在vue文件中使用less编写css了，例：
   <style lang="less">
   @import "../../static/css/tools.less";
   </style>

现在只能设备越来越多，好多app都需要和蓝牙打交道，如果能把蓝牙这一块完善一下的话就好了。特别是针对低功耗蓝牙的的支持。

前言

mui是一款接近原生App体验的前端框架，只需要掌握前端技术就可以开发APP应用，官方有提供功能比较全面的demo版本，
但在实战中总会遇到一些不可避免但坑，对于没有接触过mui的开发者，难免会浪费很多时间在踩坑上。

该项目以mui为开发框架，artTemplate.js作为js模版引擎，没有繁琐的配置和编译过程，拿来就可以上手，适合刚接触mui的同学参考和学习

项目运行

项目地址

git clone https://github.com/EasyTuan/mui-kidApp.git  

打开HBuider，打开项目

右键项目=>转换为移动App

运行=>真机运行(需要usb连接手机)

注：服务器到期，接口服务不再支持，能正常登陆和退出，不影响正常功能但预览和学习

目标功能

• [x] 定位功能 -- 完成
• [x] 选择城市 -- 完成
• [x] 展示所选地址附近商家列表 -- 完成
• [x] 在高德地图中寻找店铺 -- 完成
• [x] 搜索文章，赛事 -- 完成
• [x] 商家列表页 -- 完成
• [x] 店铺评价页面 -- 完成
• [x] 单张卡牌详情页面 -- 完成
• [x] 商家详情页 -- 完成
• [x] 登录、注册 -- 完成
• [x] 三方微信、QQ登陆 -- 完成
• [x] 修改密码 -- 完成
• [x] 个人中心 -- 完成
• [x] 发送短信、语音验证 -- 完成
• [x] 赛事列表 -- 完成
• [x] 赛事详情 -- 完成
• [x] 添加、删除、修改收货地址 -- 完成
• [x] 帐户信息 -- 完成
• [x] 服务中心 -- 完成
• [x] 红包 -- 完成
• [x] 上传头像 -- 完成
• [x] 卡牌对战发起 -- 完成

业务介绍

入口地址为 html/main.html

目录结构

├── css                     //css样式文件  
├── fonts                       //字体图标  
├── html                    //页面  
├── images                  //图片  
├── js                      //js  
│   └── lib                         //js第三方库  
├── unpackage               //App图标、启动页  
└── manifest.json           //App配置文件  

部分截图展示

说明

如果对您有帮助，您可以点项目地址 "Star" 支持一下 谢谢！ ^_^

或者您可以 "follow" 一下，我会不断开源更多的有趣的项目

如有问题请直接在 github Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR

更新：新版HBuilderX已经实现新建页面时自动创建文件夹、自动创建vue文件、自动添加pages.json信息。

========以下为过期信息，但可以作为利用node扩展HBuilderX功能的一个案例============

之前有小伙伴提到过，uni-app 创建页面时，应该同步 pages.json 等相关配置信息。
鉴于目前 HBuilderX 中还未实现此功能，这里分享一个简单的方法来实现此功能。

var fs = require('fs');  

var jsonPath = 'pages.json';  
var dirPath = 'pages/{name}';  
var pagePath = 'pages/{name}/{name}.vue';  
var pageReg = /{name}/g;  
var encodeType = 'utf8';  
var comment = '//pages数组中第一项表示应用启动页';  

var pageTpl =  
  '<template>\n\  
\t<view>\n\  
\n\  
\t</view>\n\  
</template>\  
\n\  
<script>\n\  
\texport default {\n\  
\n\  
\t}\n\  
<\/script>\n\  
\n\  
<style>\n\  
\n\  
</style>';  

var build = function (name) {  
  // 创建目录  
  fs.mkdir(dirPath.replace(pageReg, name), (err) => {  
    if (err) {  
      throw err;  
    }  
    // 创建vue文件  
    fs.writeFile(pagePath.replace(pageReg, name), pageTpl, encodeType, err => {  
      if (err) {  
        throw err;  
      }  
      // 同步pages.json中的内容  
      try {  
        var pagesJson = '';  
        var pagesOptions = null;  

        pagesJson = fs.readFileSync(jsonPath, encodeType).replace(comment, '');  
        pagesOptions = JSON.parse(pagesJson);  

        pagesOptions.pages.push({  
          path: pagePath.replace(pageReg, name),  
          style: {  
            navigationBarTitleText: name  
          }  
        });  

        fs.writeFileSync(jsonPath, JSON.stringify(pagesOptions), encodeType);  
      } catch (err) {  
        if (err) {  
          throw err;  
        }  
      }  
    });  
  });  
};  

/**  
 * 根据名称，创建目录及vue文件，并在pages.json中新增page的配置。  
 */  
if (process.argv.length !== 3) {  
  console.log('参数个数不正确！');  
} else {  
  build(process.argv[2]);  
}

使用方法
将附件中的 build.js 文件解压出来，放在 uni-app 项目的根目录下。

在 uni-app 项目的根目录下打开一个命令行工具

$ node build.js {page}

{page} 就是页面名称，比如输入

$ node build.js hello

就会在 pages 目录下新建一个 hello 目录以及下一级的 hello.vue，同时 pages.json 中的 pages 节点，也会新增页面的配置。

{  
  "pages": [{  
    "path": "pages/index/index",  
    "style": {  
      "navigationBarTitleText": "uni-app"  
    }  
  }, {  
    "path": "pages/hello/hello.vue",  
    "style": {  
      "navigationBarTitleText": "hello"  
    }  
  }],  
  "globalStyle": {  
    "navigationBarTextStyle": "white",  
    "navigationBarTitleText": "uni-app",  
    "navigationBarBackgroundColor": "#0faeff",  
    "backgroundColor": "#fbf9fe"  
  }  
}

缺点

• 仅支持新建一级目录下的页面

之后 HBuilderX 会逐步完善此类操作功能，这里的示例小伙伴们可以参考继续做扩展。

热门话题

近期最为热门的话题，当属 uni-app 了。

• uni-app全局变量如何定义：支持 vuex，可以借助 vuex 来实现全局变量。
• 【报Bug】uni-app扫码组件，非数字条码识别错误：一维码识别的问题已修复，请关注更新。
• uni-app的reLaunch每次都会出现启动页：已调整该 API 的实现，请关注更新。
• uni-app 的请求是否只支持 https：https 的限制是小程序的，移动应用并未做限制。

问题清单

• 选择照片后怎么知道照片大小：通过 plus.io 模块的方法可以读取目录/文件的基本信息。
• hbuilder 打包的app无法安装：近期调整了一些内容，导致部分云打包的应用无法正常安装。此问题已修复，详见帖子。
• 谷歌上架 targetSdkVersion 的问题：详见帖子。
• 【报Bug】安卓下不能正确返回文件类型：问题已修复，请关注更新。

开源及分享

• uni-app 开发者成功开发并发布应用，详见 lusita.cn。
• uniShop是基于Dcloud的uniApp开发的支持小程序、ios、android的B2C商城模板：uni-app 项目分享。
• 基于 MUI 构建一个具有 90 +页面的APP应用：一位小伙伴分享的，内容丰富的应用。

多说几句

uni-app 已经发布两周有余了，小伙伴们也都积极参与并反馈问题与意见。uni-app 希望有更多的小伙伴加入，成为它成长中的一员。

许多小伙伴可能会习惯于在 QQ 群问问题，但是 QQ 群适合咨询和小伙伴之间讨论，并不适合反馈问题和需求。

• QQ 消息一闪而过，一些信息很容易被忽略掉。
• 工作期间如果一直盯着 QQ 看，工作效率会非常低。
• 问答社区可以方便地去翻阅，或者转发。
• 同样的，社区的内容可以沉淀下来，为后来的小伙伴提供更多的帮助。

总之，在使用产品的过程中，遇到问题或者疑惑，请前往问答社区反馈。

PS：如何正确高效地在社区提问

最后

本周的动态就是这些，希望能对大家有所帮助。同时，也希望更多的小伙伴在社区分享自己的经验心得，交流学习。

祝大家周末愉快。