ios(WKWebView)内嵌h5开发实战

第一次接触这个东西，关于移动端以前多是微信公众号和网页，东西都大同小异，只是通信机制略有不同,

IOS用的WKWebView，我主要负责h5页面开发（vue+ts）
以下是开发h5需要做的事，开始了哦

通信

• ios => h5（接收ios传的值）

其中的getParams等是与ios约定好的事件

private paramsInfo = {};
private a = "";

created () {
 // 获取基本参数
  window.getParams = this.getParams
  // 获取通讯录
  //window.A = this.A
}
/*  方法  IOS => h5 ----------start--------- */
private getParams (params: string) {
	/*注意此时打印是不行的，ios到h5传值会有延迟，可以放在页面上查看*/
  console.log('params: ', params)
  //因为ios传h5仅支持字符串传值，如果源数据是对象需要解析一下
  this.paramsInfo = JSON.parse(params)
}
private A(val: string) {
   this.a = val;
   // 对于方法的return的值，ios那边也是能捕获到的
   return "给你一个值"
}
//为了确保你用的时候它传过来了，利用监听，
//另外，如果传的方法(如getparams)有多个如a，b,只需要监听ios传最后传过来的值
@Watch('a')
aChange () {
	//我假定的是ios后写的A方法
	console.log(this.a, this.paramsInfo)
}

• h5 => ios（给ios传值）
  我封装了一个方法： sendMsg

// h5 => IOS 事件函数
//传值给ios的值不传就给null,不能为空！！！
export function sendMsg(handleEvent: string, msg: any | null = null) {
  window.webkit.messageHandlers[handleEvent].postMessage(msg);
}

至此，与ios通信就差不多了，注意事项基本在注释里面说了。

---

工具

接收的值放在页面查看还是不现实的，你需要打印出来，就像浏览器那样（其实ios展示你的页面就是基于safari）
vConsole需要大家了解一下,没错是腾讯的工具
安装

yarn add vconsole

引用：

//main.ts
import VConsole from 'vconsole'
let vConsole = new VConsole()

点开右下方vConsole

里面更多功能自己去发现吧

---

其他

1.时间处理
应该是safari浏览器不支持时间格式分割符为 ‘-’，处理一下就行

const sDate = new Date(start.replace(/-/g, '/'))

2.换行文字处理
可能苹果的文本域能填写换行文字，如评论，会导致JSONParse解析失败（换行符导致）

//这种出现解析失败就是ios传过来的值的某个字段有换行符，JSON.parse会导致失败。
this.baseOrderInfo = JSON.parse(order.replace(/(\n)+/g, '\\\\n').replace(/\r/g, '\\\\r'))
this.baseOrderInfo.comment = this.baseOrderInfo.comment && this.baseOrderInfo.comment.replace(/\\n/g, '<br/>')

-什么？展示的时候你也想换行展示？不会吧，不会吧？
-会
-那你这样做吧

<!-- 如果字段有换行符 \n -->
<p v-html="fetchOrderInfo.comment"></p>

---

其实代码中的注释以及说的差不多了，在复习一遍吧
注意事项(总结)：
——ios传值延迟，注意使用监听，拿到了再去操作
——给ios传值不传给null！！
——时间转换，将分隔符替换一下
——项目上线后请求接口始终返回status = 0,参见页面上线请求接口返回satus为0
——还有ios传值键值序列化解析失败问题