iOS 走近商城 APP(三 WKWebView 商品规格选择框架封装)
开篇
忽然发现最近也只有值班才能写东西了,中间更新了两篇其他的断了下商城相关的文章,仔细看了看之前觉得干货太少,今天写点实际的吧,闲说少说商城相关的更新今天继续吧,哈哈。前两篇文章:iOS走近商城APP(一) ,iOS走近商城APP(二 购物车常用控件)(今天值班整座大楼一如既往的静悄悄,胆小怪我咯-_-、)。
主要内容
- 使用WKWebView替换Webview
WKWebView的html网页的加载方法
WKWebView显示网页的base页面的封装,点击页面的拦截方法
商品详情页页面的自适应布局 - 商品规格选择框架
基于内容宽度自适应的框架封装,优化之前介绍的第三方框架带来的问题
使用WKWebView替换Webview
在商城中,使用html网页做展示页面,商品详情,活动页面再常见不过,往往有许多,但是
Webview大量使用会存在内存暴增,如果用WKWebView就能大大减少内存,下面就具体介绍一下使用过程,至于WKWebView的原理以及基本的代理这里就不一一列举了,实战出发,哈哈。
- 活动页Webview的替换
如图我们点击立即签到和立即签钱,会触发不同的点击事件,当然在许多别的页面,我们点击网页上的内容还要跳转到软件本身的界面,我们的怎么处理他呢?在老的Webview中我们遵循UIWebViewDelegate的代理方法,然后处理方式如下
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
}
拦截点击事件,然后再方法中做出处理
NSString* urlString=[[request URL] absoluteString];NSLog(@"%@",urlString);NSArray* actionArray=[urlString componentsSeparatedByString:@"-"];for (NSString* actionStr in actionArray) {if ([actionStr isEqualToString:@"SignNew.StartSign"]) {//跳转签到页面-action[webView stopLoading];[self gotoSignIn];}else if([actionStr isEqualToString:@"Task.TaskDetail"]){//跳转界面....代码原理同上}else if([actionStr isEqualToString:@"Task.TaskList"]){//跳转页面...代码原理同上}
原理就是我们截取到点击事件然后根据后台返回的网址进行处理,根据网址中不同的字段跳转到我们想要跳转的页面。
在WKWebView中我们的处理方式如下遵循WKNavigationDelegate代理方法,然后调用方法
#pragma mark - WKWebviewDelegate
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
}
在这个方法中进行上述的处理,
NSString *urlString = [navigationAction.request.URL.absoluteString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];NSLog(@"%@",urlString);NSArray* actionArray=[urlString componentsSeparatedByString:@"-"];for (NSString* actionStr in actionArray) {if ([actionStr isEqualToString:@"SignNew.StartSign"]) {//跳转页面-action[webView stopLoading];...}else if([actionStr isEqualToString:@"Task.TaskDetail"]){//跳转界面...}
在处理完跳转逻辑之后记得加上这句代码
decisionHandler(WKNavigationActionPolicyAllow);//允许跳转
下面再放两个加载时的协议方法
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[SVProgressHUD dismiss];});
}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation
{dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[SVProgressHUD dismiss];});
}
- WKWebView 商品详情页的自适应布局
如图所示,商品详情的时候我们要根据每个商品详情的不同来对他进行自适应的图文布局,他并不像我们的活动页面那么简单,由于数量比较多,内容不固定因此我们在加载页面的时候要做处理(但是这个一般就不需要做点击交互处理了,哈哈),代码如下
-(WKWebView *)webView{if (_webView==nil) {NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];WKUserContentController *wkUController = [[WKUserContentController alloc] init];[wkUController addUserScript:wkUScript];WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];wkWebConfig.userContentController = wkUController;_webView=[[WKWebView alloc] initWithFrame:CGRectZero configuration:wkWebConfig];_webView.navigationDelegate = self;NSURLRequest* request=[NSURLRequest requestWithURL:[NSURL URLWithString:url]];[_webView loadRequest:request];}return _webView;
}
加入一段JS代码对页面进行布局处理。
商品详情的框架封装
在iOS走近商城APP(二 购物车常用控件)文章中,我们介绍了一个商品详情布局的控件,虽然有优点,但是也有他的局限性,因为如果在商品规格比较单一,且长度较短或者固定的时候,是很美观的,但是如果我们想要根据不同的规格长度进行自适应,问题就来了,就出现了商品显示不完整的情况,今天放一个在那个版本的基础上自己又重新封装过的框架吧。效果图如下
主要的操作就是优化了根据规格不同,对标签长度以及换行的计算标准更加的趋向于实际应用。
标签的自适应计算主要代码如下(具体可以看git中的源码):
首先创建系统的函数如下,其效果类似于for in遍历
- (void)enumerateObjectsUsingBlock:(void (NS_NOESCAPE ^)(ObjectType obj, NSUInteger idx, BOOL *stop))block NS_AVAILABLE(10_6, 4_0);
然后再函数中的处理
[_filterData.elements enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {Btnx += btnGap;CGFloat btnWidth = [self WidthWithString:obj fontSize:14 height:BtnHeight];btnWidth += 10;//让文字两端留出间距if(btnWidth<minBtnLength)btnWidth = minBtnLength;if(btnWidth>maxBtnLength)btnWidth = maxBtnLength;if(Btnx + btnWidth > oneLineBtnWidtnLimit){BtnlineNum ++;//长度超出换到下一行Btnx = btnGap;}UIButton *button = [[UIButton alloc] init];//Y坐标CGFloat height = btnGapY+ (BtnlineNum*(BtnHeight+btnGapY));// NSLog(@"Y坐标-------------%f",height);button.frame = CGRectMake(Btnx, height, btnWidth,BtnHeight );//此处省略按钮的具体属性的设置[button addTarget:self action:@selector(buttonSelected:) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:button]; [_buttons addObject:button]; Btnx = button.frame.origin.x + button.frame.size.width + btnGap; totalHeight = height; //行高为最大的Y坐标加高度
下面放上一个详细举例的gif效果图。
代码传送门GSFilterView,有用的可以点个星哦。
后记
惯例闲扯时间,哈哈,下一篇将写一下runloop在订单列表中的实际应用,获取通讯录手机号码以及iOS9与iOS8下的处理等,督促自己一波哈哈。
iOS 走近商城 APP(三 WKWebView 商品规格选择框架封装)相关推荐
- iOS走近商城APP(四 runloop应用 获取通讯录并处理)
###开篇 转眼又要过年了,我的程序员生涯默默的又过了一年,年终篇就先闲扯几句.从接触简书到写第一篇到现在差不多也将近一年了,简书的布局风格确实是赏心悦目,习惯了这种写法之后,再看以前的博客感觉好乱, ...
- php商品规格sku,SKU商品规格选择
SKU商品规格选择 在线demo地址 Github代码地址 可选属性实现思路 当用户点击某选项(如"黑色")时,拿到此时所有规格的选项( { color: "黑色&quo ...
- 上门洗车APP --- Android客户端开发 之 网络框架封装介绍(一)
上门洗车APP --- Android客户端开发 之 网络框架封装介绍(一) 上篇文章中给大家简单介绍了一些业务,上门洗车APP --- Android客户端开发 前言及业务简介,本篇文章给大家介绍下 ...
- 乐优商城--服务(三) : 商品微服务(LyItemApplication)--前半部分
商品微服务--前半部分: 1. 微服务结构(ly-item) 1.0 顶级父工程(le-you) 1.1 ly-item 1.1.1 ly-item-interface 1.1.1.1 添加依赖 1. ...
- 乐优商城(四)商品规格管理
文章目录 1. 商品规格 1.1 SPU 和 SKU 1.2 分析商品规格的关系 1.3 数据库设计 1.3.1 商品规格组表 1.3.2 商品规格参数表 2. 商品规格组 2.1 商品规格组前端 2 ...
- 乐优商城学习笔记五-商品规格管理
0.学习目标 了解商品规格数据结构设计思路 实现商品规格查询 了解SPU和SKU数据结构设计思路 实现商品查询 了解商品新增的页面实现 独立编写商品新增后台功能 1.商品规格数据结构 乐优商城是一个全 ...
- 电商商品规格选择逻辑
最近两天在搞商品详情页规格选择逻辑,要被折腾死,在这里写下逻辑,第一次写有不对的地方还请指出-.- 例:商品A 规格:(数据库存储一般是json+数组的形式) 颜色:红 蓝 黄 尺寸:M S L 套餐 ...
- 小程序的商品规格选择
小程序radio-group实现选择多层级商品规格 效果:(当用户没有选择完所有规格,则提示用户选择其他规格.当用户选择完所有规格,则更新当前规格信息) 实现思路: 最好是把弹窗内的内容封装成一个组件 ...
- 自定义LinearLayout并搭配流式布局,实现商城app商品规格选择View
一:效果图镇楼 二:整个View的制作过程 继承自LinearLayout 设置为垂直走向 动态摆放每一个属性的title 绘制每一个规格属性,这里使用的是Flowlayout里面添加RadioBut ...
最新文章
- linux make 命令行 定义宏(-D)传递给C源代码 简介
- NYOJ 1186 心理阴影(两个圆环的相交面积)
- PC如何接管手机的双因子身份验证 靠的是英特尔的CPU
- 【php】用filter_var实现的简单参数验证
- extjs 页面打开时表格自动加载后台传来的json数据
- python 取array并集_Python内置数据结构原理与性能简易分析
- python 执行完成后,cmd窗口自动关闭
- linux mysql数据库日志关闭,linux 怎样恢復mysql数据库日志
- Spring(三)之自动装配、表达式
- Java -- 新IO -- 目录
- 计算机论文撰写周记,电子与计算机毕业设计周记
- html播放m3u8格式转换,使用HTML视频标签播放m3u8文件
- 淘宝/天猫API:upload_img-上传图片到淘宝
- 2022年亚太杯数学建模竞赛ABC题
- Markdown格式表情包大全最新整理分享
- 大数据就业前景怎么样?新人职业发展路径是什么?
- flink运行job任务时报错 Could not retrieve the execution result
- Python与图像处理7
- diary on TJYZ
- opencv---图像基本函数使用