Пишу небольшие программки типа Cai Xukun - 2. 🐔 Ты такая красивая

Апплет WeChat обратный
Пишу небольшие программки типа Cai Xukun - 2. 🐔 Ты такая красивая

введение

Всем привет, я персональный практикующий Летук Сюй Кун, практикую два с половиной года, люблю петь, танцевать, рэп, баскетбол и музыку!

Ага! Не будь таким язвительным Серьезно, я пишу техническое руководство!
(Это 😈 кто попросил меня написать скульптуру из песка в личные сообщения?)

Люди полагаются на одежду, лошади полагаются на седла, собаки бегают с бубенчиками., давайте сначала изучим разработку интерфейса апплета, в первую очередь 🌹🍐🌹🔥
Да, я выйду на процесс взаимодействия, оптимизирую производительность и так далее. Этот раздел относительно прост, процесс обучения
Таким образом, читатели учатся по мере необходимости в соответствии со своим уровнем:

  • 📚выучить урок: Базовый синтаксис внешнего интерфейса трех мушкетеров (HTML, CSS и JavaScript) за несколько минут.
  • 🆚сравнивать: плавный переход от HTML и CSS к WXML и WXSS программ WeChat Mini.
  • 🐱взглянуть: какие компоненты предоставляются мини-программами WeChat.
  • 🔥заниматься: Есть два способа управлять скрытым отображением компонентов: блокировать wx:if VS скрытый атрибут.
  • 🚀прохладно: Повторяющийся шаблон шаблона/компонента извлечения кода, где использовать, где направлять.
  • 🌝кожа к коже: Декомпилируйте чужие маленькие программы, научитесь (чао) научитесь (кси) складывать компоненты.

Кажется, что контента много, но на самом деле он очень простой. Предполагается, что вы сможете прочитать эту статью за десять минут~

🎵Музыка!

0x1, 🐔 ты такая красивая Бэйбэй Е (базовый сбой интерфейса грамматики)

Как упоминалось в предыдущем разделе, геймплей нативного апплета:

Пишите страницы в wxml, стили в wxss, логику в js и изменения конфигурации в json.

Может быть, какой-нибудь Сяобай действительно вообще не трогал переднюю часть, как«Действительно, изучите разработку апплета WeChat с нуля»Руководство:

Просто упомяните об этом мимоходом, также несколько минут ~

1. Интерфейс «Три мушкетера» (HTML, CSS, JS)

①HTML(Hyper Text Markup Language)

Язык гипертекстовой разметки, нет никакого процесса компиляции, это просто язык разметки, а не язык программирования, который нагромождается на веб-страницы через различные теги.

Пример простого кода HTML-страницы выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>一个标题</title>
</head>
<body>
    <p>内容</p>
</body>
</html>

с последующим"два существительных":

"теги/элементы":ключевые слова в угловых скобках, такой как приведенный выше

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

  • общая этикеткаприходить парами, такие как приведенный выше

    content

    , есть исключения, такие как новая строка

    Предыдущий ярлык называется "начать/открыть" тег, следующие теги называются "конец/закрытие"Этикетка.
  • Поддержка этикетоквложенный,ноне могу пересечь, например

    , является правильным,
    Но

    неверно.

"Атрибуты":Добавление вспомогательной информации к этикеткам, свойство начинается спара ключ-значениепоявляется в виде, например, добавления ссылки перехода к тегу a:

<a href="http://coder-pig.github.io">疯狂暗示~</a>

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

  • Вы можете установить несколько свойств для тега, используйтепространстворазделенный;
  • Несколько общих свойств:class(установить имя класса),id(установить уникальный идентификатор элемента),style(установить стиль элемента)

Чтобы узнать больше о тегах и атрибутах, перейдите по ссылке:Woohoo. Мой 3school.com. can/tags/index. …

②CSS(каскадные таблицы стилей)

Каскадные таблицы стилей, стиль является выражением метки, например: установите синий стиль шрифта для текстовой метки.

<font color="blue">文字</font>

а такжекаскадСредства: использование селекторов CSS для элементов HTML сложена много стиля! На самом деле использование этикетоксвойство стиля
можно добавить стили, но все жеПричина внедрения CSS:Решение проблемы разделения содержания и представления. Измените документ CSS
Измените макет и внешний вид всех элементов на HTML-странице, не переходя на HTML-страницу, чтобы найти элементы и изменить их один за другим.

Четыре способа введения стилей CSS:

<!-- ① 内联样式：直接通过style属性为某个元素指定CSS样式 -->
<p style="color: #000000;">xxx</p>

<!-- ② 内嵌样式：把CSS样式写到HTML文档中，使用<style>标签包含 -->
<style type="text/css">
    h1 {background-color:#000000;}
</style>

<!-- ③ <link>标签引入外部样式表，<head>标签中添加 -->
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<!-- ④ @import 指令引入外部样式表 -->
<style>
    @import url("style.css");
</style>

<!-- 一个HTML可以同时使用这四种方式，优先级顺序：内联 > 内嵌 > import > link -->

Селекторы CSS

Чтобы стилизовать метку, вы должны сначала найти узел, верно? Селекторы CSS используются дляНабор правил позиционирования тегов.

Три типа селекторов:

  • Селектор тегов: в документациивсе определенные тегиИспользуйте тот же стиль CSS.
  • селектор идентификатора: элементы начинаются сидентификатор атрибутачтобы установить селектор идентификатора, селектор начинается с "#" определять.
  • селектор класса: элементы начинаются сатрибут классачтобы установить селекторы классов, которые можно использовать в нескольких элементах, начиная с "." отображается.

создать новыйtest.html, попробуйте использовать селекторы CSS:

<!DOCTYPE html>
<html>
<head>
  <title>CSS示例</title>
  <style type="text/css">
  <!-- 标签选择器 >
  p {background-color:red;}
  <!-- id选择器 >
  #id-choose {background-color:green;}
  <!-- class选择器 >
  .class-choose {background-color:blue;}
</style>
</head>
<body>
  <p>文字1</p>
  <p id="id-choose">文字2</p>
  <p class="class-choose">文字3</p>
</body>
</html>

Откройте браузер, чтобы увидеть эффект:

Кроме того, есть некоторые комбинированные геймплеи, такие как производные селекторы, про селекторы CSS и позиционирование, которые будут подробно рассмотрены позже, не паникуйте.
Дополнительные стили CSS и подробное использование селекторов CSS можно переместить в:Уууу. Я могу только 3school.com./CSS/index. Аааа…

③JS(JavaScript)

Node.js, известный как самый популярный язык сценариев (мой большой py выражает неудовлетворенность), в дополнение к внешнему интерфейсу и динамическим эффектам также может писать на стороне сервера:

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

По-прежнему просто пройти базовую грамматику JavaScript~

"1. Переменная":пройти черезключевое слово varЧтобы объявить, начните с буквы с учетом регистра.
«2. Заметки»: разделен наоднострочный комментарий(//注释内容) а такжемногострочный комментарий(/*注释内容*/).
«3. Тип данных»Есть две категории:

базовый тип данных:

  • undefined(не определено): значение по умолчанию для неинициализированной переменной.
  • null(null): нулевое значение, которое можно понимать как заполнитель, который можно использовать для инициализации переменных или возврата значений функций.
  • string(Строка): все символы 16-битные, Unicode кодируются и представлены односпальными / двойными кавычками.
  • boolean(Boolean): Используется для логического суждения, только два значения true и false.
  • number(значение): Внутренне представлено как 64-битное число с плавающей запятой, значения 1 и 1.0 в js одинаковы.

ссылочный тип данных:

  • множество:var num = [1,2,3];Доступ по индексу, индекс начинается с 0, поддерживает разные типы элементов!
  • объект:фигурные скобки, свойства объекта передаются черезимя: даОпределяется в виде нескольких атрибутов, разделенных запятыми.
    var person = {id: 1, name: "pull boy" };, вы можете пройти.или[]Доступ к свойствам, таким как:
    person.idа такжеperson["id"]Все возможно.
  • функция:пройти черезfunctionКлючевые слова для определения, используйте фигурные скобки для переноса блоков кода.

"4, операторы"

  • арифметические операторы(7 видов):`+`(сложение)`-`(вычитание)`*`(умножение)`/`(деление)`%`(остаток)`++`(самовозрастание)`--`(самоубывание)
  • оператор присваивания(6 типов): добавить после арифметического оператора`=` (знак равенства):`=`, `+=`, `-=`, `*=`, `/=`, `%=`
  • Логические операторы(3 типа):`&&`(и)`||`(или)`!`(не), который возвращает логическое значение.
  • оператор сравнения(8 видов):`==` (равно), `===` (абсолютно равно, и значение, и тип равны), `!=` (не равно),
    `!==` (значение или тип не равны), `>` (больше чем), `=` (больше или равно), `.
  • условный оператор: Упрощенный оператор if, например:var s = возраст > 18? (выход взрослый): (выход несовершеннолетний).
  • побитовые операторы(7 видов):`&`(побитовое И)`|`(побитовое ИЛИ) `^`(побитовое исключающее ИЛИ)`~`(побитовое отрицание) `
    `>>` (знаковый сдвиг вправо) `>>>` (беззнаковый сдвиг вправо)
  • оператор типа(2 вида):typeof(тип возвращаемой переменной),instanceof(судя о том, относится ли объект к определенному типу).

«5. Условная конструкция»: Условная структура в JS делится наifа такжеswitchСтруктура, пример кода выглядит следующим образом:

var socre = 70;

<!-- 普通if-else -->
if(score > 60){
  console.log("合格");
}else {
  console.log("不合格");
};

<!-- if-else if -->
if(score < 60){
  console.log("不及格");
}else if(score <= 70){
  console.log("及格");
}else if(score <= 80) {
  console.log("中");
}else if(score <= 90) {
  console.log("良");
}else {
  console.log("优");
};

<!-- switch -->
switch(true){
    case score < 60: console.log("不及格"); break;
  case score < 70: console.log("及格"); break;
  case score < 80: console.log("中"); break;
  case score < 90: console.log("良"); break;
  default: console.log("优"); break;
};

«6. Круговая структура»

  • для цикла: Выполняет блок кода несколько раз в цикле.
  • for-in: свойства объекта перемещения.
  • while: перебирает блок кода, когда заданное условие истинно,do-whileЭто один раз казнить, а потом судить.

Кроме того, есть дваоператор разрыва цикла:break(вне цикла) иcontinue(Пропустить текущий цикл и войти в следующий цикл).
Давайте поговорим об основах грамматики JS здесь.Там слишком много контента, и я не могу закончить его в ближайшее время.Если вы хотите изучать его систематически, вы можете перейти к:
www.w3school.com.cn/b.asp, так или иначе, я писал апплет больше двух недель и особо не читал документ.
Может это потому, что я еще не играл с апплетом, я думаю, что мне нужно открыть другой раздел, чтобы написать JavaScript позже.

2. WXML и WXSS в программах WeChat Mini

HTML/CSS и WXML/WXSS апплета WeChat можно описать как «очень похожий», у чиновника есть сравнительная статья:
"Небольшая композиция программного кода», вот краткое изложение основных моментов.

①WXML VS HTML

  • разные этикетки: дерево имеетdiv, p, span,слишкомview, button, textОжидание общего контроля.
  • Невозможно манипулировать деревом DOM: свойствами и поведением DOM нельзя управлять через DOM API, как веб-страницей, например
    Доступ к элементам через getElementById() невозможен. Апплет использует режим MVVM, а данные являются двусторонними.
    Отношения состояния и структуры интерфейса описываются с помощью синтаксиса шаблона.
  • мероприятие: внутреннее поведение компонента будет восприниматься разработчиками в виде событий.

②CSS VS WXSS

  • Добавить единицу измерения:rpx, адаптироваться к ширине экрана.
  • Обеспечьте глобальные и локальные стили: app.wxss действует глобально, имя страницы.wxss действует на отдельной странице.
  • Поддерживаются только некоторые селекторы CSS.

P.S.: На самом деле разница не очень большая.Перейти с HTML и CSS на WXML и WXSS легко.Если есть вопросы,смотрите далее
Документация подойдет.

0x2 🐔 Ты слишком прекрасна, Бэйбэй, о (Краткий обзор компонентов апплета WeChat)

1. Список автономных компонентов

Давайте посмотрим на компоненты, предоставляемые апплетом WeChat, Когда вы хотите его использовать, полезно знать, какой из них проверить.
Эта серия позволяет объяснить элементы управления, официальная документация для каждого компонента должна подробно объяснить,
Также есть ошибки и советы по каждому компоненту, ссылки на документацию:
Developers.WeChat.QQ.com/mini программа…

2. заблокировать wx:if против скрытого

В повседневной разработке очень часто требуется контролировать отображение или скрытие компонентов в зависимости от различных ситуаций.
В апплете WeChat вы можете пройти<block wx:if>илиСкрытое имуществоДля управления используйте примеры кода, такие как:

<!-- index.js -->
//添加一个变量控制
Page({
  data: {
    isLogin: false  //是否登录
  },
})

<!-- index.wxml -->
//使用<block wx:if>
<view class="container">
    <block wx:if="{{isLogin}}">
        <view>已登录</view>
    </block>
    <block wx:else>
        <view>未登录</view>
    </block>
</view>

//使用hidden属性控制
<view hidden="{{isLogin}}">未登录</view>
<view hidden="{{!isLogin}}">已登录</view>

Оба метода могут достичь желаемого эффекта, а затем поговорим о разнице между ними:

  • wx:if:ленивый, если начальное условие рендеринга ложно, ничего не делать, пока условие не станет истинным в первый раз
    Запустите частичный рендеринг с более высокой стоимостью переключения, подходящий для сцен, где условия выполнения меняются реже.
  • hidden: компонентвсегда будет отображатьсякраситель,Просто управляйте показом и скрытием, имеет более высокую начальную стоимость рендеринга,
    Он подходит для сцен с частым переключением.

Кроме того, одно замечание:

блок не является компонентом! ! !это просто элемент оболочки,ничего не делает на странице оказывать, принимает только атрибуты управления, такие как wx:if, wx:for и т. д. Например, вы хотите отобразить эту связку, когда условие истинно
Компоненты, когда они не отображаются, используют эту кучу компонентов, вы можете обернуть их в блок. Если нужен только один компонент
Судя по всему, оборачивать слой блока не нужно, например, приведенный выше код может полностью удалить блок:

<view wx:if="{{isLogin}}">已登录</view>
<view wx:else>未登录</view>

3. Шаблон шаблона и компонент компонента

Слишком много страниц написано, и естественно есть какие-то повторяющиеся коды.Ведь художники тоже хотят полениться, а там одни и те же
или что-то вроде этого нормально. В отличие от художника, просто скопируйте и вставьте слой напрямую, мы
Помимо копирования кода страницы, вам также может понадобиться скопировать стили, логику взаимодействия и т. д. каждый раз
Копируй и вставляй их все вручную, бери много денег, как разработчик, который любит турейт(лан), однозначно
Найдите способ извлечь соответствующий код, просто направляйте его при использовании. И в апплете
Два режима мультиплексирования предусмотрены в:

  • template:шаблон, В основном используетсяэкспонат, функция должна быть написана отдельно на вызывающей странице.
  • component:компоненты, может иметь собственную бизнес-логику и может рассматриваться как отдельная страница для сценариев с множеством взаимодействий с бизнес-логикой.

Затем мы пишем два простейших кода, чтобы почувствовать разницу между ними.

шаблон шаблона

①Создание файлов шаблонов и ссылки на них:

новыйtemplatesПапка => Создать новыйtext.wxmlфайл => использование раздела шаблона<template>Обтекание тегов => Можно написать несколько шаблонов черезатрибут имениразличать:

<!-- test.wxml -->
<template name="text">
        <text>模板文字</text>
</template>

②Импорт шаблона:

index.wxmlпрошедшийтег импортаВвести файл шаблона => через тег шаблонаявляется собственностьюОпределите, какой шаблон был импортирован:

<!-- index.wxml -->
<import src="../../templates/text.wxml" />
<view class="container">
        <template is="text"/>
</view>

Результаты приведены ниже:

  • ③Импорт стиля шаблона:

пройти через@importСпособ импорта файла стиля:

<!-- test.wxml -->
<template name="text">
        <text class="blue-text">模板文字</text>
</template>

<!-- index.wxss -->
.blue-text { color: blue; }

<!-- index.wxss -->
@import "../../templates/text.wxss" ;

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

④Передача данных и обработка событий

Иногда вам может потребоваться передать данные в шаблон или обработать некоторые события, например нажатие кнопки для отображения всплывающего уведомления.
Измените текст шаблона, который будет передаваться js, добавьте кнопку и событие клика.

<!-- test.wxml -->
<template name="text">
        <text class="blue-text">{{show}}</text>
</template>
<template name="button">
        <button bindtap="onClick">按钮</button>
</template>

<!-- index.js -->
Page({
  data: {
    content: {
      show: "哈哈"
    }
  },
  onClick: function () {
    wx.showToast({
      title: '点击了',
    })
  }
})

<!-- index.wxml -->
<import src="../../templates/text.wxml" />
<view class="container">
        <template is="text" data="{{...content}}"/>
        <template is="button"/>
</view>

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

компонент

новыйcompomentsпапку, создайте новую тестовую папку, поместите test.wxml и test.wxss
Закидываем и корректируем код test.wxml:

<view>
  <text class="blue-text">{{content.show}}</text>
  <button bindtap="onClick">按钮</button>
</view>

Затем создайте новыйtest.jsjs файла, пользовательского компонента и js страницы несколько отличаются:

Component({
  //组件的属性列表
  properties: {
    name: {
      type: String,
      value: '123'
    }
  },

  //组件的初始数据
  data: {
    content: {
      show: "哈哈"
    }
  },

  // 组件的方法列表
  methods: {
    onClick: function () {
      wx.showToast({
        title: '点击了',
      })
    }
  }
})

Затем вам нужно добавитьtest.jsonдокумент,утверждениеЭтокомпоненты:

{
    "component": true,
    "usingComponents": {}
}

Чтобы сослаться на элемент управления, вам также необходимо настроить его в json, открыть index.json и добавить:

"usingComponents": {
    "test": "../../components/test/test"
}

Затем index.html, чтобы сослаться на этот элемент управления, вы можете передать атрибуты, определенные в js, например, имя здесь:

<!-- index.wxml -->
<view class="container">
    <test name="Test"></test>
</view>

Результаты приведены ниже:

Там еще много контента о пользовательских компонентах, которые будут описаны позже вместе с примерами.Теперь вы можете перейти к:
Developers.WeChat.QQ.com/mini программа…

0x3 🐔 Ты такая красивая, Бэйбэй (обратный апплет WeChat)

Лу Синь Сяньсен однажды сказал:

Заимствование (чао) изучение (кси) чужих программ можно назвать повседневной жизнью разработчика:

Посмотрите, как устроены чужие страницы, как настроены стили, как сделана анимация и как прописана логика.
Но для коммерческих проектов другие люди не могут напрямую предоставить вам исходный код и позволить вам заимствовать (chao) для (xi).
Затем вы можете получить исходный код только с помощью параллельных средств, а именно:декомпилировать.

❗️❗️❗️Предупреждение ФБР❗️❗️❗️

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

1. Получите исходный пакет апплета WeChat wxapkg.

Исходный код апплета WeChat размещается на сервере WeChat. Когда апплет открывается в первый раз,
Исходный файл апплета загружается в локальный, а затем распаковывается, компилируется и выполняется. как получить этот источник
А файлы? Захватить пакет, чтобы получить URL-адрес исходного файла, а затем загрузить его?naive, хватайте ссылку WeChat и уходите
Расшифровка, не будем говорить о том, решаема ли она, вы ее ловите каждый раз, когда декомпилируете апплет WeChat?
Теперь, когда они все загружены на телефон, просто найдите файл и скопируйте его на компьютер.

Вам нужна рутованная андроидная курица или яблочная курица с джейлбрейком.

(У меня есть только курица Android, поэтому я беру Android в качестве примера) Причина, по которой мне нужно разрешение root, заключается в том, что исходный файл апплета находится в:

/data/data/com.tencent.mm/MicroMsg/{UserId}/appbrand/pkg

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

Но смотрите на это таким образом, трудно понять, что является нашей целью. Вы можете открыть WeChat сначала, удалите целевой апплет,
Затем найдите апплет, откройте его, вернитесь в этот каталог и отсортируйте его в порядке убывания по дате.
Исходные файлы для нашего целевого апплета отсутствуют! Вот пример апплета HEYTEA GO:

На картинке показан исходный файл апплета HEYTEA GO. Далее у вас есть два дополнительных способа получить его на компьютер:

  • 1. Сжать файл;
  • 2. Скопируйте файл в другой каталог, например Download;

Затем отправьте его на компьютер через WeChat или QQ.Если вы отправите его прямо сюда, он сообщит, что файл не найден!

2, инструмент декомпиляции wxappUnpacker

Репозиторий на гитхабе:GitHub.com/qwerty47212…

Клонировать проект на локалку через Git, а потом как установить под Baidu, если у вас не установлен Nodejs, установить.
Затем заходим в этот проект, открываем терминал и устанавливаем волну зависимостей:

npm install esprima -g
npm install css-tree -g
npm install cssbeautify -g
npm install vm2 -g
npm install uglify-es -g
npm install js-beautify -g
npm install escodegen -g

ps: кажется, что есть что-то большее.В любом случае, когда он работает, он сообщает, что xxx отсутствует.npm install xxxВот и все.

3. Запустите декомпиляцию

Откройте терминал, перейдите в каталог wxappUnpacker и введите:

node wuWxapkg.js xxx.wxapkg

После запуска все должно быть зеленым, вот так, а потом все получится:

Но он сообщил об этой ошибке:

Искал официальные вопросы, 2333, а ответа нет, увы неудобно, что еще делать, сам найду
проблема, меняй. Сообщение об ошибке заключается в том, что путь не может быть найден:

E:\Test\_-750230640_176\plugin-private:\wxbab743cd6debd38d\plugin.json

Затем посмотрите на соответствующий путь:

E:\Test\_-750230640_176\__plugin__\wxbab743cd6debd38d\plugin.json

Дай мне корыто,plugin-private:а также__plugin__, а то какая винда не поддерживается:как имя папки,

Думаю, это из-за окон, проект автоматическиplugin-private:заменяется__plugin__, но в адресации каталога
Когда соответствующее преобразование не сделано, эм... Попробуем заменить путь при сохранении файла. Сначала найдите строку с ошибкой:

Добавьте перед строкой 70:

name = name.replace("plugin-private:","__plugin__");

Затем выполните его снова:

Блин, я сообщил о новой ошибке.Я также проверил официальные вопросы и не нашел ответа.Видимо потому, что
Проблема с субподрядом, а то автор вроде бы судится с ТХ, да и код особо не обновлялся. Нашла в комментариях
Библиотеки, улучшенные опоздавшими:GitHub.com/Lone Gunner7/Беспроводная точка доступа…
(Рекомендуется разветвить, чтобы избежать согласования библиотеки в будущем.) Также клонируйте, npm установите зависимую библиотеку, а затем введите:

./bingo.sh xxx.wxapkg

После запуска сообщается та же ошибка пути:

Добавьте приведенный выше код, чтобы заменить путь, сохраните и запустите:

Святое дерьмо, здорово, все в порядке, успешно декомпилировано.

4. Импорт инструментов разработчика Wechat

Откройте инструмент разработчика WeChat, импортируйте проект и используйте случайный appid.

Смотрите, ниже сообщается об ошибке, используется пользовательский компонент, перейдите по пути, создайте новый пустой index.wxml и сообщите об ошибке

Также создайте пустой файл index.js, и тогда вы увидите, что апплет HEYTEA компилируется:

Затем появляется диалоговое окно, требующее разрешения на местоположение:

Откройте app.json, чтобы добавить конфигурацию, связанную с разрешениями на позиционирование:

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

Затем после анимации загрузки появляется следующее диалоговое окно:

Затем установите его, чтобы не проверять легальные доменные имена:

Он по-прежнему выскакивает диалоговое окно для повторного подключения к сети и видит запрос из сети ниже, который держит 403.
Предполагается, что не хватает параметров, будет ли это то же самое, что и краулер, вы можете написать мертвые заголовки запросов или параметры, а авторизованный вход WeChat
Затем возьмите идентификатор WeChat в качестве учетных данных пользователя, затем настройте свой собственный интерфейс входа в систему, а затем верните строку токенов.
И так далее, чтобы выполнить последующий запрос, я хватаю пакет и получаю этот токен, программа должна нормально писаться, в общем.
Когда я открываю fiddler, вручную настраиваю прокси-сервер для своего телефона, а затем открываю Hi Tea Go, чтобы подготовиться к захвату пакетов,
Тем не менее, я не получаю никаких запросов? ? ?

Я попробовал браузер и другие приложения, и я могу зафиксировать данные. После некоторых поисков я увидел это правило:

  • 1. Версии системы Android ниже 7.0, независимо от версии WeChat, будут доверять сертификату, предоставленному системой.
  • 2. Версия системы Android 7.0 или выше, версия WeChat ниже 7.0, WeChat будет доверять сертификату, предоставленному системой.
  • 3. Версия системы Android 7.0 или выше, WeChat версии 7.0 или выше, WeChat доверяет только списку сертификатов, настроенному самостоятельно.

Хитрый, действительно хитрый, молча положил Xiaomi mix2s с родной 9.0-подобной кистью в руке, порылся в коробке и нашел ее
Оригинальный Moto X1085, давно собранный Национальным банком, глядя на эту тонкую заднюю крышку из бамбука, логотип Moto, который с годами стерся,
Загрузочные фотографии 33 матерей я сделал сам, прошлое живо в моей памяти, как и вчера (2333, я просто хочу это показать)

Хорошо, с ручным прокси-сервером установите сертификат, а затем запишите пакет, чтобы увидеть, и, конечно же, данные будут захвачены:

Затем откройте скомпилированный исходный код с помощью VS Code и выполните глобальный поиск.authorizations, найденный в api.js:

Добавьте заголовок запроса, который вы видите в захвате пакета в заголовке:

referer: "https://servicewechat.com/wxxxxx42xx4f24xxxx/176/page-frame.html"

Но после компиляции выдает ошибку:

Кажется, это междоменная проблема, и ее нельзя установить напрямую, em..., затем используйте PostMan для прямой имитации запроса:

Я проиграл, этот код можно использовать только один раз, забудьте, мне лень бросать, я получил интерфейс,
Могу ли я изменить цену и купить чашку «Жижи Персик» за 1 цент?
Просто хочу увидеть макет страницы и стили! Вы можете спросить:

Я даже не могу войти в систему, я застреваю на этой странице, как я могу перейти на другие страницы, чтобы увидеть эффект?

Это просто, нажмите, чтобы добавить режим компиляции:

Например, если я хочу просмотреть страницу «О HeyTea GO», выполните глобальный поиск «О HeyTea GO» и найдитеaboutAggregate.wxml,
Путь конфигурации стартовой страницы: pages/aboutGo/aboutAggregate/aboutAggregate, этот путь может быть
Конечно, полученный в app.json, вы также можете ввести aboutAggregate, чтобы получить интеллектуальные подсказки.

Однако после компиляции содержимое страницы, отображаемое на мобильном телефоне, не загружается, откройтеaboutAggregate.wxml,
Только следующий код:

<!--pages/aboutGo/aboutAggregate/aboutAggregate.wxml-->
<text>pages/aboutGo/aboutAggregate/aboutAggregate</text>

Я потерял штаны, нет кода? ? ?

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

эм... Значит нам еще нужно достать подпакет, мобильник заходит на страницу про HEYTEA GO, после загрузки,
Файловый менеджер RE определяет местонахождение пакета wxapkg.Конечно же, есть новый пакет с суффиксом _176:

Команда декомпиляции для подпакетов немного отличается:

./bingo.sh 子包.wxapkg -s=反编译后的主包目录

Затем перекомпилируйте,aboutAggregate.wxmlДа, но страница грязная:

ОткрытьaboutAggregate.wxss, пустой, открыть декомпилированную папку подпакета,
оказатьсяaboutAggregate.wxss, скопирован в основной пакет и перекомпилирован.

Для получения подробной информации о загрузке подпакета вы можете перейти на официальный сайт для получения дополнительной информации:
Developers.WeChat.QQ.com/mini программа…

Да, страница просмотрена, у вас могут остаться вопросы:

Если я не вошел в систему, всплывающее окно всегда там, или некоторые элементы управления не могут отображаться до тех пор, пока я не войду в систему?

Это непросто, просто измените AppData и измените флаг оценки на нужное вам значение.

У вас снова могут возникнуть вопросы:

Если я не захожу, данных нет, список не отображает содержимое, я не вижу эффекта!

Если у вас нет данных, вы можете сделать это самостоятельно, перехватив пакет и скопировав данные, возвращаемые соответствующим интерфейсом, просто запишите их в JS.
Это сложно, заставьте локальный мок-сервер возвращать данные, а потом меняйте логику получения данных в js
Просто ойбк. Конечно, если вам не нравится слишком сложное, вы можете напрямую вытащить wxml, wxss и js и сделать это самостоятельно.
Есть много способов, используйте свои собственные мозги и ничего себе! Поговорим об обратном апплете WeChat, если есть упущения
снова помириться~

резюме

Этот раздел не похож на общий базовый вводный урок, я начну знакомить вас с элементами управления один за другим.
Лично я чувствую, что знаю, какие там элементы управления, и хорошо бы проверить, где они используются, когда они используются. Конечно, чем больше основных обычно используется
Чтобы понять, например, вышеблочный тег,скрытое имущество,шаблон шаблона,компонент компонента.
В большинстве случаев: вы только начинаете изучать небольшие программы, у вас может не быть эскиза проекта, которому вы могли бы следовать, если вы хотите попрактиковаться,
брать взаймы ( чао ) учиться ( xi )Написание той же страницы для небольшой программы, написанной другими, — хороший способ попрактиковаться.
Когда вы сталкиваетесь с чем-то, что вы не знаете, как реализовать, или чувствуете, что ваша реализация немного громоздка, и хотите посмотреть, как это делают другие,
В настоящее времядекомпилироватьХорошо учиться на маленьких программах других людей~

использованная литература:

Если эта статья была вам полезна, добро пожаловать
Комментируйте, лайкайте, делайте репост
Отличное качество, спасибо 😘~

Категории