移动端开发经验小结

微信分享配置

引用脚本

  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证书,以免替换规则失败,详见:
  2. 将项目放到测试服务器,找移动端QA同学配置APP测试环境,通过测试包入口进入网页。

注意事项:

  1. APP会对webview进行缓存,可以修改版本号,或者清除应用缓存。
  2. webview适配视口(viewport)缩放存在问题(只能放大,不能缩小),不建议使用视口缩放的策略进行webview页面开发。
原文地址:https://www.cnblogs.com/coder-zyz/p/6748619.html