Une version mini-programme WeChat du partage d'exemples de Zhihu

Cet article partage principalement avec vous une version mini-programme WeChat de Zhihu à partir de zéro. J'espère qu'il pourra vous aider à développer une version WeChat de Zhihu et à en tirer plus d'idées.

Effet d'affichage (la conception du style d'interface et l'interaction proviennent de l'application Zhihu version iOS 4.8.0) :

Veuillez passer à GitHub pour les effets dynamiques Vérifier.

1. Préparation avant de commencer

Demander un compte : selon le document d'inscription au mini programme, remplissez les informations et soumettez les documents correspondants, vous pouvez avoir votre propre compte mini programme.

Outils de développement : outils de développement WeChat

Source de données :

Easy Mock : un artefact de simulation de données, vous pouvez écrire des données de retour selon le format dont vous avez besoin, Et toutes les données sont générées de manière aléatoire.

Mock.js : Easy Mock introduit Mock.js, mais seule une partie de la syntaxe est fournie dans le document. Si vous souhaitez écrire vos propres données fictives de manière plus concise, vous pouvez afficher une syntaxe plus spécifique dans Mock. js.

2. Initialisez un mini programme

Créez un nouveau dossier vide

Ouvrez les outils de développement WeChat et suivez les étapes du document "Votre premier mini programme". créez votre propre mini-programme.

Structure du répertoire

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": "更多"
       }]
   }
}

Configurer le nom de domaine de l'interface : étant donné qu'Easy Mock est utilisé pour simuler les données de l'interface, le nom de domaine légal de la demande peut être configuré dans l'arrière-plan de gestion du mini-programme Nom de domaine du serveur de paramètres pour https://www.easy-mock.com.

3. Problèmes rencontrés lors du développement et solutions

1. Mini programme rendant des fragments HTML

Après lecture de la version web de Zhihu, les données de réponse renvoyées par l'interface sont A. extrait de code HTML, afin que vous puissiez insérer une image n'importe où dans votre réponse.
Oui, c'est vrai, c'est le violet en dessous (╯°□°)╯︵┻━┻

Après des tentatives répétées, j'ai constaté que la méthode d'écriture native ne prend pas en charge le rendu d'un morceau de code HTML extrait de code, j'ai donc renoncé à renvoyer des extraits de code HTML, donc il n'y a pas d'images dans ma liste de réponses (ಥ_ಥ)

Mais j'ai trouvé un composant personnalisé lors de la recherche : composant d'analyse de texte enrichi de l'applet wxParse-WeChat, Je ne l'ai pas encore essayé. Préparez-vous à l'essayer la prochaine fois lors de l'optimisation du projet

2. Changement d'onglet en haut de la page d'accueil

Idée de mise en œuvre

Chacun. L'onglet cliquable est lié à l'index de données. La méthode de liaison bindtap la plus externe obtient la valeur d'index de l'onglet cliqué, puis affiche le contenu de l'onglet correspondant en fonction de la valeur d'index

<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>

3. chargement et actualisation déroulante

Idées d'implémentation

Chargement pull-up : emmmmmmm... Je veux dire que le chargement pull-up est plus chargé après avoir touché le bas, j'ai bien peur que ce soit différent de ce que tout le monde comprend o(╯□╰) o.

Méthode native : onReachBottom, après avoir obtenu les nouvelles données, concaténez-vous à la liste de données d'origine

Déroulez pour actualiser :

Méthode native : onPullDownRefresh. Une fois la liste de données concaténée aux nouvelles données obtenues,

Il est à noter qu'à chaque fois que vous opérez sur le tableau, vous devez utiliser setData pour réaffecter le tableau d'origine, sinon le les données ne seront pas mises à jour ( ⊙ o ⊙ ) !

4. Stockage de l'historique de recherche

Idées d'implémentation

wx.setStorage, wx.getStorage et wx.removeStorage

Historique de recherche de stockage :

Lors du déclenchement d'une recherche à l'aide de wx.setStorage, vérifiez si la liste de l'historique de recherche contient le champ. Si c'est le cas, ignorez-le. Sinon, poussez le champ dans le tableau. 🎜>

Afficher l'historique de recherche :

Utilisez wx.getStorage pour obtenir la liste de l'historique de recherche lors de l'affichage du masque de recherche, et affichez-la en boucle lorsque la longueur de la liste de l'historique de recherche est plus grande. supérieur à 1, un bouton pour effacer l'historique de recherche s'affiche. >Supprimer l'historique de recherche :

Suppression unique : Chaque historique de recherche est lié à un événement de suppression, obtenir l'index du mot-clé modifié, supprimer le mot-clé correspondant à l'index de la liste de l'historique de recherche de la chaîne, et passez le re-storage wx. setStorage

Supprimer tout : utilisez wx.removeStorage pour supprimer directement les mots-clés correspondant à l'historique de recherche

5. Le composant carrousel swiper

se trouve sur la page d'idées. Dans le composant carrousel, xxxx personnes dans l'application Zhihu originale discutent d'un carrousel de texte vertical intégré dans le module carrousel. Cependant, le composant carrousel swiper dans le mini programme. ne prend pas en charge l'imbrication les uns des autres, donc cela ne peut pas être implémenté en partie, j'ai dû changer le style pour écrire /(ㄒoㄒ)/~~.

6. Faites défiler vers le plafond

Lorsque la barre de titre de la page défile vers le haut, elle sera affichée au plafond.

Effet de mise en œuvre

Plan de mise en œuvre

La page entière est entourée de , et liez l'événement bindscroll et surveillez la distance de défilement.

Lorsque vous définissez sur la direction verticale, vous devez définir la hauteur de .

Copiez la même barre de titre et ajoutez la classe de style plafond corrigée.

Utilisez wx:if pour déterminer si la distance de défilement de la page actuelle atteint la distance requise. Si la distance requise est atteinte, la barre de titre montée au plafond sera rendue.

7. Développez et réduisez le texte intégral

<view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}">
   <view class="find-hot-title">最近热门</view>
</view>
<view class="find-hot-header">
    <view class="find-hot-title">最近热门</view>
</view>

Effet d'affichage

Ajoutez une classe par défaut à la partie texte, et le texte au-delà de deux lignes sera affiché avec des points de suspension.

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

点击展开全文和收起全文时对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>

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;
}

四、总结

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

相关推荐：

微信小程序组件化的解决思路和方法

微信小程序版2048小游戏

微信小程序之购物车的实现代码

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!