亚洲跨种族黑人XXXXX,日韩精品一品道高清在线观看

小程序筆記篇_微信小程序筆記

小程序筆記篇_微信小程序筆記_02

小程序當中的`api`使用

服務器api調(diào)用的類型:

RESTFull API?返回的是?json

SOAP XML?返回的是?XML

使用豆瓣的api接口:

https://api.douban.com/v2/book/1220562

小程序筆記篇_微信小程序筆記_03

圖片說明

onLoad: function(event){
 wx.request({
  url: 'https://api.douban.com/v2/movie/top250',
  data: {},
  method: 'GET',
  head: {
   "Content-Type": " "
  }
  success: function(res){
   console.log(res)
  },
  fail: function(){
   console.log("failed")
  },
  complete: function(){
   // complete
  }
 )}
}

豆瓣top250的數(shù)據(jù)https://api.douban.com/v2/movie/top250

點擊二選一:

<block wx:for="{{stars}}" wx:for-item="i">
<image wx:if="{{i}}" src=" ... "></image>
 <image wx:else src=" ... "></image>
</block>

實現(xiàn)上滑加載更多

<import src="../movie/movie-template.wxml"/>
<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
<block: wx:for="{{movies}}" wx:for-item="movie">
  <view class="single-view-container">
   <template is = "movieTemplate" data="{{...movie}}"/>
  </view>
</block>
</scroll-view>

.grid-container{
height: 1300rpx;
margin: 40rpx 0 40rpx 6rpx;
}

onScrollLower: function(event){
console.log("加載更多");
}

業(yè)務中數(shù)據(jù)的分離到單獨的數(shù)據(jù)文件中

使用require方法,用來加載js模塊文件

如:

var a = "dashucoding"
module .exports = {
 postList: local_database,
 a_key: a
}

然后在要加載的js文件中添加插入方法:
js用絕對路徑

var postsData = require('../../dashu/dashu.js')

原先:

Page({
data:{
  date: "one",
  titlle: "...";
 },
onLoad:function(options){
  this.setData({
   // 改為postsData
   dashu: postsData
  )};
 }
)}

Page({
data:{
 },
onLoad:function(options){
  this.data.postList = postsData.postList
  // 已經(jīng)失效了
 }
)}

導入wxml

統(tǒng)一用:this.setData

template模板的使用

<template name="postItem">
 ...
// 模板
</template>

模板的引入:

<import src="dashu/dashu.wxml" />
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
<template is="postItem" data="{{item}}" />
</block>

靜態(tài)使用模板template進行分析優(yōu)化

<import src="../movie/movie.wxml" />
<template name="dashu">
 ...
 <template is="dashucoding"/>
</template>

導入css

@import "dashu/dashu.wxss";

API

豆瓣api:

App({
    globalData:{
        doubanBase: "http://t.yushu.im"
    }
})

Banner輪播圖跳轉(zhuǎn)文章詳情

<view>
    <swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
        <swiper-item>
            <image id="7" src="..." data-postId="3"></image>
        </swiper-item>
        <swiper-item>
            <image src="..." data-postId="4"></image>
        </swiper-item>
        <swiper-item>
            <image src="..." data-postId="5"></image>
        </swiper-item>
    </swiper>

    <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
        <view catchtap="onPostTap" data-postId="{{item.postId}}">
             <template is="postItem" data="{{...item}}"/>
        </view>
</block>
</view>

// 點擊詳情頁面
  onPostTap: function (event) {
    var postId = event.currentTarget.dataset.postid;
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  }

onSwiperTap: function (event) {
    // target 和 currentTarget
    // target 指的是 當前點擊的組件
    // currentTarget 指的是 事件捕獲的組件
    // target 指的是image
    // currentTarget 指的是swiper
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  }

注意比較

Page({
onTap: function(event){
  wx.navigateTo({
   url: "../posts/post"
  )};
  wx.redirectTo({
   url: "../posts/post"
  )};
 }
)}

navigateTo用于保留當前頁面,跳轉(zhuǎn)到應用內(nèi)的某個頁面.在tab選項卡中使用的跳轉(zhuǎn)方法是wx.switchTab,如果跳轉(zhuǎn)到不帶?tab的選項卡的頁面時,用的是redirect或者navigate.

redirectTo用于關閉當前頁面,跳轉(zhuǎn)到應用內(nèi)的某個頁面.會導致tabBar消失.

tabBar

小程序筆記篇_微信小程序筆記_05

圖片說明

代碼:

<template name="dashu">
<view class="stars-container">
  ...
  <view class="stars">
  </view>
</view>
<text>8.0</text>
</template>

星星:

.stars {
display: flex;
flex-direction: row;
height: 17px;
margin-right: 24rpx;
margin-top: 6rpx;
}

.stars image {
padding-left: 3rpx;
 ...;
}

右外邊距:?margin-right

外邊距（margin）、邊框（border）、內(nèi)邊距（padding）以及最中間的內(nèi)容（content）

// css
@import "stars/stars-template.wxss";

<import src="....wxml" />
<template name="movieListTemplate">
  <view class="movie-list-container">
    <view class="inner-container">
      <view class="movie-head">
        <text class="slogan">{{...}}</text>
        <view catchtap="onMoreTap" class="more" data-category="{{categoryTitle}}">
        ...
      </view>
    </view>
  </view>
</template>

justify-content:space-between;

justify-content: center;     
/* 居中排列 */
justify-content: flex-start; 
/* 從行首起始位置開始排列 */
justify-content: flex-end;   
/* 從行尾位置開始排列 */

justify-content: space-between;  
/* 均勻排列每個元素,首個元素放置于起點,末尾元素放置于終點 */
justify-content: space-around;  
/* 均勻排列每個元素,每個元素周圍分配相同的空間 */
justify-content: space-evenly;  
/* 均勻排列每個元素,每個元素之間的間隔相等 */

align-content屬性定義為一個彈性盒子容器.

align-content: flex-start; 
/* 從起始點開始放置flex元素 */
align-content: left;       
/* 從左邊開始放置元素 */
align-content: right;      
/* 從右邊開始放置元素 */

flex-end:

flex-start

center

小程序筆記篇_微信小程序筆記_09

圖片說明

space-between

小程序筆記篇_微信小程序筆記_10

圖片說明

space-around:

space-evenly

小程序筆記篇_微信小程序筆記_12

圖片說明

stretch

justify-content

div{
display: flex;
justify-content: space-around;
}

justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;

movie-list template

<import src="../movie.xml"/>
<template name="movieList">
<view>
  <template is="movieTemplate"/>
</view>
</template>

@import "../movie/movie-template.wxss";
.movie-list {
background-color: #fff;
display: flex;
flex-direction: column;
}

.movie-head {
// 上下左右
padding: 30rpx 20rpx 22rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}

.more {
float: right;
}

.more-text {
vertical-align: middle;
margin-right: 10rpx;
}

.more-img {
width: 9rpx;
height: 16rpx;
vertical-align: middle;
}

RESTful API簡介及調(diào)用豆瓣API

// RESTFul API// SOAP XML

RESTFul API請求的url如下:

https://api.douban.com/v2/book/1220562,返回值為json.

接口的粒度

小程序筆記篇_微信小程序筆記_14

圖片說明

fail: function(error) {
console.log(error);
}

<image class="movie-img" src="/images/yourname.jpg"></image>

<import src="../stars/stars-template.wxml"/>
<template name="movie">
<template is="starsTemplate"/>
</template>

<template name="starsTemlate">
 ...
</template>

function convertToStarsArray(stars){
var num = stars.toString().substring(0,1);
var array = [];
for(var i=1; i<=5; i++){
  if(i<num){
   array.push(1);
  }else{
   array.push(0);
  }
 }
return array;
}

module.exports={
 convertToStarsArray: convertToStarsArray
}

// 導入js
var util = require('../../utils/util.js')

<template name="stars">
<view class="stars">
  <block wx:for="{{stars}}" wx:for-item="i">
   <image wx:if="{{i}}" src="/images/icon/star.png"></image>
   <image wx:else src="/images/icon/none-star.png"></image>
  </block>
</view>
</template>

<template name="movieTemplate">
<view class="movie-container">
  <image class="movie-img" src="{{coverageUrl}}"></image>
  <text class="movie-title">{{title}}</text>
  <template is="starsTemplate" data="{{stars: stars, score: average}}"/>
</view>
</template>

<view catchtap="onMoreTap" class="more">
<text class="more-text">更多</text>
 <image class="more-img" src="/images/icon/arrow-right.png"></image>
</view>

onMoreTap: function(event){
var category = event.currentTarget.dataset.category;
 wx.navigateTo({
  url: "movie/movie?category=" + category
 })
}

data-category="{{categoryTitle}}"

Page({
data: {},
onLoad: function(options){
  var category=options.category;
  console.log(category);
 }
})

動態(tài)設置導航標題

// onLoad 頁面初始化
wx.setNavigationBarTitle({
title: '豆瓣Top250',
success: function(res){
  // success
 }
})

當頁面準備完畢執(zhí)行:

onReady: function(event){
 wx.setNavigationBarTitle({
  title: '豆瓣250',
  success: function(res){
   // success
  }
 })
}

Page({
data: {
  navigateTitle: "",
 },
onLoad: function(options){
  var category = options.category;
  this.data.navigateTitle = category;
  var dataUrl = "";
  console.log(category);
  switch(category){
   case "正在熱映":
    dataUrl = app.globalData.doubanBase + "";
    break;
   case "即將上映":
    dataUrl = app.globalData.doubanBase + "";
    break;
   case "豆瓣Top250":
    dataUrl = app.globalData.doubanBase + "";
    break;
  }
 },
onReady: function(event){
  wx.setNavigationBarTitle({
   title: this.data.navigateTitle,
   success: function(res){
    // success
   }
  })
 }
})

var inTheatersUrl = app.globalData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
var top = app.globalData.doubanBase + "/v2/movie/top" + "?start=0&count=3";

function http(url,callBack){
 wx.request({
  url: url,
  method: 'GET',
  header:{
   "Content-Type": ""
  },
  success: function(res){
   callBack(res.data);
  },
  fail: function(error){
   console.log(error)
  }
 )}
}
module.exports = {
convertToStarsArray: converToStarsArray,
http:http
}

movie-grid template

<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
  <view class="grid-container">
    <block wx:for="{{movies}}" wx:for-item="movie">
      <view class="single-view-container">
        <template is="movieTemplate" data="{{...movie}}" />
      </view>
    </block>
  </view>
</template>

實現(xiàn)上滑加載更多數(shù)據(jù)

<import src="../movie/movie-template.wxml"/>
<template name = "movieGridTemplate">
<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower = "onScrollLower">
  <block wx:for="{{movies}}" wx:for-item="movie">
   <view class="single-view-container">
   <template is="movieTemplate" data="{{...movie}}"/>
   </view>
  </block>
</scroll-view>
</template>

小結(jié)

swiper滑塊視圖屬性

屬性名	類型	默認值	說明
`indicator-dots`	`Boolean`	`false`	是否顯示面板指示點
`autoplay`	`Boolean`	`false`	是否自動切換
`current`	`Number`	`0`	當前所在頁面的`index`
`interval`	`Number`	`5000`	自動切換時間間隔

<swiper>只能放置<swiper-item/>組件

image圖片屬性

屬性名	類型	默認值	說明
`src`	`String`	無	圖片資源地址
`mode`	`String`	`scaleToFill`	圖片縮放等

本文摘自：https://blog.51cto.com/u

小程序筆記篇2021-07-29 15:16:36

小程序當中的api使用

星星:

小結(jié)

小程序筆記篇
2021-07-29 15:16:36

小程序當中的`api`使用