移动端开发经验小结

微信分享配置

引用脚本

  1. jQuery/zepto
  2. jweixin-1.0.0.js (//st02.chrstatic.com/themes/event/campaign/pofeng/common/js/jweixin-1.0.0.js)
  3. appInteractive.js(//st02.chrstatic.com/themes/event/campaign/pofeng/common/js/appInteractive.js)

使用方法

  1. 上述脚本按序引入,在后续执行js:

     window.chrconfig = {
         "isShare": true,
         "shares": {
             "shareTitle": "分享标题",
             "shareContent": "分享内容",
             "shareImageUrl": "图片url",
             "shareUrl": "分享出去的链接"
         }
     };
    
     var active = new window.AppInteractive(chrconfig);
     active.wxShare();
    
  2. 注意事项
    1. 如果手机连接到电脑,电脑配置了host,则无法在手机微信内访问https协议的链接;如果需要在app内配置分享,图片url必须是https协议。所以在测试的时候,图片丢失情况难以避免。
    2. iOS微信里,如果本网页的url协议是https,则分享配置无法生效。所以分享出去的链接应该改成http协议的。
    3. 本网页的链接必须是域名方式(不能是ip,所以开发时要注意,避免踩坑)。

APP配置分享

  1. 引用脚本和使用方法同上,如果不需要在微信内分享,可以删去jweixin-1.0.0.js和 active.wxShare();
  2. 安卓APP内,如果分享图片size过大,可能导致加载图片失效的问题。
  3. 分享到qq的时候,由于qq版本不同,可能出现分享出去的是图片和文字分离的两条消息的情况。

根据运行平台,拉起原生职位/公司页或web职位/公司页的实现

        var apitype = 0;
        //判断环境
        if (!!window.webkit && !!window.webkit.messageHandlers && !!window.webkit.messageHandlers.chinahr) {
            apitype = 2; //ios5.4.2+
        } else {
            if (!!window.chinahr) {
                apitype = 1;  //andriod及ios低版本
            } else {
                apitype = 0; //非app环境
            }
        }
        if (apitype !== 0) {//app环境
            $(‘a‘).on(‘click‘, function (e) {
                var href = $(this).attr(‘href‘);
                e.preventDefault();
                if (href.indexOf(‘job‘) > -1) { // 职位
                    var id = href.split(‘job/‘)[1].split(‘.html‘)[0];
                    var message = "chinahr://customer/job?id=" + id + "";
                    if (apitype == 2) {
                        window.webkit.messageHandlers.chinahr.postMessage(message);
                    } else if (apitype == 1) {
                        window.chinahr.gotoPage_callback(message, "");
                    }
                }
                else if (href.indexOf(‘company‘) > -1) { // 公司
                    var id = href.split(‘company/‘)[1].split(‘.html‘)[0];
                    var message = "chinahr://customer/company?id=" + id + "";
                    if (apitype == 2) {
                        window.webkit.messageHandlers.chinahr.postMessage(message);
                    } else if (apitype == 1) {
                        window.chinahr.gotoPage_callback(message, "");
                    }
                }

            });
        }

APP内webview开发调试

调试方法:

  1. 将项目放到服务器(本地/测试服),使用fiddler、charlse等抓包工具进行规则替换,将app内任一webview页面请求替换为要测试的页面。注意:需要在手机端安装https证书,以免替换规则失败,详见:

    抓包工具配置HTTPS

  2. 将项目放到测试服务器,找移动端QA同学配置APP测试环境,通过测试包入口进入网页。

注意事项:

  1. APP会对webview进行缓存,可以修改版本号,或者清除应用缓存。
  2. webview适配视口(viewport)缩放存在问题(只能放大,不能缩小),不建议使用视口缩放的策略进行webview页面开发。
时间: 2024-08-15 00:59:42

移动端开发经验小结的相关文章

web移动端开发经验总结

整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> <!-- width可视宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小

[转]移动端开发经验

转自:http://www.cnblogs.com/couxiaozi1983/p/3736229.html 一.zepto和jQuery的区别 从支持上来说,zepto支持touch事件,而jquery中没有touch事件,只在jquery Mobile中才有touch事件 zepto不支持IE浏览器 二.请求jquery.min.js的时候,log显示浏览器还请求了jquery.min.map,该请求导致服务端报错 //@ sourceMappingURL=jquery.min.map 把这

移动端CSS小结

Meta 标签 <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> 移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览.   禁止 iOS 自动识别电话和 Android 自动

移动端页面小结

前不久,做了移动端的需求,移动端真是有好多坑,下面我记录下我遇到的问题: 1.高度占满整个屏幕需要加如下样式: html{height:100%;}; 2.官网zepto.js默认不支持animate函数,需要自己去有选择的添加插件,网址如下: http://github.e-sites.nl/zeptobuilder/ 3.zepto.js不支持scrollTop(返回顶部平滑效果),需要自己写下js效果: 方法一如下代码: function scroll(selector, animate,

移动端开发经验

一.zepto和jQuery的区别 从支持上来说,zepto支持touch事件,而jquery中没有touch事件,只在jquery Mobile中才有touch事件 zepto不支持IE浏览器

十年软件开发经验小结

      一.对于团队而言流程的重要 为什么说流程重要呢?举个例子,如果团队上有孙悟空存在,去西天取经,大概也不需要什么流程,只要方向就可以了. 但作为普通的人,应该先虑败.找人算命时,应该先听听不好的地方,好的地方就不用听了,总归是好的,不好的地方一定要听,这样才能规避. 怎么划清底线呢?就是假想团队中没有孙悟空了,光靠你唐僧.猪八戒和沙和尚,应该怎么去取经. 这个月走什么地方,遇到山怎么走,遇到河怎么过,遇到路上有妖怪劫道,谁去抵挡.遇到路上有少女要搭救,怎么办?这就是流程,是原则. 我经

移动端问题小结[2015-11]

1: 获取滚动条的值: window.scrollY window.scrollX 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?就是上面两个属性,但是事实证明android也支持这属性,所以索性都用woindow.scroll. 2:禁止选

懒人必备的移动端定宽网页适配方案

如今移动设备的分辨率纷繁复杂.以前仅仅是安卓机拥有各种各样的适配问题,如今 iPhone 也拥有了三种主流的分辨率,而未来的 iPhone 7 可能又会玩出什么新花样.如何以不变应万变,用简简单单的几行代码就能支持种类繁多的屏幕分辨率呢?今天就给大家介绍一种懒人必备的移动端定宽网页适配方法. 首先看看下面这行代码: <meta name="viewport" content="width=device-width, user-scalabel=no">

微信开发小结——积累与沉淀

前言 微信开发是个人.企业或组织在拥有超大用户群体的微信应用上,利用微信公众平台,开发类似插件或服务的轻应用.微信公众平台分为三种:订阅号:主要面向媒体和个人,旨在为用户提供信息资讯,每天能够群发1条消息,通过微信认证,可获得菜单.获得用户信息等接口权限:服务号:主要面向企业.政府和组织,旨在为用户提供服务,每月能够群发4条消息,通过微信认证,可获得高级接口权限:企业号:主要面向企业,旨在为企业用户提供移动端办公,只有企业通讯录中的用户才能关注使用,可以自由推送消息,不受限制,保密消息,防转发.