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

Plan de mise en œuvre

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

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

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

父类 .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;
}