利用豆瓣，高德，每日一文等API製做的微信小程序

• 微信小程序開發介紹
  • 1.經常使用組件開發使用
  • 2.微信小程序開發遇到的坑
  • 3.插件的使用
    • 3.1日曆插件
  • 4.模態框的使用
  • 5.localStroage數據存儲
• 小程序業務邏輯介紹
  • 1.文章頁面
  • 2.電影頁面
  • 3.主頁
• ES6語法
• API接口
  • 1.豆瓣
  • 2.高德
  • 3.每日一文
  • 4.調用騰訊雲語音識別功能
• 引入圖標字體
• canvas畫圖（無需後臺服務器）
• 小程序截圖
• 源碼

微信小程序開發介紹

1.經常使用組件開發使用

swiper（滑塊視圖容器）的基本用法：
複製代碼

主要能夠參照文檔

---

配置tabBar(微信小程序自帶)
複製代碼

---

"tabBar": {
    "list": [{
      "pagePath": "pages/post/post",
      "text": "文章",
      "iconPath": "/images/icon/文章.png",
      "selectedIconPath": "/images/icon/文章 (1).png"
    },{
      "pagePath": "pages/movies/movie",
      "text": "電影",
      "iconPath": "/images/icon/電影.png",
      "selectedIconPath": "/images/icon/電影 (1).png"
    },
    {
      "pagePath": "pages/home/home",
      "text": "個人",
      "iconPath": "/images/icon/個人.png",
      "selectedIconPath": "/images/icon/個人 (1).png"
    }
    ]
  },
複製代碼

這些圖標能夠在阿里巴巴矢量圖上去找

---

自定義tabBar
複製代碼

<view class="container">

  <view class='tab'> <view class='tab-nav'> <view class='{{current==0?"on":""}}' data-current="0" bindtap='tab'>正在·熱映</view> <view class='{{current==1?"on":""}}' data-current="1" bindtap='tab'>即將上映</view> </view> </view>
  <view class="content" style="height:{{ height }}">
    <swiper class='tab-box' current="{{current}}" bindchange="eventchange"> <swiper-item> 內容一 </swiper-item> <swiper-item> 內容二 </swiper-item> </swiper> </view> </view>
複製代碼

2.微信小程序開發遇到的坑

let that=this;
複製代碼

特別要注意在一個函數裏面使用this，this的指針的地址已發生了變換，另外要去數據的時候切莫粗枝大葉直接this. 你想要的數據,加上this.data再去取數據
複製代碼

---

發送https異步請求時:記得設置請求頭
複製代碼

header: {
          "Content-Type": "json"
        },
複製代碼

---

頁面跳轉出現的問題

navigateTo ：wx.navigateTo(Object object)保留當前頁面，跳轉到應用內的某個頁面。可是不能跳到 tabbar 頁面。

redirectTo wx.redirectTo(Object object) 關閉當前頁面，跳轉到應用內的某個頁面。可是不容許跳轉到 tabbar 頁面。

switchTab：wx.switchTab(Object object) 跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面

---

3.插件的使用

3.1日曆插件

在設置裏面的第三方設置裏面添加插件
複製代碼

//在app.json
 "plugins": {
    "calendar": {
      "version": "1.2.1",
      "provider": "appid"
    }
  },
//在須要引用的頁面裏寫
{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}
複製代碼

4.模態框的使用

<modal hidden="{{hiddenmodalput}}" title="喜歡電影並添加標籤" confirm-text="添加" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">
    <input type='text' placeholder="標籤" focus='true' name="tag" value="{{ input_tag }}" bindinput="addTag"/> </modal> 
複製代碼

5.localStroage數據存儲

//同步：
    wx.getStorageSync("speciallist");
//異步：
  wx.getStorage({
      key: '',
      success: function(res) {},
    })
     
複製代碼

小程序業務邏輯介紹

1.文章頁面

頂部欄的包括今天的日期和天氣（高德定位）
中間部分爲今天精選文章的摘選
圖書圖片進去就是一個書架，天天會添加不一樣做家的文章
複製代碼

2.電影頁面

分已經上映的電影和即將上映的電影，可按分數排序和默認排序
複製代碼

3.主頁

統計閱讀的字數，將閱讀過的，喜歡的文章用不用的顏色加以顯示
收藏過的電影也出如今這裏
複製代碼

ES6語法

推薦阮一峯的ES入門

箭頭函數

() =>{}

複製代碼

---

模板字符串

`${key}`

複製代碼

正則表達式

你們能夠參照這裏 正則表達式

API接口

1.豆瓣

//正在上映
'https://api.douban.com/v2/movie/in_theaters'
//即將上映
'https://api.douban.com/v2/movie/coming_soon'

複製代碼

2.高德

高德地圖的使用

3.每日一文

每日一文接口:
https://interface.meiriyiwen.com/article/day?dev=1&date=20190331
複製代碼

4.調用騰訊雲語音識別功能

一句話識別

引入圖標字體

圖標字體轉換網址

canvas畫圖（無需後臺服務器）

小程序截圖

源碼

等整理完了就會發在github