Общие сведения о веб-просмотре в приложении (часть 1)

внешний интерфейс WeChat JavaScript APP

предисловие

Если вы впервые работаете с приложением для разработки страницы веб-просмотра, вы можете недостаточно знать, как отлаживать и какие проблемы могут возникнуть. Эта статья предварительно дает вам начальное понимание, основанное на вашем собственном опыте.Если вы начальник, вы можете пойти в обход.

протокол веб-просмотра

Чтобы лучше отлаживать и разрабатывать наши мобильные страницы (h5) в приложении, нам необходимо согласовать некоторые основные принципы с разработчиками приложений, чтобы гарантировать, что наши страницы могут быть хорошо отлажены, включая инструменты отладки, гибкую симуляцию при выходе в онлайн. Приложение среда, проблемы в процессе тестового взаимодействия, удобная кастомная модификация на собственный адрес h5 и т.д.

Следующие решения приведены только для ознакомления, каждое из которых имеет практическое применение.Если веб-просмотр в компании нуждается в точной отладке и последующей разработке, при необходимости необходимо рассмотреть следующие вопросы.

тема строить планы Примечание
Равномерно определенная идентичность ua Например, добавьте [xxx] в конце ua. без
общий заголовок приложения h5 Сторона приложения предоставляет унифицированный заголовок приложения, ссылается на взаимодействие Alipay и WeChat ua, предоставляет простые операции для отображения заголовка страницы, возврата и закрытия, а страницу по умолчанию можно прокручивать. После этого другие значения по умолчанию h5 находятся в этой браузерной оболочке.Для некоторых решений с фиксированной версткой на интерфейсе эту оболочку необходимо оптимизировать и совершенствовать.Если позволяет время технического преобразования интерфейса, лучше дать полный и определенное решение, которое можно легко подключить и интегрировать в веб-представление.
h5 и настраиваемый заголовок приложения В соответствии с особыми потребностями продуктов и взаимодействия предоставляются специальные страницы, такие как отдельные страницы, и специальные заголовки настраиваются для страниц логики сильного взаимодействия. Продукт должен четко объяснять особенности, а не возврат браузера. Например, если в возврате необходимо добавить окно подтверждения, его необходимо настроить.
H5 взаимодействует с функциональностью приложения Согласован формат традиционных способов взаимодействия, а также приведены некоторые фиксированные и доступные способы взаимного общения, такие как получение информации о пользователе и получение статуса сети приложения. Это двустороннее функциональное взаимодействие, некоторые методы h5 также могут задавать состояние приложения, переход на страницу, хранение данных и т. д.
h5 и чисто интерактивный метод приложения Вызовите поле загрузки соответствующего приложения, загрузка не удалась, управление альбомом, управление скан-кодом Необходимо взаимодействовать с продуктом, чтобы определить, следует ли использовать собственный элемент управления приложения или эффект h5.
Совместное использование и взаимодействие между h5 и приложением в разных сценариях Например: пользователь находится в разных приложениях: приложение доступно на странице сведений h5, и страницу сведений h5 также можно открыть в приложении. Правила должны быть согласованы
Приложение предоставляет оболочку для веб-просмотра Вы можете сканировать код через оболочку приложения, чтобы войти в сцену веб-просмотра, смоделировать взаимодействие, а также выявить и решить некоторые проблемы в приложении на этапе разработки. Вышеупомянутые решения приложений интегрированы в эту оболочку приложения.

О связи между webview и h5 в приложении

Как показывает здравый смысл, мы знаем, что в общем случае страница веб-просмотра включает в себя две ситуации: во-первых, она может быть ограничена страницей h5, которую может встроить только приложение. согласен с jsBridge. Один из них — обычная страница h5.

jsBridge более прямолинеен, то есть когда веб-страница загружается, на страницу внедряется указанный js-файл, а затем на странице будет метод, который известен и интерфейсу, и приложению, через который интерфейс- end может вызывать интерактивные элементы управления приложения или даже переходить на другие страницы приложения, вы также можете узнать состояние устройства, состояние сети, информацию о пользователе и т. д. в приложении в это время. Приложение также может узнать состояние страницы в это время через h5, а затем сделать все необходимое, чтобы вызвать желаемую операцию, когда это необходимо.

С другой стороны, веб-просмотр также можно рассматривать как обычный браузер, который может загружать любую страницу, поэтому h5 нашей встроенной страницы, не являющейся приложением, также можно открыть через веб-просмотр в приложении, а h5 вне приложения можно открыть. через веб-просмотр. Пользовательский код протокола приложения для вызова приложения.

Соответствующие точки коммуникационных технологий можно увидеть на простой диаграмме ниже.

Справочная документация jsBridge

Инструкции по взаимодействию iOS и H5 (ios)

Взаимодействие между iOS и H5 использует метод JavaScriptCore. Принцип заключается в том, что когда WebView завершает загрузку URL-ссылки, сторона iOS вручную привязывает ссылку к странице H5.JSContextобъект. С помощью этого объекта JSContext можно реализовать двустороннее взаимодействие между OC и JS.Примечание. Объект JContext находится в iOS.webViewDidFinishLoad:Если привязка завершена в обратном вызове, любое взаимодействие между JS и OC не может использоваться до тех пор, пока привязка не будет завершена.

JS вызывает интерфейс OC

Прежде чем JS начнет вызывать интерфейс OC, необходимо выполнить несколько предварительных условий:

  • Метод js window.isReady был запущен до того, как JS смог вызвать метод, предоставленный OC. Причина в том, что iOS будет вызывать метод isReady на стороне js после того, как объект JSContext будет успешно связан, поэтому JS может вызывать метод OC через JSContext только при срабатывании isReady.

  • Когда iOS связывает объект JContext, она должна согласовать поле, а затем OC зарегистрирует собственный метод для этого поля объекта окна веб-страницы. Напримерwindow.app.

  • Если сторона js хочет асинхронно получить возвращаемый результат собственного метода, метод обратного вызова необходимо определить в глобальной области видимости.

    ​

Пример кода JS:

js вызывает собственный метод OC для синхронного получения основной информации о пользователе.

// 约定好获取用户信息接口注册到window的app属性上
// getUserInfo方法是一个同步方法，可以js端可以直接获取到返回值
// 返回的对象可以是json字符串
var info = window.app.getUserInfo()

js вызывает собственный метод OC, делает снимок и загружает изображение задания, а также асинхронно получает результат загрузки.

// 假设约定好作业相关的OC接口都注册到window的homework属性上
window.homework.uploadHomeworkPicture(questionID)

// 在全局作用域内定义好回调方法，用于接收返回值
// 原生方法会在上传完作业图片的时候，间接调用该回调方法
function homeworkPictureDidUploaded(questionID, picUrl) {
  	// do something...
}

Вызов общего нативного интерфейса в JS:

/**
 跳转到课程详情
 @param productId 商品ID(string类型)
 */
app.gotoCourseDetail(productId);

/**
 关闭当前页面
 */
app.finish();

/**
 获取用户信息，已json字符串形式返回。主要字段如下：
   memberId:     用户id
   token:        用户登录唯一标识
   memberType:   用户类型
 */
app.getUserInfo();

/**
 toast提示
 @param msg 提示语(string类型)
 */
app.toast(msg);

/**
 显示对话框
 @param title 	标题(string字符串)
 @param msg 	消息(string字符串)
 @param actions 点击事件(一个json数组字符串)，每个数组元素字段如下：
	title: 		事件标题(string字符串，比如“取消”)
	callback:	事件的js回调方法(string字符串)	
 示例：
	var actions = "[{'title': '取消', 'callback': 'cancelPay'},
					{'title': '确定', 'callback': 'confirmPay'}]";
	app.confirm("温馨提示", "是否支付订单？", actions);
*/
app.confirm(title, msg, actions);

OC вызывает интерфейс JS

Примечания для OC при вызове методов JS:

  • Метод js должен быть объявлен в глобальной области видимости, иначе OC не сможет получить метод

  • если вwebViewDidFinishLoad:Если вы напрямую используете JSContext для вызова метода js, может возникнуть недопустимый запрос. Чтобы избежать таких проблем, рекомендуется использоватьsetTimeoutспособ вызвать метод js

Образец кода:

OC вызывает js в webViewDidFinishLoad:isReadyметод

// setTimeout是JS的自带方法
// 这里使用setTimeout的目的是为了将isReady方法放到js调用队列的最后
JSValue *isReadyFunc = self.jsContext[@"isReady"];
if (isReadyFunc) {
	[self.jsContext[@"setTimeout"] callWithArguments:@[isReadyFunc, @100]];
}

OC вызывает метод setUserInfo js в собственном методе, инициированном JS.

// 注意，JavaScriptCore支持NSDictionary、NSArray类型作参数传给js方法
NSDictionary *userInfo = ...;
[self.jsContext[@"setUserInfo"] callWithArguments:@[userInfo]];

Общие определения интерфейса, предоставляемые JS для собственных вызовов:

/**
 iOS原生初始化完成后调用本方法，告诉js已经准备好了
*/ 
function isReady();

/**
* return boolean 类型返回值：
  	true h5已经处理了返回，native不处理； 
	false h5没有处理返回，native直接返回上级原生页面
*/
function gobackIfNeeded();

приложение просыпается

Схема определения: com.xxx.app

UserAgent

Пользовательский агент WebView по умолчанию: «xxxx XXX/1.3.0», где xxxx — пользовательский агент системы по умолчанию. ''/'' — номер версии приложения

Загрузка встроенных страниц H5 (Android)

1. Нативно предоставьте страницу фрейма странице H5. Фреймворк предоставляет толькоInnerWebкласс (js не должен знать это).Как загрузить чистую встроенную страницу H5 локально, пожалуйста, используйтеIntentHelper.startWeb(Context context, String url)метод для загрузки встроенной страницы H5. Конкретный внутренний просто загружает этот URL. Логика после этого передается H5 для обработки.

Android изначально вызывает методы JavaScript на HTML-страницах через Java

Существует два типа методов для собственного вызова методов js:

  1. метод без возвращаемого значения
  2. метод с возвращаемым значением

Вызов метода без возвращаемого значения в js

Это очень просто, мы можем вызвать его напрямую.Конкретный пример кода выглядит следующим образом:

/**
* f1 为js中声明的函数
*/
mWebView.loadUrl("javascript:f1()");

Таким образом, вы можете вызвать метод js.

Вызов метода с возвращаемым значением в js

Немного сложнее, а именно:

/**
* sum 为js中定义的函数
*/
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            Log.e(TAG, "onReceiveValue value=" + value);
        }
    });

js вызывает нативный Java-метод Android

Объект сопоставления предоставляется локально для вызовов js, что требует внедрения, мы также используем вызываемыйappОбъект. js для вызова локальных методов. Все начинается с представления нашего нативного метода.

детали следующим образом:

<script type="text/javascript">
     function s(){
     // 注意下面的‘app’
    var result = window.app.gotoLogin();
    document.getElementById("p").innerHTML = result;
    }
</script>

Местный код выглядит следующим образом:

public calss AppJavascriptInterface {

  	@JavascriptInterface
  	public void gotoLogin() {
        if (mContext.get() == null) {
            Log.w("web", "页面已关闭");
            return;
        }
        LoginActivity.start(mContext.get());
    }
}

Соглашение о продукте

Протокол в основном предоставляется H5 изначально.Ниже приводится подробный список:

/**
* 跳转登录
*/
@JavascriptInterface
public void gotoLogin();
/**
* 跳转课程详情
*/
@JavascriptInterface
public void gotoCourseDetail();
/**
* 关闭当前页面
*/
@JavascriptInterface
public void finish();
/**
* 关闭当前页面获取当前用户信息，如果为空，说明用户未登录
* 
* 目前有如下信息(以json格式返回给H5):
*	memberId: 	用户id 
* 	token:		用户登录唯一标识
*   memberType: 用户类型
*/
@JavascriptInterface
public String getUserInfo();

/**
* 返回
* 
* 目前有如下信息(以json格式返回给H5):
*	memberId: 	用户id 
* 	token:		用户登录唯一标识
*   memberType: 用户类型
*/
public void back();

/**
* 
*/
public void toast(String msg);

public void confirm(String title, String msg, String positiveFunctionName, String negativeFunctionName);

/**
* return boolean 类型返回值: true h5已经处理了返回，native不处理； false h5没有处理返回，native返回上一个非H5页面
*/
function gobackIfNeeded();

Схема метода пробуждения приложения:

1. Определяем схему: com.xxx.app

2. Ожидается открытие других конкретных страниц

Условное обозначение ua: «xxxx XXX/1.3.0», где xxxx — системный ua по умолчанию. iOS — это не то же самое, что Android. «/» — номер версии приложения.

приложение для пробуждения h5

Вызов приложения H5 стал одной из незаменимых функций в настоящее время.В качестве одного из необходимых технологических стеков для переднего стека технологий нам нужно знать, как вызвать приложение в среде, не являющейся приложением, и правильно определить, является ли приложение установлен в системе. .

Связанные с системой

Имя приложения URL Scheme
Короткое сообщение sms://
app store itms-apps://
телефон tel://
Беспроводная сеть App-Prefs:root=WIFI
Bluetooth App-Prefs:root=Bluetooth
сотовая мобильная сеть App-Prefs:root=MOBILE_DATA_SETTINGS_ID
Персональная точка доступа App-Prefs:root=INTERNET_TETHERING
оператор App-Prefs:root=Carrier
уведомлять App-Prefs:root=NOTIFICATIONS_ID
Универсальный App-Prefs:root=General
Общие - Об этом устройстве App-Prefs:root=General&path=About
Универсальный — Клавиатура App-Prefs:root=General&path=Keyboard
Общие — Доступность App-Prefs:root=General&path=ACCESSIBILITY
Общие — язык и регион App-Prefs:root=General&path=INTERNATIONAL
универсальное восстановление App-Prefs:root=Reset
обои на стену App-Prefs:root=Wallpaper
Siri App-Prefs:root=SIRI
Конфиденциальность App-Prefs:root=Privacy
Safari App-Prefs:root=SAFARI
Музыка App-Prefs:root=MUSIC
Музыка - Эквалайзер App-Prefs:root=MUSIC&path=com.apple.Music:EQ
фото и фотоаппарат App-Prefs:root=Photos
FaceTime App-Prefs:root=FACETIME

заявление

Имя приложения URL Scheme
Вейбо weibo://
QQ mqq://
QQ группа mqqapi://card/show_pslcard?src_type=internal&version=1&card_type=group&uin={номер группы QQ}
QQ контакт mqqapi://card/show_pslcard?src_type=internal&version=1&uin={номер QQ}
Alipay alipay://
WeChat weixin://
WeChat wechat://
WeChat — сканирование weixin://dl/scan
WeChat — обратная связь weixin://dl/feedback
WeChat — Моменты weixin://dl/moments
WeChat — Настройки weixin://dl/settings
WeChat - настройки уведомлений о сообщениях weixin://dl/notifications
WeChat — настройки чата weixin://dl/chat
WeChat — общие настройки weixin://dl/general
WeChat-публичная учетная запись weixin://dl/officialaccounts
WeChat-игры weixin://dl/games
WeChat-Помощь weixin://dl/help
WeChat — личная информация weixin://dl/profile
Плагин WeChat-функции weixin://dl/features
Сями Музыка xiami://
chrome googlechrome://
Weibo International Edition. weibointernational://
Мобайк mobike://
ofo ofoapp://
Облачная заметка YouDao youdaonote://
Эверноут evernote://
сегодняшние заголовки snssdk141://
Новости сети newsapp://
Облачная музыка NetEase orpheuswidget://
QQ Музыка qqmusic://
Музыка QQ недавно играла qqmusic://today?mid=31&k1=2&k4=0
Мейтуан еда на вынос meituanwaimai://
Мейтуан imeituan://
Gmail googlegmail://
Почтовый ящик NetEase neteasemail://
Почтовый ящик QQ qqmail://
Видео Тенсент tenvideo://
ИКИИ iqiyi://
12306 cn.12306://
Юдао словарь yddict://
Дин Дин dingtalk://

Справочная статья

Категории