WeChat 개발 실용 Zhihu Daily

서문

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

자, 시작해 보겠습니다.

실전 전투가 시작됩니다

우선 오늘 우리가 할 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

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

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

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

// index.js

//index.js
//获取应用实例
var app = getApp()
var utils = require('../../utils/util.js');
//初始化数据
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //onLoad方法，程序启动自执行，请求知乎日报今日热闻接口
  onLoad: function () {
    var that = this;
    wx.request({
      url: 'http://news-at.zhihu.com/api/4/news/latest',
      headers: { // http头数据
        'Content-Type': 'application/json'
      },
      success: function (res) { //请求成功后的回调
         that.setData({   // 设置返回值
           banner: res.data.top_stories,  //banner图片数据
           list: [{ header: '今日热闻' }].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: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1),  //此此API需要带日期
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {  // 成功回调
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories)
         })
      }
    })
  },
  //事件处理函数
  bindViewTap: function(e) {
    wx.navigateTo({
      url: '../detail/detail?id=' + 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 = '';  //记住，这样是不行的。

2.2 onLoad

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

2.3 서버와의 상호 작용

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

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

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

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

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

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

레이아웃 구분

3.1 배너블럭

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

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

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

// 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 애플릿에서 속성이 없는 11606cc87d8fd89bcb19e3fd11c7bb4b 다른 기능.

또한 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 속성을 ​​사용하여 응답 방법 이름을 지정하여 더 많은 클릭 응답이 있습니다.

4. 스타일 시트 인덱스.wxss

이건 따로 이야기하지 않겠습니다. 일반적으로 작성하는 CSS와 거의 같습니다. 마지막으로 모든 사람이 다운로드할 수 있도록 소스 코드가 공개됩니다.

5. 마지막에 작성

이 짧은 기사는 모든 사람이 WeChat 애플릿에 대한 이해를 심화하기 위해 서버와 상호 작용하는 작은 데모를 만들도록 유도합니다.
후속 코딩 작업 중입니다....
꼭 지켜봐주세요.

[관련 추천]

1. 위챗 공개 계정 플랫폼 소스코드 다운로드

2. PigCms 마이크로 전자상거래 시스템 운영 버전(독립형 마이크로스토어 + 3단계 유통 시스템)

WeChat Network King v3.5. 고급 비즈니스 버전 WeChat 루빅스 큐브 소스 코드

위 내용은 WeChat 개발 실용 Zhihu Daily의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!