A WeChat mini program version of Zhihu example sharing

This article mainly shares with you a WeChat mini program version of Zhihu from scratch. I hope it can help you develop a WeChat version of Zhihu and get more ideas from it.

Display effect (interface style design and interaction are from iOS 4.8.0 version Zhihu App):

Please move to GitHub for dynamic effects Check.

1. Preparation before starting

Apply for an account: According to the Mini Program registration document, fill in the information and submit the corresponding materials, you can have your own Mini Program account.

Development Tools: WeChat Developer Tools

Data source:

Easy Mock: A data simulation artifact, you can write the return data yourself according to the format you need, And all data is randomly generated.

Mock.js: Easy Mock introduces Mock.js, but only part of the syntax is provided in the document. If you want to write your own mock data more concisely, you can view more specific syntax in Mock.js.

2. Initialize a Mini Program

Create an empty folder

Open the WeChat developer tools and follow the steps in the "Your First Mini Program" document. You can create your own mini program.

Directory structure

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

Configure the interface domain name: Because Easy Mock is used to simulate the interface data, you can configure the request legal domain name to https in the mini program management background-development settings-server domain name ://www.easy-mock.com.

3. Problems encountered during development and solutions

1. Mini program renders HTML fragments

After reading the web version of Zhihu, the answer data returned by the interface is A snippet of HTML code, so you can insert an image anywhere in your answer.
Yes, that’s right, it’s the purple one below (╯°□°)╯︵┻━┻

After repeated attempts, I found that the native writing method does not support rendering a piece of HTML code, so I gave up on returning HTML. Code snippets, so there are no pictures in my answer list (ಥ_ಥ)

But I found a custom component during the research: wxParse-WeChat applet rich text parsing component, I haven’t tried it yet. Prepare to try it next time when optimizing the project.

2. Tab switching at the top of the homepage

Implementation ideas

Each clickable tab is bound to the data-index. The index value of the clicked tab is obtained in the outermost bindtap binding method, and then the corresponding tab-content is displayed according to the index value

<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, pull-up loading and pull-down refresh

Implementation Ideas

Pull-up loading: emmmmmmm...The pull-up loading I mean is more loading after hitting bottom, I am afraid it is different from what everyone understands o(╯□╰)o.

Native method: onReachBottom, after obtaining the new data, concat to the original data list.

Pull down to refresh:

Native method: onPullDownRefresh, convert the original data. After the list is concated to the new data obtained.

It should be noted that every time you operate on the array, you must use setData to reassign the original array, otherwise the data will not be updated (⊙ o ⊙ )!

4. Storage of search history

Implementation ideas

wx.setStorage, wx.getStorage and wx.removeStorage

Storage search history:

Use wx.setStorage, when triggering the search, check whether the search history list contains this field, if so, ignore it, if not, push the field into the array

Display the search history:

Use wx.getStorage to obtain the search history list when displaying the search mask, and display it in a loop. When the length of the search history list is greater than 1, a button to clear the search history is displayed.

Delete. Search history:

Single deletion: Each search history is bound to a deletion event, obtains the index of the changed keyword, deletes the keyword corresponding to the index from the search history list of the channel, and resets it through wx.setStorage Storage.

Delete all: use wx.removeStorage to directly remove the keywords corresponding to the search history

5, swiper carousel component

Carousel on the idea page. Among the components, xxxx people in the original Zhihu App were discussing a vertical text carousel embedded in the carousel module, but the swiper carousel components in the mini program did not support nesting of each other, so this part was not implemented. I had to change my style to write /(ㄒoㄒ)/~~.

6. Scroll to ceiling

When the title bar in the page scrolls to the top, it will be displayed at the top.

Implementation effect

Implementation plan

The entire page is wrapped with , and Bind the bindscroll event and monitor the scroll distance.

When setting to the vertical direction, you need to set the height of .

Copy the same title bar and add the ceiling-style class fixed.

Use wx:if to determine whether the scrolling distance of the current page reaches the required distance. If the required distance is reached, the ceiling-mounted title bar will be rendered.

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

7. Expand and collapse the full text

Display effect

##Class is added by default to the text part, and ellipsis is displayed beyond two lines of text.

.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小游戏

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

The above is the detailed content of A WeChat mini program version of Zhihu example sharing. For more information, please follow other related articles on the PHP Chinese website!