Eine WeChat-Miniprogrammversion der Zhihu-Beispielfreigabe-Mini-Programmentwicklung-php.cn

Dieser Artikel stellt Ihnen hauptsächlich eine WeChat-Miniprogrammversion von Zhihu von Grund auf vor. Ich hoffe, er kann Ihnen helfen, eine WeChat-Version von Zhihu zu entwickeln und daraus weitere Ideen zu gewinnen.

Anzeigeeffekt (Design und Interaktion im Schnittstellenstil stammen aus der Zhihu-App der iOS 4.8.0-Version):

Eine WeChat-Miniprogrammversion der Zhihu-Beispielfreigabe

Bitte wechseln Sie zu GitHub für dynamische Effekte Überprüfen.

1. Vorbereitung vor dem Start

Beantragen Sie ein Konto: Geben Sie gemäß dem Registrierungsdokument für das Mini-Programm die Informationen ein und reichen Sie die entsprechenden Materialien ein. Sie können Ihr eigenes Mini-Programm-Konto haben.

Entwicklungstools: WeChat-Entwicklertools

Datenquelle:

Easy Mock: Ein Datensimulationsartefakt. Sie können Rückgabedaten entsprechend dem von Ihnen benötigten Format schreiben. Und alle Daten werden zufällig generiert.

Mock.js: Easy Mock führt Mock.js ein, aber nur ein Teil der Syntax wird im Dokument bereitgestellt. Wenn Sie Ihre eigenen Mock-Daten prägnanter schreiben möchten, können Sie eine spezifischere Syntax in Mock anzeigen. js.

2. Initialisieren Sie ein Miniprogramm

Erstellen Sie einen neuen leeren Ordner

Öffnen Sie die WeChat-Entwicklertools und befolgen Sie die Schritte im Dokument „Ihr erstes Miniprogramm“. Erstellen Sie Ihr eigenes Miniprogramm.

Verzeichnisstruktur

weChatApp
|___client
|	|___assets // 存储图片
|	|___pages  	// 页面
|	|	|___index // 首页
|   |	|___index.wxml  // 页面结构文件
|	|	|___index.wxss  // 样式表文件
|	|	|___index.js    // js文件
|	|___utils // 全局公共函数
|	|___app.js   // 系统的方法处理文件
|	|___app.json // 系统全局配置文件
|	|___app.wxss // 全局的样式表
|	|___config.json // 域名等配置文件
|___project.config.json
|___README
小程序配置文件app.json内容
{
// 页面路由
   "pages": [
       "pages/index/index",              // 首页
       "pages/findMore/findMore",        // 想法页（开始起名为发现页面，后来没改/(ㄒoㄒ)/~~）
       "pages/userCenter/userCenter",    // 更多（同上，原来起名为个人中心o(╯□╰)o）
       "pages/market/market",            // 市场
       "pages/searchResult/searchResult",// 搜索结果页
       "pages/message/message",          // 消息列表页
       "pages/titleDetail/titleDetail",  // 点击标题进入的问题详情页
       "pages/contentDetail/contentDetail"// 点击内容进入的回答详情页
   ],
   // 窗口
   "window": {
       "backgroundColor": "#FFF",       // 窗口的背景色  
       "backgroundTextStyle": "dark",   // 下拉背景字体、loading 图的样式，仅支持 dark/light
       "navigationBarBackgroundColor": "#FFF",// 顶部tab背景颜色
       "navigationBarTitleText": "知小乎", //顶部显示标题
       "navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black/white
       "enablePullDownRefresh": true      // 是否开启下拉刷新
   },
   // tab导航条
   "tabBar": {
       "backgroundColor": "#fff",  // 背景颜色
"color": "#999",            // 默认文字颜色
       "selectedColor": "#1E8AE8", // 选中时文字颜色
       "borderStyle": "white",     // tabbar上边框的颜色， 仅支持 black/white
       
       /** 
       * tab列表，最少2个，最多5个
   * selectedIconPath: 选中时图片
   * iconPath: 默认图片
   * pagePath: 对应页面路由
   * text: 对应文案
   **/
       "list": [{
           "selectedIconPath": "assets/home-light.png",
           "iconPath": "assets/home.png",
           "pagePath": "pages/index/index",
           "text": "首页"
       }, {
           "selectedIconPath": "assets/find-light.png",
           "iconPath": "assets/find.png",
           "pagePath": "pages/findMore/findMore",
           "text": "想法"
       },
       {
         "selectedIconPath": "assets/market-light.png",
         "iconPath": "assets/market.png",
         "pagePath": "pages/market/market",
         "text": "市场"
       },
       {
         "selectedIconPath": "assets/msg-light.png",
         "iconPath": "assets/msg.png",
         "pagePath": "pages/message/message",
         "text": "消息"
       }, {
           "selectedIconPath": "assets/more-light.png",
           "iconPath": "assets/more.png",
           "pagePath": "pages/userCenter/userCenter",
           "text": "更多"
       }]
   }
}

Nach dem Login kopieren

Konfigurieren Sie den Schnittstellendomänennamen: Da Easy Mock zum Simulieren der Schnittstellendaten verwendet wird, können Sie den angeforderten legalen Domänennamen in der Hintergrundentwicklung des Miniprogramms konfigurieren Domänenname des Einstellungsservers für https://www.easy-mock.com.

3. Während der Entwicklung aufgetretene Probleme und Lösungen

1. Miniprogramm zur Darstellung von HTML-Fragmenten

Nach dem Lesen der Webversion von Zhihu sind die von der Schnittstelle zurückgegebenen Antwortdaten A HTML-Codeausschnitt, sodass Sie an einer beliebigen Stelle in Ihrer Antwort ein Bild einfügen können.
Ja, das stimmt, es ist das Lila unten (╯°□°)╯︵┻━┻

Nach wiederholten Versuchen habe ich festgestellt, dass die native Schreibmethode das Rendern eines Teils des HTML-Codes nicht unterstützt Snippet, also habe ich es aufgegeben, HTML-Snippets zurückzugeben, daher sind keine Bilder in meiner Antwortliste (ಥ_ಥ)

Aber ich habe während der Recherche eine benutzerdefinierte Komponente gefunden: wxParse-WeChat-Applet-Rich-Text-Parsing-Komponente, Ich habe es noch nicht ausprobiert. Bereiten Sie sich darauf vor, es beim nächsten Mal zu versuchen.

2. Tab-Wechsel oben auf der Homepage

Jeder Die anklickbare Registerkarte ist an den Datenindex gebunden. Die äußerste Bindungsmethode bindtap erhält den Indexwert der angeklickten Registerkarte und zeigt dann den entsprechenden Registerkarteninhalt entsprechend dem Indexwert an

3. Up-Loading und Pull-Down-Refresh

<view class="tab-wrapper" bindtap="setActive">
        <view class="tab-item {{isActive == 0 ? &#39;tab-item-active&#39; : &#39;&#39;}}" data-index="0">关注</view>
        <view class="tab-item {{isActive == 1 ? &#39;tab-item-active&#39; : &#39;&#39;}}" data-index="1">推荐</view>
        <view class="tab-item {{isActive == 2 ? &#39;tab-item-active&#39; : &#39;&#39;}}" data-index="2">热榜</view>
        <view class="tab-item-line" animation="{{animationData}}"></view>
</view>
<view class="tab-content {{isActive == 0 ? &#39;show&#39; : &#39;hide&#39;}}">
 // ...
</view>
<view class="tab-content {{isActive == 1 ? &#39;show&#39; : &#39;hide&#39;}}">
 // ...
</view>
<view class="tab-content {{isActive == 2 ? &#39;show&#39; : &#39;hide&#39;}}">
 // ...
</view>

Nach dem Login kopieren

Implementierungsideen

Pull-up-Loading: emmmmmmm... Was ich mit Pull-up-Loading meine, ist mehr Laden nach dem Erreichen des Tiefpunkts, fürchte ich anders als das, was jeder versteht o(╯□╰) o

Native Methode: onReachBottom, nach Erhalt der neuen Daten mit der ursprünglichen Datenliste verknüpfen

Zum Aktualisieren nach unten ziehen:

Native Methode: onPullDownRefresh. Nachdem die Datenliste mit den neu erhaltenen Daten verknüpft wurde,

Beachten Sie, dass Sie bei jeder Bearbeitung des Arrays setData verwenden müssen, um das ursprüngliche Array neu zuzuweisen. Andernfalls werden die Daten nicht aktualisiert ( ⊙ o ⊙ )!

Speichersuchverlauf:

Überprüfen Sie beim Auslösen einer Suche mit wx.setStorage, ob die Suchverlaufsliste das Feld enthält. Wenn nicht, verschieben Sie das Feld in das Array .

Suchverlauf anzeigen:

Verwenden Sie wx.getStorage, um die Suchverlaufsliste anzuzeigen, und zeigen Sie sie in einer Schleife an größer als 1 ist, wird eine Schaltfläche zum Löschen des Suchverlaufs angezeigt. >Suchverlauf löschen:

Einzelne Löschung: Jeder Suchverlauf ist an ein Löschereignis gebunden, den Index des geänderten Schlüsselworts abrufen, das Schlüsselwort löschen entsprechend dem Index aus der Suchverlaufsliste und übergeben Sie „setStorage re-storage“. Alle löschen: Verwenden Sie wx.removeStorage, um die Schlüsselwörter, die dem Suchverlauf entsprechen, direkt zu entfernen 5. Die Swiper-Karussellkomponente

befindet sich auf der Ideenseite. In der Karussellkomponente diskutieren xxxx Personen über ein vertikales Textkarussell, das in das Karussellmodul eingebettet ist Das Miniprogramm unterstützt keine gegenseitige Verschachtelung und kann daher teilweise nicht implementiert werden. Ich musste den Stil ändern, um /(ㄒoㄒ)/~~ zu schreiben.

6. Scrollen Sie zur Decke

Wenn die Titelleiste der Seite nach oben scrollt, wird sie an der Decke angezeigt.

Implementierungseffekt

Implementierungsplan

Die gesamte Seite ist mit umschlossen. , und Binden Sie das bindscroll-Ereignis und überwachen Sie die Scroll-Distanz.

Wenn Sie auf die vertikale Richtung einstellen, müssen Sie die Höhe von festlegen.

Kopieren Sie dieselbe Titelleiste und fügen Sie die Deckenstilklasse „Fixed“ hinzu.

Verwenden Sie wx:if, um festzustellen, ob der Scrollabstand der aktuellen Seite den erforderlichen Abstand erreicht. Wenn der erforderliche Abstand erreicht ist, wird die an der Decke montierte Titelleiste gerendert.

7. Volltext erweitern und reduzieren Eine WeChat-Miniprogrammversion der Zhihu-Beispielfreigabe

Anzeigeeffekt

Klasse standardmäßig zum Textteil hinzufügen und Der Text über zwei Zeilen hinaus wird als Ellipse angezeigt.

.text-overflow{
  height: 85rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}

Nach dem Login kopieren

点击展开全文和收起全文时对showIndex[index]的值取反，对应添加或移除该class。

<view class="find-hot-content {{!showIndex[index] ? &#39;text-overflow&#39; : &#39;&#39;}}">
    {{item.content}}
</view>
<view wx:if="{{!showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">展开全文</view>
<view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view>

Nach dem Login kopieren

8、更改switch样式

switch类名如下，一定要加上父类，不然全局的都会被改掉_(:з」∠)_。

父类 .wx-switch-input{
  display: inline-block;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 84rpx;
  height: 44rpx;
}
父类 .wx-switch-input::before{
  width: 80rpx;
  height: 40rpx;
}
父类 .wx-switch-input::after{
  width: 40rpx;
  height: 40rpx;
}

Nach dem Login kopieren

四、总结

通过这次小程序的开发，学到了很多东西，虽然遇到了很多问题，但解决问题的过程让我收获的更多，动手实践才是学习的最好方式。