《H5+移动应用实战开发》已出版

  《H5+移动应用实战开发》终于出版了,最近在忙着Vue和Webpack相关的前端书籍写稿。本书面向的读者为:从后端转前端,或零基础开始学习移动端开发的人。前后端完全分离的开发方式越来越成为一种趋势,下一本书,将是专业前端书籍,是关于Vue在实际工作中的单页应用开发,涉及到Vue全家桶以及webpack相关技术。

京东:https://item.jd.com/12521607.html

当当:http://product.dangdang.com/27864696.html

天猫:H5+移动应用实战开发

目录

H5+跨平台移动应用实战开发... 1

前言... 1

目录... 3

第1章 技术背景及知识储备... 7

1.1 H5+介绍... 7

1.2 Hbuilder介绍... 7

1.2.1 HBuilder真机调试... 9

1.2.2 HBuilder使用安卓模拟器调试... 9

1.2.3 js代码调试... 11

1.3 MUI介绍... 13

1.4 Vue.js介绍... 16

1.5 阿里巴巴矢量库介绍... 20

1.6 开发前注意事项... 27

1.7 相关学习资料网址... 28

第2章 项目介绍及框架搭建... 29

2.1 项目介绍... 29

2.1.1 项目背景... 29

2.1.2 项目需求... 29

2.1.3 项目角色及界面... 30

2.1.3.1 报修人员... 31

2.1.4.2 维修人员... 34

2.1.4.3 项目经理... 36

2.1.4.4 班组长... 38

2.1.4 工单状态... 41

2.2 技术选型... 42

2.3 框架搭建... 43

2.4 Mock数据... 50

第3章 App启动页和引导图... 53

3.1 App启动页... 53

3.2 App引导图... 56

3.2.1 启动引导图设计思路... 56

3.2.2 代码功能实现... 57

第4章 登录... 62

4.1 登录功能介绍... 63

4.2 登录界面设计... 64

4.3 登录编码实现... 65

4.3 角色菜单权限... 72

4.4 自动登录... 77

4.5 运行... 78

第5章 首页及底部导航... 79

5.1 底部菜单导航实现... 79

5.1.1 底部选项卡-div模式... 79

5.1.2 底部选项卡-webview模式... 81

5.1.3 底部选项卡-二级菜单(div). 85

5.2 首页界面设计及展示... 86

第6章 故障报修... 91

6.1 提交报修工单... 92

6.1.2     模糊搜索... 94

1.1.2.1 MUI侧滑导航... 95

1.2.2.2 JS API. 97

1.2.2.3 事件监听... 98

1.2.2.4 示例代码... 98

6.1.3     pipcker选择器... 100

6.1.4     多图片上传... 102

6.1.4.1 弹出选择对话框。... 102

1.1.4.2 从相册获取照片... 104

1.1.4.3 调用手机摄像头拍照... 106

1.1.4.4 压缩图片... 107

1.1.4.5 临时存储压缩图片... 108

1.1.4.6 展示选择或者拍照的压缩图片... 109

1.1.4.7 上传图片... 109

1.1.4.8 生成报修工单... 112

1.1.4.9 图片预览及缩放... 115

第7章 列表和详情... 117

6.1         工单列表... 117

下拉刷新... 118

上拉加载... 120

7.2 工单详情... 125

第8章 抢单派工签到... 132

8.1 抢单... 132

8.2 派工、转单... 136

8.2.1 派工... 136

8.2.2 转单... 139

8.3 签到... 140

8.4 退单... 141

第9章 完工、跟踪记录... 145

9.1 完工... 145

6.2         跟踪记录... 150

第10章 个人设置... 152

10.1 头像设置... 152

10.1.1 plus.io. 154

10.1.2 plus.camera. 154

10.1.3 plus.gallery. 155

10.1.4 plus.zip. 158

10.1.5 plus.uploader 160

10.1.6 图片轮播... 164

10.2 当前版本... 165

第11章 通讯录... 170

11.1 查看通讯录列表... 170

11.2 拨号呼叫... 172

11.2.1 plus.device. 173

第12章 数据统计... 174

12.1 echarts报表介绍... 174

12.1.1 使用步骤... 174

12.2 统计工单完成情况... 177

第13章 离线操作... 183

13.1 let 和const. 183

13.2 H5本地存储... 185

13.2.1 Web Storage. 185

13.2.2 Web SQL Database. 186

13.3 js异步编程... 189

13.3.1 回调... 189

13.3.2 promise. 190

13.3.2 generator. 191

13.3.3 es7语法糖async/await. 192

13.4 离线操作表结构... 193

13.5 批量下载工单... 196

13.5 批量上传工单... 199

13.5.1 上传签到操作... 200

13.5.2 上传完工操作... 202

第14章 发布应用... 208

14.1 App打包... 208

14.2 发布到应用市场... 212

1.4.2.1 ios. 212

1.4.2.2 android. 214

第15章 植入广告... 216

15.1 开屏广告... 216

15.2 悬浮红包广告... 217

15.3 push广告... 218

15.4 开通步骤... 219

15.5 问题答疑... 220

第16章 消息推送... 222

16.1 使用须知... 222

16.2 个推应用信息申请步骤... 223

16.3 常见问题... 228

参考文献... 231

  书中Demo部分界面

  

DIV高度设置全屏

html:

<div class="full"></div>

css:

.full{ height:100%; position:fixed; }

在有dom结构变更的情况下,mui.back要点击2次才能回退成功

于是我调用了2次back方法,而且第二次调用延时了

            mui.init();
            var old_back = mui.back;
            mui.back = function() {
                mui.confirm(‘完工内容未提交,确认离开吗?‘, ‘离开确认‘, btnArray, function(e) {
                    if(e.index == 1) {
                        //执行mui封装好的窗口关闭逻辑;
                        old_back();
                        setTimeout(function () { old_back() }, 300);//解决回退不了的问题
                        console.log(‘sltImgCount:‘ + sltImgCount)
                    }
                });
            }

CSS透明度的问题

在设置div的透明度的时候发现设置了父div的透明度(opacity=0.5),子div的透明度也随着改变了,并且设置子div的透明度不起作用,这种情况下可以使用rgba来设置父div的透明度:例如设置div黑色半透明,可以设置div的background:rgba(0,0,0,0.5)

This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

这是引用组件时,路径大小写不对导致的

关于Vue-cli npm run build生产环境打包,本地不能打开问题

问题:

Tip: built files are meant to be served over an HTTP server.

Opening index.html over file:// won‘t work.
解释:

npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后,会生成dist目录,里边包含index.html和static文件夹。

npm
run build的时候, 一开始就会提示Built files are meant to be served over an HTTP
server. Opening index.html over file:// won‘t work., 在vue-cli的默认配置中,
把assetsPublicPath: ‘/‘改成assetsPublicPath: ‘./‘,dist文件夹里的文件必须放在服务器的根目录,
如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:

npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了

再运行:hs

原文:https://blog.csdn.net/zx_p24/article/details/80360312

vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

方法一

vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全局的样式。

但是存在一个问题组件框架的ui样式没办法覆盖。

解决办法:在vue 文件里面写两个style 样式

例如

<style>

///全局的

//全局的这个一定要在要覆盖的ui样式之前,在包裹上一层,这样就不会影响别的组件的样式

</style>

<style scoped>

//私有的

</style>

全局和私有的style 的顺序一定不能变,全局的在最前面,私有的在后面

引用:https://www.cnblogs.com/daiwenru/p/9913179.html

方法二

<style scoped>
</style>
为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。 可以加 /deep/  。
深度作用选择器 /deep/  or  >>>
如果希望scoped样式中的选择器“深入”,即影响子组件
例子:

/deep/ .el-table .red-row {
background: #ffc2c2;
}
or
 .el-table >>> .red-row {
background: #ffc2c2;
}

引用:https://blog.csdn.net/p930318/article/details/82767401

安装cnpm

因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。!来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

官方网址:http://npm.taobao.org

安装:命令提示符执行注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

npm安装stylus和stylus-loader

去到 package.json  dependencies 里面随便找个地方加上下面这两句话

    "stylus-loader": "^3.0.1",
    "stylus": "0.52.4",

然后去 cmd  运行

cnpm install  (npm install 一样的 我用了淘宝镜像)

Error:Cannot find module ‘stylus‘

在webpack 里面用了 stylus-loader,但npm instatll 没有正确安装,出现error: Cannot find module ‘stylus’。

解决办法: 
重新npm install stylus 和 stylus-loader

npm install stylus –save-dev 
npm install stylus-loader –save-dev

npm太慢, 淘宝npm镜像使用方法

安装vue-cli

官网地址:https://github.com/vuejs/vue-cli

Git中的bash与CMD的区别

  Windows在使用git工具时,可以看到有两个命令输入窗:

     1. Git CMD

     2. Git Bash

  两者的区别:Bash是基于CMD的,Bash在CMD的基础上新增了一些命令和功能,故建议使用Bash更方便。

  Git GUI 是一个图形操作页面。

原文地址:https://www.cnblogs.com/jiekzou/p/10902097.html

时间: 2024-11-10 17:31:11

《H5+移动应用实战开发》已出版的相关文章

linux运维好书《高性能Linux服务器构建实战Ⅱ》已出版发售,附封面照!

经过近2年的酝酿,几个月的修正,<高性能Linux服务器构建实战Ⅱ----系统安全.故障排查.自动化运维与集群架构>一书出版在即,马上就要与读者见面了. <高性能Linux服务器构建实战Ⅱ----系统安全.故障排查.自动化运维与集群架构>仍 然沿用了<高性能Linux服务器构建实战---运维监控.性能调优.集群应用>的写作特点:实战.实用.通俗.易懂的特点,而在内容上更加实战化,从运 维的多个方面以近似真实的环境介绍运维工作中的各个方方面面,与第一本书不同的是,此书新增

H5移动端项目案例、web手机微商城实战开发

自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端电商的发展起到个很好的催化剂.之前对于H5移动端的开发也做过一些项目,这段时间就整理之前的知识,做了个功能更加完善的一个webApp移动端微商城,算是一个不错的H5+css3项目案例实战. 项目截图: 原文地址:https://www.cnblogs.com/xiaoyan2017/p/837286

基于微博数据应用的HBase实战开发_HBase视频教程

基于微博数据应用的HBase实战开发 课程观看地址:http://www.xuetuwuyou.com/course/150 课程出自学途无忧网:http://www.xuetuwuyou.com 一.课程用到的软件 1.centos6.7 2.apache-tomcat-7.0.47 3.solr-5.5 4.zookeeper 3.4.6 5.eclipse-jee-neon-R-win32-x86_64  6.jdk1.7_49 7.HBase1.2.2 8.Ganglia3.7.2 9.

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <

CSS3实战开发:百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有

CSS3实战开发:手把手教大家搜索表单发光特效实战开发

各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧: 从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效. PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果. 首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"><met

【课程分享】基于Lucene4.6+Solr4.6+Heritrix1.14+S2SH实战开发从无到有垂直搜索引擎

对这个课程有兴趣的朋友,能够加我的QQ2059055336和我联系,能够和您分享. 课程介绍:最有前途的软件开发技术--搜索引擎技术 搜索引擎作为互联网发展中至关重要的一种应用,已经成为互联网各个领域的制高点,其重要性不言而喻.搜索引擎领域也是互联网应用中不多见的以核心技术作为其命脉的领域,搜索引擎各个子系统是怎样设计的?这成为广大技术人员和搜索引擎优化人员密切关注的内容. 随着互联网行业兴起,大数据时代的到来,搜索引擎开发成为一项极富含金量的工作,市场对搜索软件开发project师的需求极其旺

历时一年,我的著作《第一行代码——Android》已出版!

前言 事实上我当初决定開始写博客的想法挺简单的,认为自己搞技术这么多年了,总应该要留下点什么.既然没能写出什么出色的应用,那至少也要留下点文字分享给大家,以指引在我后面的开发人员们,毕竟我也从前辈们的博客那里受惠了非常多. 受邀 下定决心之后我就開始了我的博客之旅,令我没想到的是,我写的文章居然非常受大家的欢迎,短时间内就聚集了大量的人气.更令我没想到的事,在我開始写博客不久之后,人民邮电出版社图灵公司的副总编辑陈冰先生就联系上了我,希望我能够写一本关于Android开发技术的书籍! 陈冰,第一

storm项目实战开发 Storm视频教程下载

Storm流计算从入门到精通-技术篇 课程分类:大数据 适合人群:初级 课时数量:25课时 用到技术:Storm集群.Zookeeper集群等 涉及项目:网站PV.UV案例实战.其他案例 更新程度:40% 持续更新中 storm项目实战开发 Storm视频教程下载地址:http://pan.baidu.com/s/1hq7Sqag Storm是什么? 为什么学习Storm? Storm是Twitter开源的分布式实时大数据处理框架,被业界称为实时版Hadoop. 随着越来越多的场景对Hadoop