지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 위챗 개발 > WeChat 개발에 대한 실용 튜토리얼

WeChat 개발에 대한 실용 튜토리얼

Y2J
풀어 주다： 2017-05-12 11:16:39
원래의
1994명이 탐색했습니다.

본 글은 위챗 미니 프로그램의 실제적인 미니 프로그램 예시에 대한 정보를 중심으로 소개하고 있으니, 필요한 친구들이 참고하시면 좋습니다.

위챗 미니 프로그램의 기본 구성요소와 API 마지막으로 주제로 돌아가서 농담, 사진, 오디오 및 비디오의 네 가지 모듈을 포함하는 간결한 버전의 Baisi Bujie를 만드는 데 대부분의 시간을 보냈습니다. 이 기사에서는 이 작은 APP에 대해 간략하게 소개합니다. 소스 코드는 GitHub에 게시되며 시작해도 좋습니다.

프로젝트를 통해 무엇을 배울 수 있나요?

  1. 탭바 사용법

  2. 실제 네트워크 호출인터페이스

  3. 로딩은

  4. 스크롤 뷰를 사용하여 풀다운 새로 고침 및 풀업 로딩

  5. 이미지 구성 요소를 구현하여 이미지를 처리합니다.

  6. 음악 및 영상구성요소 사용

  7. 점프합격값사용

  8. 잠깐만 잠깐만요. . . .

app.jsonglobalconfig file


{
 "pages":[
  "pages/word/word",
  "pages/image/image",
  "pages/voice/voice",
  "pages/video/video",
  "pages/detail/detail"
 ],
 "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#eb4f38",
  "borderStyle": "white",
  "backgroundColor": "#ffffff",
  "list": [
   {
    "pagePath": "pages/word/word",
    "text": "段子",
    "iconPath": "image/wordN.png",
    "selectedIconPath": "image/wordS.png"
   },
   {
    "pagePath": "pages/image/image",
    "text": "图片",
    "iconPath": "image/imageN.png",
    "selectedIconPath": "image/imageS.png"
   },
   {
    "pagePath": "pages/voice/voice",
    "text": "声音",
    "iconPath": "image/voiceN.png",
    "selectedIconPath": "image/voiceS.png"
   },
   {
    "pagePath": "pages/video/video",
    "text": "视频",
    "iconPath": "image/videoN.png",
    "selectedIconPath": "image/videoS.png"
   }

  ]
 },
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#eb4f38",
  "navigationBarTextStyle":"white"
 }
}
로그인 후 복사

여기서 전역 속성만 구성하면 됩니다. 이로 인해 각 페이지가 pags 속성에 표시되어야 합니다. 탭바 하단탐색항목은 목록의 4가지 항목으로 나누어져 있습니다. 이곳의 주요 구성은 하단 옵션 페이지별 선택 색상, 배경 색상, 페이지 소개, 사진 소개입니다. 창 속성은 주로 양식의 전체 색상, 텍스트 색상 및 배경 색상을 구성합니다. 여기서 창 속성은 각 페이지의 창 속성에 의해 재정의됩니다.

app.wxss


/*整体view样式*/
.containsView{
 padding: 15rpx 15rpx 15rpx 15rpx;
 margin-top: 15rpx;
 margin-bottom: 15rpx;
 background-color: white;
}
/*头部整体样式*/
.topContainsView{
 display: flex;
 flex-direction: row;
 align-items: center;
 margin-bottom: 18rpx;
}

/**
 * 头像样式
*/
.profileImage{
 width: 60rpx;
 height: 60rpx;
 border-radius: 30rpx;
}

/*头部显示名字和时间整体样式*/
.topRightView{
 margin-left: 15rpx;
 display: flex;
 flex-direction: column;
}
/*用户名称样式*/
.topRightName{
 font-size: 18rpx;
}
/*时间样式*/
.topRightTime{
 font-size: 14rpx;
 color: #b8b2b2;
 margin-top: 10rpx;
}

/*因为中间部分不一样不放在整体样式中*/

/*底部view整体样式*/
.bottomView{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}
/*每个Item样式*/
.bottomItemView{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 margin-top: 18rpx;
 padding-left: 10rpx;
 padding-right: 10rpx;
}
/*Item样式中的图标样式 顶 踩 分享 评论*/
.bottomItemImage{
 width: 45rpx;
 height: 45rpx;
}
/*Item中的文字样式 顶 踩 分享 评论*/
.bottomItemText{
 font-size: 15rpx;
 color: #b8b2b2;
 margin-left: 10rpx;
 margin-top: 8rpx;
}

/*分割线样式*/
.pLine{
 background: #f3f3f3;
 width: 100%;
 height: 15rpx;
}
로그인 후 복사

app.wxss me 4개의 모듈을 헤더, 콘텐츠 영역, 하단의 세 부분으로 나눕니다. 각 페이지의 헤더와 하단 스타일은 동일하지만 중간 부분이 다르기 때문에 1과 3을 전역 주석 <🎜으로 추출했습니다. > 비교적 명확함

Joan 모듈

word.wxml


<loading hidden="{{loadingHidden}}">正在加载...</loading>
<scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" style="height: 100%">
 <block wx:for-items="{{list}}">
  <!-- 分割线 -->
  <view class="pLine"></view>
  <!-- 整体item样式 -->
  <view class="containsView">
   <view class="topContainsView">
    <image class="profileImage" src="{{item.profile_image}}" />
    <view class="topRightView">
     <text class="topRightName">{{item.name}}</text>
     <text class="topRightTime">{{item.passtime}}</text>
    </view>
   </view>
   <!-- 中间内容 -->
   <text class="centerContent">{{item.text}}</text>
   <!-- 底部view样式 -->
   <view class="bottomView">
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/ding.png" />
     <text class="bottomItemText">{{item.ding}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/cai.png" />
     <text class="bottomItemText">{{item.cai}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/share.png" />
     <text class="bottomItemText">{{item.repost}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/comment.png" />
     <text class="bottomItemText">{{item.comment}}</text>
    </view>
   </view>
  </view>
 </block>
</scroll-view>
로그인 후 복사

스크롤로 외부 레이어를 래핑합니다. 더 많은 로드를 구현하고 새로 고치기 위해 끌어오기를 수행합니다.bindscrolltoupper=”bindscrolltoupper” 이 속성은 상단으로 슬라이드할 때 이 메소드를 호출합니다. 처음에는 헤더와 하단 레이아웃으로 슬라이드할 때 바인딩스크롤tolower=”bindscrolltolower”가 호출됩니다. 소개를 통해서도 추출이 가능합니다. 이렇게 사용하시면 4페이지를 모두 작성하지 않아도

word.js

를 얻으실 수 있습니다. 


Page({
 data: {
  list: [],
  maxtime: &#39;&#39;,
  loadingHidden: false
 },
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  //加载最新
  this.requestData(&#39;newlist&#39;);
 },

 /**
  * 上拉刷新
  */
 bindscrolltoupper: function () {
  //加载最新
  // this.requestData(&#39;newlist&#39;);
 },

 /**
  * 加载更多
  */
 bindscrolltolower: function () {
  console.log(&#39;到底部&#39;)
  //加载更多
  this.requestData(&#39;list&#39;);
 },

 /**
  * 请求数据
  */
 requestData: function (a) {
  var that = this;
  console.log(that.data.maxtime)
  wx.request({
   url: &#39;http://api.budejie.com/api/api_open.php&#39;,
   data: {
    a: a,
    c: &#39;data&#39;,
    maxtime: that.data.maxtime,
    type: &#39;29&#39;,
   },
   method: &#39;GET&#39;,
   success: function (res) {
    console.log(res)
    console.log(&#39;上一页&#39;, that.data.list)
    that.setData({
     // 拼接数组
     list: that.data.list.concat(res.data.list),
     loadingHidden: true,
     maxtime: res.data.info.maxtime
    })

   }
  })
 },
 onReady: function () {
  // 页面渲染完成
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 }
})
로그인 후 복사

여기서 데이터는 requestData 메소드를 통해 로드됩니다. 이 메소드는 이 매개변수를 통해 최신 항목 이상을 로드하는 매개변수를 허용합니다. 다음 페이지를 로드하는 데 이전 페이지의 최대 시간이 사용됩니다. 조건, 다음 데이터 페이지를 로드하려면 concat 메서드를 사용하여 배열을 연결하고 로드

상태 <🎜를 변경합니다. > 로딩. word.wxml과 word.json 중 하나는 콘텐츠 글꼴 크기를 설정하고 다른 하나는 탐색 표시줄 텍스트를 설정하므로 여기에 게시하지 않겠습니다.

이미지 모듈

image.wxml

<loading hidden="{{loadingHidden}}">正在加载...</loading>
<scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%">
 <block wx:for-items="{{list}}">
  <!-- 分割线 -->
  <view class="pLine"></view>
  <!-- 整体item样式 -->
  <view class="containsView">
   <view class="topContainsView">
    <image class="profileImage" src="{{item.profile_image}}" />
    <view class="topRightView">
     <text class="topRightName">{{item.name}}</text>
     <text class="topRightTime">{{item.passtime}}</text>
    </view>
   </view>
   <text style="font-size: 30rpx">{{item.text}}</text>
   <!-- 当时gif图 -->
   <view wx:if="{{item.is_gif != 0}}" style="position: relative;">
    <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" />
   </view>
   <!-- 普通大图 可点击查看全部图片 -->
   <view data-url="{{item.cdn_img}}" data-height="{{item.height}}" data-width="{{item.width}}"
      bindtap="lookBigPicture" wx:elif="{{item.is_gif == 0}}" style="position: relative;">
    <!-- 图片资源 -->
    <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" />
    <!-- 图片上浮动的点击查看详情图片view -->
    <view class="flexView">
     <image src="../../image/seeBigPicture.png" style="width: 60rpx; height: 60rpx;" />
     <text class="flexText">点击查看全图</text>
    </view>
   </view>
   <!-- 底部view样式 -->
   <view class="bottomView">
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/ding.png" />
     <text class="bottomItemText">{{item.ding}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/cai.png" />
     <text class="bottomItemText">{{item.cai}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/share.png" />
     <text class="bottomItemText">{{item.repost}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/comment.png" />
     <text class="bottomItemText">{{item.comment}}</text>
    </view>
   </view>
  </view>
 </block>
</scroll-view>
로그인 후 복사


여기에서는 주로 gif인지 여부에 따라 이미지를 구분하고 처리합니다. GIF가 아닌 경우 클릭하면 더 큰 이미지를 볼 수 있습니다. 인터페이스 및 image.wxss와 결합된 보기 정지 효과는

image.wxss

/*中间文字样式*/
.centerContent{
 margin-top: 20rpx;
 width: 100%;
 height: 600rpx;

}
/*中间浮动文字样式*/
.flexView{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80rpx;
position: absolute;
z-index: 2;
top: 540rpx;
background: #000000;
opacity: 0.6

}
/*浮动文字*/
.flexText{
 color: white;
 font-size: 35rpx;
}
로그인 후 복사

image.js

var detail = &#39;../detail/detail&#39;
Page({
 data: {
  list: [],
  maxtime: &#39;&#39;,
  loadingHidden: false
 },
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  this.requestData(&#39;newlist&#39;);

 },
 /**
  * 滚动到底部时加载下一页
  */
 bindscrolltolower: function () {
  console.log(&#39;到底部&#39;)
  this.requestData(&#39;list&#39;);

 },

 /**
  * 加载数据
  */
 requestData: function (a) {
  var that = this;
  wx.request({
   url: &#39;http://api.budejie.com/api/api_open.php&#39;,
   data: {
    a: a,
    c: &#39;data&#39;,
    // 上一页的maxtime作为加载下一页的条件，
    maxtime: this.data.maxtime,
    type: &#39;10&#39;,
   },
   method: &#39;GET&#39;,
   success: function (res) {
    console.log(res)
    console.log(&#39;上一页&#39;, that.datalist)
    that.setData({
     // 拼接数组
     list: that.data.list.concat(res.data.list),
     loadingHidden: true,
     maxtime: res.data.info.maxtime
    })

   }
  })
 },
 /**
  * 查看大图
  */
 lookBigPicture: function (e) {
  console.log(e);
  console.log(e.currentTarget.id)
  //图片url 对应wxml中data-url="{{item.url}}"
  var url = e.currentTarget.dataset.url;
  //获取图片高度 对应wxml中data-height="{{item.height}}"
  var height = e.currentTarget.dataset.height;
  //获取图片高度 对应wxml中data-width="{{item.width}}"
  var width = e.currentTarget.dataset.width;
  // 传参方式向GET请求
  wx.navigateTo({
   url: detail + &#39;?&#39; + &#39;url=&#39; + url + "&height=" + height + "&width=" + width,
   success: function (res) {
    console.log(res)
   },
   fail: function (err) {
    console.log(err)
   },
  })
 },
 onReady: function () {
  // 页面渲染完成
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 }
})
로그인 후 복사

여기서는 주로 viewBigPicture 메소드 view data-url=” {{item.cdn_img}}” data-height=”{{item.height}}” data-width="{{item.width}}"가 논리 코드에 설치됩니다. 구문은 var url = e입니다. currentTarget.dataset.url; 값이 전송되면

【관련 권장 사항】

형식에 따라 요청이 GET으로 전송됩니다.

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

2. 투표 소스 코드 다운로드

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

관련 라벨：
실제 전투 위챗 애플릿
원천：php.cn
이전 기사：WeChat 개발에서 텍스트 영역을 사용하는 방법에 대한 자세한 설명 다음 기사：WeChat 개발을 위한 데이터 액세스 방법에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
npx create-react-app 명령에 오류가 있습니다. 어떻게 해결합니까? 'npxcreate-react-app' 명령을 사용하여 새 React 앱을 만들려고 했지만 제대로 작동하지 않는 것 같습니다. 최근에 이 문제를 겪은 사람이 있나...
에서 2024-04-05 14:42:18
0
1
3511
CSS를 사용하여 Next.js의 Tic-Tac-Toe 보드에서 각 줄 아래의 공간을 제거하는 방법은 무엇입니까? 각 줄 아래에 공백이 있는 이유는 무엇입니까? (CSS) 저는 제 실력을 테스트하기 위해 Next.js tic-tac-toe 앱을 만들려고 합니다. 그러나 CSS...
에서 2024-04-05 11:39:02
0
1
1431
테이블 대신 DOM을 통해 데이터를 렌더링하는 방법 만들고 있는 애플리케이션에 대해 질문이 있습니다. Oracle 데이터베이스를 사용하고 있으며 데이터베이스에서 정보를 가져와 테이블을 통해 화면에 표시하고 있는데 ...
에서 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY 사용자 로그인 후 승인 과정 Google에 로그인한 후 사용자의 인증된 계정에 대한 정보를 어디에서도 찾을 수 없습니다. laravel 기반 애플리케이션이 있는데, Google에 로그인하면 ...
에서 2024-04-04 09:40:59
0
1
310
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿