小程序笔记篇

川长思鸟来 2021-09-17 18:26 282阅读 0赞

![标题图][1240]

## 小程序当中的`api`使用 ##

服务器`api`调用的类型:

`RESTFull API` 返回的是 `json`

`SOAP XML` 返回的是 `XML`

使用豆瓣的`api`接口:

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

![描述][1240 1]

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`

![显示][1240 2]

点击二选一:

> 实现上滑加载更多

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

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

> 业务中数据的分离到单独的数据文件中

使用`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
      // 已经失效了
     }
    )}

> 导入`wxml`

统一用:`this.setData`

> `template`模板的使用

模板的引入:

静态使用模板`template`进行分析优化

> 导入`css`

@import "dashu/dashu.wxss";

> `API`

豆瓣`api`:

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

> `Banner`轮播图跳转文章详情

// 点击详情页面
      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`

![显示][1240 3]

代码:

## 星星: ##

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

右外边距: `margin-right`

![显示][1240 4]

外边距（`margin`）、边框（`border`）、内边距（`padding`）以及最中间的内容（`content`）

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

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

![显示][1240 5]

`flex-start`

![显示][1240 6]

`center`

![显示][1240 7]

`space-between`

![显示][1240 8]

`space-around`:

![显示][1240 9]

`space-evenly`

![显示][1240 10]

`stretch`

![显示][1240 11]

`justify-content`

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

> `movie-list 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][1]

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

![图2][2]

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

> 更多

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`

> 实现上滑加载更多数据

## 小结 ##

`swiper`滑块视图属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>indicator-dots</code></td> 
   <td><code>Boolean</code></td> 
   <td><code>false</code></td> 
   <td>是否显示面板指示点</td> 
  </tr> 
  <tr> 
   <td><code>autoplay</code></td> 
   <td><code>Boolean</code></td> 
   <td><code>false</code></td> 
   <td>是否自动切换</td> 
  </tr> 
  <tr> 
   <td><code>current</code></td> 
   <td><code>Number</code></td> 
   <td><code>0</code></td> 
   <td>当前所在页面的<code>index</code></td> 
  </tr> 
  <tr> 
   <td><code>interval</code></td> 
   <td><code>Number</code></td> 
   <td><code>5000</code></td> 
   <td>自动切换时间间隔</td> 
  </tr> 
 </tbody> 
</table>

> `<swiper>`只能放置`<swiper-item/>`组件

`image`图片属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>src</code></td> 
   <td><code>String</code></td> 
   <td>无</td> 
   <td>图片资源地址</td> 
  </tr> 
  <tr> 
   <td><code>mode</code></td> 
   <td><code>String</code></td> 
   <td><code>scaleToFill</code></td> 
   <td>图片缩放等</td> 
  </tr> 
 </tbody> 
</table>

> 往后余生，唯独有你  
> 简书作者：达叔小生  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/8db3b21cd58b4193994de54a6367fea3.png
[1240 1]: /images/20210724/9787d4b5a55746a68e8dfe2637684bee.png
[1240 2]: /images/20210724/af8182b8936c40b88cea60b2992c2d34.png
[1240 3]: /images/20210724/e845cddf5f36499389739c4b1f458555.png
[1240 4]: /images/20210724/158e62079ea54248a697984f08d29564.png
[1240 5]: /images/20210724/784380106e444c5fae65871af0281fba.png
[1240 6]: /images/20210724/1ac24c33ab61416e93e23f52a8a6fd12.png
[1240 7]: /images/20210724/2c3f4bbfd56844038f0e872474f59d99.png
[1240 8]: /images/20210724/dd6f881dda004ed5b7d8b9fd91e24173.png
[1240 9]: /images/20210724/e61b9c85e65d4b29a813f02efb8ebfae.png
[1240 10]: /images/20210724/4f6783f0e4744d1d87feed04802800e3.png
[1240 11]: /images/20210724/316ed48cc9c94ec4800cf7845497a70d.png
[1]: /images/20210724/f37565defb3049bbaf0974a888a44998.png
[2]: /images/20210724/1ebae5e535594ece8b833fc9c0d0acf9.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1