微信开发h5页面需要注意什么_微信公众号开发,写好的h5页面怎么和微信对接 - CSDN
  • 一、首先是ios对时间date()的支持不一样: var date =new Date("2016-05-31 00:00:00"); 这种写法在安卓和pc上都不正常的,唯独在ios手机上会显示Nan,查阅一些资料,经过一番调试发现: ...

    一、首先是ios对时间date()的支持不一样:

    var date =new Date("2016-05-31 00:00:00");  

    这种写法在安卓和pc上都不正常的,唯独在ios手机上会显示Nan,查阅一些资料,经过一番调试发现:

    ios上只支持:

    var date =new Date("2016/05/31");  

    这种格式,调试发现 2016/05/31 等同 2016-05-31 00:00:00 ,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为 00:00:00


    二、安卓手机端软键盘弹出顶起页面布局:

    BODY被顶起的解决办法

    $('body').height($('body')[0].clientHeight);

    三、调用系统自带alert的时候会有网址显示:

    去掉网址解决办法:

    window.alert = function(name){
    		var iframe = document.createElement("IFRAME");
    		iframe.style.display="none";
    		iframe.setAttribute("src", 'data:text/plain,');
    		document.documentElement.appendChild(iframe);
    		window.frames[0].window.alert(name);
    		iframe.parentNode.removeChild(iframe);
    	}

    四、音乐视频video与audio不能自动播放:

    <audio loop id="audio" src="music/music.mp3" autoplay preload="auto"></audio>

    这行代码在pc与安卓手机浏览器上都是正常的,唯独在ios上不能自动播放。

    解决方案一:

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
    function autoPlayAudio1() {
          wx.config({
             // 配置信息, 即使不正确也能使用 wx.ready
             debug: false,
             appId: '',
             timestamp: 1,
             nonceStr: '',
             signature: '',
             jsApiList: []
          });
          wx.ready(function() {
             document.getElementById('audio').play();
          });
       }
    
    </script>

    解决方案二:

    document.addEventListener('WeixinJSBridgeReady', function() {
    
       audio.play();
       }, false);
    }

    Safari浏览器自动播放

    document.addEventListener('touchstart', function(){
       audio.play();
    }, false);

    展开全文
  • 微信公众号h5页面制作,微信公众号H5吸粉模板源码 。源码参考链接:www.pikao.cn
  • 微信公众号H5页面开发微信JS-SDK引用 微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置...

    微信公众号H5页面开发–微信JS-SDK引用

    微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/

    公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置接口为例进行阐述。

    写在前面 非常重要!
    • 微信公众号接口必须以http://或https://开头,分别支持80端口和443端口。
    • 由于微信7.0版本升级了对https的安全限制,在微信7.0版本及以上版本使用http协议访问定位组件会导致定位失败。尤其是安卓,所以必须升级https。

    1. 域名绑定

    微信公众号请求网页授权之前,开发者需要先登记授权回调域名。
    注意:这里填写的是域名,且为全域名。授权后该域名下的其他页面都可以授权,例如:www.qq.com为回调域名,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。
    官方:微信公众平台 >> 微信网页开发 >> 微信网页授权

    2.js文件引入

    官方:
    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
    如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。
    备注:支持使用 AMD/CMD 标准模块加载方法加载

    3.通过config接口注入权限验证配置信息

    所有引用微信JS-SDK的页面都需要提供权限验证信息,否则无法调用。同样的URL只需要配置一次即可,URL发生变化时需要重新调用配置信息进行验证。

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名
        jsApiList: [] // 必填,需要使用的JS接口列表
    });
    

    这里涉及到两类配置信息的获取,一类是appId所属的公众号标识类配置信息,另一类是签名。JS接口列表可以根据需求在微信公众平台附录中获取。这里所写的是两个地理接口的相关js接口:
    jsApiList: ['openLocation','getLocation'] // 必填,需要使用的JS接口列表

    1. 公众号标识
      微信提供了微信公众帐号测试号,绑定个人微信号即可使用。申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
      进入后,第一行就提供了appID和appsecret。不同微信号绑定的微信公众测试号提供的appID和appsecret不同,如果多人参与开发,要注意区分。

    在这里插入图片描述

    接口配置信息主要用于消息接口的配置。公众号是以微信用户的一个联系人形式存在的,消息会话是公众号与用户交互的基础。在这里填写的URL主要用于接收用户信息,进行业务操作后返回信息,没有单独的页面链接。如果不是H5开发的话这里可以空着不写。

    在这里插入图片描述

    这里填写的域名就是上面1点提到的回调域名绑定授权,具体请看上面1. 域名绑定
    在这里插入图片描述

    1. 签名配置信息获取

    生成签名之前,我们要先获取两个参数:access_token 和 jsapi_ticket 。这两个参数的有效期为7200秒,所以一般是放在全局变量中。
    官方:微信公众平台 >> 开始开发 >> 获取access_token

    接口调用请求说明:

    https请求方式: GET
    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    在这里插入图片描述

     public static String getAccessToken(String appId, String secret, String accessTokenUrl) {
            HttpClient client = HttpClients.createDefault();	
    	// 获得Http客户端(可以理解为:你得先有一个浏览器;注意:实际上HttpClient与浏览器是不一样的)
            HttpGet get = new HttpGet(MessageFormat.format(accessTokenUrl,appId,secret));
            // 创建Get请求
            try {
                String accessToken = (String) CacheUtil.get("wxCache", "accessToken");
        	    //这里把accessToken放在全局变量中,通过CacheUtil缓存工具类判断accessToken是否失效
                if (StringUtils.isBlank(accessToken) || StringUtils.isEmpty(accessToken)) {
                    HttpResponse response = client.execute(get);
        		// 由客户端执行(发送)Get请求
                    HttpEntity entity = response.getEntity();
        		// 从响应模型中获取响应实体
                    String result = EntityUtils.toString(entity, "UTF-8");
                    Map<String, Object> accessTokenMap = JSON.parseObject(result);
                    accessToken = (String)accessTokenMap.get("access_token");
        		//将响应实体进行编码转换
                    CacheUtil.put("wxCache", "accessToken", accessToken);
        		//将accessToken存入缓存变量中
                }
                return accessToken;
            } catch (ClientProtocolException e) {
                log.error(e.getMessage());
            } catch (IOException e) {
                log.error(e.getMessage());
            }
            return  null;
        }
    
    

    用同样的get请求方法,获得jsapi_ticket。与access_token性质相似,有效期为7200秒,建议放在全局变量中,便于下次请求的时候判断是否仍在有效期内。

    public static String getTicket(String accessToken,String ticketUrl) {
        HttpClient client = HttpClients.createDefault();
        HttpGet get = new HttpGet(MessageFormat.format(ticketUrl,accessToken));
        try {
            String ticket = (String) CacheUtil.get("wxCache", "jsapi_ticket");
            if (StringUtils.isBlank(ticket) || StringUtils.isEmpty(ticket)) {
                HttpResponse response = client.execute(get);
                HttpEntity entity = response.getEntity();
                String result = EntityUtils.toString(entity, "UTF-8");
    	    Map<String, Object> jsApiTicketMap = JSON.parseObject(result);
                ticket = (String)jsApiTicketMap.get("ticket");
    
                CacheUtil.put("wxCache", "jsapi_ticket", ticket);
            }
            return ticket;
        } catch (ClientProtocolException e) {
            log.error(e.getMessage());
        } catch (IOException e) {
            log.error(e.getMessage());
        }
        return null;
    }
    

    获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
    签名生成规则如下:
    参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。

    //生成时间戳和随机字符串
            String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);
            String timestamp = String.valueOf(System.currentTimeMillis() / 1000);
    

    时间戳和随机字符串都是随机生成的,但是随机生成规则不同,注意区分。

     //获取url
            String url = pathUrl;
    

    url必须与用户进入页面的url相同,从前台传入,防止因为参数不同而引起的url不同,从而获取签名失败。
    对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

     //将参数排序并拼接字符串
         String sortString = WeChatCommonUtil.sort(url, timestamp, ticket, noncestr);
      
     /**
         * @Param [signature, timestamp, ticket, echostr]
         * @Return java.lang.String
         * @Description: 对所有待签名参数按照字段名的ASCII 码从小到大排序
         */
        public static String sort(String url, String timestamp, String ticket, String noncestr) {
            return "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url;
        }
    

    对string1进行sha1签名,得到signature:
    在这里插入图片描述
    至此,得到权限验证配置所有信息。

    4.通过ready接口处理成功验证

    以下步骤官网都有参考:

    wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作.
    // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });

    这里没有写到error接口,不够严谨。

    wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    });

    5.判断当前客户端版本是否支持指定JS接口

    wx.checkJsApi({
    jsApiList: [‘chooseImage’], // 需要检测的JS接口列表
    success: function(res) {
    // 以键值对的形式返回,可用的api值true,不可用为false
    // 如:{“checkResult”:{“chooseImage”:true},“errMsg”:“checkJsApi:ok”}
    }
    });

    需要检测的JS接口与config中填写的 jsApiList 基本一致。
    config信息验证后,才会调用ready方法,所以将checkJsApi放在ready方法中执行。

    6.参考官方文档调用所需接口

    使用微信内置地图查看位置接口:用于打开导航地图,获取目的地坐标定位。

    wx.openLocation({
    latitude: , // 纬度,浮点数,范围为90 ~ -90
    longitude: , // 经度,浮点数,范围为180 ~ -180。
    name: ’ ', // 位置名
    address: ’ ', // 地址详情说明
    scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
    infoUrl: ‘’ // 在查看位置界面底部显示的超链接,可点击跳转
    });

    获取地理位置接口:主要用于获取自身坐标定位。

    wx.getLocation({
    type: ‘wgs84’, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入’gcj02’
    success: function (res) {
    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
    var speed = res.speed; // 速度,以米/每秒计
    var accuracy = res.accuracy; // 位置精度
    }
    });

    注意:两个接口的经纬度都是浮点数类型,否则无法调用。

    总结:获取微信配置信息验证的步骤比较复杂,必须没有误差,同时要考虑配置信息具有时效性,重复获取以及放在全局变量中。调用接口的代码文档官方都有提供,可以参考。

    wx.ready(function () {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作.
        // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
        // 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
       
        wx.checkJsApi({
            jsApiList: ['checkJsApi', 'openLocation', 'getLocation'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
            success: function (res) {
                // 以键值对的形式返回,可用的api值true,不可用为false
                // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });
    
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
            dataType: "json",
            success: function (res) {
                var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                var speed = res.speed; // 速度,以米/每秒计
                var accuracy = res.accuracy; // 位置精度
            }
        });
    
        $(".nav-to").on ('click','a',function () {
            wx.openLocation({
                latitude: parseFloat($(".nav-to").attr("lat")), // 纬度,浮点数,范围为90 ~ -90
                longitude:parseFloat($(".nav-to").attr("lng")), // 经度,浮点数,范围为180 ~ -180。
                name: $(".nav-to").attr("name"), // 位置名
                address: '', // 地址详情说明
                scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
            });
        });
    });
    

    后续补充:
    事实证明我真是too young too native = =

    背景交代 与真正的公众号进行对接(以上都是用微信提供的测试公众号)时,除了以上步骤还有其他验证是在测试公众号上所不需要的,在此remark一下。

    7.设置IP白名单

    在这里插入图片描述
    根据要求把服务器的IP加入到IP白名单中,这样就不会被拦截了。

    8.设置JS接口安全域名

    在这里插入图片描述
    注意:确保可以访问!!!
    不管是根目录还是路径目录,都要确保通过所填写的域名都可以访问到这个文件。同时微信所访问的其他路径也需要在这个路径目录下。
    踩坑记录:如果程序设置了权限认证,则要记得放开认证,否则永远也无法访问到。

    展开全文
  • 最近在项目中接手微信环境h5页面开发,主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。 目前项目暂时告一段落,希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~ 由于...

    最近在项目中接手微信环境h5页面的开发,主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。

    目前项目暂时告一段落,希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~

    由于微信环境、sdk的限制,在微信环境下如何有更加良好的调试体验还是有一些坑的,本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法(由于没有苹果手机,所以在开发自测时多以安卓系统为主要的测试环境)。

    1.使用 Chrome 模拟移动设备进行调试

    1.1 简单介绍

    Device Mode 可以近似模拟出网页在移动设备上的显示效果,就是下面红框所示的,可以说是最常用的移动端 h5 调试方式,这里不过多进行介绍。

    在这里插入图片描述

    在项目中因为要在微信环境下调用sdk,其余浏览器不能调用相关sdk功能,所以会根据不同的 User Agent 将 h5 页面分为普通浏览器环境微信环境有不同的业务逻辑(当然,根据不同的系统也会分 iOSAndroid )。

    然而 Chrome Device Mode 只有如下的一些预设机型:

    在这里插入图片描述

    1.2 添加 User Agent 模拟微信环境

    所以这里我们需要自己添加机型去模拟出微信环境,打开 chrome 开发者工具下面是简单的步骤示意图:

    在这里插入图片描述

    在这里插入图片描述

    在图2第三个红框中加上 User Agent

    Mozilla/5.0 (Linux; Android 7.0; MI 5s Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/64.0.3282.137 Mobile Safari/537.36 wxwork/2.4.16 MicroMessenger/6.3.22 NetType/WIFI Language/zh
    

    这是我用的安卓系统微信环境的 User Agent,网上还可以搜到许多,也有iOS系统微信环境的,

    加上之后就可以切换到对应预设机型进行调试啦~

    1.3 简单的使用体验总结

    总的来说,在 Device Mode 中基本不能调试微信 js-sdk 功能,微信支付、微信授权登录一般也有限制,那么能拿它来做啥呢?

    因为项目中会根据微信环境普通浏览器环境有一些不同的 UI 样式,重新加载的速度个人感觉是今天介绍的方法中算是最快的,单纯以调整 UI 的目的来说体验是最好的,而且通过修改虚拟设备的宽高调试页面在不同设备上的 UI 效果。

    2. 使用微信web开发者工具

    微信官方推出的 web 开发者工具,可以通过模拟微信客户端的表现,使得开发者方便地在 pc 上进行开发和调试工作,下面是官方手册地址,有详细的介绍和入门教程,这里就不多加赘述

    传送门

    2.1 简单地聊聊使用体验

    微信web开发者工具集成了 Chrome 开发者工具,可以像上面介绍的一样用来进行一些 UI 样式的调试

    在这里插入图片描述

    此外微信web开发者工具最大的特点是可以模拟 JSSDK 在微信客户端中的请求,并且可以直观的看到请求结果,如下图所展示的:

    在这里插入图片描述

    这一点真的很赞,可以直观地看到每次调用 JSSDK api 输入参数和请求结果。虽然微信 JSSDK 也可以开启调试模式,不过它是将调用的 所有 api 的返回值在客户端中 alert 出来,这种调试体验真的不是很好

    不过因为是在 pc 端进行模拟,一些如扫码、定位、摇一摇等比较复杂的 sdk 功能无法进行模拟调试

    2.2 再来唠唠移动调试的体验

    微信 web 调试工具也带了真机调试功能,针对 Android 提供了 X5 Blink 调试和普通调试两种方式。

    在开发中首先学习使用的是普通调试,简单来说就是借助 weinre 让你可以进行真机无线调试,下面是基本的调试界面:

    在这里插入图片描述

    最常用的功能有检查dom元素、查看network请求和console窗口,就是一个简陋版 chrome devtools,最大的劣势是不能进行断点调试,综合调试体验不如后面要介绍的 X5 Blink 调试

    emmm… 这里要介绍的基于 X5 Blink 的真机调试不是微信 web 调试工具自带的那个。不知道为啥我在微信 web 调试工具中 X5 Blink 内核调试 的调试均以失败告终。只能使用另一种基于 X5 Blink 的真机调试方法。

    3. x5 内核 + Chrome://inspect 进行微信环境 h5 真机调试

    因为对底层原理不甚了解,所以此节着重介绍一些配置的步骤,也会贴出一些比较好的学习文章链接。

    下面是谷歌官方对 Android 远程调试的介绍,可以自行学习:

    Android 设备的远程调试入门

    对 X5 内核的介绍:

    X5 浏览器内核调研报告

    3.1 打开微信 TBS 调试

    微信进入下面的网址:http://debugx5.qq.com,或者扫下面的二维码

    可能会有错误信息,先退出来,按照错误提示依次访问几个网址

    1. 进入 http://debugmm.qq.com/?forcex5=true

    2. 进入 http://debugtbs.qq.com 选择 “安装线下内核”

    3. 重新扫上面的码,可以进入下面的页面,选择 “打开TBS内核Inspector调试功能”

    4. 然后 USB 连接手机、电脑,打开开发者模式,打开 USB 调试,然后在 Chrome 中进入 chrome://inspect/#devices 页面,可以看到下面的页面

    在这里插入图片描述

    然后就可以选择对应页面 inspect,就可以开始真机调试,而且完美拥有 Chrome devtools 的功能

    展开全文
  • 微信H5开发(一)

    2018-06-16 09:17:59
    在这半年内,接手并完成了两个微信H5项目(一期)的过程中,发觉h5开发过程中需要注意的细节有很多,碰到的兼容问题也有一些。在这里我先总结下,H5项目的一些思路及碰到的难点和解决方法。 在刚接到H5...

    H5开发,一般是指移动端的页面开发。移动端可分为app和普通浏览页面。从嵌入的环境来归类:可以分为app、微信H5及手机浏览器里面打开的页面。
    以前粗略的涉略过h5开发的一些知识,感觉H5并不是很难。在这半年内,接手并完成了两个微信H5项目(一期)的过程中,发觉h5开发过程中需要注意的细节有很多,碰到的兼容问题也有一些。在这里我先总结下,H5项目的一些思路及碰到的难点和解决方法。
    在刚接到H5项目时,因为前端有很多框架,所有需要先确定使用什么技术。对于用vue和还是react,考虑到项目的规划时间和对框架的熟练度。这两个H5的项目我都用react来完成。
    webpack+react+react-dom+react-route+redux+axios +Java+mysql ,一个完整的技术栈。
    比较基础的前端开发环境搭建(webpack+react…),各位可以参考我前面写的文章。由于webpack的技术更新及部分代码优化,基础配置里面有些东西需要稍微调整下。
    比如:
    1. nodeJs 的指令更改
    以前安装一个模块的指令:

    npm install url-loader file-loader --save-dev

    现在更改为:

    npm install url-loader file-loader -S -D
    1. Happypack 插件将不再支持cache
    new Happypack({
        id:"happybabel",
        loaders:['babel-loader'],
        threadPool:happypackThreadPool,
        cache:true,   **//需要删除这句cache的配置**
        verbose:true
    })
    1. 在webpack plugins 里面添加配置使用(生产)环境的插件
    new webpack.DefinePlugin({
      "process.env": { 
         NODE_ENV: JSON.stringify("production") 
       }
    })

    4.为了降低最后打包的压缩体积,把devtool:’eval-soure-map’ 改成 devtool:false。
    配置css-loader将css文件进行压缩:

     {
        test:/\.css$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:[{loader:"css-loader",options:{minimize:true}},"postcss-loader"]
        }),
    
    }

    5.简化redux 和action的代码
    以前旧代码请参考:https://blog.csdn.net/cbboke31/article/details/77046839

      redux 以前的代码:
       const reducer = (state = defaultState, action) => {     
        switch (action.type) {//通过action的返回值来选择更新哪个state的状态
            case 'AlterMain':
                return  Object.assign({},state,{ mainText:action.payload});
            case 'AlterTopic':
                return  Object.assign({},state,{ topicText:action.payload});
            default:
                return state;
        }
    };
    精简为:
    const reducer = (state = defaultState, action) => {
        if (action.type.indexOf("@@redux") != -1) {
            return state;
        } else {
            var ob = {};
            ob[action.type] = action.payload;
            return Object.assign({}, state, ob);
        }
    };
    action 旧代码:
    const actions = {
     changeText:function(num){
         console.log("调用actions");
          switch(num){
          case 1:
          return {type:'AlterMain',payload:"mainContainer had been changed"};
          case 2:
           return {type:'AlterTopic',payload:"topicContainer had been changed"};
           default:
           return action;
       }
    }
    };
    export default actions;
    
    优化为:
    const actions = {
     changeInfo:(infotype,string)=>{   
        if(infotype == ""){
          return action;
        }else{
          return {type:infotype,payload:string};
        }
    },
    };
    export default actions;

    现在转入主要内容。
    h5 开发,第一个面临的难题是像素问题,移动端的像素有物理像素及逻辑像素的说法,同一个像素在不同的手机,显示的大小都不一致。而且PC端浏览器的最小像素为1px,但手机端却可以显示出0.5px甚至可能更小。
    一、这个像素问题要怎么解决?
    h5 里面有个视口(viewport)这个标签。这个视口标签就设定逻辑像素和物理像素的比值。initial-scale=1表示1倍的关系。user-scalabe=no,表示不允许用户更改当前页面的比例。

    根据网上推荐的方案,通过 docEl.clientWidth 获取移动端网页的可见区域的宽度,把可见区域分成320小分,然后规定根字体占10(pc端默认字号为10px)小分,单位取px。

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';       
        }; 
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    上面这个js,在react的app..js 引入。当代码成功运行,可以看到根字体的大小。
    这里写图片描述

    当根字体确定下来之后,后面所有设计到尺寸的地方都以跟父元素的百分比或者用以根字体的比例关系设定(以rem)。如果用rem做单位,需要所有指定尺寸的地方都需要 用UI图纸标注的尺寸除以根字体大小。如果每次尺寸都用人工转换,这个将会是个很浪费时间一件事。为了解决这个费力不讨好的问题,我启用了less。less只需要在整个文档前面设定一个根字体大小的变量(比如:@rootFontSize:23.4375),后面所有涉及到尺寸的地方直接除以这个变量就好。例子:设置div 的高度 height:44rem/@rootFontSize。 这样div设定的高度就等同于图纸(设计尺寸比例1:1的关系)上的44px。

    二、 Object.assign() 兼容问题
    以前碰到一个这样的现象:引入redux成功后,项目在pc端谷歌 浏览器上调试页面可以正常渲染。但如果在安卓模拟机和实体手机的环境下,页面就变成了空白。后来经过排查,发现object.assign 存在移动端兼容性问题。
    这个兼容问题怎么解决?
    网上有现成的方案:引入polyfill 文件,重新定义object.assign。

     if (typeof Object.assign != 'function') {
        // Must be writable: true, enumerable: false, configurable: true
        Object.defineProperty(Object, "assign", {
          value: function assign(target, varArgs) { // .length of function is 2
            'use strict';
            if (target == null) { // TypeError if undefined or null
              throw new TypeError('Cannot convert undefined or null to object');
            }
    
            var to = Object(target);
    
            for (var index = 1; index < arguments.length; index++) {
              var nextSource = arguments[index];
    
              if (nextSource != null) { // Skip over if undefined or null
                for (var nextKey in nextSource) {
                  // Avoid bugs when hasOwnProperty is shadowed
                  if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                    to[nextKey] = nextSource[nextKey];
                  }
                }
              }
            }
            return to;
          },
          writable: true,
          configurable: true
        });
      }

    这篇就先到这。解决了移动端刚开始碰到的两个问题,处理好这个两个问题,移动端页面和pc页面开发的区别就不会很大了。
    下一篇讲微信相关的知识及使用微信模块碰到的一些棘手的问题。

    展开全文
  • 前端微信h5开发

    2019-02-11 15:28:40
    首先确定的是,这是一个H5页面,是在微信端展示的一个H5页面 需要获取微信用户头像、性别、昵称需要获取微信用户头像、性别、昵称 测试结果需要生成图片,用户可直接长按保存图片 分享 首先说下前两点: ...
  • 微信公众号H5页面

    2020-07-29 14:20:07
    模仿微信公众平台做的简单静态页面,里面包含了用户列表,标签设计,关注回复等功能
  • 刚入门前端的时候写过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录。防止自己以后再去解决解决过的问题。 一、微信网页...
  • 利用H5开发微信公众号 一、 首先授权配置 公众号设置 --》功能设置 设置业务域名! 1 2 3   这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面...
  • 一、微信网页授权 网页授权流程分为四步,这里只说前端需要做的,其中的第一步:跳转授权页面获取code。...如果你页面中有用到分享、上传图片、微信支付等功能,那么需要先进行js-sdk授权。我...
  • 微信h5页面缓存

    2019-05-07 18:42:51
    微信h5页面缓存问题前言先说说之前开发的问题来看看现在的效果:因为我的分享页面是在一整个项目中的,默认就是采用的第一种方案,所以我直接修改了图片的名称,打包编译后上传js文件到服务器,得到的效果是: ...
  • 微信H5开发(三)

    2018-06-03 14:36:36
    微信H5开发在使用微信SDK,会碰到很多问题,特别是由于微信文档的介绍不够细致或者某些功能被限制但在文档上没有提及。我这篇文不提微信上的这些小小的坑,只讲H5和iOS 、安卓 的一些兼容问题。 微信H5页面项目...
  • 微信H5支付功能开发

    2019-06-28 10:44:03
    本文介绍的是微信H5支付功能开发,也就是在微信之外的H5页面支付。 首先我们需要先看微信的官方文档https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1,这里面几乎介绍了全部流程了。等你了解大概流程...
  • 微信H5开发(二)

    2018-07-15 10:45:14
    第一次使用微信开发文档的时候,感觉文档里面写的内容不算太难,但在实际开发中会碰到很多预想不到的问题。 微信开放平台、微信商务平台 有什么用?都在哪里用? 首先从微信公众号讲起,期间用到微信商务平台和...
  • 会员免费看,...微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131
  • 微信卡券H5投放开发

    2017-05-19 17:29:14
    微信卡券H5投放开发
  • 一看就明白的微信H5页面制作教程 H5页面微场景制作 入门教程入门了,一切都变得很简单!
  • H5这个由HTML5简化而来的词汇,正通过微信广泛传播。H5是集文字、图片、音乐、视频、链接等多种形式的展示页面,丰富的控件、灵活的动画特效、强大的...下面就给大家介绍如何通过应用之星网站轻松制作微信H5页面,简
  • 微信公众号的H5页面,在新版本上线后部分用户无法获取最新的页面文件 二、无法获取新版本页面的用户特征 在上线前某段时间内,访问过该H5页面,手机本地存有该H5页面的缓存 三、解决方案【亲测可行】 对于JS和CSS...
  • 微信h5开发demo

    2020-07-30 23:31:57
    使用了h5开发手机端页面,使用了下拉刷新,上拉加载更多,使用单位rem适配,刚学习h5的可以下载回去看看。
1 2 3 4 5 ... 20
收藏数 17,674
精华内容 7,069
关键字:

微信开发h5页面需要注意什么