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": "更多"
}]
}
}Copier après la connexion
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 ? 'tab-item-active' : ''}}" data-index="0">关注</view>
<view class="tab-item {{isActive == 1 ? 'tab-item-active' : ''}}" data-index="1">推荐</view>
<view class="tab-item {{isActive == 2 ? 'tab-item-active' : ''}}" data-index="2">热榜</view>
<view class="tab-item-line" animation="{{animationData}}"></view>
</view>
<view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}">
// ...
</view>Copier après la connexion
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>Copier après la connexion
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;
}Copier après la connexion
点击展开全文和收起全文时对showIndex[index]的值取反，对应添加或移除该class。
<view class="find-hot-content {{!showIndex[index] ? 'text-overflow' : ''}}">
{{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>Copier après la connexion
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;
}Copier après la connexion
四、总结
通过这次小程序的开发，学到了很多东西，虽然遇到了很多问题，但解决问题的过程让我收获的更多，动手实践才是学习的最好方式。
相关推荐：
微信小程序组件化的解决思路和方法
微信小程序版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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
