h5页面 | 易学教程

微信H5开发（三）

阅读更多关于微信H5开发（三）

微信H5开发在使用微信SDK，会碰到很多问题，特别是由于微信文档的介绍不够细致或者某些功能被限制但在文档上没有提及。我这篇文不提微信上的这些小小的坑，只讲H5和iOS 、安卓的一些兼容问题。微信H5 单页面项目有个很多情况下都无法避免的问题就是页面跳转控制。你可能会想页面控制应该很简单，像react-router 一样只要配置好path就可以了。为了更好的解释页面控制跳转问题，我举个例子，比如注册流程。用户通过公众号的项目入口或者朋友圈的分享链接进入到我们的项目主页，微信授权，如果是新用户进入注册流程。注册流程完成后跳回项目主页。整个页面跳转过程为：主页-》注册页（n多步骤）-》主页。如果按顺序走这个router配置好就行，但如果用户注册完成后，从主页点击微信的后退时，这里已注册的用户是不是不应该再次进入注册页面了？要怎么监控这个微信的后退事件？监控微信H5 后退和前进的事件，H5 提供了一个：onpopstate，但另一个监控SPA hash 变化的的事件（onhashchange）也可以用户页面的前进和后退。这个两个事件该怎么用？待续。。。后面会讲的内容：屏蔽长按跳出复制提示的问题、ontouchend 安卓兼容问题、H5 video 背景音乐 ios系统下载完成后不能自动播放问题、背景音乐volume ios 系统不允许修改的问题、微信缓存问题

与app交互因异步造成的坑记录

阅读更多关于与app交互因异步造成的坑记录

一、问题产生背景：　　在app内跳转到H5页面，初始页面获取用户等各种信息，前端除了可以获取链接上的参数去请求接口，接着进行数据的缓存等，也可以去获取app写入window的数据，然后进行其他的操作。公司采用的后者，于是在正常情况下，直接从app内进入H5页面以及刷新页面都可以取到window的数据，但是在调第三方H5支付的时候，从第三方H5支付页面回到自己项目的H5页面时，却取不到window的数据了，经查发现，从第三方H5页面跳回，自己的页面在初始化取不到window的数据，刷新之后又可以取到，window也存在值，因此怀疑在离开自己项目的H5页面后，window数据被销了，从第三方回来之后，app重写window的值，但是前端代码先执行故取不到值。最后给取值的前端代码加了定时器延迟执行就解决了问题。很多时候发现后台等数据正常但是前端却不正常，该多考虑异步的问题。来源： https://www.cnblogs.com/ahao68/p/11357194.html

jQuery之属性操作、文档操作、阻止冒泡、事件委托、响应式页面@media

阅读更多关于 jQuery之属性操作、文档操作、阻止冒泡、事件委托、响应式页面@media

属性操作 jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作 html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp() 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass() 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> </div> <script src="jquery-3.3.1.js"></script> <script> // js:getAttribute() setAttribute() // jQ:attr()可以设置多个属性建议不要设置class属性容易覆盖，用addClass removeClass toggleClass // removeAttr()移除属性 // 对js对象属性进行操作

h5新增和css3新增

阅读更多关于 h5新增和css3新增

编辑器： webstorm，英文版 sublime, hbuilder vscode, dw h5的新标签及特性（移动端用的多），，，，如果想在图片里面显示 “帅哥" 记得使用单双引号，外面是单引号，里面是双引号例如： <img src="" alt="" title='这里有一个"傻狗"'/> h5新增语义化标签：（对浏览器和搜索引擎友好，）div没有语义化，都可能出现很多次 section元素表示页面中的一个区块 article 元素；表示页面中的一块内容，字多的！！！区域---论坛，博客，新闻 aside : 侧边栏 header : 页面头部 footer 页面底部 nav 导航可以直接写li 不用ul 也可以 figure 表示一段独立的流内容标题分组作用类似 dl dt dd 独立流内容的标题figcaption元素为其添加标题 <figcaption><img> </figcaption> main元素表示页面中的主要内容（ie不兼容） hgroup 标题的一个分组像-主副标题的那种 mark:（不是块，也不经常用）定义高量文本（自带黄色）用background改颜色 time 包时间的：例如： <time> 12-20 </time> 上面都是块 ################视频和音频 video 视屏属性： src 引入视屏路径

vue 页面显示神器 v-html

阅读更多关于 vue 页面显示神器 v-html

最近自己开发一套客服系统，需要打通微信及H5。在做微信基本表情时无意中发现vue中一直被忽视的标签v-html。 v-html 标签的作用是显示动态数据中的H5标签示例： <template> <view v-html="test">{{test}}</view> </template> <script> export default { data () { return { test:'我是一个表情<image src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/100.gif" width="24" height="24"></image>' } } } </script> 然后，界面显示来源： https://blog.csdn.net/weixin_44037376/article/details/98948442

iOS H5调微信支付与回调

阅读更多关于 iOS H5调微信支付与回调

转载自： https://www.jianshu.com/p/30ca8b2c1235 我这里用的是WKWebView，首先要实现WKNavigationDelegate协议 1、由H5页跳转微信客户端--WKNavigationDelegate方法该方法是决定H5页面是否允许跳转的 -(void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{ WKNavigationActionPolicy actionPolicy = WKNavigationActionPolicyAllow;//允许 NSString*urlString = [[navigationAction.request URL] absoluteString]; urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; NSLog(@"跳转：>>>???>>%@",urlString); //打开微信 if(