ホームページ >WeChat アプレット >ミニプログラム開発 >Zhihu の例共有の WeChat ミニプログラムバージョン

Zhihu の例共有の WeChat ミニプログラムバージョン

小云云オリジナル: 2018-01-25 13:51:446171ブラウズ

この記事では主に、Zhihu の WeChat ミニプログラムバージョンをゼロから共有します。これが、Zhihu の WeChat バージョンを開発し、そこからさらに多くのアイデアを得るのに役立つことを願っています。

表示効果 (インターフェイススタイルのデザインとインタラクションは iOS 4.8.0 バージョン Zhihu App のものです):

動的効果を表示するには、GitHub にアクセスしてください。

1. 開始前の準備

アカウントの申請: ミニプログラム登録書類に従って、情報を記入し、対応する資料を提出すると、独自のミニプログラムアカウントを取得できます。

開発ツール: WeChat 開発者ツール

データソース:

簡単モック: データシミュレーションアーティファクト。必要な形式に従って戻りデータを書き込むことができ、すべてのデータはランダムに生成されます。

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 フラグメントをレンダリングします

Web バージョンの Zhihu を読み取った後、インターフェイスから返される回答データは HTML コードフラグメントであるため、回答は任意の挿入に含めることができます。可能な限り写真。
はい、そうです、下の紫の部分です(╯°□°)╯︵┻━┻

何度も試した結果、ネイティブの記述方法ではHTMLコードスニペットのレンダリングをサポートしていないことが分かり、諦めましたHTML コードスニペットを返す方法なので、私の回答リストには画像がありません (ಥ_ಥ)

しかし、調査中にカスタムコンポーネントを見つけました: wxParse-WeChat アプレットリッチテキスト解析コンポーネントですが、まだ試していません。次回プロジェクトを最適化するときに試してみる予定です

2. ホームページ上部のタブ切り替え

実装アイデア

クリック可能な各タブは個別に data-index にバインドされ、クリックされたタブのインデックス値は最も外側のbindtapバインディングメソッドで取得され、インデックスに基づいて値がそれぞれ対応するタブコンテンツ

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

ストレージ検索履歴:

検索をトリガーするときに、wx.setStorageを使用して、検索履歴リストにこのフィールドが含まれているかどうかを確認し、存在する場合は無視し、存在しない場合はこのフィールドを配列にプッシュします

。検索履歴の表示:

検索マスク表示時にwx.getStorageを使用して検索履歴リストを取得し、ループ表示します。検索履歴リストの長さが1より大きい場合、検索履歴をクリアするボタンが表示されます。

検索履歴の削除:

単一削除: 各検索履歴を削除イベントにバインドし、チャネルの検索履歴リストから変更されたキーワードのインデックスを取得し、そのインデックスに該当するキーワードを削除します。 -wx.setStorage を通じて保存します。

すべて削除: wx.removeStorage を使用して、アイデアページの

スワイパーカルーセルコンポーネントでキーワードを直接削除します。オリジナルの Zhihu アプリでは、カルーセルモジュールに埋め込まれた垂直テキストカルーセルについて議論していますが、ミニプログラムのスワイパーカルーセルコンポーネントは相互のネストをサポートしていないため、その部分を記述するスタイルを変更する必要があります。 /(ㄒ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. 全文の展開と折りたたみ

表示効果 Zhihu の例共有の WeChat ミニプログラムバージョン

テキスト部分にデフォルトでクラスを追加すると、2行のテキストを超えて省略記号が表示されます。

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

四、总结

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

Zhihu の例共有の WeChat ミニ プログラム バージョン

関連記事

Zhihu の例共有の WeChat ミニプログラムバージョン