我永远怀念一个人，在我心中是神，是人民大救星，是心中的红太阳，是伟人中的伟人，是民族的脊梁。


![image.png](https://cdn.tyrantg.com/van/static/img/d7f1731630d594f80c1254b9a6eca8bf.image.png)

![image.png](https://cdn.tyrantg.com/van/static/img/ba81ade1b8811796b9ab8c486cf35932.image.png)

怀念人民大救星，心中的红太阳，民族的脊梁，伟大领袖

![image.png](https://cdn.tyrantg.com/van/static/img/b64a04886fc2550ec1899d10c452c4f2.image.png)

![image.png](https://cdn.tyrantg.com/van/static/img/eb788449b31fe399b10d82cd6eb3d0c3.image.png)

打响舆论战反击第一枪！

```text
https://pasteme.tyrantg.com/xxxxxx/nhbbr308nvqv7r5o@UePozL

小程序：Hsex.Tv
```

Hsex.Tv海阔规则

典中典之我也是十四亿分之一



![image.png](https://cdn.tyrantg.com/van/static/img/c673947dc433a8ac83ea8fd883180c44.image.png)

用魔法打败魔法

## 制作目标
在决定制作一个小程序时，首先需要做的便是确定小程序的功能和大致的展示形式



比如纯影视站，可以使用最简单的一二级css定位写法，复杂点的可能需要用到动态分类，再根据个人喜好和站点特点来美化二级页面

![image.png](https://cdn.tyrantg.com/van/static/img/b6cb334958b321b368ce74e3dd668a5f.image.png?medium)

又如[机核GCORES](https://www.tyrantg.com/post/8)，整个网站可以解构为咨询、视频、电台、文章、播单、专题、游戏、作者等多个可以制作的栏目，在加上我个人比较喜欢的本地关注和轮播图，这种情况下首页规则就不能简单做成moive_* 这种列表的展示形式

![image.png](https://cdn.tyrantg.com/van/static/img/a360da66c5ab97ae899694105c786b05.image.png?medium)

再如[哔咔漫画](https://www.tyrantg.com/post/9)，以仿制APP为目标，尽量实现APP全部功能的纯接口项目，就耐心地一点点复刻APP功能和页面

![image.png](https://cdn.tyrantg.com/van/static/img/0b77f08ddb07e7be5b3b77994e458be8.image.png?medium)

## 数据来源
在定好了制作目标后，就可以根据网站或者APP来研究数据来源和获取的方法

大部分网站都是使用模板引擎，数据可以直接在html源码里获取到

部分网站使用了next、nuxt等服务端渲染技术，这些网站html的body可能就只有`<div id="root"></div>`这样一句。此时就需要观察网站的script中是否有数据来源，比如明显的`window.__NUXT__`这种

最后还有一部分网站是纯前后端分离项目，数据来源是服务端接口，此时就需要研究接口请求的参数、headers等内容，判断接口传参有没有签名，好不好逆向，headers需不需要传`Referer`、`Origin`、`Host`、`Cookie`、`User-Agent`、`Content-Type`、`Authorization`以及接口自己定义的其他headers等

APP项目基本都是接口获取数据，需要找别人抓包后写的接口文档，或者自己抓包来完成

## 制作思路
制作小程序无非几点：组件绘制、组件交互、页面展示、分页
### 组件绘制
首先通过分析页面，利用`pdfa`和`pdfh`等海阔封装的html解析函数，将视频列表解构成对象数组

```json
[
    {
        title: '',
        desc: '',
        url: '',
        pic_url: '',
        col_type: '',
    },
    {
        title: '',
        desc: '',
        url: '',
        pic_url: '',
        col_type: '',
    },
    {
        title: '',
        desc: '',
        url: '',
        pic_url: '',
        col_type: '',
    },
]
```

如果是接口，就直接循环接口里的列表来构建这样的数组，最后`setResult`

### 组件交互
如果是一级跳二级可以通过二级解析直接完成，它相当于获取一级当前组件的url作为MY_URL，再使用二级规则对该url进行解析，完成二级页面的构建

如果需要一级直接进入播放页、漫画模式，或者二级跳三级，或者一级有多个不同二级页面，则需要使用$工具

[海阔视界$工具文档](https://www.yuque.com/u537126/kb/oq16z4#kvemq)

最常用的两个方法
一个是`$(url).rule()`用于跳转下级页面
另一个是`$(url).lazyRule()`用于直接返回播放链接等

### 页面展示
除了默认的二级页面，海阔内置了几种不同样式的二级页面样式
只需要在跳转的url后面添加下面几个标识即可
- 全屏模式：`#fullTheme#`
- 阅读模式：`#readTheme#`
- 游戏模式：`#gameTheme#`
- 沉浸模式：`#immersiveTheme#`

### 分页
分页很简单，在组件的url中加入`fypage`，下级页面就有分页功能了


## 一些细节
首先最好有一定的javascript基础，这对理解文档和阅读别的小程序代码能起很大作用

### 常量
`MY_URL`、`MY_PAGE`、`MY_RULE`、`PC_UA`、`MOBILE_UA`
具体阅读文档

### 常用函数
`getResCode`、`fetch`、`request`、`pdfa`、`pdfh`、`refreshPage`、`setResult`、`getParam`、`getItem`系列、`getVar`系列、`writeFile`
具体阅读文档

### 文档阅读
建议先看“常用规则”和“二级列表”，找几个影视站做一二级
再看“组件样式”，写个规则把所有组件都排列出来，熟悉一下各个组件的使用、写法和展示效果
再阅读别人写的小程序，结合“JS指南”来理解代码每一步骤的意义
尽量找**没有用模板的小程序**来看，依赖越少越好