WeChat 개발 실용 Zhihu Daily-위챗 개발-php.cn

서문

미니 프로그램에 대한 수많은 소개를 읽고 나면 미니 프로그램에 대한 어느 정도 이해가 있어야 합니다. 이번 글에서는 더 이상 시작에 초점을 맞추지 않고, 이제 Zhihu Daily 미니 프로그램을 통해 연습하여 WeChat 미니 프로그램 API에 대한 이해를 심화하겠습니다.

자, 시작해 보겠습니다.

실전 전투가 시작됩니다

우선 오늘 우리가 할 Zhihu Daily의 결과를 살펴보겠습니다.
아래와 같습니다. 하지만 공간 문제로 인해 오늘은 백엔드와의 상호작용, 페이지 레이아웃, 데이터 렌더링, 이벤트 응답 등을 포함하는 홈 페이지 완성에 대해서만 이야기하겠습니다. 기본적으로 홈 페이지의 모든 개발을 다룹니다. 한 페이지를 만드는 방법.

WeChat 개발 실용 Zhihu Daily

Zhihu Daily 미니 프로그램 홈페이지

1. 리소스 준비

Zhihu Daily - 간략한 버전 API:

new
s-at.zhihu.com/api/4/news/latest 今日热文
news.at.zhihu.com/api/4/news/
before
/  更多往日热文

로그인 후 복사

위 두 주소는 오늘 우리가 할 홈페이지의 API입니다. 요청을 시작하고 렌더링을 위한 데이터를 가져옵니다.

2. 홈페이지 JS

이제 코드 작성을 시작하겠습니다. 홈페이지의 디렉토리 구조를 아래 그림과 일치하게 유지하세요.

WeChat 개발 실용 Zhihu Daily

홈페이지에 3개의 파일이 있습니다

먼저 JS 파일을 작성해 보도록 하겠습니다. 코드는 아래와 같고, 자세한 설명을 추가해 두었습니다. .

// index.js

//index.js
//获取应用实例
var app = getApp()
var utils = require(&#39;../../utils/util.js&#39;);
//初始化数据
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //onLoad方法，程序启动自执行，请求知乎日报今日热闻接口
  onLoad: function () {
    var that = this;
    wx.request({
      url: &#39;http://news-at.zhihu.com/api/4/news/latest&#39;,
      headers: { // http头数据
        &#39;Content-Type&#39;: &#39;application/json&#39;
      },
      success: function (res) { //请求成功后的回调
         that.setData({   // 设置返回值
           banner: res.data.top_stories,  //banner图片数据
           list: [{ header: &#39;今日热闻&#39; }].concat(res.data.stories)  //热闻数据list
         })
      }
    })
    this.index = 1;   //方便下拉点击更多时的计数下标，暂可忽略
  },
  //下拉滚动条，点击更多的响应
  loadMore: function (e) {
    if (this.data.list.length === 0) return
    var date = this.getNextDate()
    var that = this
    that.setData({ loading: true });
    wx.request({  // 再次发起请求，请求上一天的热闻
      url: &#39;http://news.at.zhihu.com/api/4/news/before/&#39; + (Number(utils.formatDate(date)) + 1),  //此此API需要带日期
      headers: {
        &#39;Content-Type&#39;: &#39;application/json&#39;
      },
      success: function (res) {  // 成功回调
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, &#39;-&#39;) }]).concat(res.data.stories)
         })
      }
    })
  },
  //事件处理函数
  bindViewTap: function(e) {
    wx.navigateTo({
      url: &#39;../detail/detail?id=&#39; + e.target.dataset.id
    })
  },
  //转换时间函数
  getNextDate: function (){
    var now = new Date()
    now.setDate(now.getDate() - this.index++)
    return now
  },

})

로그인 후 복사

여기서 몇 가지 핵심 사항에 대해 간략히 설명합니다.

2.1 데이터 값 설정

현재 WeChat 애플릿은

this.setData({....});

로그인 후 복사

만 지원할 수 있으며 지원하지 않습니다. 값

this.data.xxxx = &#39;&#39;;  //记住，这样是不行的。

로그인 후 복사

2.2 onLoad

페이지라이프 사이클에서 페이지 로딩을 모니터링하는 방법입니다. 즉, 이 페이지에 들어갈 때마다 실행해야 합니다. 방법은 JS의 로드와 동일합니다.

2.3 서버와의 상호 작용

WeChat 애플릿도 요청 인터페이스를 사용하여 백엔드와 상호 작용합니다. 구체적인 예는 다음과 같으므로 누구나 이해할 수 있습니다.

wx.request({
  url: &#39;test.php&#39;, //接口地址
  data: {  // 参数
     x: &#39;&#39; ,
     y: &#39;&#39;
  },
  header: {  // 头信息
      &#39;Content-Type&#39;: &#39;application/json&#39;
  },
  success: function(res) {  // 成功 回调
    console.log(res.data)
  }
})

로그인 후 복사

3. 홈 페이지 레이아웃 index.html

자, 백엔드와 상호작용하는 js 코드 작성을 마쳤으므로 데이터를 얻었으니 이제 페이지 레이아웃 작성을 시작합니다.

실제로 WeChat 애플릿도 페이지를 렌더링할 때 템플릿 엔진 방법을 사용합니다. 그리고 페이지 값 방법은 비교적 일반적입니다. 이는 다른 페이지 템플릿 엔진과 유사합니다.

자, 시작해 보겠습니다. 이 페이지 레이아웃은 비교적 간단합니다.

WeChat 개발 실용 Zhihu Daily

레이아웃 구분

3.1 배너블럭

우선 문서에 가보면 특별한 내용이 있을 겁니다. 배너 구성 요소,
swiper(문서로 이동하려면 클릭)

이 swiper 구성 요소를 사용하여 bannner 모듈을 작성합니다

swiper 구성 요소만 <swiper-item/> 구성 요소에 배치할 수 있으며, 다른 노드는 자동으로 삭제됩니다.

// index.html banner模块代码

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <!-- 循环bannner图片开始-->
    <block wx:for="{{banner}}"> 
      <swiper-item class="banner" >
          <image src="{{item.image}}"  data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
          <text class="banner-title">{{item.title}}</text>
      </swiper-item>
    </block>
     <!-- 循环bannner图片结束-->
  </swiper>

로그인 후 복사

3.2 핫 뉴스 목록 모듈

사실 아래의 핫 뉴스 목록도 목록 루프입니다. 여기에서 루프를 만드는 방법도 있습니다. 그것을 얻으십시오.
wx-for 속성을 사용하세요. 하지만 이는 단지 속성일 뿐입니다. 이 속성을 전달하려면 WeChat 애플릿에서 속성이 없는 다른 기능.

또한 WeChat 미니 프로그램에는 많은 기본값이 있습니다.

구성 요소의 wx:for 제어 속성을 사용하여 배열을 바인딩하고 각 데이터를 사용할 수 있습니다. 반복할 배열의 항목 구성요소를 렌더링합니다. 기본적으로 배열에 있는 현재 항목의 첨자 변수 이름은 기본적으로 index로 지정되고, 배열에 있는 현재 항목의 변수 이름은 기본적으로 item으로 지정됩니다. 수정이 필요한 경우 wx:for를 사용하세요. - 배열의 현재 요소의 변수 이름을 지정하는 항목입니다.

그러니까 놀라지 마세요 item.header, 그 물건은 어디서 왔나요?

코드는 다음과 같습니다.

<view class="news-item-container">
    <block wx:for="{{list}}" wx:for-index="id">
      <text wx:if="{{item.header}}" class="sub-title">{{item.header}}</text>
      <navigator wx:else url="../detail/detail?id={{item.id}}">
        <view class="news-item" >
          <view class="news-item-left">
            <text class="news-item-title">{{item.title}}</text>
          </view>
          <view class="news-item-right">
            <image src="{{item.images[0]}}" class="news-image"/>
          </view>
        </view>
      </navigator>
    </block>
    <button type="primary" class="load-btn" size="mini" loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 更多 </button>
  </view>

로그인 후 복사

그 외에도 bindtap 속성을 사용하여 응답 방법 이름을 지정하여 더 많은 클릭 응답이 있습니다.