用uni-app寫一個簡單的豆瓣電影微信小程式

如題，這個專案是用 uni-app 寫的，只有一個串列頁，沒有詳情頁，

截圖

封裝api

./api/api

// 定義基本URL
const BASE_URL = 'https://movie.douban.com/j/';

// 封裝請求
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method: method,
      data: data || {},
      header: {
        Accept: "application/json",
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success(request) {
        resolve(request.data)
      },
      fail(error) {
        reject(error)
      },
      complete(res) {
        console.log('loading completed');
      }
    })
  })
}

// 擴展 promise 的 finally 方法
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => {
      P.resolve(callback()).then(() => value);
    },
    reason => {
      P.resolve(callback()).then( () => { throw reason });
    }
  );
}

// 匯出介面
module.exports = {
  // 標簽串列
  search_tags(params){
    return request('search_tags','get', params);
  },
  // 電影串列
  search_subjects(params){
    return request('search_subjects','get', params);
  },
  // 搜索串列
  subject_suggest(params){
    return request('subject_suggest','get', params);
  }
}

只用到這三個介面，

串列都能找到介面，但是始終找不到詳情的介面，豆瓣電影官網的詳情頁面是服務端渲染整個頁面（目前為止），所以先不做詳情頁，原本也只是隨便做的demo，

./pages/index/index 首頁代碼

<template>
  <view class="container">
    
    
    <view class="section">
      
      <SearchInput @search="getSubjectSuggest" />
      
      <uni-list v-if="suggest_list.length>0">
        <uni-list-item 
          v-for="item in suggest_list"
          :key="item.id"
          :title="item.title" 
          :note="item.sub_title" 
          :thumb="item.img"
          thumb-size="lg" 
          :rightText="item.year"
        ></uni-list-item>
      </uni-list>

      <view class="uni-list">
        <view class="uni-list-cell">
          <view class="uni-list-cell-left"> 當前選擇 </view>
          <view class="uni-list-cell-db">
            <picker 
              @change="bindPickerChange" 
              :value="tags_key" 
              :range="tags"
            >
              <view class="uni-input">
                {{tags[tags_key]}}
              </view>
            </picker>
          </view>
        </view>
      </view>
      
    </view>
    
    
    
    <view>
      <scroll-view 
        :scroll-top="scrollTop" 
        scroll-y="true" 
        class="scroll-Y" 
        @scrolltoupper="upper" 
        @scrolltolower="lower"
        @scroll="scroll"
      >
        <uni-grid :column="3" :showBorder="false">
          <uni-grid-item 
            class="uni-grid-item"
            style="height: 200px;"
            v-for="item in list"
            :key="item.id"
          >
            <view class="uni-grid-item-view" @click="goDetail(item)">
              <image 
                style="width: 100%; height: 100px; background-color: #eee;" 
                mode="scaleToFill" 
                :src="item.cover"
                @error="imageError"
              ></image>
              <text class="">{{item.title}}</text>
              <uni-rate :size="10" :max="5" :value="item.rate/2" /> {{item.rate}}
            </view>
          </uni-grid-item>
        </uni-grid>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import { 
    search_tags,      // 標簽串列
    search_subjects,  // 電影串列
    subject_suggest   // 搜索串列
  } from '../../api/api';
  import { SearchInput } from '../../components/SearchInput.vue';
  export default {
    name:'index',
	data() {
	  return {
        tags:[],
        tags_key: 0,
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        list: [],
        key: 0,
        page_start: 0,
        
        suggest_list: []
	  }
	},
    components:{
      SearchInput
    },
    async onShow() {
      wx.showLoading({
        title: 'Now Loading...',
      });
      this.page_start = 0;
      let res = await search_tags({
        type: 'movie',
        source: 'index'
      });
      console.log(JSON.stringify(res));
      this.tags = res.tags;
      this.search_subjects();
      wx.hideLoading();
      
    },
	methods: {
      inject(e){
        console.log(e);
      },
      setActive(){ 
        
      },
      
      // 改變標簽
      bindPickerChange(e) {
        console.log('picker發送選擇改變，攜帶值為', e.detail.value);
        this.tags_key = e.detail.value;
        this.page_start = 0;
        this.search_subjects();
      },
      upper(e) {
        console.log(e)
      },
      lower(e) {
        console.log(e)
      },
      scroll(e) {
        console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },
      imageError(e) {
        console.error('image發生error事件，攜帶值為' + e.detail.errMsg)
      },
      
      // 跳轉到詳情頁
      goDetail(item){
        console.log(uni.navigateTo);
        uni.navigateTo({
          url: `/pages/detail/detail?id=${item.id}`
        });
      },
      
      // 獲取搜索建議串列
      async getSubjectSuggest(q){
        let res = await subject_suggest({q});
        console.log(JSON.stringify(res));
        this.suggest_list = res;
      },
      
      // 獲取電影串列
      async search_subjects(){
        let res = await search_subjects({
          type: 'movie',
          tag: this.tags[this.tags_key],
          page_limit: 9,
          page_start: this.page_start++
        });
        console.log(JSON.stringify(res));
        this.list = res.subjects;
      }
	}
  }
</script>

<style lang="scss" scoped>
  $rem: 37.5;
  .container {
		padding: 20rem/$rem;
		font-size: 16rem/$rem;
    
    .section{
      margin-bottom: 30rem/$rem;
    }
    .uni-grid-item{
      .uni-grid-item-view{
        padding: 5rem/$rem;
      }
    }
  }
</style>

./components/SearchInput 用到了一個搜索框組件

<template>
  <view>
    <uni-search-bar @confirm="search" @input="input"></uni-search-bar>
  </view>
</template>

<script>
  export default {
    name: "SearchInput",
    data() {
      return {
        
      };
    },
    async onShow() {
      
    },
    methods:{
      search(val){
        console.log(val);
        this.$emit('search',val.value);
      },
      input(val){
        console.log(val);
        if(val===''){
          this.$emit('search','');
        }
      }
    }
  }
</script>

只是這么多內容，可以把自己的 AppId 放到 manifest.json 中，也可以擴展內容，做一個電視劇串列，相關介面在豆瓣電影官網都能找到，

專案地址：https://codechina.csdn.net/sonicwater1/uni-app-demo