Zhihu 예제 공유의 WeChat 미니 프로그램 버전

이 기사는 주로 Zhihu의 WeChat 미니 프로그램 버전을 처음부터 공유합니다. Zhihu의 WeChat 버전을 개발하고 더 많은 아이디어를 얻는 데 도움이 되기를 바랍니다.

디스플레이 효과(인터페이스 스타일 디자인 및 상호 작용은 iOS 4.8.0 버전 Zhihu 앱에서 따옴):

동적 효과를 보려면 GitHub로 이동하세요.

1. 시작 전 준비

계정 신청: 미니 프로그램 등록 서류에 따라 정보를 입력하고 해당 자료를 제출하면 나만의 미니 프로그램 계정을 가질 수 있습니다.

개발 도구: WeChat 개발자 도구

데이터 출처:

Easy Mock: 데이터 시뮬레이션 결과물로 필요한 형식에 따라 반환 데이터를 작성할 수 있으며 모든 데이터는 무작위로 생성됩니다.

Mock.js: Easy Mock은 Mock.js를 도입하지만 문서에는 구문의 일부만 제공됩니다. 자신만의 모의 데이터를 보다 간결하게 작성하려면 Mock.js에서 더 구체적인 구문을 볼 수 있습니다.

2. 미니 프로그램 초기화

새 빈 폴더 만들기

WeChat 개발자 도구를 열고 "첫 번째 미니 프로그램" 문서의 단계를 따라 나만의 미니 프로그램을 만드세요.

디렉터리 구조

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

인터페이스 도메인 이름 구성: 인터페이스 데이터를 시뮬레이션하는 데 Easy Mock이 사용되므로 미니 프로그램 관리 백그라운드 개발 설정에서 요청 법적 도메인 이름을 https://www.easy-mock으로 구성할 수 있습니다. -서버 도메인 이름 .com.

3. 개발 중 발생한 문제 및 해결 방법

1. 미니 프로그램은 HTML 조각을 렌더링합니다.

Zhihu의 웹 버전을 읽은 후 인터페이스에서 반환된 답변 데이터는 HTML 코드 조각이므로 답변은 어떤 삽입물에도 있을 수 있습니다. 가능한 한 사진.
네 맞아요 아래 보라색이에요 (╯°□°)╯︵┻━┻

여러 번 시도한 끝에 기본 작성 방법이 HTML 코드 조각 렌더링을 지원하지 않는 것을 발견하여 포기했습니다 HTML 코드 조각을 반환하는 방법이므로 내 답변 목록에 그림(ಥ_ಥ)이 없습니다.

하지만 조사 중에 사용자 정의 구성 요소를 찾았습니다: wxParse-WeChat 애플릿 서식 있는 텍스트 구문 분석 구성 요소는 아직 시도하지 않았습니다.

2. 홈페이지 상단에서 탭 전환

구현 아이디어

클릭 가능한 각 탭을 별도로 data-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, 풀업 로딩 및 풀다운 새로고침

구현 아이디어

풀업 로딩: 으으으으음 ...제가 말하는 풀업 로딩은 바닥이 나온 후의 로딩입니다. 죄송하지만 모두가 이해하는 것과 다릅니다 o(╯□╰)o

기본 방법: onReachBottom, 새 데이터를 얻은 후,

풀다운하여 새로 고침:

기본 메서드: onPullDownRefresh, 원본 데이터 목록이 얻은 새 데이터에 연결된 후

배열에서 작업할 때마다 원래 배열을 재할당하려면 setData를 사용해야 합니다. 그렇지 않으면 데이터가 업데이트되지 않습니다(⊙ o ⊙ ).

4. 검색 기록 저장

구현 아이디어

wx.setStorage, wx.getStorage 및 wx.removeStorage

저장소 검색 기록:

wx.setStorage를 사용하여 검색을 실행할 때 검색 기록 목록에 있는지 확인하세요. 이 필드가 포함되어 있으면 무시하고, 없으면 이 필드를 배열에 푸시하세요.

표시합니다. 검색 기록:

검색 마스크를 표시할 때 wx.getStorage를 사용하여 검색 기록 목록을 가져오고 이를 루프로 표시합니다. 검색 기록 목록의 길이가 1보다 크면 검색 기록을 지우는 버튼이 표시됩니다.

검색기록 삭제:

단일삭제: 각 검색기록은 삭제 이벤트에 바인딩되며, 변경된 키워드의 색인은 채널의 검색기록 목록에서 가져옵니다. 색인에 해당하는 키워드를 삭제하고 다시 삭제하세요. wx.setStorage를 통해 저장하세요.

모두 삭제: 검색 기록에 해당하는 키워드를 직접 삭제하려면 wx.removeStorage를 사용하세요.

5. 아이디어 페이지의 스와이프 캐러셀 컴포넌트

원래 Zhihu 앱에서는 캐러셀 모듈에 내장된 세로 텍스트 캐러셀을 논의하고 있습니다. 그러나 미니 프로그램의 swiper 캐러셀 구성 요소는 서로 중첩을 지원하지 않으므로 구현할 수 없습니다. 부분적으로 쓰기/스타일을 변경해야 합니다. (ㄒoㄒ)/~~.

6. 천장으로 스크롤

페이지의 제목 표시줄이 위로 스크롤되면

천장 효과가 달성됩니다

전체 페이지는 다음과 같습니다. 로 래핑하고 바인드스크롤 이벤트를 바인딩하여 스크롤 거리를 모니터링합니다.

를 세로 방향으로 설정하는 경우 의 높이를 설정해야 합니다.

동일한 제목 표시줄을 복사하고 천장 스타일 클래스를 고정 추가하세요.

wx:if를 사용하여 현재 페이지의 스크롤 거리가 필요한 거리에 도달했는지 확인합니다. 필요한 거리에 도달하면 천장에 장착된 제목 표시줄이 렌더링됩니다.

<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. 전체 텍스트 확장 및 축소

표시 효과

텍스트 부분에 기본적으로 클래스를 추가하면 텍스트 두 줄 이상으로 줄임표가 표시됩니다.

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

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

위 내용은 Zhihu 예제 공유의 WeChat 미니 프로그램 버전의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!