首先，为什么要从mpvue转uni-app？
因为uni-app对vue语法支持更全面（如支持过滤器）、性能更高（尤其是组件较多的复杂页面）、包体积更小（因为mpvue把公共组件会编译到每一个页面里）、支持平台更多（支持H5和App）、生态更完善（uni-app插件市场有数千个插件）。
这里有详细的跑分和评测，比较了uni-app、mpvue、taro等框架，https://juejin.im/post/5ca1736af265da30ae314248

然后进入正题。

uni-app与mpvue，都是使用vue语法开发小程序。从语法支持度来讲，mpvue是uni-app的子集。
所以mpvue开发的小程序可不用改代码可直接变为uni-app。
但需要修改工程配置，可以参考以下教程手动移植。

项目迁移

1. HBuilderX里新建默认模板的uni-app项目，或者使用cli创建，在全局安装vue后，可执行vue create -p dcloudio/uni-preset-vue my-project 创建工程。详见
2. 如果是cli创建，那工程结构基本相同。对应复制页面文件即可。可跳过下面的第3步。
3. 如果在HBuilderX创建的项目，它的src是根目录，此时将mpvue项目src目录内的文件拷贝到uni-app项目。（参考下图）
4. 建立页面配置，根据原项目的app.json或者main.js内的页面配置填写pages.json的内容，并删除原来的页面配置。如果项目未手动配置所有页面，需要根据pages目录内的页面手动增加页面信息。每个页面单独的配置从相关页面的main.json文件或者main.js文件内拷贝，并删除原有配置。
5. 修改页面文件名称，删除每个页面的main.js和main.json文件，并将页面名称修改为main.vue。
6. 静态资源拷贝，将原项目static目录拷贝到uni-app项目，查找页面和组件内对资源的引用，检查并修正路径。
7. 手动安装package.json文件dependencies节点下的模块（忽略mpvue、vuex、flyio，这些已经内置在uni-app内），安装方式可参考参考社区文章：uni-app引用npm第三方库，可直接使用npm管理依赖：NPM支持。

组件复用

一般的单文件组件可直接拷贝到项目内复用，微信小程序自定义组件放置到wxcomponents 目录，具体参考，使用npm包管理的组件参考npm模块的复用方式安装到本地。

Mpvue专有api的处理

mpvue有些自己的api，

• 比如e.mp.touches[0]，推荐改为标准的e.touches[0]。如果不改，也能兼容运行。
• 还有一些比如mpvue.request，需要改为uni.request。如果之前的写法是wx.request，则不用改，uni-app直接兼容wx写法。

注意事项

• 标签方面，不需要把div改成view，编译器会自动转。
• 手动安装的模块需要使用相对路径引入
• 手动安装的模块版本要和原项目要求一致
• 手动安装的模块的依赖要一并安装。
• uni-app强化了条件编译以适合多端发布，这是mpvue没有的重要功能，具体参考
• mpvue相当于uni-app的模板编译模式，或称为非自定义组件编译模式，和自定义组件模式还有差异，差异详见：https://ask.dcloud.net.cn/article/35843 。另外非自定义组件模式，因为性能不好，已经被淘汰。详见https://ask.dcloud.net.cn/article/36385

移植示例

• uni-one
  注意该示例是非自定义组件模式。

附录：mpvue开源资源集合

三方ui库：

• WeUI - 用 vue 写小程序，基于 mpvue 框架重写 weui。https://github.com/KuangPF/wxapp-vue
• mpvue-zanui - 使用 mpvue 框架重写 zanui。https://github.com/samwang1027/mpvue-zanui
• mp-weui - 基于 mpvue 和 weui-wxss 封装的小程序UI库。https://github.com/youngluo/mp-weui
• mpvue-iview-weapp -基于mpvue导入iview-weapphttps://github.com/wkl007/mpvue-iview-weapp

注意这些mpvue的ui库，只能跨微信小程序和app，无法跨到h5和支付宝百度头条小程序。真正7端全跨的ui库参考这里：https://ask.dcloud.net.cn/article/35489

模板、示例工程

IT之家 资讯模板
仿美团示例
todolist
豆瓣电影示例
CNode论坛示例
vue-mpvue-ChatRobot聊天机器人
mpvue-jithub Mini program for Github
外卖小程序 Demo
blog
微信小程序商城
公交查询
H5 和 微信小程序同时开发 数独游戏
截屏分享，分享小程序时，当前页面都需要截屏
云盘示例
校园助手示例
表情包斗图
个税计算器
计算器
思思天气
天气预报
图片加工、贴纸
仿网易严选商城
仿优酷
仿微博
A Podcast miniprogram project, 一款播课类小程序
仿ONE(mpvue+vue)
仿追书神器的小说阅读器
电影票销售示例-卖座网
俄罗斯方块
开眼视频
房地产中介
多人在线画布
智能家居
摇骰子辅助工具
萝卜手帐
查快递
生僻字识别
扫码书单
语文答题闯关
仿米家电商
日历
仿滴滴
仿网易云UImusic播放器
调用网易云音乐api的播放器
i-music
商户o2o示例
豆瓣评分
仿扎克新闻

使用HBuilder Alpha并更新到最新
更新日志中有：
> 9.1.13.201807311918
Android平台云端打包支持指定targetSdkVersion版本（解决Google提交应用要求支持Android8.0+的问题）

在manifest.json中添加
"plus" : {
"distribute" : {
"google" : {
"targetSdkVersion" : 26
}
}
}
注意，有的文章中写的是"minSdkVersion"，是没有用的，google要求的是”targetSdkVersion“。另外26是数字，不是字符串，我之前一直被这里坑了。

声明：本插件移植自微信小程序插件wx-cropper
https://github.com/IFmiss/wx-cropper
感谢原作者！
我不生产插件，我只是好东西的搬运工~O(∩_∩)O哈哈~
需要的就伸手把，搬运移植也不容易，拿走记得留话。
官方大大，我报了好多bug也没给我加点积分啊。嘿嘿~

其他插件：
1、swiper + scroll-view 实现下拉刷新

效果演示：

看了一下，各种个推的爬坑文章挺多的，其他的就不多说了，搜搜看看就可以了，在这里，分享一点，其实透传数据格式的非标准形式也是可以写JSON形式的，比如： {title:"透传通知标题",content:"通知的的内容"}
，receive可以识别JSON的属性，也就是里面的标题和内容，会被分别识别可以打印出来。如果是直接写出字符串形式，比如： ‘string’
，字符串会被识别为透传的内容。
注意点：

1. 非标准形式不发通知信息，也就不会触发Click事件，可以触发receive事件，可以用创建本地通知信息，会显示在通知信息栏里面，闭关应用不处发，开启或在线应用才有效。
2. 准形式发通知信息，显示在通知信息栏里面，触发Click事件，不触发receive事件，闭关应用不处发，开启或在线应用才有效。
3. 隐形坑：个推有延迟，延迟长短不定，导致各种测试数据不断变化，很难找准问题所在，导致个推的坑爬了2天，个推文档翻了个遍，累啊。
4. 最后分享一个个推测试的详细图解，是此社区一个朋友做的，很清晰详细，2017年做的还是很有借鉴价值的

　　时常有客户向郑州app开发公司咨询：“开发一个app多少钱?”而其实开发公司的报价只遵循一个原则：根据项目的实际需求和开发难度来报价，不根据客户的实力来报!那么，到底开发一个app需要多少钱?中小型企业又如何才能降低app开发的成本呢?今天就为大家分析解答一下吧。

　　首先，要开发一个好的app，iOS和Android两个平台都要一个，这样才能满足不同手机用户，而目前市面上开发单一版本的app就需要5-10万不等;

　　其次，要选择一个好的开发团队。一个好的app开发团队至少需要一个项目经理、一个UI设计师、一个iOS开发工程师和一个安卓开发工程师。另外，如果需要后台数据交互的，还需要一个后台开发工程师，正规的话还需要一个测试工程师，这些人员的月薪加上来已经超过4、5万了。对于简单的app，设计、开发加上测试的时间大概需要6到8周，复杂一些的需要8到12周。

　　如此，一个简单的app开发费用就需要6-10万，稍微复杂些的需要10-15万。当然这也不是很确切的，有些难度较大的或者前后台复杂程度较高的系统，价格也会更高。

　　如果有人确实有开发app的需求，但是预算非常有限，还有其他办法吗?有句古话说得好：一分钱一分货!现在市场上有一些小工作室，两三个人组成，UI设计、产品经理、IOS、Android和后台开发都肩负在这两三个人身上。他们可以加班加点把项目赶出来，这样可以省下至少三分之一的成本。但是，这种工作室开发出来的app质量不高，潜伏问题也是比较多的。

　　总体来说，目前国内开发app的成本相对还是较高的，想开发一个好的app成本也确实不低。但是，由于目前移动互联网的发展已经进入普及期，对于一个企业来说，定制开发企业专属app是很有必要的。它能有效提升企业全面形象，在手机用户群体中便利的推广和宣传品牌形象，助力企业轻松实现移动精准营销，让企业率先抢占先机、领先于同行!本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明出处!

　　微信支付接口现在也慢慢的像支付宝一个可以利用api接口来实现第三方网站或应用进行支付了，下文是我公司的技术人员整理了一个php微信支付接口开发程序并且己测试，有兴趣的朋友可进入参考。

　　必要条件：

　　appid //公众号后台开发者中心获得(和邮件内的一样) mchid//邮件内获得 key//商户后台自己设置 appsecret //公众号开发者中心获得

　　两个证书文件，邮件内获得 apiclient_cert.pem apiclient_key.pem

　　注意事项：

　　公众号后台微信支付-》开发配置-》新增测试目录和测试个人微信号。

　　开发者中心-》网页授权获取用户基本信息-》修改成你的测试域名。否则会出现redirect_uri 参数错误

　　—————————— 后续待完善——————-

　　微信支付就绪页面后台自行了三次操作：

　　1.获取openid

//使用jsapi接口

$jsApi = new JsApi_pub();

//=========步骤1：网页授权获取用户openid============  

//通过code获得openid  

if (!isset($_GET['code']))  

{  

    //触发微信返回code码  

    $url = $jsApi->createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);  

    //echo $url;  

    Header("Location: $url");  

}else  

{  

    //获取code码，以获取openid  

    $code = $_GET['code'];  

    $jsApi->setCode($code);  

    $openid = $jsApi->getOpenid();  

}  

　　刚开始的时候第一步也遇到问题，没饭获得openid这个和部分服务器有关，demo内用的是curl获取的方式。

　　奇怪我的服务器curl一直无法获取到。后来改成file_get_contents可以正常获取了。

　　可这并不是解决之道。因为后面还需要用到更多的curl操作。

　　看到开发文档里面有一个地方写证书操作需要libcurl 7.20.1以上版本，然后我就一直在整服务器想把linux的php curl版本提高。最后面我是换到了另外一台windows服务器就好了。

　　先暂时这样吧，下次需要用的时候再调试。

　　第二步：获取与支付订单号id

　　代码如下

$unifiedOrder = new UnifiedOrder_pub();

//var_dump($unifiedOrder);  

//设置统一支付接口参数  

//设置必填参数  

//appid已填,商户无需重复填写  

//mch_id已填,商户无需重复填写  

//noncestr已填,商户无需重复填写  

//spbill_create_ip已填,商户无需重复填写  

//sign已填,商户无需重复填写  

$unifiedOrder->setParameter("openid","$openid");//商品描述  

$unifiedOrder->setParameter("body","贡献一分钱");//商品描述  

//自定义订单号，此处仅作举例  

$timeStamp = time();  

$out_trade_no = WxPayConf_pub::APPID."$timeStamp";  

$unifiedOrder->setParameter("out_trade_no","$out_trade_no");//商户订单号   

$unifiedOrder->setParameter("total_fee","1");//总金额  

$unifiedOrder->setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址   

$unifiedOrder->setParameter("trade_type","JSAPI");//交易类型  

//非必填参数，商户可根据实际情况选填  

//$unifiedOrder->setParameter("sub_mch_id","XXXX");//子商户号    

//$unifiedOrder->setParameter("device_info","XXXX");//设备号   

//$unifiedOrder->setParameter("attach","XXXX");//附加数据   

//$unifiedOrder->setParameter("time_start","XXXX");//交易起始时间  

//$unifiedOrder->setParameter("time_expire","XXXX");//交易结束时间   

//$unifiedOrder->setParameter("goods_tag","XXXX");//商品标记   

//$unifiedOrder->setParameter("openid","XXXX");//用户标识  

//$unifiedOrder->setParameter("product_id","XXXX");//商品ID  

$prepay_id = $unifiedOrder->getPrepayId();  

//echo 'prepay_id:';  

var_dump($prepay_id);  

　　这一步也遇到非常多的问题。

　　首先微信支付测试比较困难，只有在微信内才可以测试。我就用手机刷来刷去。

　　其次使用var_dump调试也不好使额。打印一些 xml格式的文件只显示字符长度，不显示内容。于是用log的形式写在服务器上调试，log代码：

　　代码如下

// 打印log

function  log_d($word)   

{  

    $log_name="./logd.log";//log文件路径  

    $fp = fopen($log_name,"a");  

    flock($fp, LOCK_EX) ;  

    fwrite($fp,"执行日期：".strftime("%Y-%m-%d-%H:%M:%S",time())."n".$word."nn");  

    flock($fp, LOCK_UN);  

    fclose($fp);  

}  

　　在demo里面的 WxPayPubHelper.php 里面 用 $this->log_d(xxx);调用。

　　刚开始的时候由于给我的mchid和 appid不匹配一直报错。。是他们给错我账号了。刚开始我也不懂乱试。这一步的调试在 getPrepayId()内 var_dump($this->result); 就能看到错误代码。

　　第三步：生成支付前端 js代码就绪到网页上：

　　代码如下

$jsApi->setPrepayId($prepay_id);

$jsApiParameters = $jsApi->getParameters();

　　———————- 点击前往支 付————————-

　　这部分又遇到了问题：

　　android返回“System：Access_denied”，ios返回”access_control:not_allowed”

　　搜了很多百度。其实早就看到了这个东西一直没注意!

　　发起授权请求的页面必须是在授权目录下的页面，而不能是存在与子目录中。否则会返回错误

　　支付文件我放在了/域名/pay/demo/

　　刚开始的时候我一直是到/域名/pay/结尾以为就可以了。支持子目录，结果是不行的!。

　　————————— 最后看下图—————

　　wxpay1

　　wxpay3

　　wxpay2

　　—————– 流程中的 xmljs——————–

　　待提交生成与支付订单id：

　　代码如下

<xml>

<openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid>

<body><![CDATA[贡献一下]]></body>

<out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no>

<total_fee>1</total_fee>

<notify_url><![CDATA[http://shanmao.me/wxpay/notify_url.php]]></notify_url>

<trade_type><![CDATA[JSAPI]]></trade_type>

<appid><![CDATA[wx8888888888888888]]></appid>

<mch_id>10012345</mch_id>

<spbill_create_ip><![CDATA[61.50.221.43]]></spbill_create_ip>

<nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str>

<sign><![CDATA[2D8A96553672D56BB2908CE4B0A23D0F]]></sign>

</xml>

　　提交后返回正确，其中包含了perpay_id:

<xml>

<return_code><![CDATA[SUCCESS]]></return_code>

<return_msg><![CDATA[OK]]></return_msg>

<appid><![CDATA[wx8888888888888888]]></appid>

<mch_id><![CDATA[10012345]]></mch_id>

<nonce_str><![CDATA[Be8YX7gjCdtCT7cr]]></nonce_str>

<sign><![CDATA[885B6D84635AE6C020EF753A00C8EEDB]]></sign>

<result_code><![CDATA[SUCCESS]]></result_code>

<prepay_id><![CDATA[wx201410272009395522657a690389285100]]></prepay_id>

<trade_type><![CDATA[JSAPI]]></trade_type>

</xml>

　　生成支付用的js :

{

"appId": "wx8888888888888888",  

"timeStamp": "1414411784",  

"nonceStr": "gbwr71b5no6q6ne18c8up1u7l7he2y75",  

"package": "prepay_id=wx201410272009395522657a690389285100",  

"signType": "MD5",  

"paySign": "9C6747193720F851EB876299D59F6C7D"  

}

　　支付成功后返回的通知xml:

<xml><appid><![CDATA[wx8888888888]]></appid>

<bank_type><![CDATA[CCB_DEBIT]]></bank_type>

<fee_type><![CDATA[CNY]]></fee_type>

<is_subscribe><![CDATA[Y]]></is_subscribe>

<mch_id><![CDATA[1011111]]></mch_id>

<nonce_str><![CDATA[38gt0ffgsvfsdfsdfbt1981duv63p7]]></nonce_str>

<openid><![CDATA[o4p3SjfdsfdsfdsdCE5Y2XHw4]]></openid>

<out_trade_no><![CDATA[wx4b56d1fsdfdsf416643247]]></out_trade_no>

<result_code><![CDATA[SUCCESS]]></result_code>

<return_code><![CDATA[SUCCESS]]></return_code>

<sign><![CDATA[356EfsdfdsfsdsfE69509EDA344]]></sign>

<sub_mch_id><![CDATA[10018826]]></sub_mch_id>

<time_end><![CDATA[20141122160122]]></time_end>

<total_fee>1</total_fee>

<trade_type><![CDATA[JSAPI]]></trade_type>

<transaction_id><![CDATA[100715001020fsdfsd1220006123174]]></transaction_id>

</xml>

　　这其中的数据我随意了的，大家就参考下格式吧。另外注意大小写敏感。如果大家现在还是存在部分疑问的话，可以留言咨询，我们一起共同学习与进步。
　　本文由专业的郑州小程序开发公司燚轩科技技术人员整理发布，原创不易，如需转载请注明出处!

hbuilder的win版和mac版sass编译报错，一直报错，ruby已经安装
不知道为什么报这个错，tab是4个空格

快速使用 项目地址

安装

npm 安装

npm i h5plus-hotfix -S

script加载

<script src="hotfix-bs.js"></script>

使用

hotfix({  
  url: updateUrl,  
  before(data) {  
    // 确认安装  
    return new Promise(resolve => {  
      plus.nativeUI.confirm(data.title, (selected) => {  
        if (selected.index === 0) {  
          plus.nativeUI.showWaiting("下载更新文件...");  
          resolve(data);  
        }  
      }, {  
          title: data.description,  
          buttons: ["确认更新", "取消"],  
          verticalAlign: "bottom"  
        });  
    });  
  },  
  success() {  
    console.log('安装成功')  
    plus.runtime.restart(); // 重启app   
    plus.nativeUI.closeWaiting();  
  },  
  error(e) {  
    // 错误显示  
    plus.nativeUI.closeWaiting();  
    console.log("安装wgt文件失败[" + e.code + "]：" + e.message);  
    plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);  
  },  
  onProgress(p) {  
    console.log(p) // 下载进度  
  }  
});

看到很多人在问，就分享一个吧

// 引入二维码库  
import QR from "../../utils/wxqrcode.js" // 二维码生成器  

let img = QR.createQrCodeImg('生成的内容', {  
     size: parseInt(300)//二维码大小  
})

调用后会生成 base64 格式的图片，直接复制变量就可以用啦。

PS: 新版二维码生成器在这里，解决内容大于40个字报错的问题
点我查看新版

本帖文档已集成到: hx产品文档

首先说明，HBuilderX每次发正式版都会经过专业安全公司的单独检测。
通过后才会正式更新。请放心使用。
Alpha版可能不会发安全公司检测，但这只是形式。几年来，安全公司从未检测出一个病毒木马。但不给他们提交检测，他们就会乱报警告。

下图为360检测通过页面截图

下图为微软检测通过页面截图

还有几点注意：
1、为什么通过检测，有时我本机的微软杀毒软件仍然报警
360通过检测后一般实时更新，但微软的病毒定义库升级走的是windows update统一的机制，并且有一套自己的缓存机制。
在Windows Defender团队回复的内容中可知(见上图紫色方框)，需要用管理员身份运行命令行工具，执行命令才能清除缓存。
微软的回复是英文，我们翻译一下方便大家理解：

> 感谢您提交检测。
> 我们已审核了该文件，并已删除了检测结果。（之前的检测结果为有木马，在我们提交后微软回复删除了之前的结果，就是无毒的意思）
> 请尝试以下步骤清除缓存的检测并获取最新的恶意软件定义。
> 1.以管理员身份打开命令提示符，将目录更改为c:\Program Files\Windows Defender
> 2.运行“MpCmdRun.exe -removedefinitions -dynamicsignatures”
> 最新定义可从此处下载：https://www.microsoft.com/en-us/wdsi/definitions
> 最好的祝福，
> Windows Defender 回复

另外红框中的"Not malware"，中文译为"并非恶意软件"。

2、单独认证和推测算法的区别
除了360和微软，可能还有其他安全软件会误报病毒木马。这些都不用理睬，直接给HBuilderX加白名单。
原因如下：
各家安全软件，都是有一个推测算法，觉得有可能有病毒就会报，但经常误报。
不管是360还是windows defender都经常误报，比如：https://www.cnbeta.com/articles/tech/758679.htm
若软件开发者把软件单独提交给安全平台检测认证，此时走的不是推测算法，而是专业的、针对该软件的安全测试，在安全平台检测通过后会加白。
HBuilderX在未被360单独认证通过前，360一样报警。但认证通过后，360定义库自动更新，软件什么都不变，也不再被报警。
单独认证是一个严谨的、单独的、针对性的检测，不是推测算法，单独认证通过后就是真的没有病毒木马。
目前国外的一些安全软件，包括微软、赛门铁克，并没有通畅的国内软件提交认证通道。
但这些安全软件的推测算法并不准，所以对HBuilderX经常误报。
因为360提交方便、认证快，所以DCloud一般是等360单独认证通过后就会更新版本。
在360单独认证HBuilderX无毒通过后，其他靠推测算法报警的安全软件的警告不用理睬。
各家安全软件都有扫描或信任白名单，把HBuilderX的目录设为信任目录即可。

　　从小程序发布到现在郑州小程序开发随处可见，可以看出小程序具备了很多的投资优势，而小程序依托着活跃度超高的微信平台，它的未来备受瞩目。那么，微信小程序开发到底有哪些优点可以有这么高的关注度呢，对于这样的问题，接下来就为大家分析解答一下。

　　1、app角度

　　很多人把app和小程序做比较，其实小程序对app有好处也有坏处。相对于很高频的app，小程序并没有实质性的威胁;对于比较低频的app来说，小程序反而会帮产品积累“人气”，增加营销机会;而对于一些既不高频也不低频的app来说，就需要格外注意了。如果稍不注意，就会被取而代之。

　　2、用户角度

　　满足了低频服务类产品的需求，需要用到的时候，打开小程序，用完就关掉，不想用，还可以删除，用完就走。比如，不常出门的人，需要订酒店或定火车票就可以打开小程序，用时再打开，避免app一直保存在手机里占用内存，特殊场景下的个性化需求，我们经常会遇到都是同一类型的app，却要下载好几个，这种情况下，小程序就可以完美解决。

　　3、线下商家角度

　　深圳拓略认为对于商家来说，小程序所带来的客流量就很大了，用户可以通过微信搜索附近的店找到附近的小程序。对线下商家来说，小程序的价值主要体现在“O2O服务小程序”，“公众号+小程序”，“工具类小程序”，“生活服务类小程序”。

　　“一些放在桌面累赘，又不能没有的app终于有归宿了”，这是对于微信小程序给用户带来的价值的主要论调。它的特点是小而快，它的目的主要是解决小应用的问题，重点在于灵活快捷，用完就走，这也是目前企业选择投资开发小程序的原因所在。本文由专业的郑州小程序开发燚轩科技整理发布。

X