HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

急急急 IOS 离线打包 Profile doesn't include thebeta-reports-active

iOS打包

Profile doesn't include the beta-reports-active entitlement and doesn't match the entitlements file's value for the application-identifier entitlement.

继续阅读 »

Profile doesn't include the beta-reports-active entitlement and doesn't match the entitlements file's value for the application-identifier entitlement.

收起阅读 »

MUI HTML5+入门学习视频,看着挺系统,分享一下

视频地址:视频地址

课程目标
1、掌握MUI知识体系结构,能够使用WEB开发相关技术搭建移动端APP前端架构,实现支付宝案例
2、掌握HTML5+ 相关API的使用,可以调用手机或其它设备的功能接口,例如拍照、相册、扫码、通讯录、语音等相关功能接口。
3、掌握Hbuilder的用法,完成应用调试打包
适用人群
有一定前端基础,希望使用web相关技术实现移动端混合应用开发的同学。
课程简介
1、授课过程会对MUI涉及相关知识体系内容进行讲解,内容包含,项目创建、项目调试、第三方图标库引入、MUI窗口对象、MUI事件处理、MUI栅格系统、MUI元素排版、常用UI组件介绍、页面间传值、页面刷新、页面加载、数据获取。

HTML5+相关API讲解:从语法结构讲解HTML5+相关接口,实现手机系统原生功能,例如扫码、拍照、地理位置获取、窗口处理等相关功能。

2、案例介绍:将仿支付宝案例穿插到课程讲解中,结合相应知识一步一步实现支付宝相关界面。

页面效果如图所示:


继续阅读 »

视频地址:视频地址

课程目标
1、掌握MUI知识体系结构,能够使用WEB开发相关技术搭建移动端APP前端架构,实现支付宝案例
2、掌握HTML5+ 相关API的使用,可以调用手机或其它设备的功能接口,例如拍照、相册、扫码、通讯录、语音等相关功能接口。
3、掌握Hbuilder的用法,完成应用调试打包
适用人群
有一定前端基础,希望使用web相关技术实现移动端混合应用开发的同学。
课程简介
1、授课过程会对MUI涉及相关知识体系内容进行讲解,内容包含,项目创建、项目调试、第三方图标库引入、MUI窗口对象、MUI事件处理、MUI栅格系统、MUI元素排版、常用UI组件介绍、页面间传值、页面刷新、页面加载、数据获取。

HTML5+相关API讲解:从语法结构讲解HTML5+相关接口,实现手机系统原生功能,例如扫码、拍照、地理位置获取、窗口处理等相关功能。

2、案例介绍:将仿支付宝案例穿插到课程讲解中,结合相应知识一步一步实现支付宝相关界面。

页面效果如图所示:


收起阅读 »

极光推送集成hbuilder项目

极光推送

1、官方demo
https://github.com/jpush/jpush-hbuilder-demo/tree/masterhttps://github.com/jpush/jpush-hbuilder-demo/tree/master
2、官方API
https://github.com/jpush/jpush-hbuilder-demo/blob/master/API.md
3、官网说明
https://docs.jiguang.cn/jpush/client/client_plugins/

注意:

1、JPush_Support/PushConfig.plist 中配置的 APP_KEY ,是在极光官网申请的APP_KEY
2、极光官网需要从appdev申请推送证书(和普通打包证书不一样https://docs.jiguang.cn/jpush/client/iOS/ios_cer_guide/)
3、官方API中的方法与jpush.js中实现的方法有出入,如:
addLocalNotificationForIOS方法不存在
jpush.js中实现的方法是addLocalNotificationIniOS
且jpush.js中call_native方法不存在,应改为callNative

继续阅读 »

1、官方demo
https://github.com/jpush/jpush-hbuilder-demo/tree/masterhttps://github.com/jpush/jpush-hbuilder-demo/tree/master
2、官方API
https://github.com/jpush/jpush-hbuilder-demo/blob/master/API.md
3、官网说明
https://docs.jiguang.cn/jpush/client/client_plugins/

注意:

1、JPush_Support/PushConfig.plist 中配置的 APP_KEY ,是在极光官网申请的APP_KEY
2、极光官网需要从appdev申请推送证书(和普通打包证书不一样https://docs.jiguang.cn/jpush/client/iOS/ios_cer_guide/)
3、官方API中的方法与jpush.js中实现的方法有出入,如:
addLocalNotificationForIOS方法不存在
jpush.js中实现的方法是addLocalNotificationIniOS
且jpush.js中call_native方法不存在,应改为callNative

收起阅读 »

【分享】浅谈 5+App 中的网络请求跨域

跨域请求

从 5+App 诞生开始,ask 社区中类似下面这些问题,总会不定时出现一下:

  • mui 的 ajax 请求跨域怎么解决?
  • 为什么在浏览器上测试正常,在 5+App 中请求不到数据?

注:此文中的问题、测试、解决方案,均为本地环境。实际的生产环境,不在讨论范围内。所谓本地环境,就是自己开发用的电脑设备。

问题分析

出现上述问题的原因,大概有以下几种:

  • 页面资源和服务,部署在了不同的机器上。
  • 请求的地址主机名用的是 localhost 或者 127.0.0.1。
  • 电脑设备的网络和手机设备的网络不在同一个网段,无法互通。

第一种,这个是“标准”的跨域,网上的解决方案很多。可以服务端配置允许跨域请求,也可以用诸如 jsonp 等前端解决方案。

第二种,这个是本文要探讨的重点,继续往后看。

测试

下面做一个测试,测试在不同设备下使用不同的地址访问服务的结果。

启动服务

为了方便期间直接用 Node.js 作为服务,本机的 IP 为 192.168.11.11,服务的端口为 3000。

app.js 代码如下:

var http = require('http');  

var server = http.createServer(function(req, res) {  
  console.log('有人访问了');  
  res.writeHead(200, {  
    'Content-Type': 'text/plain;charset=utf-8'  
  });  
  if (req.url === '/favicon.ico') {  
    console.log('ignore');  
  } else if (req.url === '/request') {  
    var ret = {  
      code: 200,  
      msg: '请求成功',  
      data: {  
        name: 'request'  
      }  
    };  
    res.end(JSON.stringify(ret));  
  } else {  
    res.end('hello');  
  }  
});  
server.listen(3000);  

console.log('server runing at port:' + 3000);
/*启动服务*/  
$ node app.js

这个截图

PC 浏览器

打开电脑上的浏览器,输入以下几个地址,访问的结果都相同。

  • http://localhost:3000/request
  • http://127.0.0.1:3000/request
  • http://192.168.11.11:3000/request

手机浏览器

在使用手机浏览器访问之前,需要确保手机连接的网络与电脑设备的网络在同一个网段,否则无法访问。

打开手机浏览器,同样输入上面的几个地址,会发现只有 http://192.168.11.11:3000/request 返回了数据结果。通过命令行窗口的日志,也可以看到服务是否被正确访问到。

移动 App

其实这一步可以不用做太多测试了,结果和用手机浏览器访问是一样的。

对于移动 App 而言,应用是运行在手机系统中的,应用资源并不是部署在远程服务器上。当你在应用中用 127.0.0.1 作为主机名发起网络请求时,其实是在手机系统中查找是否有这个资源路径可访问。那么“为什么在浏览器上测试正常,在 5+App 中请求不到数据?”这个问题的原因,就在于此。

再说两句

前面说了这么多,再回到 5+App 上。虽然 5+App 是采用 Web 相关的技术开发移动 App,但是也不是所有 Web 的经验都可以照搬套用。遇到问题,还是要学会多搜索,多实验测试。

扩展阅读

下面这些,可以参考一下。实际开发中,视自己的开发需求选定方案。

继续阅读 »

从 5+App 诞生开始,ask 社区中类似下面这些问题,总会不定时出现一下:

  • mui 的 ajax 请求跨域怎么解决?
  • 为什么在浏览器上测试正常,在 5+App 中请求不到数据?

注:此文中的问题、测试、解决方案,均为本地环境。实际的生产环境,不在讨论范围内。所谓本地环境,就是自己开发用的电脑设备。

问题分析

出现上述问题的原因,大概有以下几种:

  • 页面资源和服务,部署在了不同的机器上。
  • 请求的地址主机名用的是 localhost 或者 127.0.0.1。
  • 电脑设备的网络和手机设备的网络不在同一个网段,无法互通。

第一种,这个是“标准”的跨域,网上的解决方案很多。可以服务端配置允许跨域请求,也可以用诸如 jsonp 等前端解决方案。

第二种,这个是本文要探讨的重点,继续往后看。

测试

下面做一个测试,测试在不同设备下使用不同的地址访问服务的结果。

启动服务

为了方便期间直接用 Node.js 作为服务,本机的 IP 为 192.168.11.11,服务的端口为 3000。

app.js 代码如下:

var http = require('http');  

var server = http.createServer(function(req, res) {  
  console.log('有人访问了');  
  res.writeHead(200, {  
    'Content-Type': 'text/plain;charset=utf-8'  
  });  
  if (req.url === '/favicon.ico') {  
    console.log('ignore');  
  } else if (req.url === '/request') {  
    var ret = {  
      code: 200,  
      msg: '请求成功',  
      data: {  
        name: 'request'  
      }  
    };  
    res.end(JSON.stringify(ret));  
  } else {  
    res.end('hello');  
  }  
});  
server.listen(3000);  

console.log('server runing at port:' + 3000);
/*启动服务*/  
$ node app.js

这个截图

PC 浏览器

打开电脑上的浏览器,输入以下几个地址,访问的结果都相同。

  • http://localhost:3000/request
  • http://127.0.0.1:3000/request
  • http://192.168.11.11:3000/request

手机浏览器

在使用手机浏览器访问之前,需要确保手机连接的网络与电脑设备的网络在同一个网段,否则无法访问。

打开手机浏览器,同样输入上面的几个地址,会发现只有 http://192.168.11.11:3000/request 返回了数据结果。通过命令行窗口的日志,也可以看到服务是否被正确访问到。

移动 App

其实这一步可以不用做太多测试了,结果和用手机浏览器访问是一样的。

对于移动 App 而言,应用是运行在手机系统中的,应用资源并不是部署在远程服务器上。当你在应用中用 127.0.0.1 作为主机名发起网络请求时,其实是在手机系统中查找是否有这个资源路径可访问。那么“为什么在浏览器上测试正常,在 5+App 中请求不到数据?”这个问题的原因,就在于此。

再说两句

前面说了这么多,再回到 5+App 上。虽然 5+App 是采用 Web 相关的技术开发移动 App,但是也不是所有 Web 的经验都可以照搬套用。遇到问题,还是要学会多搜索,多实验测试。

扩展阅读

下面这些,可以参考一下。实际开发中,视自己的开发需求选定方案。

收起阅读 »

low price Simple Large Roomy White Promotional Bag Tote Bag

SamTeam is a professional designer, manufacturer and exporter of bags in China since 2003.
Our factory located in Dongyang city, which is one of the main export base of bags in China. The area advantage, such as salt workers, integrated industrial systems and so on, assure us being in strong position to supply kinds of bags.
Now we hold 3 fixed assembly lines and more than 80 employees. At same time, the company builds another 4 fixed assembly lines in West China and has more than 120 employees. We can turn out up to 200,000pcs bags per month and deliver up to 10,000pcs in 10 days.
Unlike some other manufacturer of bags, we have own design and sales team, and supply one-stop service for customer. Nivea and coca-cola find our consolidated services to be more beneficial. We eliminated productions errors due to poor communication and any middleman costs, as well as speed delivery up.
The purpose of our company is that " Create values fro customers". Be in strict in managing every operation and expecting to develop us with you together. Call us!
One Sewing Line
Working Room Since 2010low price Simple Large Roomy White Promotional Bag Tote Bag
website:http://www.bag-supplier.com/.

继续阅读 »

SamTeam is a professional designer, manufacturer and exporter of bags in China since 2003.
Our factory located in Dongyang city, which is one of the main export base of bags in China. The area advantage, such as salt workers, integrated industrial systems and so on, assure us being in strong position to supply kinds of bags.
Now we hold 3 fixed assembly lines and more than 80 employees. At same time, the company builds another 4 fixed assembly lines in West China and has more than 120 employees. We can turn out up to 200,000pcs bags per month and deliver up to 10,000pcs in 10 days.
Unlike some other manufacturer of bags, we have own design and sales team, and supply one-stop service for customer. Nivea and coca-cola find our consolidated services to be more beneficial. We eliminated productions errors due to poor communication and any middleman costs, as well as speed delivery up.
The purpose of our company is that " Create values fro customers". Be in strict in managing every operation and expecting to develop us with you together. Call us!
One Sewing Line
Working Room Since 2010low price Simple Large Roomy White Promotional Bag Tote Bag
website:http://www.bag-supplier.com/.

收起阅读 »

郑州app开发软件的商业化优势体现在哪呢

5 App开发

  app软件从开发出来的那一刻起,就已经决定了它的用途注定是商业化的,可以说现在app已经成为了企业移动端发展的重要工具。随着移动互联网产业信息的发展和传播,现在app软件越来受到各行业的关注,而有些投资者可能有疑问了:开发的app为什么会用于商用?商用手机app开发的优势有体现在哪里呢?app开发的商业模式优势有哪些呢?接下来郑州app开发燚轩科技小编即将展开分析。

  app软件开发商业模式的优势

  在这个红利期,app背后的商业潜力很大,如果找对市场是可以获得很大收益的,而且商业用的app只有在ios跟android系统版本更新时,才需要对app进行更新,其它时间需要做的工作很少。

  商用app开发概念

  郑州app开发公司燚轩科技认为,商用app开发指的是通过开发的方式开发一款商用app,企业可以根据自身的发展需求,结合当前商用app软件开发的行情,和商用app开发公司谈妥自己的开发需求,制作属于自己的商用手机app开发。商用app应用开发最大的特点,就是制作出来的商用app软件更有特色,缺点是商用app应用开发需要花费的时间更多,成本较大。

  另外还有一个比较大的优势是现在app存在于移动设备中,现在的用户大部分都会把时间花在移动设备上,这样就会有很多营销优势。举例:很多app会借助各大流量多的平台推广自己的app寻找目标用户,受众用户点击广告后就会立即下载并使用app,这也是商用的app开发的一种模式。

  以上就是为大家讲解的关于app软件商用化的分析,如果想要理解其他关于郑州app开发公司实力或技术如何的话,可以咨询燚轩科技了解。本文由郑州app开发http://www.appsaa.com整理发布,如需转载请注明出处。

继续阅读 »

  app软件从开发出来的那一刻起,就已经决定了它的用途注定是商业化的,可以说现在app已经成为了企业移动端发展的重要工具。随着移动互联网产业信息的发展和传播,现在app软件越来受到各行业的关注,而有些投资者可能有疑问了:开发的app为什么会用于商用?商用手机app开发的优势有体现在哪里呢?app开发的商业模式优势有哪些呢?接下来郑州app开发燚轩科技小编即将展开分析。

  app软件开发商业模式的优势

  在这个红利期,app背后的商业潜力很大,如果找对市场是可以获得很大收益的,而且商业用的app只有在ios跟android系统版本更新时,才需要对app进行更新,其它时间需要做的工作很少。

  商用app开发概念

  郑州app开发公司燚轩科技认为,商用app开发指的是通过开发的方式开发一款商用app,企业可以根据自身的发展需求,结合当前商用app软件开发的行情,和商用app开发公司谈妥自己的开发需求,制作属于自己的商用手机app开发。商用app应用开发最大的特点,就是制作出来的商用app软件更有特色,缺点是商用app应用开发需要花费的时间更多,成本较大。

  另外还有一个比较大的优势是现在app存在于移动设备中,现在的用户大部分都会把时间花在移动设备上,这样就会有很多营销优势。举例:很多app会借助各大流量多的平台推广自己的app寻找目标用户,受众用户点击广告后就会立即下载并使用app,这也是商用的app开发的一种模式。

  以上就是为大家讲解的关于app软件商用化的分析,如果想要理解其他关于郑州app开发公司实力或技术如何的话,可以咨询燚轩科技了解。本文由郑州app开发http://www.appsaa.com整理发布,如需转载请注明出处。

收起阅读 »

为什么不同的开发模式郑州app开发给出的价格不一

5 App开发

  目前的郑州app开发制作模式主要分三种:外包、借助平台自助式制作、组建团队自我开发。三种模式各有优劣点。不同的app开发模式、不同的功能需求价格自然不一样,比如品牌服饰跟街边服饰的价格肯定不在一个档次。不过我们可以根据不同开发模式来计算不同的价格。

  第一种:传统的外包模式

  费用决于下面几个因素:1、app支持平台:2、开发人员工资 3、产品功能的复杂程度 4、外包团队经验和素质 5、同类app产品开发案例 6、沟通成本。总费用:从10万到50万不等,高级的可能需要上百万。这种的模式的好处是一个技术团队专门为你服务,可以对产品进行不断深度挖掘,因为沟通问题,当然周期比较长,花费的资金比较多。起步十万,动辄上百万,对于大中型公司常常采用这种模式。

  第二种:借助工具性平台自己制作

  无论是外包还是自己组建团队,资金、技术,对于小白来说,是这两道不可逾越的门槛。在过去,即使你发现了一个不错的机会,但是只能眼睁睁看着别人走向了人生巅峰。但是,随着工具性平台的出现,移动互联的大门才正式向中小企业、创客敞开。

  第三种:自己组建团队

  这种模式往往本身就是技术出生,对程序把握较深,可以招聘一些程序员,分配任务进行,想对比app外包模式,因为是自己主导,不需要进行过多的沟通,所以周期较短,花费时间相对较少。但是,程序的功能受限于自身的专业水平。因为要租赁办公室、招聘人员等,花费的费用并不比第一种少,而且人员的管理也是问题,谁能保证迅速招到合适的人选?整体的费用20万起步。

  所以综合来说,还是与郑州app开发公司合作是合理的,而且后期的维修服务等也不需要企业去操作,重要一点的是,选择源码开发的话,最后的所有都归企业所有,数据的私密性是能够保持完整的。如果想要了解其他app开发技术的话,可以咨询燚轩科技。本文由郑州app开发http://www.appsaa.com整理发布,如需转载,请注明出处!

继续阅读 »

  目前的郑州app开发制作模式主要分三种:外包、借助平台自助式制作、组建团队自我开发。三种模式各有优劣点。不同的app开发模式、不同的功能需求价格自然不一样,比如品牌服饰跟街边服饰的价格肯定不在一个档次。不过我们可以根据不同开发模式来计算不同的价格。

  第一种:传统的外包模式

  费用决于下面几个因素:1、app支持平台:2、开发人员工资 3、产品功能的复杂程度 4、外包团队经验和素质 5、同类app产品开发案例 6、沟通成本。总费用:从10万到50万不等,高级的可能需要上百万。这种的模式的好处是一个技术团队专门为你服务,可以对产品进行不断深度挖掘,因为沟通问题,当然周期比较长,花费的资金比较多。起步十万,动辄上百万,对于大中型公司常常采用这种模式。

  第二种:借助工具性平台自己制作

  无论是外包还是自己组建团队,资金、技术,对于小白来说,是这两道不可逾越的门槛。在过去,即使你发现了一个不错的机会,但是只能眼睁睁看着别人走向了人生巅峰。但是,随着工具性平台的出现,移动互联的大门才正式向中小企业、创客敞开。

  第三种:自己组建团队

  这种模式往往本身就是技术出生,对程序把握较深,可以招聘一些程序员,分配任务进行,想对比app外包模式,因为是自己主导,不需要进行过多的沟通,所以周期较短,花费时间相对较少。但是,程序的功能受限于自身的专业水平。因为要租赁办公室、招聘人员等,花费的费用并不比第一种少,而且人员的管理也是问题,谁能保证迅速招到合适的人选?整体的费用20万起步。

  所以综合来说,还是与郑州app开发公司合作是合理的,而且后期的维修服务等也不需要企业去操作,重要一点的是,选择源码开发的话,最后的所有都归企业所有,数据的私密性是能够保持完整的。如果想要了解其他app开发技术的话,可以咨询燚轩科技。本文由郑州app开发http://www.appsaa.com整理发布,如需转载,请注明出处!

收起阅读 »

DCloud开启新春招聘,邀请优秀的你共同打开未来之门

招聘

DCloud 是W3C会员、中国HTML5产业联盟发起单位,致力于推进HTML5发展,构建HTML5生态。

DCloud在HTML5、动态App领域拥有多项世界领先的技术,拥有200万开发者,上亿的终端引擎装机量,奠定了行业里绝对领先的位置。

微信小程序、快应用、流应用等"动态App"如火如荼的开展起来,DCloud经过多年布局及推广,必将伴随“动态App”乘势而起。

优秀的你,加入DCloud,携手一起打开未来之门!

公司坐标:北京市海淀区大钟寺附近

赶快把投递简历到hr2013@dcloud.io

Android工程师

专职Android开发经验,熟悉JS者优先。
3年以上经验 年薪:30w左右
应届毕业生 年薪:10-15w

商业运营专员

要求2年以上商业化变现运营经验,熟悉各种数据增长和变现增长模型。
薪资面议

更多求贤信息点这里

继续阅读 »

DCloud 是W3C会员、中国HTML5产业联盟发起单位,致力于推进HTML5发展,构建HTML5生态。

DCloud在HTML5、动态App领域拥有多项世界领先的技术,拥有200万开发者,上亿的终端引擎装机量,奠定了行业里绝对领先的位置。

微信小程序、快应用、流应用等"动态App"如火如荼的开展起来,DCloud经过多年布局及推广,必将伴随“动态App”乘势而起。

优秀的你,加入DCloud,携手一起打开未来之门!

公司坐标:北京市海淀区大钟寺附近

赶快把投递简历到hr2013@dcloud.io

Android工程师

专职Android开发经验,熟悉JS者优先。
3年以上经验 年薪:30w左右
应届毕业生 年薪:10-15w

商业运营专员

要求2年以上商业化变现运营经验,熟悉各种数据增长和变现增长模型。
薪资面议

更多求贤信息点这里

收起阅读 »

支付宝接口支付时返回[-100]:[payment支付宝:62001] 用户中途取消支付操作

找了一天的原因。有人说是 支付宝公钥上传了空格之类的。反正就是配置错误。我这找了一天多。终于找到原因了。你可以试着吧***mui.js注释**试试

找了一天的原因。有人说是 支付宝公钥上传了空格之类的。反正就是配置错误。我这找了一天多。终于找到原因了。你可以试着吧***mui.js注释**试试

HBuilderX - 高效极客技巧

HBuilderX

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

惯常来讲,ide和编辑器是2个产品类别。
ide侧重于某种语言的语法分析、提示、转到定义、调试。一般比较厚重。
而编辑器则是对通用文本处理,提供更高效的通用文本处理能力,比较轻量,但语法分析能力不足。
上一代HBuilder是一个典型的IDE,语言处理非常强大,但在字处理、轻量方面客观讲不如优秀的编辑器。
而新的HBuilderX,定位是ide和编辑器的完美结合,那么HBuilderX就会提供轻量且世界顶级的高效字处理能力。
看完这些,你一定会惊叹,原来极客是这么玩的。

免拖动选择

用鼠标拖着选中一片文本,是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。
但是背诵很多相关的快捷键也一样痛苦。
HBuilderX提供了更友好方式:智能双击和Ctrl+扩大选区。

智能双击

在HBuilderX中,但凡特殊点的字符,都能智能双击。

  • 双击引号/括号内侧,是选中引号/括号内的内容
  • 双击逗号两侧,是选择逗号前一段或后一段
  • 双击行尾,是选中该行(不含回车符)
  • 双击连词符(-_)选中整个词
  • 双击折叠行首内容开头,选择折叠段落
  • 双击行首缩进,选择相同缩进的段落
  • 双击列表符号,选择列表段落
  • 双击Tag开头或结尾,选择整段Tag
  • 双击属性赋值等号=,选择Html属性
  • 双击if、function等关键字,选择整段包围区域
  • 双击分号,选择js等语言的;分号前段落
  • 双击css类名左侧,选择Css类
  • 双击注释符选择注释区域
  • 双击#选择markdown标题段落
  • 双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区

下面是一个gif图例,双击选中tag和包围父tag

  1. 双击div tag的首或尾可以选中这个tag,即开头的<左侧或结尾的>右侧。当然双击if、双击缩进符、双击括号引号内侧...很多位置都可以通过智能双击选中。具体见HBuilder的选择菜单。
  2. 按Ctrl+]包围,就可以在这个选区首尾加父标签,同时闪烁光标。如果在js里,按下Ctrl+]不是包围tag,而是包围if、for等函数库,方便快速把一段代码放入if块中。
  3. 输入div即可在首尾添加包围标签

扩大选区Ctrl+=

=是+的默认键位置,所以Ctrl+=其实就是Ctrl键和+号一起按下。
在HBuilderX里可以智能的判断选区范围,持续扩大选区,无鼠标快速选中你需要的选区。

反包围

上面讲到包围,也自然有反包围。

  1. 双击tag p开头,选中该tag。
  2. 按反包围Ctrl+Shift+],可去掉tag p并自动处理子节点的缩进。

    这里多提一句HBuilderX的快捷键理念,就是符号化,而不是字母化。
    很多工具的快捷键都是控制键+功能英文单词中的一个字母,这个是极难记忆的。
    符号化让快捷键的记忆变简单,比如Ctrl+]是包围。
    而反操作或增强操作一般是加Shift,比如Ctrl+Shift+]是反包围。

选中相同语法词及跳过某词

  1. 下图中,使用普通的选择相同词Ctrl+e(mac是Cmd+d),会把所有div都选中。但使用Ctrl+Shift+e(mac是Cmd+Shift+d),会智能识别语法,剔除不相干的词。
  2. 下图按下选择相同语法词,同时选中tag首尾的div,而不会选中子节点的div。
  3. 然后就可以方便的将原div改名为p
    • 如果想选择配对括号,靠相同词是不行的。选中相同语法词会选中匹配的2个左右括号
    • 批量选中所有相同词是Ctrl+Alt+e(mac是ctrl+alt+d)
      选择相同语法还可以用于变量重构,详见http://ask.dcloud.net.cn/article/35732

交换选区内容

当需要交互2个选区的内容时,选中a、剪切、点b前面、粘贴、选中b、找到之前a的位置点击、粘贴...这么长的操作太低效。
来看HBuilderX的Ctrl+Shift+x交互选区,也就是Ctrl+x的增强版。

  1. 双击第1个style属性后的引号内侧,可选中引号内容。
  2. 按下Ctrl后继续双击第2个style属性后的引号内侧,可选中2个引号内的选区。
  3. 按下Ctrl+Shift+x,交换style属性的内容。

    如果不选择内容,光标放置到2行,可直接交换这2行的内容,如下图

撤销最后一个多选区或多光标

选区选多了或选错了,不用担心要重头选,Ctrl+Shift+z不是撤销编辑内容,而是撤销最后一个选区。

  1. 双击选中class
  2. 按Ctrl+e选中相同词
  3. 按Ctrl+Shift+z,不再选中最后一个词。
    • 如果多选了一个词,还可以点Ctrl+鼠标右键取消一个选区
    • 跳过当前词选下一个词时Alt+Shift+e(mac是ctrl+shift+d)

批量合并行

下图示例,是把css合并为一行时的快捷操作

  1. 双击{内侧选中class
  2. 按Ctrl+双击选中另一个class
  3. 按反格式化Ctrl+Shift+k,可以把每个css的区块代码都合并为一行
    Ctrl+k是格式化代码,那么Ctrl+Shift+k就是合并为一行。

同时注释if段首尾

if块的调整很常见,除了包围、反包围外,常用操作还有同时注释掉if段首尾。

  1. 双击if选中if代码块
  2. 按Ctrl+\在选区首尾加光标,变成多光标模式
  3. 按Ctrl+/注释掉选区首尾行

转到定义

转到定义是非常常用的功能,普通编辑器不长于此,只能猜单词跳转。
HBuilderX有强大的语法分析引擎,可以准确的跳转定义位置。
转到定义的快捷键是Alt+d,鼠标操作是alt+左键单击(注意不是ctrl,因为ctrl留给了多光标)
而HBuilderX还有一个特色是转到定义到分栏,ctrl+alt+左键,可以把一个定义处的代码打开在另一侧,方便共同查看。
下图中,从uni-app项目的pages.json里ctrl+alt+左键点击一个页面,打开component.vue,继续点击样式uni-padding-wrap,打开样式定义文件uni.css。
多个文件可以并排查看编辑。

折叠

折叠的快捷键是alt+-和=
在菜单跳转-折叠里,还有更多折叠的玩法,其中有一个功能非常有用,就是“折叠其他选区”,快捷键是Alt+Shift+o。
比如在本markdown文档源码编辑时,按下Alt+Shift+o就可以把其他段落都折叠起来,专注于当前段落的编写。

大纲

左边的大纲是长文档导航的利器。HBuilderX提供了优雅简洁的文档导览界面。可以点底栏左侧红框内的大纲按钮,对应的快捷键是【win:alt+w、mac:ctrl+w】。

帮助开发者成为极客,一直是HBuilder的理念。HBuilderX更上一层楼。
愿各位都能成为极客!

如果还有其他需求,可以到需求墙投票
欢迎转发传播HBuilderX的技巧,欢迎赞助我们

继续阅读 »

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

惯常来讲,ide和编辑器是2个产品类别。
ide侧重于某种语言的语法分析、提示、转到定义、调试。一般比较厚重。
而编辑器则是对通用文本处理,提供更高效的通用文本处理能力,比较轻量,但语法分析能力不足。
上一代HBuilder是一个典型的IDE,语言处理非常强大,但在字处理、轻量方面客观讲不如优秀的编辑器。
而新的HBuilderX,定位是ide和编辑器的完美结合,那么HBuilderX就会提供轻量且世界顶级的高效字处理能力。
看完这些,你一定会惊叹,原来极客是这么玩的。

免拖动选择

用鼠标拖着选中一片文本,是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。
但是背诵很多相关的快捷键也一样痛苦。
HBuilderX提供了更友好方式:智能双击和Ctrl+扩大选区。

智能双击

在HBuilderX中,但凡特殊点的字符,都能智能双击。

  • 双击引号/括号内侧,是选中引号/括号内的内容
  • 双击逗号两侧,是选择逗号前一段或后一段
  • 双击行尾,是选中该行(不含回车符)
  • 双击连词符(-_)选中整个词
  • 双击折叠行首内容开头,选择折叠段落
  • 双击行首缩进,选择相同缩进的段落
  • 双击列表符号,选择列表段落
  • 双击Tag开头或结尾,选择整段Tag
  • 双击属性赋值等号=,选择Html属性
  • 双击if、function等关键字,选择整段包围区域
  • 双击分号,选择js等语言的;分号前段落
  • 双击css类名左侧,选择Css类
  • 双击注释符选择注释区域
  • 双击#选择markdown标题段落
  • 双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区

下面是一个gif图例,双击选中tag和包围父tag

  1. 双击div tag的首或尾可以选中这个tag,即开头的<左侧或结尾的>右侧。当然双击if、双击缩进符、双击括号引号内侧...很多位置都可以通过智能双击选中。具体见HBuilder的选择菜单。
  2. 按Ctrl+]包围,就可以在这个选区首尾加父标签,同时闪烁光标。如果在js里,按下Ctrl+]不是包围tag,而是包围if、for等函数库,方便快速把一段代码放入if块中。
  3. 输入div即可在首尾添加包围标签

扩大选区Ctrl+=

=是+的默认键位置,所以Ctrl+=其实就是Ctrl键和+号一起按下。
在HBuilderX里可以智能的判断选区范围,持续扩大选区,无鼠标快速选中你需要的选区。

反包围

上面讲到包围,也自然有反包围。

  1. 双击tag p开头,选中该tag。
  2. 按反包围Ctrl+Shift+],可去掉tag p并自动处理子节点的缩进。

    这里多提一句HBuilderX的快捷键理念,就是符号化,而不是字母化。
    很多工具的快捷键都是控制键+功能英文单词中的一个字母,这个是极难记忆的。
    符号化让快捷键的记忆变简单,比如Ctrl+]是包围。
    而反操作或增强操作一般是加Shift,比如Ctrl+Shift+]是反包围。

选中相同语法词及跳过某词

  1. 下图中,使用普通的选择相同词Ctrl+e(mac是Cmd+d),会把所有div都选中。但使用Ctrl+Shift+e(mac是Cmd+Shift+d),会智能识别语法,剔除不相干的词。
  2. 下图按下选择相同语法词,同时选中tag首尾的div,而不会选中子节点的div。
  3. 然后就可以方便的将原div改名为p
    • 如果想选择配对括号,靠相同词是不行的。选中相同语法词会选中匹配的2个左右括号
    • 批量选中所有相同词是Ctrl+Alt+e(mac是ctrl+alt+d)
      选择相同语法还可以用于变量重构,详见http://ask.dcloud.net.cn/article/35732

交换选区内容

当需要交互2个选区的内容时,选中a、剪切、点b前面、粘贴、选中b、找到之前a的位置点击、粘贴...这么长的操作太低效。
来看HBuilderX的Ctrl+Shift+x交互选区,也就是Ctrl+x的增强版。

  1. 双击第1个style属性后的引号内侧,可选中引号内容。
  2. 按下Ctrl后继续双击第2个style属性后的引号内侧,可选中2个引号内的选区。
  3. 按下Ctrl+Shift+x,交换style属性的内容。

    如果不选择内容,光标放置到2行,可直接交换这2行的内容,如下图

撤销最后一个多选区或多光标

选区选多了或选错了,不用担心要重头选,Ctrl+Shift+z不是撤销编辑内容,而是撤销最后一个选区。

  1. 双击选中class
  2. 按Ctrl+e选中相同词
  3. 按Ctrl+Shift+z,不再选中最后一个词。
    • 如果多选了一个词,还可以点Ctrl+鼠标右键取消一个选区
    • 跳过当前词选下一个词时Alt+Shift+e(mac是ctrl+shift+d)

批量合并行

下图示例,是把css合并为一行时的快捷操作

  1. 双击{内侧选中class
  2. 按Ctrl+双击选中另一个class
  3. 按反格式化Ctrl+Shift+k,可以把每个css的区块代码都合并为一行
    Ctrl+k是格式化代码,那么Ctrl+Shift+k就是合并为一行。

同时注释if段首尾

if块的调整很常见,除了包围、反包围外,常用操作还有同时注释掉if段首尾。

  1. 双击if选中if代码块
  2. 按Ctrl+\在选区首尾加光标,变成多光标模式
  3. 按Ctrl+/注释掉选区首尾行

转到定义

转到定义是非常常用的功能,普通编辑器不长于此,只能猜单词跳转。
HBuilderX有强大的语法分析引擎,可以准确的跳转定义位置。
转到定义的快捷键是Alt+d,鼠标操作是alt+左键单击(注意不是ctrl,因为ctrl留给了多光标)
而HBuilderX还有一个特色是转到定义到分栏,ctrl+alt+左键,可以把一个定义处的代码打开在另一侧,方便共同查看。
下图中,从uni-app项目的pages.json里ctrl+alt+左键点击一个页面,打开component.vue,继续点击样式uni-padding-wrap,打开样式定义文件uni.css。
多个文件可以并排查看编辑。

折叠

折叠的快捷键是alt+-和=
在菜单跳转-折叠里,还有更多折叠的玩法,其中有一个功能非常有用,就是“折叠其他选区”,快捷键是Alt+Shift+o。
比如在本markdown文档源码编辑时,按下Alt+Shift+o就可以把其他段落都折叠起来,专注于当前段落的编写。

大纲

左边的大纲是长文档导航的利器。HBuilderX提供了优雅简洁的文档导览界面。可以点底栏左侧红框内的大纲按钮,对应的快捷键是【win:alt+w、mac:ctrl+w】。

帮助开发者成为极客,一直是HBuilder的理念。HBuilderX更上一层楼。
愿各位都能成为极客!

如果还有其他需求,可以到需求墙投票
欢迎转发传播HBuilderX的技巧,欢迎赞助我们

收起阅读 »

使用muidemo中的pullrefresh_with_tab.html+vue.js遇到列表不能滑动问题解决办法

下拉刷新 上拉加载

踩过很多坑,终于被我摸索出来了,按照我这个模板就可以滑动,如有问题可以留言相互探讨。

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link rel="stylesheet" href="../../css/mui.min.css">  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  

        .mui-bar~.mui-content .mui-fullscreen {  
            top: 44px;  
            height: auto;  
        }  

        .mui-pull-top-tips {  
            position: absolute;  
            top: -20px;  
            left: 50%;  
            margin-left: -25px;  
            width: 40px;  
            height: 40px;  
            border-radius: 100%;  
            z-index: 1;  
        }  

        .mui-bar~.mui-pull-top-tips {  
            top: 24px;  
        }  

        .mui-pull-top-wrapper {  
            width: 42px;  
            height: 42px;  
            display: block;  
            text-align: center;  
            background-color: #efeff4;  
            border: 1px solid #ddd;  
            border-radius: 25px;  
            background-clip: padding-box;  
            box-shadow: 0 4px 10px #bbb;  
            overflow: hidden;  
        }  

        .mui-scroll-wrapper {  
            position: absolute;  
            overflow: hidden;  
            bottom: 0;  
        }  

        .mui-scroll {  
            position: absolute;  
        }  

        .mui-pull-top-tips.mui-transitioning {  
            -webkit-transition-duration: 200ms;  
            transition-duration: 200ms;  
        }  

        .mui-pull-top-tips .mui-pull-loading {  
            s  
            /*-webkit-backface-visibility: hidden;  
            -webkit-transition-duration: 400ms;  
            transition-duration: 400ms;*/  
            margin: 0;  
        }  

        .mui-pull-top-wrapper .mui-icon,  
        .mui-pull-top-wrapper .mui-spinner {  
            margin-top: 7px;  
        }  

        .mui-pull-top-wrapper .mui-icon.mui-reverse {  
            /*-webkit-transform: rotate(180deg) translateZ(0);*/  
        }  

        .mui-pull-bottom-tips {  
            text-align: center;  
            background-color: #efeff4;  
            font-size: 15px;  
            line-height: 40px;  
            color: #777;  
        }  

        .mui-pull-top-canvas {  
            overflow: hidden;  
            background-color: #fafafa;  
            border-radius: 40px;  
            box-shadow: 0 4px 10px #bbb;  
            width: 40px;  
            height: 40px;  
            margin: 0 auto;  
        }  

        .mui-pull-top-canvas canvas {  
            width: 40px;  
        }  

        .mui-slider-indicator.mui-segmented-control {  
            background-color: #efeff4;  
        }  

        .mui-slider .mui-slider-group .mui-slider-item {  
            width: 100%;  
            height: 100%;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">选项卡切换+下拉刷新(div模式)</h1>  
    </header>  
    <div class="mui-content" id="app">  
        <div class="mui-slider mui-fullscreen">  
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                <div class="mui-scroll">  
                    <!--<a v-for="(index,item) in tabList" v-bind:class="[mui-control-item,{mui-active:isActive}]" v-bind:href="'#item'+idnex+'mobile'">  
                        {{item.title}}  
                    </a>-->  
                    <a class="mui-control-item mui-active" href="#item1mobile">  
                        推荐  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        热点  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        北京  
                    </a>  
                </div>  
            </div>  
            <div id="slider" class="mui-slider-group">  
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper mui-active">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view">  
                            <li v-for="item in tuijian" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li v-for="item in redian" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="item3mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li v-for="item in beijing" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <script src="../../js/mui.min.js"></script>  
    <script src="../../js/mui.pullToRefresh.js"></script>  
    <script src="../../js/mui.pullToRefresh.material.js"></script>  
    <script src="../../js/utils/vue.js"></script>  
    <script src="../../js/utils/app.js"></script>  
    <script type="text/javascript">  
        mui.init();  
        (function($) {  
            //阻尼系数  
            $.ready(function() {  
                newsVue.initVuePage();  
            });  
        })(mui);  

        var newsVue = new Vue({  
            el: '#app',  
            data: {  
                tuijian: [],  
                redian: [],  
                beijing: [],  
                isActive: false,  
                count: 0  
            },  
            updated: function() {  
                this.$nextTick(function() {  

                })  

            },  
            methods: {  
                initVuePage: function() {  
                    console.log("AAAAAAAAA");  
                    //循环初始化所有下拉刷新,上拉加载。  
                    mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                        mui(pullRefreshEl).pullToRefresh({  
                            down: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        newsVue.pulldownRefresh(index);  
                                        self.endPullDownToRefresh();  
                                    }, 1000);  
                                }  
                            },  
                            up: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        newsVue.pullupRefresh(index);  
                                        self.endPullUpToRefresh();  
                                    }, 1000);  
                                }  
                            }  
                        });  
                    });  
                },  
                /**  
                 *  下拉刷新获取最新列表   
                 */  
                pulldownRefresh: function(index) {  
                    newsVue.count++;  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  

                    //                      console.log(JSON.stringify(newsVue.newsList[index]));  
                },  
                /**  
                 * 上拉加载拉取历史列表   
                 */  
                pullupRefresh: function(index) {  
                    newsVue.count++;  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  
                },  
                createFragment: function() {  
                    var newItems = [];  
                    for(var i = 0; i < 5 * newsVue.count; i++) {  
                        newItems.push({  
                            title: "第" + i + "个例子"  
                        });  
                    }  
                    return newItems;  
                }  
            }  
        });  
    </script>  
</body>  

</html>

继续阅读 »

踩过很多坑,终于被我摸索出来了,按照我这个模板就可以滑动,如有问题可以留言相互探讨。

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link rel="stylesheet" href="../../css/mui.min.css">  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  

        .mui-bar~.mui-content .mui-fullscreen {  
            top: 44px;  
            height: auto;  
        }  

        .mui-pull-top-tips {  
            position: absolute;  
            top: -20px;  
            left: 50%;  
            margin-left: -25px;  
            width: 40px;  
            height: 40px;  
            border-radius: 100%;  
            z-index: 1;  
        }  

        .mui-bar~.mui-pull-top-tips {  
            top: 24px;  
        }  

        .mui-pull-top-wrapper {  
            width: 42px;  
            height: 42px;  
            display: block;  
            text-align: center;  
            background-color: #efeff4;  
            border: 1px solid #ddd;  
            border-radius: 25px;  
            background-clip: padding-box;  
            box-shadow: 0 4px 10px #bbb;  
            overflow: hidden;  
        }  

        .mui-scroll-wrapper {  
            position: absolute;  
            overflow: hidden;  
            bottom: 0;  
        }  

        .mui-scroll {  
            position: absolute;  
        }  

        .mui-pull-top-tips.mui-transitioning {  
            -webkit-transition-duration: 200ms;  
            transition-duration: 200ms;  
        }  

        .mui-pull-top-tips .mui-pull-loading {  
            s  
            /*-webkit-backface-visibility: hidden;  
            -webkit-transition-duration: 400ms;  
            transition-duration: 400ms;*/  
            margin: 0;  
        }  

        .mui-pull-top-wrapper .mui-icon,  
        .mui-pull-top-wrapper .mui-spinner {  
            margin-top: 7px;  
        }  

        .mui-pull-top-wrapper .mui-icon.mui-reverse {  
            /*-webkit-transform: rotate(180deg) translateZ(0);*/  
        }  

        .mui-pull-bottom-tips {  
            text-align: center;  
            background-color: #efeff4;  
            font-size: 15px;  
            line-height: 40px;  
            color: #777;  
        }  

        .mui-pull-top-canvas {  
            overflow: hidden;  
            background-color: #fafafa;  
            border-radius: 40px;  
            box-shadow: 0 4px 10px #bbb;  
            width: 40px;  
            height: 40px;  
            margin: 0 auto;  
        }  

        .mui-pull-top-canvas canvas {  
            width: 40px;  
        }  

        .mui-slider-indicator.mui-segmented-control {  
            background-color: #efeff4;  
        }  

        .mui-slider .mui-slider-group .mui-slider-item {  
            width: 100%;  
            height: 100%;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">选项卡切换+下拉刷新(div模式)</h1>  
    </header>  
    <div class="mui-content" id="app">  
        <div class="mui-slider mui-fullscreen">  
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                <div class="mui-scroll">  
                    <!--<a v-for="(index,item) in tabList" v-bind:class="[mui-control-item,{mui-active:isActive}]" v-bind:href="'#item'+idnex+'mobile'">  
                        {{item.title}}  
                    </a>-->  
                    <a class="mui-control-item mui-active" href="#item1mobile">  
                        推荐  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        热点  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        北京  
                    </a>  
                </div>  
            </div>  
            <div id="slider" class="mui-slider-group">  
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper mui-active">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view">  
                            <li v-for="item in tuijian" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li v-for="item in redian" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="item3mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li v-for="item in beijing" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <script src="../../js/mui.min.js"></script>  
    <script src="../../js/mui.pullToRefresh.js"></script>  
    <script src="../../js/mui.pullToRefresh.material.js"></script>  
    <script src="../../js/utils/vue.js"></script>  
    <script src="../../js/utils/app.js"></script>  
    <script type="text/javascript">  
        mui.init();  
        (function($) {  
            //阻尼系数  
            $.ready(function() {  
                newsVue.initVuePage();  
            });  
        })(mui);  

        var newsVue = new Vue({  
            el: '#app',  
            data: {  
                tuijian: [],  
                redian: [],  
                beijing: [],  
                isActive: false,  
                count: 0  
            },  
            updated: function() {  
                this.$nextTick(function() {  

                })  

            },  
            methods: {  
                initVuePage: function() {  
                    console.log("AAAAAAAAA");  
                    //循环初始化所有下拉刷新,上拉加载。  
                    mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                        mui(pullRefreshEl).pullToRefresh({  
                            down: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        newsVue.pulldownRefresh(index);  
                                        self.endPullDownToRefresh();  
                                    }, 1000);  
                                }  
                            },  
                            up: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        newsVue.pullupRefresh(index);  
                                        self.endPullUpToRefresh();  
                                    }, 1000);  
                                }  
                            }  
                        });  
                    });  
                },  
                /**  
                 *  下拉刷新获取最新列表   
                 */  
                pulldownRefresh: function(index) {  
                    newsVue.count++;  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  

                    //                      console.log(JSON.stringify(newsVue.newsList[index]));  
                },  
                /**  
                 * 上拉加载拉取历史列表   
                 */  
                pullupRefresh: function(index) {  
                    newsVue.count++;  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  
                },  
                createFragment: function() {  
                    var newItems = [];  
                    for(var i = 0; i < 5 * newsVue.count; i++) {  
                        newItems.push({  
                            title: "第" + i + "个例子"  
                        });  
                    }  
                    return newItems;  
                }  
            }  
        });  
    </script>  
</body>  

</html>

收起阅读 »

如何了解郑州app开发一款软件的费用,包含哪些方面

5+App开发 移动APP

  现在对于许多想要做app开发投资的人来说,普遍比较关注的一个问题就是费用,因为现在app的种类非常的多,而且功能也是五花八门,这么多的功能是不是意味着开发一款app软件的费用就非常昂贵了呢?下面郑州app开发燚轩科技就针对这个问题为大家解答一下,看一下app软件的价格都受什么影响。

  一种是模版类app开发与app定制开发,模版开发一般根据所选模板有固定的报价模板。但是其缺点就是客户无法从开发团队获得源代码,为此后期的升级成为问题,企业需要重新开发新的应用软件。

  另一种是公司外包,团队外包还是个人外包,个人app外包开发的开发的成本相对较低,缺点是项目质量没有保证,开发周期长,沟通以及后期维护比较麻烦。

  对于定制开发,其价格报价主要是根据具体的功能来评估的,一般来说,在售前的咨询服务中,负责人会首先明确客户的开发需求,人员会通过评估功能需求才能够为客户提供具体的报价。是根据客户的具体功能需求而定的。另外开发周期与开发价格是成正比的,开发时间越长,所需要的价格也是越多的。为此企业需要选择具备开发技术雄厚、开发经验丰富、开发执行能力强的团队,才能有效降低开发费用。

  团队app外包开发价格要比个人开发高一点,其项目经验和综合能力与个人开发相比都强很多,如果在资金预算不是很充足的情况下可以考虑团队外包!

  公司app外包,其开发成本要相对高一些,但是郑州app开发公司开发项目分工明确,整个项目进行的也会相对流畅,其质量更是有保证,如果考虑到长期发展,公司开发无疑是最好的选择!本文由郑州app开发http://www.appsaa.com整理发布,如需转载,请注明出处!

继续阅读 »

  现在对于许多想要做app开发投资的人来说,普遍比较关注的一个问题就是费用,因为现在app的种类非常的多,而且功能也是五花八门,这么多的功能是不是意味着开发一款app软件的费用就非常昂贵了呢?下面郑州app开发燚轩科技就针对这个问题为大家解答一下,看一下app软件的价格都受什么影响。

  一种是模版类app开发与app定制开发,模版开发一般根据所选模板有固定的报价模板。但是其缺点就是客户无法从开发团队获得源代码,为此后期的升级成为问题,企业需要重新开发新的应用软件。

  另一种是公司外包,团队外包还是个人外包,个人app外包开发的开发的成本相对较低,缺点是项目质量没有保证,开发周期长,沟通以及后期维护比较麻烦。

  对于定制开发,其价格报价主要是根据具体的功能来评估的,一般来说,在售前的咨询服务中,负责人会首先明确客户的开发需求,人员会通过评估功能需求才能够为客户提供具体的报价。是根据客户的具体功能需求而定的。另外开发周期与开发价格是成正比的,开发时间越长,所需要的价格也是越多的。为此企业需要选择具备开发技术雄厚、开发经验丰富、开发执行能力强的团队,才能有效降低开发费用。

  团队app外包开发价格要比个人开发高一点,其项目经验和综合能力与个人开发相比都强很多,如果在资金预算不是很充足的情况下可以考虑团队外包!

  公司app外包,其开发成本要相对高一些,但是郑州app开发公司开发项目分工明确,整个项目进行的也会相对流畅,其质量更是有保证,如果考虑到长期发展,公司开发无疑是最好的选择!本文由郑州app开发http://www.appsaa.com整理发布,如需转载,请注明出处!

收起阅读 »