小程序筆記篇 - 微信平臺

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

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

小程序當(dāng)中的`api`使用

服務(wù)器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

點(diǎn)擊二選一:

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

實(shí)現(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è)務(wù)中數(shù)據(jù)的分離到單獨(dú)的數(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)失效了
 }
)}

導(dǎo)入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進(jìn)行分析優(yōu)化

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

導(dǎo)入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>

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

onSwiperTap: function (event) {
    // target 和 currentTarget
    // target 指的是 當(dāng)前點(diǎn)擊的組件
    // 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用于保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面.在tab選項(xiàng)卡中使用的跳轉(zhuǎn)方法是wx.switchTab,如果跳轉(zhuǎn)到不帶?tab的選項(xiàng)卡的頁面時(shí),用的是redirect或者navigate.

redirectTo用于關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面.會(huì)導(dǎo)致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;  
/* 均勻排列每個(gè)元素,首個(gè)元素放置于起點(diǎn),末尾元素放置于終點(diǎn) */
justify-content: space-around;  
/* 均勻排列每個(gè)元素,每個(gè)元素周圍分配相同的空間 */
justify-content: space-evenly;  
/* 均勻排列每個(gè)元素,每個(gè)元素之間的間隔相等 */

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

align-content: flex-start; 
/* 從起始點(diǎn)開始放置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
}

// 導(dǎo)入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);
 }
})

動(dòng)態(tài)設(shè)置導(dǎo)航標(biāo)題

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

當(dāng)頁面準(zhǔn)備完畢執(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>

實(shí)現(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滑塊視圖屬性

屬性名	類型	默認(rèn)值	說明
`indicator-dots`	`Boolean`	`false`	是否顯示面板指示點(diǎn)
`autoplay`	`Boolean`	`false`	是否自動(dòng)切換
`current`	`Number`	`0`	當(dāng)前所在頁面的`index`
`interval`	`Number`	`5000`	自動(dòng)切換時(shí)間間隔

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

image圖片屬性

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

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

亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

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

小程序當(dāng)中的`api`使用

星星:

小結(jié)

亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

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

小程序當(dāng)中的api使用

星星:

小結(jié)

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

小程序當(dāng)中的`api`使用