微信小程序入門一篇就夠了 豆瓣電影Top250

時間  2019-12-01
標籤 微信 程序 入門 一篇 夠了 豆瓣 top250 简体版
原文   原文鏈接

一直從事安卓開發，前不久公司忽然讓我研究一下微信小程序。微信小程序的需求如今愈來愈多了，各類大小公司如今一開口就是來給我作個小程序，微信小程序以其「即用即走」的超便利特性受到愈來愈多用戶的青睞，畢竟有些時候你並不想花時間或者流量去下載一個app，小程序可以以一種極輕的方式展示在用戶面前，最終完成必定的業務流程。並且如今的小程序功能及UI已經不比原生的應用差太多了。我以爲小程序應該是之後的發展方向吧（這幾年的發展已經印證了這一點）好了廢話很少說，立刻開始。css

微信小程序的基本結構

先來下載開發者工具 新建項目，選擇一個空的目錄做爲項目路徑，沒有appid的選擇使用測試號html

項目創建以後的項目結構以下 git

App全局文件

一、app.js 是小程序的邏輯，一個小程序只能在這裏註冊一個Appgithub

App({//生命週期
  onLaunch: function() { },//監聽初始化
  onShow: function() {  },//監聽顯示（進入前臺）
  onHide: function() {  },//監聽隱藏（進入後臺：按home離開微信）
  onError: function(msg) {  },//監聽錯誤
  //自定義的全局方法和全局變量  
  globalFun:function(){},
  globalData: 'I am global data'
})
複製代碼

二、app.json 是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等.page.json對於page進行單獨的頁面設置可覆蓋app.json的屬性值web

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
複製代碼

三、app.wxss 是小程序的全局樣式，wxss對應到web上的cssajax

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
複製代碼

Page包含的文件

pages是小程序所包含的頁面，在pages文件夾下面新建空目錄，右鍵選擇生成頁面便可生成頁面所須要的文件，即page.js、page.json、page.wxss、page.wxml，page.json和page.wxss爲非必須json

一、page.js 一個page一個Page入口，用於管理頁面的生命週期、自定義方法和參數小程序

Page({
  data: {text: "This is page data."},//頁面數據，用來維護視圖，json格式
  onLoad: function(options) {  },//監聽加載
  onReady: function() {  },//監聽初次渲染完成
  onShow: function() {  },//監聽顯示
  onHide: function() {  },//監聽隱藏
  onUnload: function() {  },//監聽卸載
  onPullDownRefresh: function() {  },//監聽下拉
  onReachBottom: function() {  },//監聽上拉觸底
  onShareAppMessage: function () {  },//監聽右上角分享
  //以下爲自定義的事件處理函數（視圖中綁定的）
  viewTap: function() {//setData設置data值，同時將更新視圖
    this.setData({text: 'Set some data for updating view.'})
  }
})
複製代碼

二、page.wxml 爲page的view 用於數據的展現,view對應於咱們html的div,text則對應於span,自動生成的index.wxml以下,實現一個點擊登陸的功能微信小程序

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
複製代碼

三、數據的綁定，結合官方示例，寫一個簡單的page demobash

page.wxml

<!-- 簡單綁定 -->
<view> {{ message }} </view>
<!-- 組件屬性 -->
<view id="item-{{id}}">{{id}}</view>
<!-- 控制屬性 -->
<view wx:if="{{condition}}"> condition</view>

<!--關鍵字(須要在雙引號以內)
true：boolean 類型的 true，表明真值。
false： boolean 類型的 false，表明假值。-->
<checkbox checked="{{false}}"> </checkbox>

<!-- 字符串運算 -->
<view>{{"hello" + name}}</view>

<!-- 數據路徑運算 -->
<view>{{object.key}} {{array[0]}}</view>

<!-- 循環遍歷 -->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

<!-- 模板 -->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template is="msgItem" data="{{...item}}"/>

<!-- 點擊事件 -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
複製代碼

page.js

Page({
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true,
    name: 'MINA',
    object: {
      key: 'Hello '
    },
    array: ['MINA'],
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }],
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  },

  tapName: function (event) {
    console.log(event)
  }
})
複製代碼

豆瓣Top250

一直都喜歡用豆瓣電影的接口來作一些新技術的學習,哈哈

能夠看看我以前的這篇文章，Python3 爬取豆瓣電影Top250

豆瓣接口對於微信小程序的訪問作了限制，用了一個其餘的接口，返回的數據是一致的 douban.uieee.com/v2/movie/to…

此外在開發時ide記得勾選不校驗域名,正式上線之後要把域名配到合法域名當中去

下面直接上代碼

app.json

{
  "pages": [
    "pages/list/list",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#072",
    "navigationBarTitleText": "豆瓣電影",
    "navigationBarTextStyle": "light"
  }
}
複製代碼

list.wxml

<!--pages/list/list.wxml-->
<wxs module="filters" src="./list.wxs"></wxs>

<view wx:for="{{movies}}" wx:key="{{item.id}}" data-index="{{index}}" class ="movie_item" bindtap="goDetail">
  <image class="image" src="{{item.images.small}}"></image>
  <view class="movie_info">
    <text class="title">{{item.title}}</text>
    <view class="star">
      <text class="{{filters.getRating(item.rating.average)}}"></text>
      <text class="rating_num">{{filters.toFix(item.rating.average)}}</text>
    </view>
  </view>
</view>
複製代碼

list.js

var start = 0;
Page({

  start: 0,
  /**
   * 頁面的初始數據
   */
  data: {
    movies: []
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
   
    var that = this;

    this.loadMore(that);
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
   
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
   
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
    start = 0;

    var that = this;

    this.loadMore(that);

    wx.stopPullDownRefresh();
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    var that = this;

    this.loadMore(that);
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  },

  loadMore:function(that){
      that.getMovie(function (d) {//回調函數，根據數據設置頁面data，更新到視圖
      wx.hideToast();//隱藏加載框
      var list = that.data.movies;
      for(var i=0;i<d.length;i++){
        list.push(d[i]);
      }
      that.setData({ movies: list })//更新數據，視圖將同步更新
    })
  },
  getMovie:function(fn) {
    wx.showToast({ title: '加載中', icon: 'loading', duration: 10000 })
    wx.request({//請求服務器，相似ajax
      url: 'https://douban.uieee.com/v2/movie/top250?start='+start,
      header: { 'content-type': 'json' },
      success: function (res) { 
        start=start+20;
        console.log(res)
        fn(res.data.subjects) }//成功後將數據傳給回調函數執行
    })
  },
  goDetail:function(e) {
    var that = this
    //拿到點擊的index下標
    var index = e.currentTarget.dataset.index
    var movie = JSON.stringify(that.data.movies[index])
     wx.navigateTo({
       url: '../detail/detail?movie='+movie,
     })
  }
})
複製代碼

list.wxss

.movie_item {
    margin: 8px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 1px 1px 1px #cccccc;
    position: relative;
    display: block;
    padding: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.image {
    width: 64px;
    height: 100px;
    margin-right: 15px;
    background-color: #eeeeee;
    float: left;
}

.movie_info {
  float: left
}

.title {
  font: 12px Arial, Helvetica, sans-serif;
  line-height: 150%;
  color: #669;
}

.rating10-t, .rating15-t, .rating20-t, .rating25-t, .rating30-t, .rating35-t, .rating40-t, .rating45-t, .rating50-t, .rating-t{
      display: inline-block;
    zoom: 1;
    background: url(https://img3.doubanio.com/f/shire/b8f4c3672ef81106701071831e22422a745d3b74/pics/rating_icons/ic_rating_s.png) no-repeat;
   
    width: 55px;
    height: 11px;
    margin: 0 3px 0 0;
    overflow: hidden;
}

.rating50-t {
    background-position: 0 0px;
}

.rating45-t {
    background-position: 0 -11px;
}

.rating40-t{
    background-position: 0 -22px;
}

.rating_num {
    color: #e09015;
    padding: 0 5px 0 0;
    font-size: 12px;
}
複製代碼

list.wxs

var filters = {
  getRating:function(value){
    return "rating"+Math.round(value)*5+"-t";
  },
   toFix: function (value) {
    return value.toFixed(1)//此處2爲保留兩位小數
  }
}

module.exports = {
  getRating: filters.getRating,
  toFix: filters.toFix
}
複製代碼

講幾個注意點

一、在頁面的js裏面修改數據

setData({ movies: list })
複製代碼

二、在顯示豆瓣評分星級的時候不一樣分數電影的星標的class是不同的，咱們須要根據分數獲得class，計算的方法寫在wxs文件中 在wxml這樣引入方法

<text class="{{filters.getRating(item.rating.average)}}"></text>
複製代碼

三、頁面的跳轉並傳遞數據能夠用query的方式

var movie = JSON.stringify(that.data.movies[index])
     wx.navigateTo({
       url: '../detail/detail?movie='+movie,
     })
複製代碼

在下個頁面的onload方法裏面能夠將數據提取出來

onLoad: function (options) {
    var that = this
    var movie = JSON.parse(options.movie)
    console.log(movie.images.small)
    that.setData({
      movie: movie
    })
  },
複製代碼

效果圖以下

github地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程