移动端开发经验小结

Posted 2020-09-12 coder_zyz

微信分享配置

引用脚本

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页面开发。