小程序筆記篇

時間  2019-11-18
標籤 程序 筆記 简体版
原文   原文鏈接

標題圖

小程序當中的api使用

服務器api調用的類型:css

RESTFull API 返回的是 jsonweb

SOAP XML 返回的是 XMLjson

使用豆瓣的api接口:小程序

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

描述

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的數據https://api.douban.com/v2/movie/top250服務器

顯示

點擊二選一:app

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

實現上滑加載更多xss

<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("加載更多");
}

業務中數據的分離到單獨的數據文件中svg

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

如:

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
  // 已經失效了
 }
)}

導入wxml

統一用: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>

靜態使用模板template進行分析優化

<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輪播圖跳轉文章詳情

<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用於保留當前頁面,跳轉到應用內的某個頁面.在tab選項卡中使用的跳轉方法是wx.switchTab,若是跳轉到不帶 tab的選項卡的頁面時,用的是redirect或者navigate.

redirectTo用於關閉當前頁面,跳轉到應用內的某個頁面.會致使tabBar消失.

tabBar

顯示

代碼:

<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）、內邊距（padding）以及最中間的內容（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

顯示

space-between

顯示

space-around:

顯示

space-evenly

顯示

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簡介及調用豆瓣API

// RESTFul API
// SOAP XML

RESTFul API請求的url以下:

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

接口的粒度

圖1

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

圖2

<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);
 }
})

動態設置導航標題

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

當頁面準備完畢執行:

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>

實現上滑加載更多數據

<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>

小結

swiper滑塊視圖屬性

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

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

image圖片屬性

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

日後餘生，惟獨有你
簡書做者：達叔小生
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通
簡書博客： https://www.jianshu.com/u/c785ece603d1

結語

  • 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
  • 小禮物走一走 or 點贊
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程