위챗 애플릿 미니 프로그램 개발 위챗 미니 프로그램 실용적인 미니 프로그램 예시

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

Jan 10, 2017 am 09:44 AM

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

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>
로그인 후 복사

스크롤 뷰를 사용하여 외부 레이어를 래핑하여 더 많은 것을 로드하고 위로 당겨서 새로고침합니다.bindscrolltoupper="bindscrolltoupper" 이 속성은 맨 위로 슬라이딩할 때 이 메소드를 호출합니다.bindscrolltolower="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="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인지 여부에 따라 이미지를 구분하고 처리합니다. 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 요청을 보낼 때 형식을 따르세요.

오디오 및 비디오 모듈은 거의 동일합니다. . 코드를 살펴보겠습니다! ! !

읽어주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)