지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 위챗 개발 > 본문

위챗 미니 프로그램 실용적인 미니 프로그램 예시

高洛峰
풀어 주다： 2016-12-29 09:30:17
원래의
2102명이 탐색했습니다.

微信小程序 实战小程序实例

WeChat 미니 프로그램의 기본 구성요소와 API가 완성되었으며, 이제 다시 본론으로 돌아가서 Baisi Bujie의 간소화된 버전을 만드는 데 대부분의 시간을 보냈습니다. 농담과 그림, 오디오, 비디오, 4개의 모듈을 포함합니다. 이 기사에서는 이 작은 APP에 대한 간략한 소개를 제공합니다. 소스 코드는 GitHub에 게시되며 시작해도 좋습니다.

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

탭바 사용법

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

로딩은

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

>

이미지 컴포넌트 사진 처리,

음악 및 비디오 컴포넌트 사용

점프 값 전달 사용

등. . . .

app.json 전역 구성 파일
{
 "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;
}
 
/*分割线样式*/
.divLine{
 background: #f3f3f3;
 width: 100%;
 height: 15rpx;
}
로그인 후 복사

微信小程序 实战小程序实例

app.wxss 4개의 모듈을 헤드, 콘텐츠 영역, 하단의 세 부분으로 나눴습니다. 각각 헤더와 하단이 있기 때문입니다. 페이지 스타일은 같지만 중간 부분이 달라서 1번과 3번을 전역으로 추출했더니 댓글이 더 깔끔해졌습니다

단락 모듈

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="divLine"></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>
로그인 후 복사

스크롤 뷰를 사용하여 외부 레이어를 래핑하여 더 많은 것을 로드하고 위로 당겨 새로 고침을 합니다. 여기에서 시작하세요. 또한 헤더와 하단 레이아웃을 추출하여 소개 방법을 통해 사용할 수 있으므로 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="divLine"></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가 아닌 경우 클릭하시면 됩니다. 더 큰 이미지를 보려면 여기에 인터페이스와 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

요청을 보낼 때 형식을 따르세요. 모든 사람에게 도움이 될 수 있습니다. 이 사이트를 지원해 주셔서 감사합니다!


더 많은 WeChat 미니 프로그램 관련 글과 실제 미니 프로그램 예제를 보시려면 PHP 중국어 홈페이지를 주목해주세요!


관련 라벨：
微信 小程序 实战
원천：php.cn
이전 기사：WeChat 미니 프로그램 텍스트 영역에 대한 자세한 설명과 간단한 사용법 다음 기사：루프용 WeChat 애플릿에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
선택 이벤트가 변경되면 CSS 애니메이션이 해당 효과를 트리거합니다. 저는 React 앱을 만들려고 합니다. 지금은 포켓몬이 포함된 선택 입력 상자가 있습니다. 선택 항목이 변경될 때마다(예: 포켓몬이 변경될 때) 포켓몬 스프라이트...
에서 2024-04-01 09:16:28
0
1
350
React.js CSS 창 너비 저는 React를 사용하여 반응형 웹사이트를 개발하고 있습니다. 스타일링에는 CSS 스타일시트를 사용합니다. 응답 부분은 @media 쿼리를 사용하여 CSS로 구...
에서 2024-03-31 16:31:23
0
1
386
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿